Payment Handler API 決済機関は、独自の支払いエクスペリエンスを Payment Request API をご覧ください。
このページの情報は、CSP（Content-Security-Policy）の両方を使用しているウェブサイトにのみ適用されます。 Payment Request API（英語）もあります。どちらも使用しないか、どちらか一方しか使用しないと、 この手順をスキップできます。
ご利用の決済機関が Payment Handler API を使用しているかどうかを確認するには、決済機関にお問い合わせください 画面の指示に沿って操作します。
Payment Handler API と CSP（コンテンツ セキュリティ ポリシー）を
セキュリティを強化するには、送信元の HTTP リクエストのドメインが
ブラウザが CSP ヘッダーの connect-src ディレクティブに追加されます。
たとえば、JavaScript コードで new
PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details) を呼び出す場合、次のようになります。
CSP connect-src に https://example.com または
https://example.com/pay:
Content-Security-Policy: connect-src https://example.com/pay
https://example.com/pay がクロスオリジン リダイレクトの場合、リンク先は
CSP に含める必要もあります。たとえば
https://example.com/pay が https://pay.example.com にリダイレクトされ、次にその両方
オリジンを CSP に含める必要があります。
Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
ローカルで試す
出荷前にローカルでこの機能を有効にするには:
- Chrome で
chrome://flags/#web-payment-api-cspにアクセスします。 - 「Web Payment API の CSP ポリシー」の変更[デフォルト] から[有効] に変更します。
- Chrome を再起動します。
リクエスト URL を確認する
Payment Handler API から送信されたリクエストの URL を確認するには:
chrome://flags/#web-payment-api-cspを有効にする。- 購入手続きページに移動して、Chrome のデベロッパー ツールを開きます。
- 次のようなエラー メッセージを探します。
text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy. - 指定されたメソッド識別子を CSP に追加します。
写真撮影: Eduardo Soares（Unsplash より）