## Change event

The change event is triggered when any value in the change event payload changes.
The event payload always contains certain keys, in addition to some `Element`-specific keys.

The following Checkout Elements support the `change` event:
`paymentElement`, `billingAddressElement`, `shippingAddressElement`, and `taxIdElement`.

> Consult with your legal counsel regarding your requirements and obligations about how you collect, use, and store customers' personal data

**Syntax:** `element.on(...)`

#### paymentElement

- `event` ('change') **required**
  The name of the event. In this case, `change`.

- `handler` (function) **required**
  `handler(event) => void` is a **callback function** that
you provide that will be called when the event is fired. When called
it will pass an event object with the following properties:

  - `elementType` (string)
    The type of element that emitted this event.

  - `empty` (boolean)
    `true` if the value is empty.

  - `complete` (boolean)
    `true` if all required fields for the selected payment method in the Payment Element
have been filled with potentially valid input.

  - `collapsed` (boolean)
    `true` if the Payment Element is currently collapsed.

  - `value` (object)
    An object containing the current selected PaymentMethod type.

    - `type` (string)
      The type of payment method that was selected.

### Handle a payment element change event

```js
const paymentElement = checkout.createPaymentElement();
paymentElement.on('change', function(event) {
  if (event.complete) {
    // enable payment button
  }
});
```

```es_next
const paymentElement = checkout.createPaymentElement();
paymentElement.on('change', (event) => {
  if (event.complete) {
    // enable payment button
  }
});
```

#### billingAddressElement

- `event` ('change') **required**
  The name of the event. In this case, `change`.

- `handler` (function) **required**
  `handler(event) => void` is a **callback function** that
you provide that will be called when the event is fired. When called
it will pass an event object with the following properties:

  - `elementType` (string)
    The type of element that emitted this event.

  - `empty` (boolean)
    `true` if the value is empty.

  - `complete` (boolean)
    `true` if the value is well-formed and potentially complete.
The `complete` value can be used to progressively disclose the next parts of your form or to enable form submission.

It is not an indicator of whether a customer is done with their input—it only indicates that the Element contains a potentially complete, well-formed value.
In many cases the customer could still add further input.

The `complete` value should not be used to perform an action such as advancing the cursor to a subsequent field or performing a tokenization request.

  - `isNewAddress` (boolean)
    `true` if the Billing Address Element is currently displaying the form collection view.

  - `value` (object)
    An object containing the current address information.

### Handle a billing address element change event

```js
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.on('change', function(event) {
  if (event.complete) {
    // extract potentially complete address
  }
});
```

```es_next
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.on('change', (event) => {
  if (event.complete) {
    // extract potentially complete address
  }
});
```

#### shippingAddressElement

- `event` ('change') **required**
  The name of the event. In this case, `change`.

- `handler` (function) **required**
  `handler(event) => void` is a **callback function** that
you provide that will be called when the event is fired. When called
it will pass an event object with the following properties:

  - `elementType` (string)
    The type of element that emitted this event.

  - `empty` (boolean)
    `true` if the value is empty.

  - `complete` (boolean)
    `true` if the value is well-formed and potentially complete.
The `complete` value can be used to progressively disclose the next parts of your form or to enable form submission.

It is not an indicator of whether a customer is done with their input—it only indicates that the Element contains a potentially complete, well-formed value.
In many cases the customer could still add further input.

The `complete` value should not be used to perform an action such as advancing the cursor to a subsequent field or performing a tokenization request.

  - `isNewAddress` (boolean)
    `true` if the Shipping Address Element is currently displaying the form collection view.

  - `value` (object)
    An object containing the current address information.

### Handle a shipping address element change event

```js
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.on('change', function(event) {
  if (event.complete) {
    // extract potentially complete address
  }
});
```

```es_next
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.on('change', (event) => {
  if (event.complete) {
    // extract potentially complete address
  }
});
```

#### taxIdElement

- `event` ('change') **required**
  The name of the event. In this case, `change`.

- `handler` (function) **required**
  `handler(event) => void` is a **callback function** that
you provide that will be called when the event is fired. When called
it will pass an event object with the following properties:

  - `elementType` (string)
    The type of element that emitted this event.

  - `empty` (boolean)
    `true` if both the business name and tax ID fields are empty.

  - `complete` (boolean)
    `true` if all required fields in the Tax ID Element have been filled with potentially valid input.

  - `visible` (boolean)
    `true` if the Tax ID Element is visible based on the `visibility` option and country.

  - `value` (object)
    An object containing the current tax ID information.

The `taxIdType` value corresponds to the selected country-specific type in the Tax ID Element.
The `externalTaxIdType` value corresponds to the tax ID type you would pass to Stripe APIs (for example, EU countries use `eu_vat`).

    - `businessName` (string)
      The business name entered in the Tax ID Element.

    - `taxId` (string)
      The tax ID value entered in the Tax ID Element.

    - `taxIdType` (string)
      The selected tax ID type in the Tax ID Element (for example, `de_vat`).

    - `externalTaxIdType` (string)
      The tax ID type that corresponds to Stripe API values (for example, `eu_vat`).

### Handle a tax ID element change event

```js
const taxIdElement = checkout.createTaxIdElement();
taxIdElement.on('change', function(event) {
  if (event.complete) {
    // Read tax ID details from event.value
  }
});
```

```es_next
const taxIdElement = checkout.createTaxIdElement();
taxIdElement.on('change', (event) => {
  if (event.complete) {
    // Read tax ID details from event.value
  }
});
```