Todas las experiencias de compra en una plataforma para comercio unificado.

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.

Openpay es el procesador de pagos electrónicos de BBVA y ofrece una amplia gama de formatos de cobro como:

- Tarjetas de Crédito
- Tarjetas de Débito
- Tarjetas de Servicios
- Efectivo en Tiendas de Conveniencia
- Puntos Bancarios
- Monederos Electrónicos

Para poder conectar la plataforma de VTEX con el plugin de openpay, tienes que seguir 4 sencillos pasos:

Aquí puedes encontrar el detalle y los pasos para poder implementar la conexión entre VTEX y Openpay:

Creación de cuenta Sandbox (Pruebas)

Para poder empezar a utilizar nuestra plataforma es necesario que tengas una cuenta en nuestro ambiente de pruebas. Si aún no tienes una cuenta puedes hacerlo aquí, es completamente gratis y muy sencillo.

Creación de cuenta Google Tag Manager

El segundo paso es la creación de la cuenta con la que vamos a integrar el GTM. Recomendamos que se cree una cuenta exclusiva para la integración de VTEX con Openpay para evitar posibles conflictos con otros contenedores.

Importar contenedor Openpay

Descargue desde GitHub la última versión del Contenedor GTM-Openpay (archivo JSON) e impórtelo dentro de la cuenta GTM creada. 

Configuración GTM

Ingresar las llaves de autenticación de Openpay para realizar la configuración. 

Si se publicó correctamente, su GTM está listo para ser consumido por el sistema VTEX

Asociar GTM con VTEX

Introduzca su GTM ID cómo se indica, con esto VTEX insertará el código de GTM en su tienda en línea.

Registro de Afiliación

Registrar una afiliación de Openpay en el panel de Administración de VTEX. 

Importante: Para ambiente en producción capturar el Prefijo (LIVE_) + ID (identificador del comercio en Openpay)

Pago con Tarjeta de Crédito, Débito y Servicio.

Agregar las tarjetas que serán aceptadas dentro de su ecommerce, asociando la afiliación antes creada.

Pago en tiendas

Agregar la condición de pago para pago en efectivo en tiendas.

Pago vía SPEI

Agregar la condición de pago para pago con transferencia interbancaria.

Notificaciones de pagos Openpay

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. 

Podemos operar los siguientes formatos:

3d Secure

Reembolsos

Autenticación Selectiva

Meses sin intereses

Cambio de Moneda

Resuelve las dudas más frecuentes que se presentan en la integración:

Nuestro plugin de VTEX, por default tiene Autenticación Selectiva. Para configurar 3DS con VTEX, tienes que ponerte en contacto con el equipo de Openpay que te ayudarán a forzarlo sin que tengas que hacer modificaciones.

Este error es generado regularmente cuando se tiene mal configurado el GTM, se debe asegurar que las llaves de autenticación de Openpay han sido correctamente configuradas. Se recomienda ejecutar el GTM en modo preview, esto permitirá hacer un debug y detectar el error de manera puntual.
En caso de continuar con problemas, te pedimos levantar un ticket a soporte@openpay.mx con la evidencia del error. 

Se deberá hacer el cambio de llaves de Autenticación de Openpay, tanto en el GTM como en la afiliación que se registró en las configuraciones de VTEX. 

Por default las referencias de pago generadas por Openpay tienen un tiempo de vencimiento de 72 horas, para disminuir este tiempo se deberá poner en contacto con equipo de Openpay para solicitar el cambio a las configuraciones de su comercio.

VTEX proporciona su propio sistema de suscripciones que le permitirá realizar la gestión de suscripciones en su tienda. Por su parte, Openpay se encargará de validar y procesar estos cargos recurrentes.

Para operar con suscripciones dentro de VTEX, se debe poner en contacto con el equipo de Openpay para configurar su comercio y pueda recibir pagos recurrentes.

Los puedes hacer por medio de cualquiera de los medios de contacto con soporte de Openpay que se encuentran publicados en el sitio web.

Creación de cuenta Openpay Sandbox

Para poder empezar a utilizar nuestra plataforma es necesario que tengas una cuenta en nuestro ambiente de pruebas. Si aún no tienes una cuenta puedes hacerlo aquí, es completamente gratis y muy sencillo.

