Embed mode

Button embed

The declarative integration is best for product pages, invoices, and static CMS pages where you can add a script tag and button markup.

Required attributes

• Use data-makepay-payment-link with the payment UID you want to open.
• Add data-makepay-view-type="minimal" when the modal should show only the compact payment area. Omit it, or use "full", for the default full checkout.
• Load the minified modal script before the customer can click the payment button.
• Keep the element keyboard reachable with a real button or a element.

<script src="https://cdn.makepay.io/modal/makepay.min.js"></script>
<button type="button" data-makepay-payment-link="YOUR_PAYMENT_UID">
  Pay with crypto
</button>

Script delivery

Use https://cdn.makepay.io/modal/makepay.min.js for new integrations. The unminified https://cdn.makepay.io/modal/makepay.js file serves the same API for debugging, and the https://www.makepay.io/modal/... URLs remain available as compatibility redirects for merchant pages that already installed the earlier URL.

MakePay serves both modal files with a short browser cache and longer CDN cache policy so script updates can roll out without asking merchants to change their HTML. The www.makepay.io/modal/... URLs continue to work as compatibility redirects to the Cloudflare CDN.

Browser API

Use the global browser API when your application owns the click handler or needs to pass lifecycle callbacks directly.

• Open a payment modal with window.makepay.showPayment(uid, { onEvent }).
• Pass viewType: "minimal" to show only the compact payment area, or viewType: "full" for the default full checkout.
• Close the current modal with window.makepay.hide().

<script src="https://cdn.makepay.io/modal/makepay.min.js"></script>
<button type="button" id="pay-with-makepay">Pay with crypto</button>
<script>
  document.getElementById("pay-with-makepay").addEventListener("click", function () {
    window.makepay.showPayment("YOUR_PAYMENT_UID", {
      onEvent: function (event) {
        if (event.type === "makepay.payment.redirect_requested" && event.payload.redirectUrl) {
          window.location.assign(event.payload.redirectUrl);
        }
      },
    });
  });
</script>

Callback handling

Pass an onEvent callback when your page needs to react to checkout status changes or redirect requests without listening globally on window.

When to use it

Use button embed when the merchant site does not need to run custom JavaScript before opening the checkout. Use the browser API when your application owns the click handler, needs to choose options at runtime, or wants callback handling scoped to a single modal open.