## Element events

Communicate with your [Element](/js/element.md) by listening to an event.
An Element might emit any of the events below.
All events have a payload object that has an `elementType` property with the type of the `Element` that emitted the event.

## 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.

> 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.
If a [saved payment method](/payments/save-customer-payment-methods.md) is selected, it will be included in the object.

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

    - `payment_method` (object)
      The currently selected saved payment method attached to the customer.

      - `id` (string)
        The ID of the saved payment method.

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

      - `billing_details` (object)
        The billing details for the saved payment method.

        - `address` (object)

          - `line1` (string)

          - `line2` (string)

          - `city` (string)

          - `state` (string)

          - `postal_code` (string)

          - `country` (string)

        - `email` (string)

        - `name` (string)

        - `phone` (string)

    - `billingDetails` (object)
      The billing details for the selected payment method. Only postalCode and country are available in the change event.
These fields will only appear in the change event if the input is being rendered for the selected payment method.

      - `postalCode` (string)

      - `country` (string)

    - `savePaymentMethod` (boolean)
      Whether the customer opted in to saving their payment method for future purchases.

### Handle a payment element change event

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

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

#### linkAuthenticationElement

- `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.

  - `value` (object)
    An object containing the current email.

### Handle a link authentication element change event

```js
linkAuthenticationElement.on('change', function(event) {
  if (event.complete) {
    // Handle change complete event
  }
});
```

```es_next
linkAuthenticationElement.on('change', (event) => {
  if (event.complete) {
    // Handle change complete event
  }
});
```

#### addressElement

- `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 Address Element is currently displaying the form collection view.

  - `value` (object)
    An object containing the current address information. The `firstName` and
`lastName` properties only appear if the `display.name` option is set to `split`.
The `phone` property only appears if the `fields.phone` option is set to `always`.

### Handle an address element change event

```js
addressElement.on('change', function(event) {
  if (event.complete) {
    // extract potentially complete address
  }
});
```

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

#### cardElement

- `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.

  - `error` (object)
    The current validation error, if any.
Comprised of `message`, `code`, and `type`.
The `type` is always set to `validation_error`.

  - `brand` (string)
    The card brand of the card number being entered.
Can be one of `visa`, `mastercard`, `amex`, `discover`, `diners`, `jcb`, `unionpay`, `link`, or `unknown`.

### Handle a card change event

```js
cardElement.on('change', function(event) {
  if (event.complete) {
    // enable payment button
  } else if (event.error) {
    // show validation to customer
  }
});
```

```es_next
cardElement.on('change', (event) => {
  if (event.complete) {
    // enable payment button
  } else if (event.error) {
    // show validation to customer
  }
});
```

#### cardNumberElement

- `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.

  - `error` (object)
    The current validation error, if any.
Comprised of `message`, `code`, and `type`.
The `type` is always set to `validation_error`.

  - `brand` (string)
    The card brand of the card number being entered.
Can be one of `visa`, `mastercard`, `amex`, `discover`, `diners`, `jcb`, `unionpay`, `link`, or `unknown`.

### Handle a cardNumber change event

```js
cardNumberElement.on('change', function(event) {
  if (event.error) {
    // show validation to customer
  }
});
```

```es_next
cardNumberElement.on('change', (event) => {
  if (event.error) {
    // show validation to customer
  }
});
```

#### cardExpiryElement

- `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.

  - `error` (object)
    The current validation error, if any.
Comprised of `message`, `code`, and `type`.
The `type` is always set to `validation_error`.

### Handle a cardExpiry change event

```js
cardExpiryElement.on('change', function(event) {
  if (event.error) {
    // show validation to customer
  }
});
```

```es_next
cardExpiryElement.on('change', (event) => {
  if (event.error) {
    // show validation to customer
  }
});
```

#### cardCvcElement

- `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.

  - `error` (object)
    The current validation error, if any.
Comprised of `message`, `code`, and `type`.
The `type` is always set to `validation_error`.

### Handle a cardCvc change event

```js
cardCvcElement.on('change', function(event) {
  if (event.error) {
    // show validation to customer
  }
});
```

```es_next
cardCvcElement.on('change', (event) => {
  if (event.error) {
    // show validation to customer
  }
});
```

#### auBankAccountElement

