PaymentRequest: shippingOption 屬性

安全上下文: 此功能僅在安全上下文(HTTPS)中可用,且支援此功能的瀏覽器數量有限。

已棄用:此特性不再推薦。雖然某些瀏覽器可能仍然支援它,但它可能已經從相關的網路標準中刪除,可能正在刪除過程中,或者可能僅為相容性目的而保留。請避免使用它,如果可能,請更新現有程式碼;請參閱本頁底部的相容性表格以指導您的決策。請注意,此特性可能隨時停止工作。

非標準:此特性未標準化。我們不建議在生產環境中使用非標準特性,因為它們瀏覽器支援有限,並且可能會更改或被移除。但是,在沒有標準選項的特定情況下,它們可以是合適的替代方案。

PaymentRequest 介面的只讀屬性 shippingOption 返回已選中的配送選項的 id、null(如果未選中任何配送選項)或使用者選擇的配送選項。當沒有提供“已選中”的配送選項時,它最初是 null

僅當建構函式使用設定為 truerequestShipping 標誌呼叫時,此屬性才會被填充。如果 requestShippingfalse(或缺失),則 shippingOption 返回 null,即使開發者提供了選中的配送選項。

物件或 null

示例

在下面的示例中,會觸發 shippingaddresschangeshippingoptionchange 事件。每次呼叫 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.` };
  }
}

瀏覽器相容性