Embed mode

Button embed

The declarative integration is best for product pages, invoices, and static CMS pages. Load the public modal package once, configure the checkout host on the script tag, and add a MakePay data attribute to a button. No makepay.init() call or application JavaScript is required.

Required attributes

• Set data-api-url-prefix on the script to the HTTPS origin that serves your MakePay checkout pages.
• Use data-makepay-payment-link with the payment UID you want to open, or data-makepay-donation-slug with a donation slug.
• 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://unpkg.com/@makecrypto/makepay-modal@latest/dist/makepay.min.js" data-api-url-prefix="https://YOUR_CHECKOUT_HOST"></script>
<button type="button" data-makepay-payment-link="YOUR_PAYMENT_UID">
  Pay with crypto
</button>

Script delivery

Use https://unpkg.com/@makecrypto/makepay-modal@latest/dist/makepay.min.js for new integrations. The unminified dist/makepay.js file serves the same API for debugging. Configure the checkout origin explicitly with data-api-url-prefix="https://your-checkout-host.example" on the script tag.

The package is available on npm and its public GitHub repository. It is served independently from the checkout host, contains no default MakePay domain, and does not infer the checkout host from the unpkg URL. The @latest URL follows the npm latest tag, so merchants receive new modal releases without changing their embed code.

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 }).
• Open a donation modal with window.makepay.showDonation(slug, { 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.hideFrame().

<script src="https://unpkg.com/@makecrypto/makepay-modal@latest/dist/makepay.min.js" data-api-url-prefix="https://YOUR_CHECKOUT_HOST"></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. The modal also dispatches trusted CustomEvent instances such as makepay.ready, makepay.close_requested, makepay.payment.status, and makepay.payment.redirect_requested. Messages are accepted only from the exact checkout origin configured by data-api-url-prefix.

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. Use the hosted payment URL directly when a modal is unnecessary or third-party scripts are restricted by the merchant site.