- `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 BSB number and account number are empty.

  - `complete` (boolean)
    `true` if the value is well-formed and potentially complete.
The value is potentially complete when the BSB number is a known
BSB number and when the account number matches the length required
by the bank (or is between 5-9 digits for banks without a specific
account number length).

  - `error` (object)
    The current validation error, if any.
Comprised of `message`, `code`, and `type`.
The `type` is always set to `validation_error`.

  - `bankName` (string)
    The financial institution corresponding to BSB number entered into the Element.

  - `branchName` (string)
    The financial institution’s branch name corresponding to BSB number entered into the Element.

### Handle an auBankAccount change event

```js
auBankAccountElement.on('change', function(event) {
  if (event.error) {
    // show validation to customer
  } else if (event.bankName && event.branchName) {
    // show both bank and branch name
  } else if (event.bankName) {
    // show bank name
  }
});
```

```es_next
auBankAccountElement.on('change', (event) => {
  if (event.error) {
    // show validation to customer
  } else if (event.bankName && event.branchName) {
    // show both bank and branch name
  } else if (event.bankName) {
    // show bank name
  }
});
```

#### ibanElement

- `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.

  - `error` (object)
    The current validation error, if any.
Comprised of `message`, `code`, and `type`.
The `type` is always set to `validation_error`.

  - `country` (string)
    The country code of the entered IBAN.

  - `bankName` (string)
    The financial institution that services the account whose IBAN was entered into the Element.

### Handle an iban change event

```js
ibanElement.on('change', function(event) {
  if (event.error) {
    // show validation to customer
  }
});
```

```es_next
ibanElement.on('change', (event) => {
  if (event.error) {
    // show validation to customer
  }
});
```

