La API de Payment Handler permite a los proveedores de pagos poner a disposición de los comercios su experiencia de pago personalizada, junto con la API de Payment Request.
La información de esta página solo se aplica a los sitios web que usan CSP (Content-Security-Policy) y la API de Payment Request. Si no usas ninguno de los dos o solo uno, 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 que se envían desde el navegador se agreguen a la directiva connect-src del encabezado CSP.
Por ejemplo, si tu código de JavaScript invoca a new
PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details), 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 entre orígenes, el origen de destino también se debe incluir en el CSP. Por ejemplo, si https://example.com/pay redirecciona a https://pay.example.com, ambos orígenes se deben incluir en el CSP:
Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
Pruébala de forma local
Para habilitar la función de forma local antes de que se envíe, haz lo siguiente:
- Ve a
chrome://flags/#web-payment-api-cspen Chrome. - Cambia "Política de CSP para la API de Web Payment" de "Predeterminada" a "Habilitada".
- Reinicia Chrome.
Verifica las URLs de solicitud
Para verificar las URLs de las solicitudes que se envían 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 la compra y abre las Herramientas para desarrolladores de Chrome.
- Busca mensajes de error como el siguiente:
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