Skip to Content
Pagos en líneaBotón de pagosPluginsVTEXTransparente

Checkout Transparente VTEX y Bold

¡Hola! Bienvenido a la guía de integración de Bold con VTEX. Estamos muy felices de acompañarte en este proceso para que comiences a recibir pagos directo desde de tu tienda.

Con esta integración, tus clientes podrán pagar directamente usando tarjetas de crédito/débito, PSE, Botón Bancolombia, Nequi o QR Bre-B sin salir de tu sitio. 👑

Antes de empezar 📝

Para que la integración sea un éxito, asegúrate de tener a la mano:

  1. Acceso como administrador a tu tienda VTEX.
  2. Una cuenta activa Bold y acceso como administrador. Si aún no la tienes, puedes crearla en un par de minutos desde nuestra web oficial bold.co .
  3. ¡Muchas ganas de hacer crecer tu negocio!

Paso 1: Obtener las llaves en tu cuenta Bold 🔐

Para que VTEX y Bold se comuniquen correctamente, necesitas tus llaves de seguridad de producción.

  1. Inicia sesión en tu Cuenta de Bold .
  2. Dirígete a la pestaña de Botón de pagos en la parte superior.
  3. Allí encontrarás tus llaves de producción. Copia la llave de Identidad y la llave Secreta. Las necesitarás más adelante para configurar el proveedor en VTEX.
    • Puedes ver más información acerca de las llaves aquí.
Llaves de integración Botón de pagos

Paso 2: Instalar la Payment App de Bold 📦

Para que VTEX procese el flujo de pagos con nuestra plataforma, instalaremos la aplicación de pagos oficial necesaria para procesar pagos con autenticación 3D Secure y pagos con QR Bre-B.

Accede al panel de configuración de la Payment App: Ingresa a la siguiente URL reemplazando mi-tienda-vtex por el nombre de tu cuenta:

https://{{mi-tienda-vtex}}.myvtex.com/admin/apps/boldcolombia.bold-vtex-payment-app@0.1.1/setup

Se abrirá una ventana en tu navegador con la página de instalación de la aplicación de Bold. Haz clic en el botón Install (Instalar) para agregarla a tu tienda.

Instalación de la app desde panel
info

Si por alguna razón no puedes instalar la aplicación desde el panel de VTEX, no te preocupes, también puedes hacerlo a través de la terminal de comandos usando VTEX IO CLI. Solo sigue estos pasos:

Debes tener VTEX IO CLI  instalado en tu computador para poder agregar nuestra Payment App.

  1. Abre la terminal de comandos en tu computador.
  2. Inicia sesión en tu cuenta de VTEX ejecutando el siguiente comando (reemplaza mi-tienda-vtex por el nombre de tu tienda):
vtex login mi-tienda-vtex
  1. Ejecuta el siguiente comando para instalar la aplicación de Bold:
vtex install boldcolombia.bold-vtex-payment-app@0.1.1

Una vez instalada la aplicación, ya estás listo y durante el proceso de pago si el cliente elige un método de pago tarjeta o QR Bre-B, se abrirá un modal para la autenticación 3D Secure o para mostrar el código QR respectivamente, sin redireccionar al cliente a otra página.

Modal de pago con autenticación 3D Secure

Paso 3: Configurar el script de Device Fingerprint 🛡️

¡La seguridad de tus ventas es nuestra prioridad! El Device Fingerprint es un script que nos permite identificar el dispositivo desde el cual el titular de la tarjeta realiza la compra, ayudándonos a prevenir el fraude.

  1. En el panel de administrador de VTEX, dirígete a Store Settings (Configuración de la tienda) > Checkout (o Checkout UI Custom).
  2. Haz clic en el icono del engranaje ⚙️ en el bloque de tu sitio.
  3. Selecciona la pestaña Code (Código) y luego haz clic en el archivo checkout6-custom.js o checkout5-custom.js (dependiendo de tu versión).
  4. Copia el siguiente código y pégalo al final del archivo:
!function(){var e="https://checkout.bold.co/library/vtexDeviceFingerprint.js?v="+(new Date).getTime(),t=document.createElement("script");t.src=e,t.type="text/javascript",t.async=!0,t.onerror=function(){var e="SCRIPT_LOAD_FAILED ["+(new Date).getTime()+"]: Remote script didn't load correctly.";try{window.vtex=window.vtex||{},window.vtex.deviceFingerprint=btoa(e)}catch(n){var t=n&&n.message?n.message:String(n);window.vtex.deviceFingerprint=e+" [ENC_ERR: "+t.slice(0,50)+"]"}},(document.getElementsByTagName("head")[0]||document.body).appendChild(t)}();
  1. Haz clic en Save (Guardar) para aplicar los cambios.
Script Device Fingerprint en VTEX

Paso 4: Configurar el Proveedor de Pagos en VTEX (Gateway) 🛠️

Ahora vamos a decirle a tu tienda que Bold será el encargado de procesar las ventas de tus clientes.

  1. En el panel de VTEX, ve a Store Settings (Configuración de la tienda) > Providers (Proveedores).
