Sections overview

Checkout is a single element that renders sections for shopper contact, addresses, a payment method selector, and any custom fields you configure. Each section is opt-in (except payment methods, which are required) and accepts the same options as its standalone element.

Section keys

Option key	Section	Standalone element
`contact`	Contact	Contact elements
`shippingAddress`	Shipping address	Shipping address
`billingAddress`	Billing address	Billing address
`paymentMethods`	Payment methods	Card, Bank, Wallets
`customElements`	Custom elements	Custom elements

Include a key to render that section. Omit it to hide it.

Default order

Contact
Shipping address
Billing address
Payment methods
Custom elements

Override with order. Sections you did not include are ignored.

overflow.checkout({
  paymentMethods: ['card', 'bank'],
  customElements: { note: { elementType: 'text', label: 'Order note' } },
  order: ['paymentMethods', 'customElements'],
});

Nesting standalone options

Any option accepted by a standalone element (labels, placeholders, per-field hidden, required, validate) passes through under the matching section key.

overflow.checkout({
  paymentMethods: ['card'],
  card: { fields: { holderName: { hidden: false } } },
  billingAddress: { fields: { country: { supportedCountries: ['US'] } } },
});

Per-method options for cards, bank, Apple Pay, and Google Pay live under their method key (card, bank, applePay, googlePay), not inside paymentMethods.

Errors carry a `source`

Every error emitted by Checkout is tagged with the section that produced it:

type CheckoutError = {
  code: string;
  message: string;
  source: 'contact' | 'shippingAddress' | 'billingAddress' | 'paymentMethod' | 'customElement';
  field?: string;
};

Filter or group errors on source when surfacing a page-level summary.

Section pages

Contact

Email, name, phone, company.

Shipping address

Options that pass to the shipping element.

Billing address

Options that pass to the billing element.

Payment methods

Method list, default, and per-method options.

Custom elements

Slots for merchant-defined fields.

Get started

Elements

Options

Events

Theming

Guides

Section keys

Default order

Nesting standalone options

Errors carry a `source`

Section pages

Contact

Shipping address

Billing address

Payment methods

Custom elements

​Section keys

​Default order

​Nesting standalone options

​Errors carry a source

​Section pages

Contact

Shipping address

Billing address

Payment methods

Custom elements

Section keys

Default order

Nesting standalone options

Errors carry a `source`

Section pages