Payment Handler API には CSP の connect-src が必要
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
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 より)
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2022-09-29 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]
{"lastModified": "\u6700\u7d42\u66f4\u65b0\u65e5 2022-09-29 UTC\u3002"}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2022-09-29 UTC。"],[],[]]