VTEX 🅱️

07 noviembre 2024

Acepta pagos de tus productos y servicios con el plugin de Kushki en tu tienda VTEX.

Considerando el auge alcanzado por VTEX en la industria, Kushki ha desarrollado un plugin que te permite recibir o realizar pagos con tarjetas de crédito, débito, efectivo y transferencias. Esta plataforma es utilizada en cerca de 38 países a nivel mundial, con un aproximado de 3.200 tiendas activas.

A través de esta plataforma, tus clientes pueden ingresar sus datos de pago y finalizar su compra sin salir de VTEX. La integración del plugin de Kushki está disponible para tus clientes en Chile, Colombia, Ecuador, México y Perú.

Conoce los detalles de integración y configuración, siguiendo los pasos que se detallan a continuación.

En Colombia, nuestros clientes podrán habilitar los siguientes servicios:

1. Generación de credenciales e instalación general

1.1. Requisitos

Regístrate y obtén los productos y servicios de Kushki: Completa este formulario para incluir en tu tienda VTEX las mejores soluciones de pago del mercado y utilizar nuestro plugin en la tienda VTEX. Un asesor comercial te contactará para habilitar tu cuenta y brindarte las credenciales con las que podrás integrar este plugin.

1.2. Asignación del dominio de tu tienda

Para integrar el plugin de Kushki es necesario que generes las credenciales y las llaves públicas y privadas que se asociarán a tu comercio. Este proceso puedes realizarlo a través del ambiente de prueba (UAT) o de producción de tu comercio. Evaluaremos tu requerimiento.

Realiza lo siguiente:

1.2.1. Ingresa a tu cuenta de prueba (UAT) de Kushki o a tu cuenta de producción con el usuario y contraseña y selecciona Iniciar sesión.
1.2.2. En el menú lateral, escoge el módulo de Configuración.
1.2.3. Selecciona Plugins en la sección de Integraciones.
1.2.4. Elige el plugin de VTEX.

1.2.5. En Formulario de integración, indica el nombre del Dominio VTEX en el que deseas integrar el plugin.
1.2.6. Haz clic en Guardar. ¡Listo! Tu dominio ha sido creado con éxito. Una vez que hayas hecho clic en este botón, el sistema te mostrará la información de la Llave Pública y Privada asignada a tu comercio.

El siguiente video te mostrará el paso a paso que debes seguir desde tu cuenta de prueba UAT; sin embargo, este mismo aplica también para tu cuenta de producción.

Adicionalmente, es importante que tengas en cuenta que:

• Puedes actualizar el dominio de tu comercio, conservando las llaves públicas y privadas asociadas al mismo: para hacerlo, solo requieres modificar el nombre de tu comercio en el campo de Dominio VTEX, siguiendo los pasos del siguiente video:

• El sistema validará que el dominio no haya sido utilizado anteriormente y te notificará. En este caso, deberás crear un dominio diferente al utilizado por otro comercio.

2. Integración y configuración

2.1. Habilitar el plugin de Kushki en la tienda VTEX

Realiza los siguientes pasos para habilitar el plugin de Kushki en la tienda VTEX.

2.1.1. Inicia sesión en la plataforma VTEX.
2.1.2. En el menú lateral principal, selecciona el ícono de Configuración de la tienda ⚙️, el cual se encuentra en la parte inferior de la pantalla.
2.1.3. En PAGO, escoge Proveedores.
2.1.4. En proveedores, haz clic en el botón Nuevo proveedor en la parte superior derecha.
2.1.5. Selecciona el conector según el método de pago que vayas a configurar: Kushki-cash, Kushki-TRANSFER o KushkiCard.

2.1.6. Llena los campos de Autorización del proveedor para el método de pago seleccionado:
2.1.6.1. Clave de aplicación: clave de la aplicación de VTEX.
2.1.6.2. Token de aplicación: token de la aplicación de VTEX.

