> ## Documentation Index
> Fetch the complete documentation index at: https://docs.overflow.co/llms.txt
> Use this file to discover all available pages before exploring further.
# Quickstart
> Render Checkout and take your first payment in five minutes.
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 `
```
```bash npm theme={null}
npm install @getoverflow/payment-elements
```
See [Installation](/payment-elements/installation) for pinned versions, Subresource Integrity, staging hosts, and preload hints.
## 2. Add a host element
Add an empty container where Checkout will mount.
```html theme={null}
```
## 3. Create Checkout
Use `test_pub_…` while you build, then swap to `live_pub_…` for production.
```javascript Script tag theme={null}
const overflow = new Overflow('test_pub_...');
const checkout = overflow.checkout({
paymentMethods: ['card', 'bank'],
defaultPaymentMethod: 'card',
contact: { email: {}, fullName: {} },
});
checkout.mount('#checkout');
```
```javascript npm theme={null}
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.
```javascript theme={null}
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.
```javascript theme={null}
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](/api-reference/payments/authorize-payment) 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
Full end-to-end guide with server code.
Add Apple Pay and Google Pay to Checkout.
Match Checkout to your brand.
Elements, options, events, theming.