Entra al sitio web de Openpay y crea una cuenta en modo sandbox para hacer pruebas.

Entrar al Dashboard con los datos de acceso creados. 

En barra superior, ir al icono de engrane y hacer click en la opción Credenciales de API

Obtener ID (identificador del comercio), Llave privada y Llave pública (esta información se usará más adelante)

CONFIGURAR DEVICE ID EN GTM (GOOGLE TAG MANAGER)

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)

Descargue desde GitHub la última versión del Contenedor GTM VTEX (archivo JSON) y guárdelo en su ordenador (descargue aquí)

Ir a la URL http://www.google.com/tagmanager/ . Si no tiene una cuenta, hacer click en Crear cuenta, si ya tiene una cuenta, continuar con la siguiente sección.

Capture los datos solicitados y haga click en el botón Guardar al finalizar

  • Nombre de cuenta: por ejemplo “Openpay”
  • País: México
  • Configuración del contenedor: URL del sitio (es sólo informativo)
  • Plataforma objetivo: Sitio web

Aceptar Términos de uso para continuar

Importar contenedor Openpay

Descargue desde GitHub la última versión del Contenedor GTM-Openpay (archivo JSON) e impórtelo dentro de la cuenta GTM creada. 

Hacer login en http://www.google.com/tagmanager/ para la tienda que vamos a configurar

Se mostrará el dashboard principal. Ir al menú y hacer click en Administrador

 

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.

 

 

 

Hacer click en Importar contenedor

 

 

Haga click en Elija el archivo del contenedor, seleccione el archivo contenedor que descargó en el paso 1 y presione Abrir o Aceptar

En la opción Elegir espacio de trabajo presione el botón Nuevo

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)

 

Presione el botón Confirmar

Configuración GTM

Ingresar las llaves de autenticación de Openpay para realizar la configuración. 

Si se publicó correctamente, su GTM está listo para ser consumido por el sistema VTEX

 

Aparecerá el contenedor en su Tag Manager del lado izquierdo. Haga click en Variables

 

 

Ir a Variables definidas por el usuario y cambie los valores como se señala:



Si es ambiente Sandbox

  1. openpay_merchant_id: ID de su comercio en Openpay
  2. openpay_public_key: Llave pública de su comercio en Openpay
  3. openpay_sandbox_mode: true


Si es ambiente Producción

  1. openpay_merchant_id: ID de su comercio en Openpay
  2. openpay_public_key: Llave pública de su comercio en Openpay
  3. op_sandbox_mode: false

 

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.

 

 

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.

Si se publicó correctamente, su GTM está listo para ser consumido por el sistema VTEX, al cual le agregaremos el ID que obtuvimos en el paso 7

Asociar GTM con VTEX

Introduzca su GTM ID cómo se indica, con esto VTEX insertará el código de GTM en su tienda en línea.

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

 

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.

Registro de Afiliación

Registrar una afiliación de Openpay en el panel de Administración de VTEX. 

Importante: Para ambiente en producción capturar el Prefijo (LIVE_) + ID (identificador del comercio en Openpay)

Ir al administrador de Payment Provider de Vtex

Acceder a Transacciones > Pagos > Configuración > Afiliaciones

Hacer click en la opción Openpay

Capturar los campos solicitados.

Para ambiente Sandbox capturar:

  1. Application Key: ID (identificador del comercio en Openpay)
  2. Application Token: Llave privada (obtenida de Openpay)


Para ambiente Producción capturar:

    1. Application Key: Prefijo (LIVE_) + ID (identificador del comercio en Openpay)

      Datos

 

  1. Application Token: Llave privada (obtenida de Openpay)

Hacer click en el botón Salva

Configurar en Vtex los métodos de pago a emplear en el e-commerce (ver detalle)

Configurar en Openpay los webhook (ver detalle)

CONFIGURAR MÉTODOS DE PAGO EN VTEX

TARJETAS
Aquí se consideran todos los pagos por Tarjeta de Crédito, Débito y Servicio, siempre y cuando estén operados por Visa, MasterCard, American Express, Carnet. También se incluye los pagos con Puntos Bancomer, Santander y Scotiabank (POINTS).