#### 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
taxIdElement.on('change', function(event) {
  if (event.complete) {
    // Read tax ID details from event.value
  }
});
```

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

## Ready event

Triggered when the `Element` is fully rendered and methods on the instance, like `element.focus()` and `element.update()`, can be called.

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

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

- `handler` (function) **required**
  `handler(event) => void` is a **callback function** that you provide that will be called when the event is fired.

After it's called, it passes an event object with the following properties:

  - `elementType` (string) **required**
    The type of element the event is fired from.

  - `availablePaymentMethods` (object | undefined)
    This field is **only** present on the `expressCheckout` Element. Describes which buttons render in the Element. Returns undefined if no buttons will render.

    - `link` (boolean)

    - `applePay` (boolean)

    - `googlePay` (boolean)

    - `paypal` (boolean)

    - `amazonPay` (boolean)

    - `klarna` (boolean)

### Handle an Element ready event

```js
element.on('ready', function(event) {
  // Handle ready event
});
```

```es_next
element.on('ready', (event) => {
  // Handle ready event
});
```

## Focus event

Triggered when the `Element` gains focus.

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

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

- `handler` (function) **required**
  `handler(event) => void` is a **callback function** that you provide that will be called when the event is fired.

### Handle an Element focus event

```js
element.on('focus', function(event) {
  // Handle focus event
});
```

```es_next
element.on('focus', (event) => {
  // Handle focus event
});
```

## Blur event

Triggered when the `Element` loses focus.

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

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

- `handler` (function) **required**
  `handler(event) => void` is a **callback function** that you provide that will be called when the event is fired.

### Handle an Element blur event

```js
element.on('blur', function(event) {
  // Handle blur event
});
```

```es_next
element.on('blur', (event) => {
  // Handle blur event
});
```

## Escape event

Triggered when the escape key is pressed within an Element.

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

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

- `handler` (function) **required**
  `handler(event) => void` is a **callback function** that you provide that will be called when the event is fired.

### Handle an Element escape event

```js
element.on('escape', function(event) {
  // Handle escape event
});
```

```es_next
element.on('escape', (event) => {
  // Handle escape event
});
```

## Click event

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

#### expressCheckoutElement

The `click` event is triggered from an Express Checkout Element when the customer
clicks a payment button. Use this event to configure the payment interface.

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

- `handler` (function) **required**
  `handler(event) => void` is a **callback function** you provide that's called after the event is fired.

After it's called, it passes an event object with the following properties:

  - `elementType` ('expressCheckout') **required**
    The type of element the event is fired from, which is `expressCheckout` in this case.

  - `expressPaymentType` ('apple_pay' | 'google_pay' | 'amazon_pay' | 'paypal' | 'link' | 'klarna') **required**
    The payment method the customer checks out with.

  - `resolve` (function) **required**
    A function `resolve(payload) => void` that's called to show the payment interface. You must call this function within 1 second if you handle the `click` event.

    - `allowedShippingCountries (deprecated)` (array)
      _This parameter has been deprecated in favor of the `allowedShippingCountries` param on the [create](/js/elements_object/create_express_checkout_element.md#express_checkout_element_create-options-allowedShippingCountries) function._

By default, the Express Checkout Element allows all countries for shipping.

You can specify which countries are allowed for shipping in the Express Checkout Element with a list of two-letter country codes.

    - `applePay` (object)
      Specify Apple Pay specific options. These are passed through to the Apple Pay API.

      - `recurringPaymentRequest` (object)
        Specify a request to set up a recurring payment. See the [Apple Pay documentation](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrecurringpaymentrequest) for more details.

        - `paymentDescription` (string) **required**

        - `managementURL` (string) **required**

        - `regularBilling` (object) **required**

          - `amount` (number) **required**

          - `label` (string) **required**

          - `recurringPaymentStartDate` (Date)

          - `recurringPaymentEndDate` (Date)

          - `recurringPaymentIntervalUnit` ('year' | 'month' | 'day' | 'hour' | 'minute')

          - `recurringPaymentIntervalCount` (number)

        - `trialBilling` (object)

          - `amount` (number) **required**

          - `label` (string) **required**

          - `recurringPaymentStartDate` (Date)

          - `recurringPaymentEndDate` (Date)

          - `recurringPaymentIntervalUnit` ('year' | 'month' | 'day' | 'hour' | 'minute')

          - `recurringPaymentIntervalCount` (number)

        - `billingAgreement` (string)

      - `deferredPaymentRequest` (object)
        Specify a request to set up a deferred payment. See the [Apple Pay documentation](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaydeferredpaymentrequest) for more details.

        - `paymentDescription` (string) **required**

        - `managementURL` (string) **required**

        - `deferredBilling` (object) **required**

          - `amount` (number) **required**

          - `label` (string) **required**

          - `deferredPaymentDate` (Date) **required**

        - `billingAgreement` (string)

        - `freeCancellationDate` (Date)
          If set, you must also supply a freeCancellationDateTimeZone.

        - `freeCancellationDateTimeZone` (string)
          If set, you must also supply a freeCancellationDate.

These are [tz](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) timezones such as `America/Los_Angeles`, `Europe/Dublin`, and `Asia/Singapore`.

      - `automaticReloadPaymentRequest` (object)
        Specify a request to set up an automatic reload payment. See the [Apple Pay documentation](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayautomaticreloadpaymentrequest) for more details.

        - `paymentDescription` (string) **required**

        - `managementURL` (string) **required**

        - `automaticReloadBilling` (object) **required**

          - `amount` (number) **required**

          - `label` (string) **required**

          - `automaticReloadPaymentThresholdAmount` (number) **required**

        - `billingAgreement` (string)

    - `billingAddressRequired (deprecated)` (boolean)
      _This parameter has been deprecated in favor of the `billingAddressRequired` param on the [create](/js/elements_object/create_express_checkout_element.md#express_checkout_element_create-options-billingAddressRequired) function._

By default, the Express Checkout Element collects the billing address. You can disable this by setting `billingAddressRequired` to `false`.

We highly recommend that you collect the billing address because it can be used to perform address verifications and block fraudulent payments.

    - `business (deprecated)` (object)
      _This parameter has been deprecated in favor of the `business` param on the [create](/js/elements_object/create_express_checkout_element.md#express_checkout_element_create-options-business) function._

Provide information about your business that's displayed in the Express Checkout Element.
This information will be retrieved from your Stripe account if it's not provided.

      - `name` (string)
        The name of your business. Your business name is used to signal to the customer who they're paying.

Klarna always retrieves the business name from your Stripe account, even when this option is set.

    - `emailRequired (deprecated)` (boolean)
      _This parameter has been deprecated in favor of the `emailRequired` param on the [create](/js/elements_object/create_express_checkout_element.md#express_checkout_element_create-options-emailRequired) function._

Collect the customer's email by setting this option to `true`.

    - `lineItems` (array)
      An array of LineItem objects. These LineItems are shown as line items in the payment interface, if line items are supported.
You can represent discounts as negative amount LineItems.

      - `name` (string) **required**
        The name of the line item surfaced to the customer in the payment interface.

      - `amount` (number) **required**
        The amount in the currency's subunit (for example, cents, yen, etc.).

    - `phoneNumberRequired (deprecated)` (boolean)
      _This parameter has been deprecated in favor of the `phoneNumberRequired` param on the [create](/js/elements_object/create_express_checkout_element.md#express_checkout_element_create-options-phoneNumberRequired) function._

Collect the customer's phone number by setting this option to `true`.

PayPal doesn't provide a phone number, even when this option is set to `true`.

    - `shippingAddressRequired (deprecated)` (boolean)
      _This parameter has been deprecated in favor of the `shippingAddressRequired` param on the [create](/js/elements_object/create_express_checkout_element.md#express_checkout_element_create-options-shippingAddressRequired) function._

Collect the customer's shipping address by setting this option to `true`.

If `true`, you must also supply a valid `shippingRates` option in either the `create`, `click`, or `shippingaddresschange` events.

    - `shippingRates` (array)
      An array of ShippingRate objects. The first shipping rate listed appears in the payment interface as the default option.

      - `id` (string) **required**
        Unique identifier for the object.

      - `amount` (number) **required**
        The amount to charge for shipping.

      - `displayName` (string) **required**
        The name of the shipping rate, displayed to the customer in the payment interface.

      - `deliveryEstimate` (object | string)
        The estimated range for how long shipping takes, displayed to the customer in the payment interface.
We recommended using the object format, but you can use a string instead.

        - `maximum` (object)
          The upper bound of the estimated range. If empty, it represents no upper bound (for example, infinite).

          - `unit` ('hour' | 'day' | 'business_day' | 'week' | 'month')
            A unit of time.

          - `value` (number)
            Must be greater than 0.

        - `minimum` (object)
          The lower bound of the estimated range. If empty, it represents no lower bound.

          - `unit` ('hour' | 'day' | 'business_day' | 'week' | 'month')
            A unit of time.

          - `value` (number)
            Must be greater than 0.

  - `reject` (function) **required**
    A function `reject() => void` that's called to cancel the payment interface. You must call this function within 1 second if you handle the `click` event.

### Handle an express checkout element click event

```js
expressCheckoutElement.on('click', function(event) {
  // Handle click event
});
```

```es_next
expressCheckoutElement.on('click', (event) => {
  // Handle click event
});
```

#### paymentRequestButton

Triggered when the `Element` is clicked.

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

- `handler` (function) **required**
  `handler(event) => void` is a **callback function** that you provide that will be called when the event is fired.

After it's called, it passes an event object with the following properties:

  - `preventDefault` (function)
    Calling this function synchronously prevents the browser's payment interface from being shown.
If you have your own form validation logic, you can call this when form validation fails.

### Handle a payment request button click event

```js
paymentRequestButtonElement.on('click', function(event) {
  // If form validation fails
  if (!formValidated) {
    event.preventDefault();
  }
});
```

```es_next
paymentRequestButtonElement.on('click', (event) => {
  // If form validation fails
  if (!formValidated) {
    event.preventDefault();
  }
});
```

#### issuingCardCopyButton

Triggered when the `Element` is clicked.

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

- `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 be passed an event object with the following properties:

  - `preventDefault` (function)
    Calling this function synchronously prevents the browser's payment interface from being shown.