2.1.7. Llena en Información general el campo Nombre para el método de pago seleccionado.
2.1.8. En Control de pago configura los recuadros para el método de pago seleccionado:
2.1.8.1. Activar modo de prueba deja el recuadro en blanco para transaccionar de forma productiva.
2.1.8.2. Activar split de cobros y enviar destinatarios de pago (solo tarjeta): habilitación de la plataforma de VTEX para envío de facturas de manera automática. Esta configuración no se encuentra disponible; por esta razón, por favor deja el recuadro en blanco.

2.1.9. Llena los Campos de proveedor para el método de pago seleccionado:

2.1.9.1. País-Kushki: país en donde se habilitará el método de pago. Para transferencias, por favor ingresa uno de los siguientes códigos de acuerdo con el país que estás configurando:

• Colombia: COL
  
• Chile: CHL
  
• Ecuador: ECU
  
• México: MXN
  
• Perú: PER
  

2.1.9.2. Credencial ID (producción)-Kushki (efectivo y transferencia): identificación de la credencial del ambiente de producción de Kushki.
2.1.9.3. Llave pública (producción)-Kushki (efectivo y transferencia) o Public Merchant ID Producción (tarjeta): llave pública asignada en el ambiente de producción de tu comercio.
2.1.9.4. Llave privada (producción)-Kushki (efectivo y transferencia) o Private Merchant ID Producción (tarjeta): llave privada asignada en el ambiente de producción de tu comercio.
2.1.9.5. Credencial ID (prueba)-Kushki (efectivo y transferencia): identificación de la credencial del ambiente de prueba de Kushki.
2.1.9.6. Llave pública (prueba)-Kushki (efectivo y transferencia) o Public Merchant ID Test (tarjeta): llave pública asignada en el ambiente de prueba de tu comercio.
2.1.9.7. Llave privada (prueba)-Kushki (efectivo y transferencia) o Private Merchant ID Test (tarjeta): llave privada asignada en el ambiente de prueba de tu comercio.
2.1.9.8. Autorización y captura diferidos (tarjeta): activación/inhabilitación de procesamiento de pagos con autorización y captura para las transacciones recibidas por medio de tarjeta; las cuales al seleccionar Si serán capturadas manualmente por tu comercio.

2.1.10. Haz clic en el botón azul de Guardar.

2.2. Configurar las condiciones de pago

Sigue estas instrucciones para agregar una condición de pago a un conector de Kushki de acuerdo con los métodos de pago que requieras habilitar en tu tienda VTEX:

2.2.1. Métodos de pago

2.2.1.1. Efectivo (cash)

Puedes configurar las condiciones de pago para recibir dinero en efectivo por parte de tus clientes. Sigue los pasos a continuación:

2.2.1.1.1. Ingresa a tu tienda de administración de VTEX.
2.2.1.1.2. Haz clic en el ícono de Configuración de la tienda. ⚙️
2.2.1.1.3. Dirígete a la sección de PAGO y luego selecciona Configuración.
2.2.1.1.4. En la tabla de Condiciones de pago, haz clic en “+”.
2.2.1.1.5. Haz clic en Kushki-cash.
2.2.1.1.6. Activa la condición de pago de Kushki-cash, al deslizar el botón de Status.
2.2.1.1.7. Puedes también Agregar condiciones especiales, especificando la Fecha de expiración, el País de ubicación de tu cliente, las Políticas comerciales que apliquen en tu tienda, las Condiciones comerciales y el Nombre comercial al que aplican las condiciones especiales delimitadas.
2.2.1.1.8. Haz clic en Guardar.

2.2.1.2. Transferencia (transfer)

Puedes configurar las condiciones de pago para recibir transferencias de tus clientes.

Sigue los pasos a continuación:

2.2.1.2.1. Ingresa a tu tienda de administración de VTEX.
2.2.1.2.2. Haz clic en el ícono de Configuración de la tienda. ⚙️
2.2.1.2.3. Dirígete a la sección de PAGO y luego selecciona Configuración.
2.2.1.2.4. En la tabla de Condiciones de pago, haz clic en “+”.
2.2.1.2.5. Haz clic en Kushki-Transfer.
2.2.1.2.6. En Procesar con afiliación, selecciona KushkiTRANSFER.
2.2.1.2.7. Activa la condición de pago, al deslizar el botón de Status.
2.2.1.2.8. Puedes también añadir condiciones especiales, especificando la Fecha de expiración, el País de ubicación de tu cliente, la Política comercial que aplique en tu tienda, la Condición comercial y el Nombre de la cuenta al que aplican las condiciones especiales delimitadas.
2.2.1.2.9. Haz clic en Guardar.

