PaymentRequest: событие shippingoptionchange

Для запросов оплаты, которые запрашивают информацию о доставке и для которых предлагаются варианты доставки, событие shippingoptionchange отправляется в PaymentRequest всякий раз, когда пользователь выбирает вариант доставки из списка доступных вариантов.

Строка, определяющая текуще выбранный вариант доставки, находится в свойстве shippingOption.

Это событие не может быть отменено и не распространяется.

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика события.

addEventListener("shippingoptionchange", (event) => {});

onshippingoptionchange = (event) => {};

A PaymentRequestUpdateEvent. Наследуется от Event.

Предоставляет только свойства, унаследованные от Event.

Этот фрагмент кода устанавливает обработчик для события shippingoptionchange. Код пересчитывает общую стоимость оплаты на основе выбранного варианта доставки. Например, если есть три варианта (такие как «Бесплатная доставка по наземной почте», «Доставка на следующий день» и «Доставка на следующий день»), каждый раз, когда пользователь выбирает один из этих вариантов, этот обработчик событий вызывается для перерасчета общей стоимости на основе изменённого варианта доставки.

paymentRequest.addEventListener(
  "shippingoptionchange",
  (event) => {
    const value = calculateNewTotal(paymentRequest.shippingOption);
    const total = {
      currency: "EUR",
      label: "Total due",
      value,
    };
    event.updateWith({ total });
  },
  false,
);

После вызова пользовательской функции calculateNewTotal(), чтобы вычислить обновлённую общую сумму на основе вновь выбранного варианта доставки, как указано в shippingOption. Пересмотренная общая сумма отправляется обратно в запрос оплаты, вызывая метод updateWith() события.

Вы также можете создать обработчик событий для shippingoptionchange, используя соответствующее свойство обработчика событий onshippingoptionchange:

paymentRequest.onshippingoptionchange = (event) => {
  const value = calculateNewTotal(paymentRequest.shippingOption);
  const total = {
    currency: "EUR",
    label: "Total due",
    value,
  };
  event.updateWith({ total });
};