PaymentRequest: shippingOption 属性

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

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

非标准：此功能是非标准的，并且不在标准轨道上。请勿在面向 Web 的生产网站上使用它：它不会对所有用户都起作用。实现之间也可能存在很大的不兼容性，并且行为可能会在将来发生改变。

shippingOption 是 PaymentRequest 接口的只读属性，它返回选定送货方式的 ID、null（如果未设置选定送货方式）或用户选定的送货方式。当没有提供“选定”送货方式时，它最初为 null。

仅当使用 requestShipping 标志设置为 true 调用构造函数时，此属性才会被填充。如果 requestShipping 为 false（或缺失），shippingOption 将返回 null，即使开发人员提供了选定的送货方式。

值

示例

在下面的示例中，将分派 shippingaddresschange 和 shippingoptionchange 事件。在每次调用 updateDetails() 时，一个使用 promise，另一个使用普通 JS 对象。这演示了对付款表单的同步和异步更新。

js
const request = new PaymentRequest(methodData, details, options);
// Async update to details
request.onshippingaddresschange = (ev) => {
  ev.updateWith(checkShipping(request));
};
// Sync update to the total
request.onshippingoptionchange = (ev) => {
  const shippingOption = shippingOptions.find(
    (option) => option.id === request.id,
  );
  const newTotal = {
    currency: "USD",
    label: "Total due",
    value: calculateNewTotal(shippingOption),
  };
  ev.updateWith({ ...details, total: newTotal });
};
async function checkShipping(request) {
  try {
    const json = request.shippingAddress.toJSON();

    await ensureCanShipTo(json);
    const { shippingOptions, total } = await calculateShipping(json);

    return { ...details, shippingOptions, total };
  } catch (err) {
    return { ...details, error: `Sorry! we can't ship to your address.` };
  }
}

浏览器兼容性

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