2.2.1.3. Tarjeta (card)

Puedes configurar las condiciones de pago para recibir pagos por medio de tarjetas de crédito o débito.

Sigue los pasos a continuación:

2.2.1.3.1. Ingresa a tu tienda de administración de VTEX.
2.2.1.3.2. Haz clic en el ícono de Configuración de la tienda ⚙️.
2.2.1.3.3. Dirígete a la sección de PAGO y luego selecciona Configuración.
2.2.1.3.4. En la tabla de Condiciones de pago, haz clic en “+”.
2.2.1.3.5. Busca la condición de pago de la Franquicia de tarjeta con la que recibirás pagos por este método de pago.

2.2.1.3.6. En Procesar con afiliación, selecciona el conector de KushkiCards.
2.2.1.3.7. Activa la condición de pago de KushkiCards, al deslizar el botón de Status.
2.2.1.3.8. En Pago al contado o en cuotas? puedes especificar si tu comercio recibirá o no pagos diferidos.

2.2.1.3.8.1. Si seleccionas En Cuotas, debes especificar el Número total de cuotas (intervalo 1-12 o únicas 1,3,6,12), el valor de la Cuota Mínima, el Método de facturación (inicio o fin del periodo), Establecer tasa de interés y activar los Intereses externos.

2.2.1.3.9. Para las dos opciones (En Cuotas o Al contado), puedes también Agregar condiciones especiales, especificando la Fecha de expiración, el Emisor de la tarjeta, las Políticas comerciales que apliquen en tu tienda, las Condiciones comerciales y el Nombre de la cuenta al que aplican las condiciones especiales delimitadas.
2.2.1.3.10. Haz clic en Guardar.

2.2.2. Personalización del conector

Si requieres personalizar el nombre de los conectores de Kushki que has configurado en tu tienda para recibir pagos con diferentes métodos de pago, puedes hacerlo con los siguientes pasos:

2.2.2.1. Ingresa a tu tienda de administración de VTEX.

2.2.2.2. Haz clic en el ícono de Configuración de la tienda ⚙️.

2.2.2.3. Dirígete a la sección de STOREFRONT y luego selecciona Checkout.
2.2.2.4. Selecciona el sitio web de tu tienda, haciendo clic en el ícono de configuración 2.2.2.5 Dirígete a la pestaña de Código y en Archivos, selecciona checkout6-custom.css.
2.2.2.6. Añade dos líneas de código para personalizar los conectores de pago de Kushki que has configurado. Puedes utilizar los siguientes ejemplos:

2.2.2.6.1. Conector de transferencia

/* /files/checkout5-custom.css */

[id="payment-group-kushki - TransferPaymentGroup"] span {display: none;}
[id="payment-group-kushki - TransferPaymentGroup"]:after {content: "XXX";}

2.2.2.6.2. Conector de efectivo

/* /files/checkout5-custom.css */

[id="payment-group-kushki - CashPaymentGroup"] span {display: none;}
[id="payment-group-kushki - CashPaymentGroup"]:after {content: "XXX";}

2.2.2.7. Haz clic en Guardar para configurar los cambios.

2.2.3. Agregar una condición especial de pago

Para agregar una condición especial para uno de los conectores, sigue la ruta Configuración de la tienda ⚙️ > PAGO > Configuración > Condiciones de pago > Selecciona el conector en donde requieres agregar la condición especial >+ Agregar condición especial> Podrás agregar condiciones tales como: Fecha de vencimiento, _Emisor de la tarjeta, Política comercial (Canal de ventas), Condición comercial o Nombre de la cuenta.

