PaymentRequest: shippingoptionchange イベント

Limited availability

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

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

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

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

配送情報を要求し、配送オプションが提供されている決済リクエストでは、ユーザーが利用できるオプションのリストから配送オプションを選ぶと、shippingoptionchange イベントが PaymentRequest に送られます。

現在選択されている配送オプションを特定する文字列は、shippingOptionプロパティで得ることができます。

このイベントはキャンセル不可で、バブリングしません。

構文

このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

onshippingoptionchange = (event) => {};

イベント型

PaymentRequestUpdateEvent です。Event から継承しています。

Event PaymentRequestUpdateEvent

イベントプロパティ

Event から継承したプロパティのみを提供しています。

例

このコードでは、shippingoptionchange イベントに対するハンドラーを設定します。このコードは、選択された配送オプションに基づいて決済の合計料金を再計算します。例えば、3 つのオプション（"Free ground shipping", "2-day air", "Next day" など）がある場合、ユーザーがそれらのオプションを選ぶたびに、このイベントハンドラーが呼ばれて、変更された配送オプションに基づいて合計金額が再計算されます。

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() メソッドを呼び出すことにより、改訂後の合計が決済リクエストに返されます。

shippingoptionchange のイベントハンドラーは、対応するイベントハンドラープロパティである onshippingoptionchange を使用して作成することもできます。

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

ブラウザーの互換性

BCD tables only load in the browser