Acme Store — checkout demo

Demonstrates embedding the securepayAPI payment widget on a merchant page.

Your order

Pro Plan
Billed once
—

Enter your keys on the right and click “Load payment form”.

Configuration

The client secret comes from a payment intent your backend creates with the secret key — never put the secret key in this page.

// SDK events appear here…

How it works

  1. Backend: create a payment intent with your secret key: 
    curl -X POST https://checkout.securepayapi.com/api/v1/payment-intents \
  -H "Authorization: Bearer sp_secret_YOURKEY" \
  -H "Content-Type: application/json" \
  -d '{"amount": 2000, "currency": "USD", "reference": "order_123"}'

# → { "id": "...", "client_secret": "pi_..._secret_...", "amount": 2000, ... }
    amount is in minor units (2000 = $20.00).
  2. Frontend: pass the returned client_secret (and your sp_client_… publishable key) to the widget — exactly what the fields above do: 
    <script src="https://checkout.securepayapi.com/sdk/v1/securepay.js"></script>
<div id="securepay-widget"></div>
<script>
  SecurePay('sp_client_…').mount('#securepay-widget', {
    clientSecret: 'pi_…_secret_…',
    onSuccess: function (r) { /* r = { intentId, status } */ },
    onError:   function (e) { /* e = { message } */ }
  });
</script>
  3. Important: this page must be served from the origin registered as the merchant's productUrl — the widget only accepts it from that origin.