Una vez añadida una condición especial, podrás activarla deslizando el botón de Estatus a Activa. > Haz clic en Guardar. Esta configuración será automáticamente asociada al conector que ha sido configurado. Podrás revisar todas las condiciones de pago de los diferentes métodos de pago que tengas configurados en la ruta Configuración de la tienda ⚙️> PAGO> Configuración > Condiciones de pago.

2.2.3.1. Configurar las políticas comerciales

Para configurar las Políticas comerciales; sigue la ruta Menú lateral principal > Configuración de la tienda ⚙️ > CANALES > Políticas comerciales y asegúrate que tanto el código del país como la moneda correspondan a las del país de tu comercio.

2.2.3.2. Configurar las políticas de envío

A su vez, te recomendamos revisar la configuración de las Políticas de envío, ingresando al Menú lateral principal > ícono de Envío > Estrategia de envío> Muelles y asegúrate que el muelle que corresponde al país del comercio esté activo. Para activarlo; haz clic en el ícono de los 3 puntos > selecciona Editar > arrastra la Casilla deslizable que aparece en la parte superior derecha de la pantalla para Activar el muelle seleccionado.

2.3. Configuraciones adicionales

Para tu tienda en Colombia es necesario realizar una configuración adicional con el fin de que las cifras de las transacciones realizadas no contengan decimales; de esta forma, evitarás inconsistencias en el proceso de compra y venta.

La ruta que debes seguir para realizar dichas configuraciones adicionales en VTEX es Configuración de la tienda > Pedidos > Configuración> En el campo General que se encuentra disponible en la sección de Carrito y luego en Pedidos, ingresa el número 0 (cero) en el campo de Casillas decimales que se considerarán > Presiona el botón Guardar para aplicar tus cambios correctamente.

2.4. Actualización de la app de Kushki en tu tienda VTEX

Para actualizar la app de Kushki en tu tienda VTEX puedes realizar alguna de las siguientes dos opciones:

Opción A: A través del comando en la CLI de VTEX IO

También puedes ejecutar un comando utilizando la interfaz de línea de comando (en inglés, Command Line Interface) VTEX IO CLI.

Asegúrate de:

1. Validar que tengas instalado el VTEX IO CLI.
   
2. Utilizar el VTEX IO CLI en tu tienda de administración de VTEX.
   
3. Ejecutar el siguiente comando:
   vtex install kushkipartnercl.kushki-app@0.x.
   
4. Validar que la app de Kushki Payment Authentication Kushki App se encuentre instalada.

Opción B: A través de la aplicación de Kushki (próximamente)

1. Ingresa a tu tienda de aplicaciones de VTEX.
   
2. En el menú lateral izquierdo, selecciona el ícono de Apps .
   
3. En HUB DE EXTENSIONES, ingresa al Gestión de aplicaciones.
   
4. Busca la aplicación de pago de Kushki llamada Payment Authentication Kushki App.
   
5. En el botón de Configuración, valida que la casilla de verificación del ambiente de prueba (test environment) no se encuentre seleccionada.
   
6. Haz clic en Guardar.
   

3. Desinstalación

Si requieres eliminar las credenciales de tu comercio y crear un nuevo dominio para tu tienda, puedes hacerlo a través del ambiente de prueba (UAT) de tu comercio y posteriormente notificarnos acerca de este requerimiento.

Realiza los pasos que se indican a continuación:

3.1. Ingresa a tu cuenta de prueba (UAT) con tu usuario y contraseña. Selecciona Iniciar sesión.
3.2. En el menú lateral izquierdo, selecciona Desarrolladores.
3.3. Haz clic en Credenciales.
3.4. Selecciona la Credencial que deseas eliminar.
3.5. Haz clic en el ícono de los tres puntos (…) que aparece a la derecha de la pantalla y haz clic en Eliminar.
3.6. Selecciona nuevamente Eliminar.

No olvides notificarnos acerca del proceso que acabas de realizar.

Si lo requieres, puedes generar un nuevo dominio para tu comercio, realizando los pasos que se indican en el apartado de generación de credenciales

El siguiente video te mostrará el paso a paso para realizar la eliminación de las credenciales asociadas a tu comercio:

En el siguiente video te mostramos cómo desactivar las credenciales de tu comercio: