PaymentRequest: paymentmethodchange イベント

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

addEventListener("paymentmethodchange", (event) => {});

onpaymentmethodchange = (event) => {};

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

以下のプロパティに加えて、このインターフェイスは PaymentRequestUpdateEvent からプロパティを継承しています。

methodDetails (en-US) 読取専用 安全なコンテキスト用

決済方法の変更を処理する際に有益な、決済方法固有のデータを含むオブジェクト。そのような情報が利用できない場合、この値は null となります。

methodName (en-US) 読取専用 安全なコンテキスト用

決済手段識別子を格納した文字列で、具体的な決済手段を一意に識別するための文字列です。この識別子は通常、決済プロセスで使用する 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 (en-US) プロパティを見ます。ユーザーが Apple Pay を使用しようとしていることが示された場合、 methodDetails (en-US) を calculateServiceFee() という関数に渡します。これは、Apple Pay リクエストをサービスするために用いられているクレジットカードなどの取引に関する情報を受け取るために作成される可能性があります。そして、決済手段が必要とするサービス料を追加するために PaymentRequest に適用する変更を指定するオブジェクトを計算し、返します。

イベントハンドラーが返す前に、イベントの PaymentMethodChangeEvent.updateWith() メソッドを呼び出して、リクエストに変更を統合します。

• 決済リクエスト API
• 決済リクエスト API の使用
• merchantvalidation イベント
• payerdetailchange イベント
• shippingaddresschange イベント
• shippingoptionchange イベント