La API de Payment Handler permite que los proveedores de pagos hagan que su experiencia de pago personalizada esté disponible para los comercios, junto con la API de Payment Request.
La información de esta página solo se aplica a los sitios web que usan la CSP (Content-Security-Policy) y la API de Payment Request. Si no usas ninguna de las dos o solo una de ellas, puedes omitir estas instrucciones.
Para verificar si tu proveedor de pagos usa la API de Payment Handler, comunícate con él y sigue sus instrucciones.
Si usas la API de Payment Handler y CSP (Content-Security-Policy) para una mejor protección, debes asegurarte de que los dominios de las solicitudes HTTP enviadas desde el navegador se agreguen a la directiva connect-src
del encabezado de la CSP.
Por ejemplo, si el código JavaScript invoca a new
PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details)
, el connect-src
de la CSP debe incluir https://example.com
o https://example.com/pay
:
Content-Security-Policy: connect-src https://example.com/pay
Si https://example.com/pay
es un redireccionamiento de origen cruzado, el origen
de destino también debe incluirse en el CSP. Por ejemplo, si https://example.com/pay
redirecciona a https://pay.example.com
, deben incluirse ambos orígenes en el CSP:
Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
Pruébalo de manera local
Para habilitar la función a nivel local antes del envío, sigue estos pasos:
- Ve a
chrome://flags/#web-payment-api-csp
en Chrome. - Cambia la “Política de CSP para la API de Web Payment” de “Predeterminada” a “Habilitada”.
- Reinicia Chrome.
Verifica las URLs de la solicitud
Para verificar las URLs de las solicitudes enviadas desde la API de Payment Handler, haz lo siguiente:
- Habilita
chrome://flags/#web-payment-api-csp
. - Ve a la página de confirmación de compras y abre las Herramientas para desarrolladores de Chrome.
- Busca mensajes de error como los siguientes:
text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
- Agrega el identificador de método especificado a tu CSP.
Foto de Eduardo Soares en Unsplash