Skip to main content

Embed the checkout on your website

Add Ezus Pay checkout directly to your own website with a small snippet — inline or as a button.

Written by Team Ops

You can embed the checkout straight into your website so clients pay without leaving your pages. It works with a small script and a single HTML element.

1. Add the script once

Place this near the end of your page, just before </body>:

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

2. Drop in a payment element

Use any payment link URL you copied from Ezus Pay as data-ezus-pay-url.

Inline (the checkout appears directly in the page):

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

Button + modal (a button opens the checkout in an overlay):

<div   data-ezus-pay-url="https://app.ezuspay.io/lnk/your-agency/TOKEN"   data-ezus-pay-mode="modal"   data-ezus-pay-label="Pay now"   data-ezus-pay-color="#D9007A"> </div>

Available options

Attribute

Purpose

Default

data-ezus-pay-url

The payment link to load (required)

data-ezus-pay-mode

modal for a button + overlay; omit for inline

inline

data-ezus-pay-label

Button text (modal mode)

Payer

data-ezus-pay-color

Button color (modal mode)

dark navy

data-ezus-pay-theme

Visual theme

minimal in modal

data-ezus-pay-locale

Force a language

client's browser

The iframe resizes automatically to fit its content — no manual height needed.

Listen for the result (optional, for developers)

The checkout sends postMessage events to your page so you can react to a payment — close a modal, redirect, fire analytics:

window.addEventListener("message", (event) => {   switch (event.data?.type) {     case "ezus-pay:success":       // event.data.amountCents — payment confirmed       break;     case "ezus-pay:error":       // event.data.code, event.data.message       break;     case "ezus-pay:cancel":       // traveler closed the checkout       break;   } });
Did this answer your question?