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

# Custom elements section

> Add merchant-defined fields (notes, opt-ins, quantities) to Checkout.

The Custom elements section holds merchant-defined fields you configure per integration. Each slot is one mounted child managed by Checkout, keyed by a name you choose.

## Enable the section

Pass `customElements` as an object of named slots. Each slot picks one of the [Custom element](/payment-elements/elements/custom/introduction) types.

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['card'],
  customElements: {
    giftMessage: {
      elementType: 'text',
      label: 'Gift message (optional)',
      required: false,
    },
    coverFee: {
      elementType: 'checkbox',
      label: 'Cover the processing fee',
      defaultValue: false,
    },
    quantity: {
      elementType: 'number',
      label: 'Quantity',
      min: 1,
      max: 10,
      required: true,
    },
  },
});
```

Supported `elementType` values:

* `'text'`: single-line text input. See [Text](/payment-elements/elements/custom/text).
* `'number'`: numeric input with optional `min` / `max` / `step`. See [Number](/payment-elements/elements/custom/number).
* `'select'`: dropdown with typed options. See [Select](/payment-elements/elements/custom/select).
* `'checkbox'`: boolean checkbox. See [Checkbox](/payment-elements/elements/custom/checkbox).

## Section position

The section renders after Payment methods by default. Move it with `order`:

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['card'],
  customElements: { note: { elementType: 'text', label: 'Order note' } },
  order: ['contact', 'customElements', 'paymentMethods'],
});
```

## Programmatic access

Reach into a slot with `checkout.getCustomElement(name)`:

```javascript theme={null}
const gift = checkout.getCustomElement('giftMessage');
gift?.on('onChange', ({ value }) => console.log('gift message:', value));
```

Returns `null` if the slot is not configured.

## Submitted value

Custom values are folded into the Checkout payload, keyed by slot name:

```javascript theme={null}
checkout.on('onSubmit', ({ value }) => {
  // value.customElements: { giftMessage: string | null, coverFee: boolean, quantity: number | null }
});
```

Each entry is the current typed value from the corresponding element.

## See also

* [Custom elements overview](/payment-elements/elements/custom/introduction)
* [Sections overview](/payment-elements/elements/checkout/sections/overview)