La API de Payment Handler requerirá CSP connect-src

Eiji Kitamura

Rouslan Solomakhin

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

Nota: Un identificador de forma de pago de URL puede tener hasta 3 redireccionamientos en el mismo sitio. Si se produce un redireccionamiento, todas las URLs deben estar en el CSP.

Pruébala de forma local

Para habilitar la función de forma local antes de que se envíe, haz lo siguiente:

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

1. Habilita chrome://flags/#web-payment-api-csp.
2. Ve a la página de confirmación de la compra y abre las Herramientas para desarrolladores de Chrome.
3. Busca mensajes de error como el siguiente: 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