## 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
});
```