La API de Payment Handler requerirá CSP connect-src

Eiji Kitamura

Rouslan Solomakhin

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

Nota: Los identificadores de forma de pago de las URLs pueden tener hasta 3 redireccionamientos al mismo sitio. Si se produce algún redireccionamiento, todas las URLs deben estar en la CSP.

Pruébalo de manera local

Para habilitar la función a nivel local antes del envío, sigue estos pasos:

1. Ve a chrome://flags/#web-payment-api-csp en Chrome.
2. Cambia la “Política de CSP para la API de Web Payment” de “Predeterminada” a “Habilitada”.
3. 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:

1. Habilita chrome://flags/#web-payment-api-csp.
2. Ve a la página de confirmación de compras y abre las Herramientas para desarrolladores de Chrome.
3. Busca mensajes de error como los siguientes: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
4. Agrega el identificador de método especificado a tu CSP.

Foto de Eduardo Soares en Unsplash