PaymentRequest: shippingoptionchange 事件

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中。

已弃用：不再推荐使用此功能。尽管一些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被弃用，或者可能仅出于兼容性目的而保留。避免使用它，并在可能的情况下更新现有代码；请参阅此页面底部的兼容性表，以指导您的决策。请注意，此功能可能随时停止工作。

非标准：此功能是非标准的，并且不在标准跟踪中。不要在面向 Web 的生产站点上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

对于请求送货信息的付款请求，以及提供送货选项的付款请求，每当用户从可用选项列表中选择送货选项时，shippingoptionchange事件都会发送到PaymentRequest。

可以在shippingOption属性中找到标识当前选定送货选项的字符串。

此事件不可取消，也不会冒泡。

语法

在诸如addEventListener()之类的代码中使用事件名称，或设置事件处理程序属性。

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

onshippingoptionchange = (event) => {};

事件类型

一个PaymentRequestUpdateEvent。继承自Event。

Event PaymentRequestUpdateEvent

事件属性

仅提供从Event继承的属性。

示例

此代码片段为shippingoptionchange事件设置了一个处理程序。代码根据所选的送货选项重新计算付款的总费用。例如，如果有三个选项（例如“免费地面运输”、“2 天空运”和“次日达”），则每次用户选择其中一个选项时，都会调用此事件处理程序以根据更改的送货选项重新计算总计。

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

在调用自定义函数calculateNewTotal()后，根据shippingOption指定的最新选定的送货选项计算更新后的总计。通过调用事件的updateWith()方法，将修改后的总计提交回付款请求。

您还可以使用其对应的事件处理程序属性onshippingoptionchange创建shippingoptionchange的事件处理程序

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

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。