Menú Configuración de proveedores
  1. Haz clic en el botón New Provider (Nuevo proveedor) y busca Bold.
  2. Completa el formulario de configuración:
    • Application Key: Ingresa aquí la llave de identidad que copiaste en el Paso 1.
    • Application Token: Ingresa aquí la llave secreta que copiaste en el Paso 1.
    • Control de pago: Desactiva “Activar modo de prueba” para empezar a recibir pagos reales.
    • Liquidación automática: Deja seleccionado Utilizar comportamiento recomendado por el procesador de pagos.
    • Requires document: Activa esta opción para que tus clientes ingresen su número de identificación al momento de pagar (obligatorio para pagos empresariales y validación 3DS).
    • Campos del proveedor > account_name: Ingresa el Nombre de la cuenta principal de tu tienda.
  3. Haz clic en Save (Guardar).
Proveedor Bold configurado
  1. Aparecerá un mensaje Esta integración requiere que la app Connector Bold esté instalada para funcionar correctamente.
    • Haz clic en el enlace para instalar la aplicación Connector Bold en tu tienda VTEX.
    • Sigue las instrucciones para completar la instalación, da clic en el botón Instalar.
Advertencia instalación conector Bold
Instalar conector Bold
  1. Una vez instalada la aplicación, regresa a la sección de Providers (Proveedores) y asegúrate de que el proveedor de Bold esté activo.
Proveedor Bold activo

Paso 5: Activar los Métodos de Pago 💳

¡Ya casi terminamos! Solo falta habilitar los medios de pago que quieres ofrecer a tus clientes y conectarlos con Bold.

Tenemos disponibles los siguientes métodos para ti:

  • Tarjetas: Mastercard, Visa, American Express, Diners, Discover, Mastercard Debit.
  • Métodos alternativos: PSE, Botón Bancolombia, QR Bre-B, Bold Nequi.
    • Para usar QR Bre-B como método de pago, debes contar con una Cuenta Bold  y haber activado la funcionalidad de QR en tu cuenta.

Para activar cada uno, sigue estos pasos:

  1. Ve a Store Settings (Configuración de la tienda) > Settings (Configuración).
Menú Configuración de la tienda
  1. Ve a la pestaña Payment Conditions (Condiciones de pago) y haz clic en el botón ”+”.
Agregar método de pago
  1. Selecciona el método de pago que deseas configurar de la lista nativa de VTEX (por ejemplo, Mastercard o PSE). Revisa el listado del inicio de este paso para conocer todos los métodos disponibles.
Agregar método de pago
Agregar método de pago
  1. En el campo Process with provider (Procesar con proveedor), asegúrate de seleccionar Bold.
  2. Cambia el estado de la condición a Active (Activo).
  3. Da clic en Save (Guardar).
Guardar método de pago Bold

Listo, verás que el método de pago ahora aparece como activo en tu tienda y está conectado con Bold para procesar las ventas de tus clientes de forma transparente, sin redirecciones.

Método de pago Bold activo
Método de pago Bold activo

¡Tip Pro! 💡: Repite este Paso 5 por cada tarjeta o método alternativo que desees ofrecer en tu tienda.

¡Y eso es todo! 🎉

Ya tienes tu tienda VTEX conectada de forma transparente con Bold. Ahora tus clientes podrán disfrutar de una experiencia de pago impecable y rápida.

Configuración adicional pagos con PSE 🏦

Si vas a ofrecer el método de pago PSE, es necesario la instalación de un conector adicional llamado Banks for PSE de VTEX. Este conector permite mostrar la lista de bancos disponibles para que tus clientes puedan elegir su banco al momento de pagar con PSE.

Instalación de la aplicación Banks for PSE

  1. Acceda al Admin VTEX.
  2. En la sección Configuración de la cuenta, acceda Apps > App Store.
  3. En el campo Todas las apps, escribelo Banks for PSE.
  4. Haga clic en Instalar en la aplicación Banks for PSE.
  5. En la pantalla de VTEX APP Store, haga clic en OBTENER APP.
  6. Escribe el nombre de tu tienda (en minúsculas y sin espacios).
  7. Haga clic en Confirmar.
  8. Haga clic en Instalar para terminar.

Configuración de la aplicación Banks for PSE

  1. Acceda al Admin VTEX.
  2. En la sección Configuración de la cuenta, acceda Apps > Mis Apps.
  3. En el campo App Store, escribelo Banks for PSE.
  4. Haga clic en Configuración en la aplicación Banks for PSE.
  5. En Connector used to process the PSE payment, seleccione Bold como conector para procesar los pagos con PSE.
  6. Haga clic en Guardar.

Finalmente, asegúrate de que el método de pago PSE esté activo y configurado para procesar con Bold siguiendo los pasos del Paso 5 de esta guía y buscar el método de pago PSE en la lista nativa de VTEX.

¿Necesitas ayuda? 🤝

  • Documentación adicional:

  • Soporte técnico: Contacta al equipo de soporte de Bold a través de soporte.online@bold.co

  • Soporte de integraciones: Contacta a nuestro experto en integraciones que te podrá ayudar a resolver tus dudas técnicas relacionadas con las integraciones que te ofrecemos aquí.

  • Dudas de integración: En esta sección encuentras una guía de resolución de problemas generales de las integraciones con Bold, así como una sección de preguntas frecuentes sobre los pagos en línea.

Esperamos que esta documentación te ayude a aprovechar al máximo Bold desde tu tienda en línea.

#SomosBold 🚀

Last updated on
RedirecciónJumpseller