## BillingAddressElement

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

The component must be rendered inside a [CheckoutProvider](/js/react_stripe_js/checkout/checkout_provider.md).

### Props

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

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

- `options` (object)
  Billing Address Element initialization options.

  - `contacts` (array)
    An array of [Contact](/js/appendix/contact_object.md) objects that can be displayed as saved addresses in the Billing Address Element. The first contact is automatically selected.

  - `display` (object)
    You can customize how certain fields are displayed.

    - `name` ('full' | 'split' | 'organization')
      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.

- `onChange` (function)
  Callback called when any value in the [change event payload](/js/element/events/on_change?type=addressElement.md#element_on_change-handler) changes.

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

- `onBlur` (function)
  Callback called when the Element loses focus.

- `onFocus` (function)
  Callback called when the Element receives focus.

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

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

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

### Render BillingAddressElement

```JSX
import React from 'react';
import {CheckoutProvider, BillingAddressElement} from '@stripe/react-stripe-js/checkout';
import {loadStripe} from '@stripe/stripe-js';

const stripePromise = loadStripe('{TEST_PUBLISHABLE_KEY}');

const App = ({clientSecret}) => (
  <CheckoutProvider
    stripe={stripePromise}
    options={{clientSecret}}
  >
    <BillingAddressElement />
  </CheckoutProvider>
);

export default App;
```