Payment Handler API の CanMakePayment イベントの動作を更新

Eiji Kitamura

Payment Handler API を使用すると、決済機関は Payment Request API とともに、独自の決済エクスペリエンスを販売者が利用できるようになります。Payment Request API が new PaymentRequest() コンストラクタを介して初期化されると、販売者のオリジンと任意のデータを含む canmakepayment イベントが、Payment Handler API に登録されている Service Worker に対して通知なく送信されます。このクロスオリジン通信にはユーザー操作は必要なく、ユーザー インターフェースは表示されません。

Chrome では、canmakepayment イベントから識別フィールドが削除され、Chrome 108 からオリジン トライアルが開始されます。

このページの情報は、Payment Handler API を使用する決済アプリ プロバイダのみを対象としています。使用しない場合は、この手順をスキップできます。

変更内容

販売者が new PaymentRequest() を呼び出すと、登録済みの Service Worker は次の情報を含む canmakepayment イベント（CanMakePaymentEvent）を受け取ります。

  • topOrigin
  • paymentRequestOrigin
  • methodData
  • modifiers

これらは削除され、Service Worker は追加情報なしで canmakepayment イベントを受け取ります。

機能検出

Service Worker コードで canmakepayment イベントが変更されたかどうかを検出するには、次のようにそれぞれのプロパティを調べます。

self.addEventListener(e => {
  if (e.paymentRequestOrigin) {...}
  if (e.topOrigin) {...}
  if (e.methodData && e.methodData.length > 0) {...}
  if (e.modifiers && e.modifiers.length > 0) {...}
  ...
});

変更をローカルで試す

開発用に変更をローカルで有効にするには:

  1. Chrome 108、109、または 110 を使用してください。
  2. URL バーに「chrome://flags/#clear-identity-in-can-make-payment」と入力します。
  3. フラグを有効にします。
  4. Chrome を再起動します。

このフラグを有効にすると、canmakepayment イベントの ID フィールド（および Android IS_READY_TO_PAY インテント）が空になります。

本番環境で変更を有効にする

製品版で変更を実際に Chrome に実装する前にテストのために有効にすることもできます。このメカニズムをオリジン トライアルと呼びます。

オリジン トライアルを利用すると、新機能を試し、そのユーザビリティ、実用性、有効性に関するフィードバックをウェブ標準コミュニティに提供できます。詳しくは、ウェブ デベロッパー向けオリジン トライアル ガイドをご覧ください。このオリジン トライアルまたは別のオリジン トライアルに登録するには、登録ページにアクセスしてください。

オリジン トライアルを登録するには:

  1. 送信元のトークンをリクエストします。
  2. Origin-Trial HTTP ヘッダーを使用して、Service Worker の JavaScript ファイルにトークンを追加します。HTTP ヘッダーを設定するには、サーバーの構成にアクセスする必要があります。結果のレスポンス ヘッダーは次のようになります。
Origin-Trial: Auw/tjTQ2eJQ911wiMHi1Bb7i71...

Service Worker ファイルでオリジン トライアル トークンを表示するには、DevTools を使用するか、次のように curl コマンドを使用します。

$ curl --head <Service Worker JS file URL> | grep -i origin-trial
origin-trial: Auw/tjTQ2eJQ911wiMHi1Bb7i71...

Chrome 111 以降で ID フィールドをローカルで再度有効にする

Chrome 111 以降を使用している場合、canmakepayment イベントの ID フィールドは空のままです。フィールドをローカルで再度有効にするには、次のようにします。

  1. Chrome 111 以降を使用している。
  2. URL バーに「chrome://flags/#add-identity-in-can-make-payment」と入力します。
  3. フラグを有効にします。
  4. Chrome を再起動します。

次のステップ

この変更は Chrome 111 以降、デフォルトで有効になる予定です。リリース時期の変更に備えるため、今すぐテストを開始できます。