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

Eiji Kitamura

Payment Handler API を使用すると、決済プロバイダは Payment Request API とともに、販売者にカスタム決済エクスペリエンスを提供できます。Payment Request API が new PaymentRequest() コンストラクタで初期化されると、販売者のオリジンと任意のデータを含む canmakepayment イベントが、Payment Handler API に登録されているサービス ワーカーにサイレントで発行されます。このクロスオリジン通信では、ユーザー操作は必要ありません。また、ユーザー インターフェースも表示されません。

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

このページの情報は、Payment Handler API を使用する支払いアプリ プロバイダにのみ適用されます。使用しない場合は、この手順をスキップできます。

変更内容

販売者が new PaymentRequest() を呼び出すと、登録済みのサービス ワーカーは、次の情報が含まれる canmakepayment イベント（CanMakePaymentEvent）を受信します。

  • topOrigin
  • paymentRequestOrigin
  • methodData
  • modifiers

これらは削除され、サービス ワーカーは追加情報なしで canmakepayment イベントを受信するだけになります。

特徴検出

サービス ワーカー コードで 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 からデフォルトで有効になる予定です。リリース時間の変更に備えて、今すぐテストを開始できます。