Compose standalone elements - Overflow Documentation

When Checkout’s built-in layout does not fit, mount the individual elements and compose them into your own form. This guide shows the common pattern: an email input, a card element, and a submit button that gates on both. For a single-mount all-in-one flow, use Accept a payment instead.

Pattern

Mount every element you need (contact fields, address, payment method).
Gate an external submit control on each element’s onChange.complete.
On submit, call element.submit() on the payment-method element and forward its onSubmit payload to your server.

Example

<form id="pay-form">
  <div id="email"></div>
  <div id="card"></div>
  <div id="submit"></div>
</form>

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

const overflow = await loadOverflow('live_pub_...');
if (!overflow) return; // SSR / non-browser

const email = overflow.email({ required: true });
const card = overflow.card();
const submit = overflow.submitButton({ label: 'Pay' });

let emailOk = false;
let cardOk = false;
const sync = () => submit.update({ disabled: !(emailOk && cardOk) });

email
  .on('onChange', ({ complete }) => { emailOk = complete; sync(); })
  .mount('#email');

card
  .on('onChange', ({ complete }) => { cardOk = complete; sync(); })
  .mount('#card');

submit
  .on('onSubmit', () => card.submit()) // relay: value is undefined
  .mount('#submit');

card.on('onSubmit', async ({ value }) => {
  await fetch('/your-backend/authorize', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      email: email.value,
      paymentMethod: value,
    }),
  });
});

card.on('onError', ({ code, message, fieldErrors }) => {
  if (code === 'validation_failed') paintFieldErrors(fieldErrors);
  else toast(message);
});

Notes on `submitButton`

submitButton is a pure relay. It fires onSubmit with value: undefined on every click. Use it to drive an external card.submit() (or bank.submit()), or wire its onSubmit to your own submission logic. See the submitButton reference. You do not have to use submitButton. A plain <button> outside the SDK works too:

document.querySelector('#pay').addEventListener('click', () => card.submit());

Read values without waiting for events

Some elements expose a .value getter for reading their current snapshot without waiting for an event — contact atoms like email, address, bank, and the custom inputs. card, checkout, applePay, googlePay, and submitButton do not; read their state from onChange and onSubmit payloads.

Cross-links

Last modified on July 29, 2026

Related topics

Submit button Migrating from Stripe Payment methods overview Concepts Accept a payment