# on()

> This method allows you to listen for component events.

This method allows you to listen for component events.

> **Note**: This method is not applicable to Express Element.

## **Method signature**

When calling this method, please use the following standard method signature format.

#### Tab: JavaScript

```javascript
on(event, callback)
```

#### Tab: TypeScript

```typescript
on(event: EventName, callback: (payload: Payload) => void): void
```

## **Parameters**

This method takes a configuration object as its parameter, which is used to specify the events to listen for and their corresponding handling logic. The detailed parameter descriptions are as follows:

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| _event_ | String | Yes | Event type, used to specify the event to listen for. The following events are supported:<br/><br/>- [`paymentMethodChanged`](#Vherk): Payment method changes event.<br/>- [`billingAddressChanged`](#c2hJp): Billing address data change event.<br/><br/>> **Note**: This is only available in Payment Element scenarios. Calling it in other business scenarios will trigger a console error: \`Event "${event}" is not allowed.\` |
| _callback_ | Function | Yes | Event callback function, used to receive parameters when the event is triggered. The callback parameter structures vary depending on the event type, as shown below:<br/><br/>- [`paymentMethodChanged`](#Vherk) event: The callback function receives a `payload` parameter, which contains payment method change–related data.<br/>- [`billingAddressChanged`](#c2hJp) event: The callback function receives a `payload` parameter, which contains the latest billing address form data. |

### `paymentMethodChanged` (Payment method changes)

Triggered when the buyer switches the payment method. The payload is an object containing the payment method changes data:

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| _type_ | String | Yes | Payment method type. For specific values, refer to [Enumeration values of payment methods](https://docs.antom.com/ac/pm/enumeration_values.md) or [APO payment methods](https://docs.antom.com/ac/apo/payment_methods.md). |
| _name_ | String | Yes | Payment method name. |

### `billingAddressChanged` (Billing address form changes)

Triggered when the buyer edits the billing address form data. The payload is an object that contains the form input results.

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| _sameAsShipping_ | Boolean | No | Indicate whether to check the _sameAsShipping_. |
| [_billingAddress_](#ivaluesresult) | Object | No | Billing address. |

#### _**billingAddress**_

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| _region_ | String | No | Two-letter country or region code compliant with the [ISO 3166 Country Codes](https://www.iso.org/obp/ui/#search) standard. |
| _state_ | String | No | State, province, or region code consisting of two to three letters compliant with the [ISO 3166-2](https://www.iso.org/obp/ui/#search) standard. |
| _city_ | String | No | City name. |
| _address1_ | String | No | Address line 1. |
| _address2_ | String | No | Address line 2. |
| _zipCode_ | String | No | ZIP or postal code. |
| _phoneNo_ | String | No | Buyer’s phone number in E.164 format. |
| [_name_](#4gP5v) | Object | No | Buyer’s name. |

#### _name_

| **Parameter** | **Data type** | **Required** | **Description** |
| --- | --- | --- | --- |
| _firstName_ | String | No | Buyer’s first name. |
| _lastName_ | String | No | Buyer’s last name. |
| _middleName_ | String | No | Buyer’s middle name (if any). |

## Return values

This method does not return any value. After it is called, the event listener is registered internally, and subsequent event triggers are handled by the callback function. There is no need to wait for or process any return result.