Instalación plugin de Clip VTEX Nativo

Para instalar clip, debes iniciar sesión con tus credenciales de VTEX.

Una vez que estés logueado, dirígete a la sección Configuración de la tienda -> PAGO -> Proveedores y presiona el botón 'Nuevo proveedor'.

Busca 'ClipCheckoutNativo' en el listado y haz clic sobre dicha opción para continuar el proceso.

Luego podrás ver la siguiente pantalla donde se solicitan las credenciales necesarias para la integración y la elección del tipo de captura de la transacción. Ingresa las credenciales de clip solicitadas en pantalla, elige el tipo de captura y presiona el botón Guardar.

Configurar condiciones de pago

Para continuar con el proceso de instalación, tendrás que configurar las condiciones de pago para clip. Dirígete a la pestaña Condiciones de pago y presiona el ícono +. Ubica la opción de pago que desees, asocialo al proveedor que acabas de crear, activa la condición y haz clic en el botón Guardar para finalizar la configuración.

🚧

Los cambios en las condiciones de pago pueden tardar hasta 10 minutos para aplicarse en el checkout de tu tienda VTEX.

Prevención de fraudes

La prevención de fraudes se hace por medio de Cybersource.

Para el correcto funcionamiento de las transacciones con Cybersource, se deberá inyectar un script en la tienda VTEX, esto permitirá enviar el 'Fingerprint' previo al procesamiento del pago. Para configurarlo sigue los pasos que se muestran a continuación:

1. Dirígete a Configuración de la tienda -> Storefront -> Checkout y presiona sobre el ícono de configuración de la opción 'Default'.

   
   

2. Presiona sobre el botón 'Código' e ingresa al archivo llamado 'checkout6-custom.js'

   
   

3. Ingresa el siguiente código y luego presiona 'Guardar':

   JavaScript

   // Generate a UUID
     let session_id = window.crypto.randomUUID() || self.crypto.randomUUID()
     window.vtex.deviceFingerprint = session_id;
     // Create a script tag
     let scriptTag = document.createElement('script');
     scriptTag.id = 'cybersource';
     scriptTag.src = `https://tools.clip.mx/transparent/risk?session_id=${session_id}`;
     // Append the script tag to the document
     document.head.appendChild(scriptTag);
   

   
   

Con estas configuraciones ya tendrás disponible Clip para operar en VTEX.