Ir al administrador de Payment Provider en Vtex

 

  • Acceder al path Transacciones > Pagos > Configuración > Planes de pago y hacer click en el botón Agregar

 

Se mostrará una pantalla con diversas opciones donde hay que buscar y seleccionar el método de pago a configurar.

En la pantalla de configuración del método de pago seleccionado, hacer click en la afiliación de Openpay y marcarlo como activo

En la barra superior capturar la leyenda que corresponda al método de pago que se está configurando.

CONFIGURAR MÉTODOS DE PAGO EN VTEX

PAGO EN TIENDAS
Se muestra el número de referencia para realizar el pago en cualquiera de los establecimientos de la Red Paynet. Los establecimientos se pueden consultar en paynet.com.mx

Ir al administrador de Payment Provider en Vtex

 

  • Acceder al path Transacciones > Pagos > Configuración > Planes de pago y hacer click en el botón Agregar

 

Se mostrará una pantalla con diversas opciones donde hay que buscar y seleccionar el método de pago a configurar.

Nota: Sólo para los métodos de pago Pago en tiendas y Transferencias interbancarias seguir las siguientes indicaciones:

Pago en tiendas: Buscar en sección de Pago personalizado con la leyenda “Pago en tienda”

En la pantalla de configuración del método de pago seleccionado, hacer click en la afiliación de Openpay y marcarlo como activo

En la barra superior capturar la leyenda que corresponda al método de pago que se está configurando.

Nota: Sólo para los métodos de pago Pago en tiendas y Transferencias interbancarias seguir las siguientes indicaciones:
  1. Pago en tiendas: Pago en Tienda
  2. Transferencias Interbancarias: SPEI



Nota: Debido a configuraciones del conector, la leyenda a colocar en cada método de pago deberá de ser tal cual se indica en este paso

CONFIGURAR MÉTODOS DE PAGO EN VTEX

TRANSFERENCIAS INTERBANCARIAS
Son las transferencias interbancarias, como pueden ser SPEI o simplemente dar los datos de la cuenta CLABE para mostrar datos de transferencia del comercio.

Ir al administrador de Payment Provider en Vtex

 

  • Acceder al path Transacciones > Pagos > Configuración > Planes de pago y hacer click en el botón Agregar

 

 

Se mostrará una pantalla con diversas opciones donde hay que buscar y seleccionar el método de pago a configurar.

Nota: Sólo para los métodos de pago Pago en tiendas y Transferencias interbancarias seguir las siguientes indicaciones:

 

Transferencias interbancarias: Buscar en sección de Otro con la leyenda “SPEI”

 

 

En la pantalla de configuración del método de pago seleccionado, hacer click en la afiliación de Openpay y marcarlo como activo

En la barra superior capturar la leyenda que corresponda al método de pago que se está configurando.

Nota: Sólo para los métodos de pago Pago en tiendas y Transferencias interbancarias seguir las siguientes indicaciones:
  1. Pago en tiendas: Pago en Tienda
  2. Transferencias Interbancarias: SPEI



Nota: Debido a configuraciones del conector, la leyenda a colocar en cada método de pago deberá de ser tal cual se indica en este paso

Notificaciones de pagos Openpay

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. 

Ir al Dashboard de Openpay (Sandbox / Produccion)

En la barra superior hacer click en el icono de engrane y seleccionar “Configuraciones”

Hacer click en el botón Agregar para abrir el formulario que deberá ser llenado de la siguiente manera:

    1. URL: Capturar la como se muestra la siguiente cadena conformada por URL (https://vtex.openpay.mx/callbackvtex/) y el ID del comercio

      https://vtex.openpay.mx/callbackvtex/[ID]

      [ID]: ID del comercio obtenido en Openpay en la ruta Inicio > Configuraciones (icono engrane) > Credenciales API
    2. 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)

      3D Secure: Para los comercios que cuenten con 3D Secure activo, seleccionar Cargos > Completados, Fallidos y Cancelados.

    3. Usar autenticación de acceso básica: Seleccionar este campo, capturar los datos solicitados y hacer click en el botón Guardar


¿Cómo obtener usuario y contraseña para dar de alta una 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

 

    1. Ubicar el apartado de Webhooks. Si el webhook fue configurado correctamente habrá un registro en estado Verificado.
Validación webhook WooCommerce