Embedded Checkout (iFrame) — Web Implementation

Load the iFrame inside a modal <div> in your application:

<div class="checkout-modal">
  <iframe
    src="CHECKOUT_URL"
    style="border:0; width: 100%; min-height: 80vh;"
    allow="payment; camera; microphone; encrypted-media"
    sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
  ></iframe>
</div>

Replace CHECKOUT_URL with the checkoutUrl from your order creation response, or your constructed referral URL.

In some scenarios the checkout will force a full redirect to the Banxa site rather than staying inside the iFrame:

• KYC required — if a customer needs to complete identity verification, they are redirected to Banxa to complete KYC (due to camera access limitations inside iFrames). On their next order, the checkout runs inside the iFrame as normal.
• Apple Pay — Apple Pay requires merchant certificate and domain configuration to work inside an iFrame. Contact your Banxa account manager to ensure Apple Pay is correctly set up for your integration.
• iDEAL, Klarna, PayPal — these payment methods redirect the customer out of the iFrame to complete their payment. Afterwards, the customer is returned to the Banxa order status page and can then return to your site.
• Safari / browsers without third-party cookie support — if the customer's browser blocks third-party cookies (default in Safari), the checkout cannot maintain its state in an iFrame and will redirect to the Banxa site to complete the order.

If your page sets a Permissions-Policy or Feature-Policy header, ensure it does not restrict camera or microphone for the iframe origin.

Example CSP that allows Banxa:

Permissions-Policy: camera=("https://checkout.banxa.com"), microphone=("https://checkout.banxa.com")

Monitor navigation by watching for your redirectUrl in the iframe src. You can also listen for postMessage events from the checkout — validate the origin before processing any message.

// Validate origin before processing any postMessage from the checkout
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://checkout.banxa.com') return;
  // Handle event.data as appropriate for your integration
});

The Banxa checkout is responsive. Minimum recommended dimensions:

• Width: 375px
• Height: 600px

For mobile breakpoints, consider showing the checkout as a full-screen modal overlay rather than an inline iframe.

If your app uses a CSP, add Banxa to the frame-src directive:

Content-Security-Policy: frame-src https://checkout.banxa.com https://checkout.banxa-sandbox.com;