Payment Handler API を使用すると、決済機関は Payment Request API とともに、独自の決済エクスペリエンスを販売者が利用できるようになります。
このページの情報は、CSP（Content-Security-Policy）と Payment Request API の両方を使用するウェブサイトにのみ適用されます。この 2 つをどちらも使用しないか、一方のみ使用する場合は、この手順をスキップできます。
決済機関が Payment Handler API を使用しているかどうかを確認するには、その機関に連絡して指示に沿って操作します。
保護を強化するために Payment Handler API と CSP（Content-Security-Policy）を使用する場合は、ブラウザから送信される 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）