PaymentRequest: paymentmethodchange イベント
paymentmethodchange
は決済リクエスト API のイベントで、ユーザーが指定された決済ハンドラーで決済手段を変更したときに PaymentRequest
オブジェクトに配信されます。
例えば、ユーザーが Apple Pay のアカウントでクレジットカードを別のものに切り替えた場合、その変更を知らせるために paymentmethodchange
イベントが発行されます。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener()
のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("paymentmethodchange", (event) => {});
onpaymentmethodchange = (event) => {};
イベント型
PaymentMethodChangeEvent
です。Event
から継承しています。
イベントプロパティ
以下のプロパティに加えて、このインターフェイスは PaymentRequestUpdateEvent
からプロパティを継承しています。
methodDetails
読取専用 安全なコンテキスト用-
決済方法の変更を処理する際に有益な、決済方法固有のデータを含むオブジェクト。そのような情報が利用できない場合、この値は
null
となります。 methodName
読取専用 安全なコンテキスト用-
決済手段識別子を格納した文字列で、具体的な決済手段を一意に識別するための文字列です。この識別子は通常、決済プロセスで使用する URL ですが、
basic-card
のような標準的な非 URL 文字列であってもかまいません。既定値は空文字列の""
です。
例
例をみていきましょう。このコードでは、新しい PaymentRequest
を作成し、リクエストの addEventListener()
を呼び出して paymentmethodchange
イベントのハンドラーを追加し、次に show
を呼び出してユーザーに決済インターフェイスを表示します。
このコードは、detailsForShipping()
というメソッドが存在し、ground
という配送方法の配送オプションを PaymentShippingOption
辞書に得られる形式で格納したオブジェクトを返すことを想定しています。このようにすることで、決済フォームでは ground 配送手段が既定値となります。
const options = {
requestShipping: true,
};
const paymentRequest = new PaymentRequest(
paymentMethods,
detailsForShipping("ground"),
options,
);
paymentRequest.addEventListener(
"paymentmethodchange",
handlePaymentChange,
false,
);
paymentRequest
.show()
.then((response) => response.complete("success"))
.catch((err) => console.error(`Error handling payment request: ${err}`));
イベントハンドラー関数そのものである handlePaymentChange()
は、次のようなものです。
handlePaymentChange = (event) => {
const detailsUpdate = {};
if (event.methodName === "https://apple.com/apple-pay") {
const serviceFeeInfo = calculateServiceFee(event.methodDetails);
Object.assign(detailsUpdate, serviceFeeInfo);
}
event.updateWith(detailsUpdate);
};
まず、イベントの methodName
プロパティを見ます。ユーザーが Apple Pay を使用しようとしていることが示された場合、 methodDetails
を calculateServiceFee()
という関数に渡します。これは、Apple Pay リクエストをサービスするために用いられているクレジットカードなどの取引に関する情報を受け取るために作成される可能性があります。そして、決済手段が必要とするサービス料を追加するために PaymentRequest
に適用する変更を指定するオブジェクトを計算し、返します。
イベントハンドラーが返す前に、イベントの PaymentMethodChangeEvent.updateWith()
メソッドを呼び出して、リクエストに変更を統合します。
仕様書
Specification |
---|
Payment Request API # dfn-paymentmethodchange |
Payment Request API # onpaymentmethodchange-attribute |
ブラウザーの互換性
BCD tables only load in the browser