Overflow instance with your publishable key, mount the elements you need, and Overflow handles secured input, validation, tokenization, wallet sheets, and error surfacing. Your server calls the Overflow API to authorize the payment.
What you can build
- Checkout, a single element that renders shopper contact, addresses, a payment method selector, and any custom fields you configure. This is the primary integration path.
- Card and bank payment forms with built-in validation and tokenization.
- Apple Pay and Google Pay wallet buttons with a unified options shape.
- Address elements with optional address autocomplete.
- Contact elements for email, full name, company name, and phone.
- Custom elements (
text,number,select,checkbox) for collecting your own data alongside payment fields.
Why Payment Elements
- Drop-in. Load one script tag (or one npm package) and get a typed
Overflowconstructor. No bundler or framework required. - Composable. Use Checkout for a turnkey form, or mount individual elements to control layout across multiple steps or screens.
- Themeable. A flat design-token API (
appearance.variables) controls colors, typography, radii, and shadows across every element. - Typed. Full TypeScript definitions ship with the SDK for IDE autocomplete and compile-time safety.
- Event-driven. Every element exposes the same lifecycle:
onReady,onChange,onSubmit,onError, plus element-specific events where it matters.
Publishable keys
Every example in these docs uses one of two publishable key prefixes:live_pub_…for production.test_pub_…for staging or test.
new Overflow(publishableKey, options) or loadOverflow(publishableKey). Your secret key stays on your server and is used to authorize the payload the SDK forwards to your onSubmit handler.
new Overflow(publishableKey, options) is a singleton — calling it a second time logs a warning and returns the existing instance. Call instance.destroy() before creating a fresh one (for example, in a hot-reload dev flow).How it fits together
- Your page loads the Overflow SDK script (or imports the npm loader).
- You create an instance with
new Overflow(publishableKey, options). - You create an element (
overflow.checkout(),overflow.card(),overflow.applePay(), etc.). - You mount it into a host element on your page.
- You subscribe to element events with
element.on('onReady' | 'onChange' | 'onSubmit' | 'onError', handler). - Call
element.submit()(returnsvoid) when the shopper is ready. On success, the element firesonSubmitwith an authorize-ready payload — card fields arrive encrypted, wallets carry awalletToken. Your server forwards that payload to the Overflow API to authorize the charge. Failures arrive ononError.
Next steps
Quickstart
Render Checkout and take a payment in five minutes.
Installation
Add the SDK via npm or script tag.
Concepts
Elements, options, events, and theming.
Accept a payment
End-to-end integration walkthrough.