JavaScript SDK

The SecurePayAPI JavaScript SDK is the quickest way to add embedded checkout to your page. It creates the secure iframe, wires up the messaging, and hands you simple callbacks — you just create a payment on your server and call mount.

Install

Add the script to your page:

<script src="https://checkout.securepayapi.com/sdk/v1/securepay.js"></script>

It exposes a single global: SecurePay.

Quick example

<script src="https://checkout.securepayapi.com/sdk/v1/securepay.js"></script>
<div id="pay"></div>

<script>
  var sp = SecurePay('sp_client_…');           // your publishable key
  sp.mount('#pay', {
    clientSecret: 'pi_…_secret_…',              // from your backend
    onSuccess: function (r) { /* r = { intentId, status } */ },
    onError:   function (e) { /* e = { code, message } */ }
  });
</script>

First, create a Payment Intent on your server and pass the returned client_secret to mount.

API

SecurePay(publishableKey)

Creates an SDK instance. Pass your publishable key (sp_client_…). Works with or without new. Throws if the key is missing.

instance.mount(target, options)

Renders the checkout into target — a CSS selector string or a DOM element.

Returns a handle with a destroy method that removes the iframe and its listeners:

var handle = sp.mount('#pay', { clientSecret: 'pi_…_secret_…' });
// later…
handle.destroy();

Handling the result

Outcomes arrive two ways — use whichever fits your code.

1. Callbacks passed to mount:

sp.mount('#pay', {
  clientSecret: 'pi_…_secret_…',
  onSuccess: function (r) { window.location = '/thank-you'; },
  onError:   function (e) { showError(e.message); }
});

2. DOM events on window (fire regardless of the callbacks):

window.addEventListener('securepay:success', function (e) {
  // e.detail = { intentId, status }
});
window.addEventListener('securepay:error', function (e) {
  // e.detail = { code, message }
});

How it works

• The card form runs inside an iframe served by SecurePayAPI, so raw card details never touch your page or your server.
• Your client_secret is passed to the widget over postMessage (targeted at the SecurePayAPI origin) — never placed in the iframe URL.
• The SDK auto-resizes the iframe to fit its content.
• 3-D Secure runs inside the widget — see 3-D Secure.