L'API du gestionnaire de paiement nécessite CSP connect-src

Eiji Kitamura

Rouslan Solomakhin

L'API Payment Handler permet aux fournisseurs de services de paiement de proposer une expérience de paiement personnalisée aux marchands, tout comme l'API Payment Request.

Les informations de cette page ne s'appliquent qu'aux sites Web qui utilisent à la fois CSP (Content-Security-Policy) et l'API Payment Request. Si vous n'utilisez aucune des deux méthodes ou une seule, vous pouvez ignorer ces instructions.

Pour vérifier si votre fournisseur de services de paiement utilise l'API Payment Handler, contactez-le et suivez ses instructions.

Si vous utilisez l'API Payment Handler et CSP (Content-Security-Policy) pour une meilleure protection, vous devez vous assurer que les domaines des requêtes HTTP envoyées depuis le navigateur sont ajoutés à la directive connect-src de l'en-tête CSP.

Par exemple, si votre code JavaScript appelle new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details), votre connect-src de CSP doit inclure https://example.com ou https://example.com/pay:

Content-Security-Policy: connect-src https://example.com/pay

Si https://example.com/pay est une redirection multi-origine, l'origine de destination doit également être incluse dans le CSP. Par exemple, si https://example.com/pay redirige vers https://pay.example.com, les deux origines doivent être incluses dans le CSP:

Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com

Remarque:Un identifiant de mode de paiement via une URL est autorisé avec jusqu'à trois redirections vers le même site. Si des redirections se produisent, toutes les URL doivent se trouver dans la CSP.

Essayer en local

Pour activer la fonctionnalité en local avant son expédition:

1. Accédez à chrome://flags/#web-payment-api-csp sur Chrome.
2. Remplacez le "Règlement CSP pour Web Payment API" par "Activé" au lieu de "Par défaut".
3. Redémarrez Chrome.

Vérifier les URL des demandes

Pour vérifier les URL des requêtes envoyées depuis l'API Payment Handler:

1. Activez chrome://flags/#web-payment-api-csp.
2. Accédez à votre page de paiement, puis ouvrez les outils pour les développeurs Chrome.
3. Recherchez les messages d'erreur tels que ceux-ci : text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
4. Ajoutez l'identifiant de méthode spécifié à votre CSP.

Photo par Eduardo Soares, publiée sur Unsplash