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

# Elements overview

> The full catalog of elements you can mount, and when to reach for each.

Every Payment Elements integration is built out of one or more **elements**. This page catalogs everything you can mount, grouped by role.

Start with [Checkout](/payment-elements/elements/checkout/introduction) unless you have a specific reason to lay out fields yourself. Checkout composes the same payment method, address, contact, and custom elements you see below.

## Checkout

A single element that renders a full payment form: shopper contact, addresses, a payment method selector, and any custom fields you configure. One mount, one submit, one tokenized payload.

* Factory: `overflow.checkout(options)`
* Docs: [Checkout introduction](/payment-elements/elements/checkout/introduction)

## Payment methods

Mount a payment method standalone when you need a compact form, or configure it as a Checkout section for the full experience.

| Element    | Factory                | Use for                                                    |
| ---------- | ---------------------- | ---------------------------------------------------------- |
| Card       | `overflow.card()`      | Credit and debit cards with PCI-secured input.             |
| Bank       | `overflow.bank()`      | ACH bank payments with institution search or manual entry. |
| Apple Pay  | `overflow.applePay()`  | Apple Pay wallet button.                                   |
| Google Pay | `overflow.googlePay()` | Google Pay wallet button.                                  |

See [Payment methods overview](/payment-elements/elements/payment-methods/overview).

## Address elements

Collect billing and shipping addresses, with optional address autocomplete.

| Element          | Factory                      |
| ---------------- | ---------------------------- |
| Billing address  | `overflow.billingAddress()`  |
| Shipping address | `overflow.shippingAddress()` |

See [Address elements](/payment-elements/elements/address/introduction).

## Contact elements

Single-purpose inputs for shopper contact details.

| Element      | Factory                  |
| ------------ | ------------------------ |
| Email        | `overflow.email()`       |
| Full name    | `overflow.fullName()`    |
| Phone        | `overflow.phone()`       |
| Company name | `overflow.companyName()` |

See [Contact elements](/payment-elements/elements/contact/introduction).

## Custom elements

Typed wrappers around common inputs. Use these to collect merchant-defined metadata (gift messages, quantities, opt-ins) alongside payment fields, without dropping out of the SDK's event and validation pipeline.

| Element  | Factory               | Emits            |
| -------- | --------------------- | ---------------- |
| Text     | `overflow.text()`     | `string \| null` |
| Number   | `overflow.number()`   | `number \| null` |
| Select   | `overflow.select()`   | `string \| null` |
| Checkbox | `overflow.checkbox()` | `boolean`        |

See [Custom elements](/payment-elements/elements/custom/introduction).

## Submit button

A themed submit CTA that emits `onSubmit` when clicked. Pair it with standalone payment method elements to trigger their submit programmatically.

* Factory: `overflow.submitButton()`
* Docs: [Submit button](/payment-elements/elements/submit-button)

## Uniform API

Every element factory returns a handle with the same imperative surface:

```javascript theme={null}
const element = overflow.<factory>(options);
element.on(event, handler);
element.mount(selector);
element.update(partialOptions);
element.submit();
element.unmount();
element.destroy();
```

Every element emits `onReady`, `onChange`, `onSubmit`, `onError`, `onFocus`, and `onBlur`. Wallets add `onClick` and `onExit`. See [Events overview](/payment-elements/events/overview) for the full contract.

## Next steps

<CardGroup cols={2}>
  <Card title="Checkout" icon="cart-shopping" href="/payment-elements/elements/checkout/introduction">
    Recommended starting point.
  </Card>

  <Card title="Payment methods" icon="credit-card" href="/payment-elements/elements/payment-methods/overview">
    Card, bank, and wallets.
  </Card>
</CardGroup>