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

# Contact section

> Configure email, name, phone, and company fields inside Checkout.

The Contact section collects shopper contact details. It is opt-in: omit `contact` (or pass `{}`) and Checkout renders with no contact fields.

## Enable contact fields

Include the keys you want to collect. Empty objects use element defaults.

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['card'],
  contact: {
    email: {},
    fullName: {},
    phone: {},
    companyName: {},
  },
});
```

Each key accepts the same options its standalone element accepts:

* `email`: [Email element](/payment-elements/elements/contact/email)
* `fullName`: [Full name element](/payment-elements/elements/contact/full-name) (supports `splitMode`)
* `phone`: [Phone element](/payment-elements/elements/contact/phone) (supports `defaultCountry`, `supportedCountries`)
* `companyName`: [Company name element](/payment-elements/elements/contact/company-name)

## Field order

Default order inside the section is `email → fullName → companyName → phone`. Override with `contact.order`:

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['card'],
  contact: {
    order: ['fullName', 'email'],
    email: {},
    fullName: {},
  },
});
```

Fields you did not include are skipped.

## Header

Add a section header:

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['card'],
  contact: {
    header: { text: 'Your details' },
    email: {},
    fullName: {},
  },
});
```

Omit `header` to render the section untitled.

## Submitted value

Contact data is folded into the Checkout `onSubmit` payload:

```javascript theme={null}
checkout.on('onSubmit', ({ value }) => {
  // value.contact: { email?, fullName?, phone?, companyName? }
});
```

Fields you did not enable are absent.

## See also

* [Full name element](/payment-elements/elements/contact/full-name)
* [Phone element](/payment-elements/elements/contact/phone)
* [Sections overview](/payment-elements/elements/checkout/sections/overview)