## ContactDetailsElement

Use the `ContactDetailsElement` from `@stripe/react-stripe-js` to collect email addresses
and allow users to log into Link on your checkout page. This element was previously known
as the Link Authentication Element.

The component must be rendered inside an [Elements Provider](https://docs.stripe.com/js/react_stripe_js/elements/elements_provider.md).

### Props

- `id`
  Sets the DOM `id` attribute on the rendered Element container. Use this to
target the Element for styling or testing.

- `className`
  Applies custom CSS classes to the Element container.

- `options`
  Options for creating the Contact Details Element.
    - `defaultValues`
      Provide the initial contact information that will be displayed in the Contact Details Element.
The form will render with empty fields if not provided.
      - `email`

- `onChange`
  Callback called when any value in the [change event payload](https://docs.stripe.com/js/element/events/on_change?type=contactDetailsElement.md#element_on_change-handler) changes.

- `onReady`
  Callback called once the Element is fully rendered.
Recieves the [ready event payload](https://docs.stripe.com/js/element/events/on_ready.md#element_on_ready-handler).

- `onBlur`
  Callback called when the Element loses focus.

- `onFocus`
  Callback called when the Element receives focus.

- `onEscape`
  Callback called when the escape key is pressed within the Element.

- `onLoaderStart`
  Callback called right before Stripe displays the Element skeleton loader.
Receives the Element instance as its only argument.

- `onLoadError`
  Callback called when the Element fails to load.

### Example

```title
Render ContactDetailsElement
```