Vtex

CONFIGURACIÓN DE PLUGIN OPENPAY EN SITIO WEB CON VTEX

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

A continuación, el detalle de cada punto señalado en el diagrama:

1.- CREAR CUENTA EN OPENPAY

1. Ir al sitio web de Openpay y crear cuenta.

Note: Para hacer pruebas, crear la cuenta en ambiente Sandbox. Para operación real, pide tu pase a Producción

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 API Credentials

Credenciales API

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

Datos
Note: Las Credenciales de API son diferentes en cada ambiente. Debe guardar estos datos por separado y no confundirlos para que los ambientes de Sandbox y Producción funcionen correctamente.

2.- 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)

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

2. Ir a la URL http://www.google.com/tagmanager/ . Si no tiene una cuenta, hacer click en Crear cuenta, si ya tiene una cuenta, ir al paso 5

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

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

4. Aceptar Términos de uso para continuar

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

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

7. 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.

8. Hacer click en Importar contenedor

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

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

11. 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)

12. Presione el botón Confirmar

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

14. 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 Production

      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

15. 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.

16. 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

    1. 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

18. 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.

3.- CONFIGURAR PAYMENT PROVIDER EN VTEX

  1. Ir al administrador de Payment Provider de Vtex

2. Acceder a Transacciones > Pagos > Configuración > Afiliaciones

3. Hacer click en la opción OpenpayV2

4. Completar la configuración de la conexión, contemplando los siguientes puntos:

    1.  Seleccione el modo de operación: Test (para realizar pruebas) o Producción.
    2. Autenticación con Openpay: Ingresar las credenciales de API obtenidas en el dashboard Openpay.
      1. Application Key: ID del Comercio (merchantId)
      2. Application Token: Llave privada (obtenida de Openpay)
    3. País: Seleccionar el país donde se encuentra (México, Colombia)
    4. How to process the charge? Define el tipo de cargo que se realizará: Directo, 3D Secure o Autenticación Selectiva.
    5. Affiliation Name (opcional): Alias asociado a una afiliación.

5. Hacer click en el botón Salva

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

7. Configurar en Openpay los webhook (ver detalle)

4.- VALIDACIÓN DE CONFIGURACIÓN CORRECTA

  1. Realizar procesos de compra con diferentes escenarios (puede ver mas detalle en la sección Testing)

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.

Note: En el caso del método de Pago en Tiendas, se debe validar que en la pantalla “Confirmación de pago” se muestre correctamente el botón “Referencia” como se ve en la siguiente imagen

Validación

CONFIGURAR MÉTODOS DE PAGO EN VTEX

En Openpay contamos con 3 formas de pago:

    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, MasterCard, American Express, Carnet. También se incluye los pagos con Puntos Bancomer, Santander y Scotiabank (POINTS).
    1. 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.
  1. 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

Para configurar cualquiera de los métodos de pago mencionados 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. 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:

      1. Pago en tiendas: Buscar en sección de Pago personalizado con la leyenda “Pago en tienda”.
      2. Transferencias interbancarias: Buscar en sección de Otro con la leyenda “SPEI”.

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

5. En la barra superior capturar la leyenda que corresponda al método de pago que se está configurando.Note: Sólo para los métodos de pago Pago en tiendas and Wire transfers seguir las siguientes indicaciones:

  1. Pago en tiendas: Pago en Tienda
  2. Transferencias Interbancarias: SPEI

Note: 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

CONFIGURACIÓN DE WEBHOOKS

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 la URL dependiendo el entorno en el que se esté trabajando
    • Sandbox (Test):  https://sandbox-vtex.openpay.mx/callbackVtex/[mechantId]
    • Producción (Live): https://plugin-vtex.openpay.mx/callbackVtex/[mechantId]

      [merchantID]: 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)

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

  • 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
4. Ubicar el apartado de Webhookssection. If the webhook was configured correctly there will be a record in Verified.

Validación webhook VTEX