## TaxIdElement

Use the `TaxIdElement` from `@stripe/react-stripe-js` to collect tax ID information
from your customers, including business name and tax identification number.

The component must be rendered inside an [Elements Provider](/js/react_stripe_js/elements/elements_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)
  Tax ID Element initialization options.

  - `visibility` ('always' | 'never' | 'auto')
    By default, the Tax ID Element displays when the user is in a country that supports tax ID collection.
Specify `always` to display the element regardless of the user's country.
Specify `never` to hide the element completely.

  - `fields` (object)
    By default, the Tax ID Element collects all tax ID information.

If it's not necessary for you to collect all fields, you can disable Tax ID Element collection of certain fields with the `fields` option.

    - `businessName` ('always' | 'never' | 'auto')
      Specify `always` to collect the business name.
Specify `never` to not collect the business name.
Default is `auto`.

  - `validation` (object)
    By default, the Tax ID Element will enforce preset validation for each field. You can customize the settings by using this option.

    - `businessName` (object)

      - `required` ('always' | 'never' | 'auto')
        Specify `always` to make business name a required field.
Specify `never` to make business name an optional field.
Default is `auto`.

    - `taxId` (object)

      - `required` ('always' | 'never' | 'auto')
        Specify `always` to make tax ID a required field.
Specify `never` to make tax ID an optional field.
Default is `auto`.

- `onChange` (function)
  Callback called when any value in the [change event payload](/js/element/events/on_change?type=taxIdElement.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 TaxIdElement

```jsx
import React from 'react';
import {Elements, TaxIdElement} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

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

export const App = ({clientSecret}) => (
  <Elements stripe={stripePromise} options={{clientSecret}}>
    <TaxIdElement />
  </Elements>
);
```