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

Eiji Kitamura

Payment Handler API を使用すると、決済代行業者は Payment Request API とともに、カスタムの支払いエクスペリエンスを販売者に提供できます。new PaymentRequest() コンストラクタを介して Payment Request API が初期化されると、販売者のオリジンと任意のデータを含む 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 ヘッダーを使用して、サービス ワーカーの JavaScript ファイルにトークンを追加します。HTTP ヘッダーを設定するには、サーバーの構成にアクセスする必要があります。結果のレスポンス ヘッダーは次のようになります。
Origin-Trial: Auw/tjTQ2eJQ911wiMHi1Bb7i71...

サービス ワーカー ファイルのオリジン トライアル トークンを確認するには、デベロッパー ツールまたは次のような 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 からデフォルトで有効になる予定です。今すぐテストを開始して、リリース時の変更に備えることができます。