Los sistemas Fingerprint y Google reCAPTCHA proporcionan protección antifraude en la nueva aplicación de checkout. La integración de estos sistemas requiere pasos específicos detallados a continuación.

Requisitos previos:

Asegúrate de que estás utilizando un token de Ventrata Checkout.
Este token es el mismo que tu Checkout ID. Son tokens especializados diseñados para ser públicos y pueden usarse de forma segura del lado del cliente para realizar solicitudes directamente a api.ventrata.com. Restringen el uso de determinados endpoints.

📒 NOTA

Si necesitas usar estos endpoints restringidos, utiliza tokens de conexión OCTO.

Ten en cuenta que todos los ejemplos usan JavaScript y paquetes específicos para este lenguaje.

Paso 1: Fingerprint

Los siguientes pasos describen el proceso de integración:

[Lado del cliente] Llame a GET /ventrata/checkout/config para obtener el objeto de configuración de checkout.

Asegúrate de usar la capacidad ventrata/checkout para obtener una respuesta correcta.

fetch("https://api.ventrata.com/octo/ventrata/checkout/config", {
   "headers": {
     "authorization": "Bearer <YOUR_TOKEN_HERE>",
     "octo-capabilities": "ventrata/checkout",
   },
   "method": "GET",
 });

[Lado del cliente] Carga el script JS de Fingerprint de forma global en todas las páginas usando fingerprintPublicKey del objeto de configuración como clave API.
[Lado del cliente] Antes de cargar la página de pago, llama a fp.get() con el cardPayments.fraudAssessment.id del objeto 'order (orden)'.
```
fp.get({ linkedId: cardPayment.fraudAssessment?.id });
```
[Fingerprint] Se genera una huella de forma interna y se envía a Ventrata mediante webhook.
[Lado del cliente] Sondea GET /orders/:id el endpoint hasta que cardPayments.fraudAssessment.fingerprintReceived se establezca en 'true'.

Información adicional

Usamos fingerprintjs-pro para la toma de huellas. Puedes consultar tu guía de inicio rápido para más detalles.

Una forma de integrar Fingerprint es incluir el paquete NPM de JavaScript en tu proceso de compilación:

import * as FingerprintJS from '@fingerprintjs/fingerprintjs-pro'   

const fpPromise = FingerprintJS.load({
   apiKey: "{fingerprintPublicKey}",
   endpoint: "https://fp.ventrata.com",
   scriptUrlPattern: "https://fp.ventrata.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js"
  });

Luego, antes de cargar la pantalla de pago, puedes usar la integración de la siguiente manera:

fpPromise.then(fp => fp.get({ linkedId: "{cardPayments.fraudAssessment.id}" }))

📒 NOTA

Recomendamos encarecidamente usar la integración NPM en lugar de la integración CDN para minimizar el riesgo de ser bloqueado por los bloqueadores de anuncios.

📒 NOTA

Recuerda implementar medidas sólidas de manejo de errores para detectar y gestionar errores desconocidos. Recomendamos seguir las mejores prácticas generales de manejo de errores.

Paso 2: Google reCAPTCHA

Los siguientes pasos describen el proceso de integración:

[Lado del cliente] Llama a GET /ventrata/checkout/config para obtener el objeto de configuración de checkout.

Asegúrate de usar la capacidad ventrata/checkout para obtener una respuesta correcta.

fetch("https://api.ventrata.com/octo/ventrata/checkout/config", {
   "headers": {
     "authorization": "Bearer <YOUR_TOKEN_HERE>",
     "octo-capabilities": "ventrata/checkout",
   },
    "method": "GET",
 });

[Lado del cliente] Carga el script JavaScript de reCAPTCHA de forma global en todas las páginas. Usa la recaptchaEnterpriseSiteKey del objeto de configuración obtenido en el Paso 1.
```
<script src="https://www.recaptcha.net/recaptcha/enterprise.js?render={recaptchaEnterpriseSiteKey}">
```

[Lado del cliente] Ejecuta regularmente la generación de tokens en segundo plano para activar el procesamiento de aprendizaje automático de reCAPTCHA. Esto debe hacerse en intervalos de 10 segundos. Llama a la función grecaptcha.enterprise.execute con los parámetros recaptchaEnterpriseSiteKey y action: CHECKOUT. A continuación se muestra un ejemplo de cómo podría verse esta generación:

function recaptchaIntervalStart(recaptchaEnterpriseSiteKey: string) {
   const intervalInSecs = 10; 
   const milliseconds = 1000;
   recaptchaIntervalID = window.setInterval(() => {
     if (window.grecaptcha?.enterprise?.ready) {
       window.grecaptcha.enterprise.ready(async () => {
         try {
       window.grecaptcha.enterprise.execute(recaptchaEnterpriseSiteKey, {
           action: "CHECKOUT",
           });
         } catch (e) {
           console.error("reCAPTCHA interval failure", e);
           Sentry.captureException(e);
         }
       });
     }
   }, intervalInSecs * milliseconds);
   return recaptchaIntervalID;
 }
 ....
 ....
 recaptchaIntervalStart(recaptchaEnterpriseSiteKey) // e.g. on `DOMContentLoaded` event

[Lado del cliente] Tras recibir una huella digital exitosa, actualiza el pedido con un token de reCAPTCHA generado por window.grecaptcha.enterprise.execute. El token debe generarse y el pedido actualizarse justo antes de que el usuario sea dirigido a la pasarela de pago.
```
const reCatpchaOrder = await cartService.updateOrder(
   orderForRecaptchaFlow.id,
   {
     currency: orderForRecaptchaFlow.pricing.currency,
     cardPayment: {
        fraudAssessment: {
          googleRecaptchaEnterprise: {
           token: recaptchaTokenFromExecuteFn,
           siteKey: recaptchaEnterpriseSiteKey,
         },
       },
     },
   },
 );
```
📒 NOTA
Repite este paso cada 60 segundos hasta que el pedido se confirme o hasta que un error crítico impida la inicialización de la pasarela de pago. Durante este proceso, es mejor detener el recaptchaIntervalStart del Paso 3 para evitar que Google invalide el token. Una vez que el pedido se haya actualizado correctamente, reanuda la generación de tokens en segundo plano.
El pedido se confirmará automáticamente una vez que se reciba el webhook de autorización de Adyen.