La API de Payment Handler permite que los proveedores de pagos ofrezcan su experiencia de pago personalizada comerciantes, junto con la API de Payment Request.
La información de esta página solo se aplica a los sitios web que usan tanto CSP (Content-Security-Policy) y la API Payment Request. Si usas solo una de las dos opciones o ninguna de ellas, puedes omitir estas instrucciones.
Para verificar si tu proveedor de pagos usa la API de Payment Handler, comunícate con él y seguir sus instrucciones.
Si usas la API de Payment Handler y la CSP (Política de Seguridad del Contenido) para lo siguiente:
una mejor protección, debes asegurarte de que los dominios de las solicitudes HTTP enviadas desde
del navegador se agregan a la directiva connect-src del encabezado de la CSP.
Por ejemplo, si tu código JavaScript invoca a new
PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details), entonces
tu connect-src de 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, entonces el destino
el origen también debe incluirse en el CSP. Por ejemplo,
https://example.com/pay redirecciona a https://pay.example.com, pero ambos
los orígenes deben estar incluidos en el CSP:
Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
Probar localmente
Para habilitar la función de forma local antes de que se envíe, sigue estos pasos:
- Ve a
chrome://flags/#web-payment-api-cspen Chrome. - Cambia la "política de CSP para la API de Web Payment" de “Predeterminada” como "Habilitado".
- 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:
- Habilitar
chrome://flags/#web-payment-api-csp. - Ve a tu página de confirmación de compras y abre 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