PaymentRequest: paymentmethodchange イベント

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more support for this feature? Tell us why.

もっと詳しく
完全な互換性情報を見る

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() メソッドを呼び出して、リクエストに変更を統合します。