Docs

Quickstart

Accept your first payment in four steps.

1. Create an account

Sign up and complete onboarding to activate your merchant account. See what's involved for a walkthrough of the steps.

2. Get your API keys

Open the Developer section of your dashboard to find your keys:

  • Publishable keysp_client_…, used in the browser.
  • Secret keysp_secret_…, used only on your server.

Read API keys before you start.

3. Create a payment on your server

Create a payment with your secret key. Only amount and currency are required — the amount is in the smallest currency unit (cents), so 2000 means $20.00. The other fields are optional but useful:

curl https://checkout.securepayapi.com/api/v1/payment-intents \
  -H "Authorization: Bearer sp_secret_…" \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 2000,
    "currency": "USD",
    "reference": "order_123",
    "description": "Pro plan — annual",
    "descriptor": "ACME PRO",
    "externalid": "cust_8842",
    "metadata": { "plan": "pro", "seats": "5" },
    "theme": "light"
  }'

See the API reference for every field, its limits and which are required. You'll get back a client_secret — this is what the browser uses to complete the payment:

{
  "id": "abcdef0123456789abcdef01",
  "client_secret": "pi_abcdef0123456789abcdef01_secret_…",
  "amount": 2000,
  "currency": "USD",
  "status": "requires_payment"
}

4. Collect the card in the browser

Embed the checkout widget and pass it the client_secret:

<iframe src="https://checkout.securepayapi.com/embed?pk=sp_client_…"></iframe>
iframe.contentWindow.postMessage(
  { init: { publishableKey: 'sp_client_…', clientSecret: 'pi_…_secret_…' } },
  'https://checkout.securepayapi.com'
);

window.addEventListener('message', (e) => {
  if (e.data?.success) {
    // payment complete — show your confirmation page
  }
});

That's it. The widget handles card entry and 3-D Secure authentication, and tells you when the payment succeeds. Full details in Embedded checkout.

Note

Prefer no front-end work? Use a hosted checkout page instead — a shareable URL that collects the payment for you.

Next steps

© SecurePayAPI · Built with Markdoc