> ## 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.

# Sections overview

> How Checkout composes contact, addresses, payment methods, and custom elements into sections.

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](/payment-elements/elements/contact/introduction)                                                                                                                                                    |
| `shippingAddress` | Shipping address | [Shipping address](/payment-elements/elements/address/shipping-address)                                                                                                                                                |
| `billingAddress`  | Billing address  | [Billing address](/payment-elements/elements/address/billing-address)                                                                                                                                                  |
| `paymentMethods`  | Payment methods  | [Card](/payment-elements/elements/payment-methods/card/introduction), [Bank](/payment-elements/elements/payment-methods/bank/introduction), [Wallets](/payment-elements/elements/payment-methods/wallets/introduction) |
| `customElements`  | Custom elements  | [Custom elements](/payment-elements/elements/custom/introduction)                                                                                                                                                      |

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

## Default order

1. Contact
2. Shipping address
3. Billing address
4. Payment methods
5. Custom elements

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

```javascript theme={null}
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.

```javascript theme={null}
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:

```typescript theme={null}
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

<CardGroup cols={2}>
  <Card title="Contact" href="/payment-elements/elements/checkout/sections/contact">
    Email, name, phone, company.
  </Card>

  <Card title="Shipping address" href="/payment-elements/elements/checkout/sections/shipping-address">
    Options that pass to the shipping element.
  </Card>

  <Card title="Billing address" href="/payment-elements/elements/checkout/sections/billing-address">
    Options that pass to the billing element.
  </Card>

  <Card title="Payment methods" href="/payment-elements/elements/checkout/sections/payment-methods">
    Method list, default, and per-method options.
  </Card>

  <Card title="Custom elements" href="/payment-elements/elements/checkout/sections/custom-elements">
    Slots for merchant-defined fields.
  </Card>
</CardGroup>