Vtex

VTEX es una plataforma que acelera la transformación de empresas de todo el mundo unificando las experiencias de consumo en todos los canales de venta.

Los plugins Openpay para la plataforma Vtex permiten configurar y añadir nuestros métodos de pago soportados (tarjeta de crédito/débito) dentro del flujo compra de su tienda en línea.

Para poder configurar el plugin de Openpay en Vtex se debe seguir el siguiente flujo:

Crear cuenta en Openpay

Para comenzar a utilizar nuestra plataforma Openpay es necesario que tenga una cuenta en nuestro ambiente de pruebas (Sandbox). Si aún no la tiene la puede crear siguiendo estos sencillos pasos:
  1. Ir al sitio web de Openpay y crear cuenta.
  2. Entrar al Dashboard con los datos de acceso creados
  3. En barra superior, ir al icono de engrane y hacer click en la opción Credenciales de API
  4. Obtener ID (identificador del comercio), Llave privada y Llave pública (esta información se usará más adelante).
Importante: para procesar cargos con Vtex, favor de ponerse en contacto con Soporte Openpay (soporte@openpay.co) para configurar correctamente su comercio.

Configurar Device ID en GTM

Para que su tienda VTEX funcione correctamente con Openpay, se requieren datos adicionales que se obtienen a través de Google Tag Manager (recomendamos que se cree una cuenta exclusiva para la integración de VTEX con Openpay para evitar posibles conflictos con otros contenedores).

Crear cuenta en GTM

  1. Ir a la URL http://www.google.com/tagmanager/ . Si no tiene una cuenta, hacer click en Crear cuenta, si ya tiene una cuenta, saltarse estos pasos.
  2. Capture los datos solicitados y haga click en el botón Guardar al finalizar
    • Nombre de cuenta: por ejemplo “Openpay”
    • País: Colombia
    • Configuración del contenedor: URL del sitio (es sólo informativo)
    • Plataforma objetivo: Sitio web
  3. Aceptar Términos de uso para continuar

Importar contenedor Openpay

  1. Descargue desde GitHub la última versión del Contenedor GTM VTEX (archivo JSON) y guárdelo en su ordenador (descargue aquí)
  2. Ingresar con su cuenta en http://www.google.com/tagmanager/ para la tienda que vamos a configurar
  3. Se mostrará el dashboard principal. Ir al menú y hacer click en Administrador
  4. Hacer click en Importar contenedor
  5. Haga click en Elija el archivo del contenedor, seleccione el archivo contenedor que descargó en el paso 1 y presione Abrir o Aceptar
  6. En la opción Elegir espacio de trabajo presione el botón Nuevo
  7. Elija un nombre para su Espacio de trabajo (Si no está seleccionada, elija la opción Combinar / Cambiar el nombre de etiquetas, activadores y variables en conflicto)
  8. Presione el botón Confirmar

Configuración del contenedor Openpay

  1. Una vez importado, el contenedor aparecerá en su Tag Manager del lado izquierdo. Haga click en Variables
  2. Ir a Variables definidas por el usuario y cambie los valores como se señala:
    • Si es ambiente Sandbox
      • openpay_merchant_id: ID de su comercio en Openpay
      • openpay_public_key: Llave pública de su comercio en Openpay
      • openpay_sandbox_mode: true
    • Si es ambiente Producción
      • openpay_merchant_id: ID de su comercio en Openpay
      • openpay_public_key: Llave pública de su comercio en Openpay
      • op_sandbox_mode: false
  3. Guarde los cambios y haga click en el botón superior derecho Enviar. Esto inicia el proceso de publicación de su contenedor con los cambios que realizó en las variables.
  4. En la pantalla “Configuración de envío” validar que se muestre seleccionada la opción “Publicar y crear versión” y que en la parte inferior se muestre “Entorno de publicación Live”. Hacer click en el botón Publicar.
  5. Si se publicó correctamente, su GTM está listo para ser consumido por el sistema VTEX.
Importante: Una vez importado de manera correcta el contenedor Openpay, deberá publicarlo nuevamente para que los cambios se apliquen en su contenedor original.

Vincular GTM con VTEX

  1. En las opciones de contenedor, del lado derecho de la pantalla aparecerá su identificador de GTM que tiene un formato como éste: GTM-A1B2CDE. Debe guardar el ID ya que se utilizará más adelante.
  2. Ingresar a Vtex e ir a Panel de Administración > Configuración de la tienda > Checkout y dar click en el botón con icono de engrane.
  3. Hacer click en la opción Checkout, introduzca su GTM ID y presione Guardar. Con esto VTEX insertará el código de GTM en su tienda en línea.

Configurar Payment Provider en Vtex

Registro de afiliación con Openpay

Registrar una afiliación de Openpay en el panel de Administración de VTEX, sigue estos pasos: 

  1. Ir al administrador de Payment Provider de Vtex
  2. Acceder a Transacciones > Pagos > Configuración > Afiliaciones
  3. Buscar y seleccionar el conector de  Openpay
  4. Capturar los campos solicitados.
    • Para ambiente Sandbox capturar:
      • Application Key: ID (identificador del comercio en Openpay)
      • Application Token: Llave privada (obtenida de Openpay)
    • Para ambiente Producción capturar:
      • Application Key: Prefijo (LIVE_) + ID (identificador del comercio en Openpay)
      • Application Token: Llave privada (obtenida de Openpay)
  5. Hacer click en el botón Salva

