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. - 指定されたメソッド ID を CSP に追加します。
写真提供: Eduardo Soares（Unsplash）