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 tokenized payment payload the SDK returns.
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.
- The element emits events as the shopper interacts.
- On submit, the element returns a tokenized payload. Your server forwards that payload to the Overflow API to authorize the charge.
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.