PaymentRequest: shippingOption プロパティ

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

shippingOption は PaymentRequest インターフェイスの読み取り専用プロパティで、これは、選択された配送オプションの id、null（選択する配送オプションが設定されていない場合）、またはユーザーによって選択された配送オプションのいずれかを返します。「選択された」配送オプションが提供されていない場合、最初は null です。

この属性は、コンストラクターが requestShipping フラグを true に設定して呼び出された場合にのみ設定されます。requestShipping が false である（または見つからない）場合、たとえ開発者が選択した配送オプションを提供したとしても、 shippingOption は null を返します。

値

例

下記の例では、shippingaddresschange および shippingoptionchange イベントが配信されます。それぞれが updateDetails() が呼び出し、1 つはプロミスを用いており、もう 1 つはプレーンな 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 tables only load in the browser