## BillingAddressElement

Use the `BillingAddressElement` from `@stripe/react-stripe-js/checkout` to render and update the
billing address on the current [Checkout Session](https://docs.stripe.com/api/checkout/sessions/object.md).

The component must be rendered inside a [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_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`
  Billing Address Element initialization options.
    - `contacts`
      An array of objects that can be displayed as saved addresses in the Billing Address Element. The first contact is automatically selected.
      - `name`
        The name of the contact. This might be a person, or a business name.
      - `address`
        The address of the contact.
        - `line1`
        - `line2`
        - `city`
          The name of a city, town, village, etc.
        - `state`
          The most coarse subdivision of a country. Depending on the country, this might correspond to a state, a province, an oblast, a prefecture, or something else along these lines.
        - `postal_code`
          The postal code or ZIP code, also known as PIN code in India.
        - `country`
          Two-letter country code, capitalized. Valid two-letter country codes are specified by ISO3166 alpha-2.
      - `phone`
        The phone number of the contact.
    - `display`
      You can customize how certain fields are displayed.
      - `name`
        By default, the Billing Address Element displays a full name field.
Specify 'split' to display a first name field and a last name field.
Specify 'organization' to display an organization field.
    - `autocomplete`
      By default, the Address Element will have autocomplete enabled with Stripe provided Google Maps API key for certain countries if any of the following condition is met:
* If Payment Element is mounted in the same elements group as Address Element in a single page application.
* If the Address Element is used in an active Link session (Link is also known as Onelink in the UK).

[Contact Legal before editing or deleting the Google Maps autocomplete callout]: #

By using autocomplete, you agree to comply with the [Google Maps Platform Acceptable Use Policy](https://cloud.google.com/maps-platform/terms/aup). If you violate this policy, we might disable autocomplete, or take any other action as necessary.

You can customize the autocomplete setting with this option.
      - `mode`
        Specify `disabled` to disable autocomplete in the Address Element.

Specify `google_maps_api` to enable [Google Maps API](https://developers.google.com/maps/documentation/javascript/places) with your own key. It will only be used when Stripe provided Google Maps API key is not available.

The default setting is `automatic`, where we'll support autocomplete when possible.
      - `apiKey`
        Specify your own [Google Maps API key](https://developers.google.com/maps/documentation/javascript/places#add-places-api-to-the-api-keys-api-restrictions-list) with it.

**Only needs to be passed in when `autocomplete.mode` is set to `google_maps_api`.**

- `onChange`
  Callback called when any value in the [change event payload](https://docs.stripe.com/js/element/events/on_change?type=addressElement.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 BillingAddressElement
```