Embedded checkout

The embedded widget is an iframe you place on your own page. It collects the card, runs authentication, and reports the result back to you — card details never touch your server.

1. Create a Payment Intent

On your server, create a Payment Intent and keep its client_secret.

2. Embed the widget

Add the iframe with your publishable key:

<iframe
  src="https://checkout.securepayapi.com/embed?pk=sp_client_…"
  style="width:100%;border:0">
</iframe>

3. Initialize it

Once the widget signals it's ready, send the client_secret:

const iframe = document.querySelector('iframe');
const ORIGIN = 'https://checkout.securepayapi.com';

iframe.contentWindow.postMessage(
  { init: { publishableKey: 'sp_client_…', clientSecret: 'pi_…_secret_…' } },
  ORIGIN
);

4. Handle the result

The widget posts messages back to your page:

window.addEventListener('message', (e) => {
  if (e.origin !== ORIGIN) return;

  if (e.data?.ready)   { /* widget loaded */ }
  if (e.data?.resize)  { iframe.style.height = e.data.resize.height + 'px'; }
  if (e.data?.success) { /* payment complete → show confirmation */ }
  if (e.data?.error)   { /* show e.data.error.message */ }
});

Theming

Set a theme of light or dark when you create the Payment Intent and the widget matches it.