## PaymentRequest events

`PaymentRequest` instances emit several different types of events.

## Token event

Stripe.js automatically creates a [Token](/api/tokens.md) after the customer is done interacting with the browser’s payment interface.
To access the created `Token`, listen for this event.

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

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

- `handler` (function) **required**
  A callback function that will be called with a [PaymentResponse](/js/appendix/payment_response.md) object when the event is fired.
The `PaymentResponse` object will contain a `token` field.

### Handle 'token' event

```js
paymentRequest.on('token', function(event) {
  // event.token is available
});
```

```es_next
paymentRequest.on('token', ({token}) => {
  // token is available
});
```

## PaymentMethod event

Stripe.js automatically creates a [PaymentMethod](/api/payment_methods.md) after the customer is done interacting with the browser’s payment interface.
To access the created `PaymentMethod`, listen for this event.

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

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

- `handler` (function) **required**
  A callback function that will be called with a [PaymentResponse](/js/appendix/payment_response.md) object when the event is fired.
The `PaymentResponse` object will contain a `paymentMethod` field.

### Handle 'paymentmethod' event

```js
paymentRequest.on('paymentmethod', function(event) {
  // event.paymentMethod is available
});
```

```es_next
paymentRequest.on('paymentmethod', ({paymentMethod}) => {
  // paymentMethod is available
});
```

## Source event

Stripe.js automatically creates a [Source](/api/sources.md) after the customer is done interacting with the browser’s payment interface.
To access the created source, listen for this event.

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

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

- `handler` (function) **required**
  A callback function that will be called with a [PaymentResponse](/js/appendix/payment_response.md) object when the event is fired.
The `PaymentResponse` object will contain a `source` field.

### Handle 'source' event

```js
paymentRequest.on('source', function(event) {
  // event.source is available
});
```

```es_next
paymentRequest.on('source', ({source}) => {
  // source is available
});
```

## Cancel event

The `cancel` event is emitted from a [PaymentRequest](/js/payment_request.md) when the browser‘s payment interface is dismissed.

Note that in some browsers, the payment interface may be dismissed by the customer even after they authorize the payment.
This means that you may receive a `cancel` event on your PaymentRequest object after receiving a `token`, `paymentmethod`, or `source` event.
If you’re using the `cancel` event as a hook for canceling the customer’s order, make sure you also refund the payment that you just created.

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

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

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

### Handle 'cancel' event

```js
paymentRequest.on('cancel', function() {
  // handle cancel event
});
```

```es_next
paymentRequest.on('cancel', () => {
  // handle cancel event
});
```

## Shipping address change event

The `shippingaddresschange` event is emitted from a [PaymentRequest](/js/payment_request.md) whenever the customer selects a new address in the browser's payment interface.

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

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

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

  - `updateWith` (function)
    `updateWith(updateDetails) => void` is a Stripe.js provided function that is called with an [UpdateDetails](/js/appendix/update_details.md) object to merge your updates into the current `PaymentRequest` object.
Note that if you subscribe to `shippingaddresschange` events, then you must call `updateWith` within 30 seconds.

  - `shippingAddress` (ShippingAddress)
    The customer's selected [ShippingAddress](/js/appendix/shipping_address.md).

To maintain privacy, browsers may anonymize the shipping address by removing sensitive information that is not necessary to calculate shipping costs.
Depending on the country, some fields can be missing or partially redacted.
For example, the shipping address in the U.S. may only contain a city, state, and ZIP code.
The full shipping address appears in the [PaymentResponse](/js/appendix/payment_response.md) object after the purchase is confirmed in the browser’s payment interface

### Handle 'shippingaddresschange' event

```js
paymentRequest.on('shippingaddresschange', function(event) {
  var updateWith = event.updateWith;
  var shippingAddress = event.shippingAddress;
  // handle shippingaddresschange event

  // call event.updateWith within 30 seconds
  updateWith(updateDetails);
});
```

```es_next
paymentRequest.on('shippingaddresschange', (event) => {
  const {updateWith, shippingAddress} = event;
  // handle shippingaddresschange event

  // call event.updateWith within 30 seconds
  updateWith(updateDetails);
});
```

## Shipping option change event

The `shippingoptionchange` event is emitted from a [PaymentRequest](/js/payment_request.md) whenever the customer selects a new shipping option in the browser's payment interface.

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

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

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

  - `updateWith` (function)
    `updateWith(updateDetails) => void` is a Stripe.js provided function that is called with an [UpdateDetails](/js/appendix/update_details.md) object to merge your updates into the current `PaymentRequest` object.
Note that if you subscribe to `shippingoptionchange` events, then you must call `updateWith` within 30 seconds.

  - `shippingOption` (ShippingOption)
    The customer's selected [ShippingOption](/js/appendix/shipping_option.md).

### Handle 'shippingoptionchange' event

```js
paymentRequest.on('shippingoptionchange', function(event) {
  var updateWith = event.updateWith;
  var shippingOption = event.shippingOption;
  // handle shippingoptionchange event

  // call event.updateWith within 30 seconds
  updateWith(updateDetails);
});
```

```es_next
paymentRequest.on('shippingoptionchange', (event) => {
  const {updateWith, shippingOption} = event;
  // handle shippingoptionschange event

  // call event.updateWith within 30 seconds
  updateWith(updateDetails);
});
```