Embedded checkout

The script turns any element carrying a payment link URL into a checkout. The traveler pays without leaving your page. It works on any site where you can add a script tag, including single-page apps.

Add the script#

Load the script once per page, then add one element per checkout.

<script src="https://app.ezuspay.io/embed.v1.js"></script>

<div data-ezus-pay-url="https://app.ezuspay.io/lnk/your-agency/8K3QZ7M2XR4T"></div>

The URL is the link's checkoutUrl, copied from the app or returned by the API.

Attributes#

Elements added after the page has loaded are picked up automatically, which suits React, Vue and other single-page apps.

Examples#

In the page, in English, without the header:

<div
  data-ezus-pay-url="https://app.ezuspay.io/lnk/your-agency/8K3QZ7M2XR4T"
  data-ezus-pay-locale="en"
  data-ezus-pay-theme="minimal"
></div>

A button that opens a window, with the amount read from the link:

<div
  data-ezus-pay-url="https://app.ezuspay.io/lnk/your-agency/8K3QZ7M2XR4T"
  data-ezus-pay-mode="modal"
  data-ezus-pay-label="Pay for my trip"
  data-ezus-pay-amount="auto"
  data-ezus-pay-color="#D9007A"
  data-ezus-pay-locale="en"
></div>

The window closes with its × button, the Escape key, a click outside, or on its own 2.5 seconds after a successful payment.

Listen for the payment#

After a successful card payment, the script fires an ezus-pay:success event on your element. It bubbles, so one listener on document covers every checkout on the page.

<script>
  document.addEventListener("ezus-pay:success", (event) => {
    // event.target: your element
    // event.detail: { type: "ezus-pay:success", amountCents: 144000 }
    window.location.href = "/thank-you";
  });
</script>

Ezus Pay never redirects your page. If you want to send the traveler somewhere after paying, do it from this listener.

Content Security Policy#

If your site sends a CSP header, allow the Ezus Pay app:

script-src  https://app.ezuspay.io;
frame-src   https://app.ezuspay.io;
connect-src https://app.ezuspay.io;

connect-src is only needed for data-ezus-pay-amount="auto".

Without the script#

You can place the iframe yourself. Replace /lnk/ with /embed/ in the link URL, and handle the height from the messages the checkout sends.

<iframe id="ezpay" src="https://app.ezuspay.io/embed/your-agency/8K3QZ7M2XR4T?locale=en&theme=minimal"
        allow="payment" style="width:100%;border:0" height="600"></iframe>
<script>
  const frame = document.getElementById("ezpay");
  window.addEventListener("message", (e) => {
    if (e.source !== frame.contentWindow || e.origin !== "https://app.ezuspay.io") return;
    if (e.data?.type === "ezus-pay:resize") frame.style.height = e.data.height + "px";
    if (e.data?.type === "ezus-pay:success") { /* payment confirmed in the browser */ }
  });
</script>

Good to know#

• Any site can embed a checkout. There is no domain list to maintain.
• Languages. In an embed, the language comes from data-ezus-pay-locale. Set it: there is no language menu inside the embed.
• Payment plans. For an installment, amountCents is the amount of that installment.
• Test mode. Create a link in test mode and paste its URL. The same script serves live and test links, and the checkout shows a Test badge unless you use theme="minimal".
• Wallets. Apple Pay and Google Pay depend on the device and browser. Check them on your own site before you promise them.