This can be used to validate the form before the payment interface is shown.

### Handle an issuing card copy button click event

```js
issuingCardCopyButtonElement.on('click', function(event) {
  // Handle click event
});
```

```es_next
issuingCardCopyButtonElement.on('click', (event) => {
  // Handle click event
});
```

## LoadError event

Triggered when the `Element` fails to load.

**This event is only emitted from the `payment`, `linkAuthentication`, `address`, `expressCheckout`, `currencySelector`, `taxId`, `card`, and `cardNumber` Elements.**

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

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

- `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 be passed an event object with the following properties:

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

  - `error` (object)
    An `error` object that describes the failure.

### Handle an Element loaderror event

```js
paymentElement.on('loaderror', function(event) {
  // Handle loaderror event
});
```

```es_next
paymentElement.on('loaderror', (event) => {
  // Handle loaderror event
});
```

## LoadStart event

Triggered when the [loader](/js/elements_object/create.md#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.

**This event is only emitted from the `payment`, `linkAuthentication`, and `address` Elements.**

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

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

- `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 be passed an event object with the following properties:

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

### Handle an Element loaderstart event

```js
paymentElement.on('loaderstart', function(event) {
  // Handle loaderstart event
});
```

```es_next
paymentElement.on('loaderstart', (event) => {
  // Handle loaderstart event
});
```

## NetworksChange event

