Checkout Widget – TokenPay Developers

Install

Add the widget script to your page. It exposes a single global, TokenPay.

<script src="https://cdn.tokenpayment.io/checkout.js" defer></script>

Minimum integration

Create the payment server-side, then hand the resulting client_token to the widget in the browser.

// 1. Server side
const r = await fetch('https://api.tokenpayment.io/v1/payments', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.TOKENPAY_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    amount: '10.00',
    currency: 'AUD',
    order_id: 'order_001',
  }),
});
const { client_token } = await r.json();

// 2. Send client_token to the browser and mount the widget
TokenPay.mount('#checkout', {
  clientToken: client_token,
  onComplete: (payment) => console.log('paid', payment),
  onError:    (err)     => console.error(err),
});

Mount options

Option	Type	Notes
clientToken	string	Required. Short-lived token returned when you create the payment.
theme	"light" \| "dark"	Defaults to the parent site's `color-scheme`.
locale	string	BCP-47 tag. Defaults to the browser locale.
onComplete	(payment) => void	Fires when the payment reaches a terminal success state.
onError	(err) => void	Fires on integration errors. Payment failures also trigger a webhook.

CSP guidance

Add the following Content Security Policy entries:

script-src 'self' https://cdn.tokenpayment.io;
connect-src 'self' https://api.tokenpayment.io https://cdn.tokenpayment.io;
frame-src https://checkout.tokenpayment.io;

Versioning

The URL https://cdn.tokenpayment.io/checkout.js always serves the latest stable widget and carries a strict cache-busting policy. If you need to pin, use https://cdn.tokenpayment.io/checkout-v1.js. Major versions are backwards-incompatible; minor versions are not.