> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# <CustomerDetailsForm />

> Form for collecting customer name, email, and phone number during checkout.

# CustomerDetailsForm

<Snippet file="api-key-location.mdx" />

Collects customer contact information (name, email, phone) as the first step of the checkout flow.

## Preview

Desktop

Mobile

## Import

```tsx theme={null}
import { CustomerDetailsForm } from '@/components/CustomerDetailsForm'
```

## Usage

```tsx theme={null}
<CustomerDetailsForm
  initialValues={savedCustomerInfo}
  onSubmit={handleCustomerDetails}
/>
```

## Props

**initialValues** `CustomerDetails`

Pre-filled values from a returning customer or saved session.

**onSubmit** `(details: CustomerDetails) =\> void` *required*

Callback fired when the form is submitted with valid data.

## Behavior

* Validates email format and phone number
* Remembers returning customer info via local storage
* Phone input with country code selector
* Auto-focuses the first empty field


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.