Configura las condiciones de pago

Una vez creada la afiliación, procedemos a agregar los métodos de pago soportados por Openpay para está plataforma de Ecommerce. 

  1. TARJETAS
    Aquí se consideran todos los pagos por Tarjeta de Crédito, Débito y Servicio, siempre y cuando estén operados por Visa y MasterCard.

Para configurar este método de pago debemos de:

    1. Ir al administrador de Payment Provider en Vtex
    2. Acceder al path Transacciones > Pagos > Configuración > Planes de pago y hacer click en el botón Agregar
    3. En la pestaña Condiciones de pago, haz clic en +.
    4. Luego, en la sección tarjetas, elige el medio de pago que quieras agregar.
    5. Nombrar la regla para identificar el medio de pago y activarlo en el campo Status.
    6. En el campo Proceso con la afiliación, elige la afiliación creada en el paso anterior.
    7. Haz clic en Guardar.
  1. PAGO EN TIENDAS
    Recibe el pago en efectivo de tus ventas online en cualquiera de los puntos de recaudo a nivel nacional. Fácil y rápida implementación. Tu cliente solo deberá acudir con su referencia y hacer su pago. 

Para configurar este método de pago debemos de:

    1. Ir al administrador de Payment Provider en Vtex
    2. Acceder al path Transacciones > Pagos > Configuración > Planes de pago y hacer click en el botón Agregar
    3. En la pestaña Condiciones de pago, haz clic en +.
    4. Buscar en sección de Pago personalizado con la leyenda “Pago en tienda”
    5. Nombrar la regla para identificar el medio de pago y activarlo en el campo Status.
    6. En el campo Proceso con la afiliación, elige la afiliación creada en el paso anterior.
    7. Haz clic en Guardar.

Validar Configuración

  1. Realizar procesos de compra con diferentes escenarios (puede ver mas detalle en la sección Pruebas)
  2. Verificar que el resultado para cada escenario es el esperado. En caso de no obtener el resultado esperado se deberá validar nuevamente la configuración y en caso de tener un resultado exitoso, se deberá solicitar a Openpay una cuenta de producción.

Configuración de webhooks

Obtener usuario y contraseña para dar de alta webhook

  1. Ir a Vtex e ingresar con usuario Owner
  2. Ir al path Gestión de la cuenta > Cuentas > Openpay
  3. Una vez que el Owner genere una Cuenta y Administre el Permiso, se mostrará por una sola ocasión una clave que deberá guardar
  4. En el formulario de Openpay (Sandbox / Produccion)para dar de alta un webhook, capturar en el campo usuario el Access key y en el campo contraseña la cadena larga obtenidos en el paso anterior.

Registrar Webhook en Openpay

En las configuraciones, es necesario la creación de un Webhoook, para notificar cuando se ha realizado un cargo a una tarjeta o cuando un depósito se ha realizado con éxito. La creación de un Webhook dentro de Openpay se realiza como se indica a continuación:
  1. Ir al Dashboard de Openpay (Sandbox / Produccion)
  2. En la barra superior hacer click en el icono de engrane y seleccionar “Configuraciones”
  3. Hacer click en el botón Agregar para abrir el formulario que deberá ser llenado de la siguiente manera:
    • URL: Capturar como se muestra la siguiente cadena conformada por URL (https://sandbox-api.openpay.mx/vtex/v1/sandbox-callbackVtex/) y el ID del comercio. https://sandbox-api.openpay.mx/vtex/v1/sandbox-callbackVtex/[ID]

      [ID]: ID del comercio obtenido en Openpay en la ruta Inicio > Configuraciones (icono engrane) > Credenciales API
    • Eventos asociados: Se sugiere dejar el valor por default (Todos los eventos) pero en caso de no querer recibir todas las notificaciones, hacer click en Personalizar eventos y seleccionar solo los deseados (es obligatorio seleccionar al menos Cargos > Completados)
    • Usar autenticación de acceso básica: Seleccionar este campo, capturar los datos solicitados y hacer click en el botón Guardar
  4. Ubicar el apartado de Webhooks. Si el webhook fue configurado correctamente habrá un registro en estado Verificado.

Solicitud de configuración avanzada Vtex Colombia

Enviar un correo a Soporte Openpay (soporte@openpay.co) solicitando configuraciones avanzadas para procesar cargos en la plataforma Vtex. Tomar como base el siguiente formato para el envió de correo: 

Asunto: Configuraciones Avanzadas VTEX Colombia. 

Buen día

Solicito las configuraciones avanzadas para VTEX Colombia, les comparto los datos del comercio a configurar: 

Nombre del comercio: Test

Merchant_ID : mxxxxxxxxxxxxxxxxxxxx

Saludos !

Ponte en contacto con nosotros: