PaymentRequest: shippingoptionchange イベント
Deprecated
Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
配送情報を要求し、配送オプションが提供されている決済リクエストでは、ユーザーが利用できるオプションのリストから配送オプションを選ぶと、shippingoptionchange イベントが PaymentRequest に送られます。
現在選択されている配送オプションを特定する文字列は、shippingOptionプロパティで得ることができます。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("shippingoptionchange", (event) => {});
onshippingoptionchange = (event) => {};
イベント型
PaymentRequestUpdateEvent です。Event から継承しています。
イベントプロパティ
Event から継承したプロパティのみを提供しています。
例
このコードでは、shippingoptionchange イベントに対するハンドラーを設定します。このコードは、選択された配送オプションに基づいて決済の合計料金を再計算します。例えば、3 つのオプション（"Free ground shipping", "2-day air", "Next day" など）がある場合、ユーザーがそれらのオプションを選ぶたびに、このイベントハンドラーが呼ばれて、変更された配送オプションに基づいて合計金額が再計算されます。
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 を使用して作成することもできます。
paymentRequest.onshippingoptionchange = (event) => {
const value = calculateNewTotal(paymentRequest.shippingOption);
const total = {
currency: "EUR",
label: "Total due",
value,
};
event.updateWith({ total });
};