Quickstart

This guide mounts a checkout element on a page and forwards the tokenized payload to your server. Checkout is the fastest integration path: one mount renders shopper contact, a payment method selector, and a single submit lifecycle.

Prerequisites

An Overflow account with a publishable key (live_pub_… or test_pub_…) and a secret key from your Overflow dashboard.
A page where you can add a <script> tag, or a project that can install an npm package.
A server endpoint that can accept the tokenized payload and call the Overflow API to authorize the charge.

1. Load the SDK

Pick one of the two install paths. Both are backed by the same CDN artifact.

<script src="https://cdn.overflow.co/sdk/v1/payment-elements.js"></script>

npm install @getoverflow/payment-elements

See Installation for pinned versions, Subresource Integrity, staging hosts, and preload hints.

2. Add a host element

Add an empty container where Checkout will mount.

<div id="checkout"></div>
<button id="pay" disabled>Pay</button>

3. Create Checkout

Use test_pub_… while you build, then swap to live_pub_… for production.

const overflow = new Overflow('test_pub_...');

const checkout = overflow.checkout({
  paymentMethods: ['card', 'bank'],
  defaultPaymentMethod: 'card',
  contact: { email: {}, fullName: {} },
});

checkout.mount('#checkout');

import { loadOverflow } from '@getoverflow/payment-elements';

const overflow = await loadOverflow('test_pub_...');
if (!overflow) return;

const checkout = overflow.checkout({
  paymentMethods: ['card', 'bank'],
  defaultPaymentMethod: 'card',
  contact: { email: {}, fullName: {} },
});

checkout.mount('#checkout');

4. Gate the Pay button

Listen for onChange and enable your button when the form is complete.

const payButton = document.getElementById('pay');

checkout.on('onChange', ({ complete }) => {
  payButton.disabled = !complete;
});

payButton.addEventListener('click', () => {
  checkout.submit();
});

5. Handle the tokenized payload

onSubmit fires once validation passes. Forward the payload to your server. Never call the Overflow authorize endpoint from the browser: your secret key stays server-side.

checkout.on('onSubmit', async ({ value }) => {
  const res = await fetch('/api/authorize', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(value),
  });
  const result = await res.json();
  // Show success or failure UI based on `result`.
});

checkout.on('onError', ({ code, message, fieldErrors }) => {
  console.error('Checkout failed', { code, message, fieldErrors });
});

On your server, POST value (plus any additional order data) to the Overflow authorize endpoint with your secret key. See the authorize a payment API reference for the request shape.

What you built

A themed, validated payment form that supports card and bank.
A submit lifecycle that hands you a tokenized payload.
Error handling for validation failures and authorize failures.

Next steps

Accept a payment

Full end-to-end guide with server code.

Add wallets

Add Apple Pay and Google Pay to Checkout.

Theming

Match Checkout to your brand.

Concepts

Elements, options, events, theming.

Get started

Elements

Options

Events

Theming

Guides

Prerequisites

1. Load the SDK

2. Add a host element

3. Create Checkout

4. Gate the Pay button

5. Handle the tokenized payload

What you built

Next steps

Accept a payment

Add wallets

Theming

Concepts

​Prerequisites

​1. Load the SDK

​2. Add a host element

​3. Create Checkout

​4. Gate the Pay button

​5. Handle the tokenized payload

​What you built

​Next steps

Accept a payment

Add wallets

Theming

Concepts

Prerequisites

1. Load the SDK

2. Add a host element

3. Create Checkout

4. Gate the Pay button

5. Handle the tokenized payload

What you built

Next steps