## Shipping option change event

`paymentRequest.on(event: string, handler: function)`

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

- `event`
The name of the event. In this case, `shippingoptionchange`.

- `handler`
`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`
`updateWith(updateDetails) => void` is a Stripe.js provided function that is called with an [UpdateDetails](https://docs.stripe.com/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`
The customer's selected [ShippingOption](https://docs.stripe.com/js/appendix/shipping_option.md).

### Example

```javascript
const stripe = Stripe('pk_test_...');
const paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 1000,
  },
});

paymentRequest.on('shippingoptionchange', async (event) => {
  const shippingOption = event.shippingOption;
  // Fetch shipping cost based on the selected shippingOption.id
  const {
    shippingAddress,
    shippingOption
  } = event;

  const response = await fetch('/shipping', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      shippingOptionId: shippingOption.id,
      shippingAddress,
    }),
  });

  const {
    shippingCost
  } = await response.json();

  event.updateWith({
    shippingOptions: [
      {
        id: 'free-shipping',
        label: 'Free shipping',
        detail: 'Ships in 5-7 business days',
        amount: 0,
      },
      {
        id: 'express-shipping',
        label: 'Express shipping',
        detail: 'Ships in 1-2 business days',
        amount: 1000,
      },
    ],
    total: {
      label: 'Demo total',
      amount: 1000 + shippingCost,
    },
  });
});
```