Triggered when there is a change to the available networks the provided card can run on.
If the list of available networks is still loading, an event with `networks: null` and `loading: true` is triggered.
When the list of available networks loads, Stripe triggers an additional event that contains the list of these networks and shows `loading: false`.
Refer to our [card brand choice guide](/card-brand-choice.md#identifying-the-available-card-networks) for further details.

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

#### cardElement

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

- `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 be passed an event object with the following properties:

  - `loading` (boolean)
    `true` if the networks are loading. `false` when Stripe returns all the available networks.

  - `networks` (stringArray | null)
    All available networks for the card number provided. `null` if the networks are still loading.

If eligible for the Card Element's [Card Brand Choice](/card-brand-choice.md) dropdown, this
array will be truncated to a single network so that the user is not presented with multiple
network selections.

### Handle a card networkschange event

```js
cardElement.on('networkschange', function(event) {
  if (event.networks && event.networks.length >= 1) {
    // collect card brand preference
  }
});
```

```es_next
cardElement.on('networkschange', (event) => {
  if (event.networks && event.networks.length >= 1) {
    // collect card brand preference
  }
});
```

#### cardNumberElement

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

- `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 be passed an event object with the following properties:

  - `loading` (boolean)
    `true` if the networks are loading. `false` when Stripe returns all the available networks.

  - `networks` (stringArray | null)
    All available networks for the card number provided. `null` if the networks are still loading.

If eligible for the Card Element's [Card Brand Choice](/card-brand-choice.md) dropdown, this
array will be truncated to a single network so that the user is not presented with multiple
network selections.

### Handle a cardNumber networkschange event

```js
cardNumberElement.on('networkschange', function(event) {
  if (event.networks && event.networks.length >= 1) {
    // collect card brand preference
  }
});
```

```es_next
cardNumberElement.on('networkschange', (event) => {
  if (event.networks && event.networks.length >= 1) {
    // collect card brand preference
  }
});
```

## CardDetailsChange event

Triggered when there is a change to the selected payment method.
If the card details are loading, an event with `brands: null`, `funding: null` and `loading: true` is triggered.
When the card details load, Stripe triggers an additional event that contains a `brands` array, `funding` field and `loading: false`.
If a non card payment type is selected, Stripe triggers an event with `loading: false` and undefined `details`.

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

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

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

- `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 be passed an event object with the following properties:

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

  - `loading` (boolean)
    `true` if the card details are loading.

  - `details` (object | undefined)
    Details of the selected card payment method.
`undefined` if the selected payment method is not a card.

    - `brands` (stringArray | null)
      All potential brands associated with the card.
`null` if the card details are loading.

Cards can have multiple brands associated with them.

Possible values: `amex`, `diners`, `discover`, `eftpos_au`, `jcb`, `mastercard`, `unionpay`, `visa`, `unknown`.

    - `funding` ('credit' | 'debit' | 'prepaid' | 'unknown' | null)
      The funding type of the card.
`null` if the card details are loading.

`unknown` if the funding type can't be determined.

### Handle the Payment Element carddetailschange event

```js
paymentElement.on('carddetailschange', function(event) {
  if (!event.loading) {
    // Handle carddetailschange event details
  }
});
```

```es_next
paymentElement.on('carddetailschange', (event) => {
  if (!event.loading) {
    // Handle carddetailschange event details
  }
});
```

## SavedPaymentMethodUpdate event

Triggered when a saved payment method is updated.

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

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

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

- `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 be passed an event object with the following properties:

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

  - `success` (success)
    `true` if the saved payment method is successfully updated.

  - `error` (string | undefined)
    Error message if the saved payment method is unsuccessfully updated.
`undefined` if the saved payment method is successfully updated.

  - `payment_method` (object)
    An object containing the updated saved payment method.

### Handle the Payment Element savedpaymentmethodupdate event

```js
paymentElement.on('savedpaymentmethodupdate', function(event) {
  if (event.success) {
    // Handle savedpaymentmethodupdate event
  }
});
```

```es_next
paymentElement.on('savedpaymentmethodupdate', (event) => {
  if (event.success) {
    // Handle savedpaymentmethodupdate event
  }
});
```

## SavedPaymentMethodRemove event

Triggered when a saved payment method is removed.

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

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

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

- `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 be passed an event object with the following properties:

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

  - `success` (success)
    `true` if the saved payment method is successfully removed.

  - `error` (string | undefined)
    Error message if the saved payment method is unsuccessfully removed.
`undefined` if the saved payment method is successfully removed.

  - `payment_method` (object)
    An object containing the removed saved payment method.

### Handle the Payment Element savedpaymentmethodremove event

```js
paymentElement.on('savedpaymentmethodremove', function(event) {
  if (event.success) {
    // Handle savedpaymentmethodremove event
  }
});
```

```es_next
paymentElement.on('savedpaymentmethodremove', (event) => {
  if (event.success) {
    // Handle savedpaymentmethodremove event
  }
});
```