@onflay/checkout-js

Framework-agnostic Onflay checkout overlay (onflay.js).

Install

pnpm add @onflay/checkout-js

CDN (jsDelivr):

<script
  src="https://cdn.jsdelivr.net/npm/@onflay/[email protected]/dist/onflay.iife.js"
  integrity="sha384-3Qj5RXaH1JnzdX+n/Qg9HpsuBVunMwjTCajk1pGsKfPbQG0MCHvg6AqAhPxkhlyJ"
  crossorigin="anonymous"
></script>

Or the Onflay CDN alias (once deployed):

<script
  src="https://js.onflay.com/v1/onflay.js"
  integrity="sha384-3Qj5RXaH1JnzdX+n/Qg9HpsuBVunMwjTCajk1pGsKfPbQG0MCHvg6AqAhPxkhlyJ"
  crossorigin="anonymous"
></script>

Prepare CDN upload artifacts:

pnpm --filter @onflay/checkout-js build
./sdks/browser/scripts/publish-cdn.sh

Usage

1. Create a checkout session on your server with uiMode: "embedded" and your successUrl / cancelUrl (origins are derived for frame-ancestors).
2. Pass the returned embedUrl to the browser.
3. Open the overlay:

OnflayCheckout.open({
  url: embedUrl,
  onComplete: ({ checkoutId }) => {
    // UI signal only — verify payment with GET /v1/checkout-sessions/{id}/receipt?headless=true
    fetch('/api/confirm-checkout', {
      method: 'POST',
      body: JSON.stringify({ checkoutId }),
    });
  },
  onCancel: () => {},
  onError: (error) => console.error(error),
  fallback: 'redirect', // or 'popup' | 'none'
});

Declarative (no JS required beyond the script tag)

<a
  href="https://checkout.onflay.com/s/FALLBACK"
  data-onflay-checkout="https://checkout.onflay.com/embed/s/SESSION?t=TOKEN"
>
  Buy now
</a>

Merchant CSP

script-src https://js.onflay.com https://cdn.jsdelivr.net;
frame-src https://checkout.onflay.com https://sandbox-checkout.onflay.com;

Security notes

• Never put sk_* in the browser.
• The overlay onComplete event is not proof of payment — always confirm with the receipt API using your secret key.
• Only Onflay checkout origins can be framed by this loader.