Vtex

¿Qué es 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:

Importante: para procesar cargos con VTEX, favor de ponerse en contacto con Soporte Openpay (soporte@openpay.pe) para configurar correctamente su comercio.

2.- Configurar Google Tag Manager (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)

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 53. Capture los datos solicitados y haga click en el botón Guardar al finalizar

1. 1. 1. Nombre de cuenta: por ejemplo «Openpay»
      2. País: Peru
      3. Configuración del contenedor: URL del sitio (es sólo informativo)
      4. Plataforma objetivo: Sitio web

4. Aceptar Términos de uso para continuar5. Hacer login en http://www.google.com/tagmanager/ para la tienda que vamos a configurar6. Se mostrará el dashboard principal. Ir al menú y hacer click en Administrador7. 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 contenedor9. Haga click en Elija el archivo del contenedor, seleccione el archivo contenedor que descargó en el paso 1 y presione Abrir o Aceptar10. En la opción Elegir espacio de trabajo presione el botón Nuevo11. 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 Confirmar13. 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.14. 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 715. Ingresar a VTEX y en el panel de la izquierda ir a Store Settings (Configuración de tienda) -> storefront -> Checkout y dar click en el botón con icono de engranaje. 16. 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 SCRIPT PARA DEVICE SESSION ID

En el panel de la izquierda ir a Store Settings (Configuración de tienda) -> Storefront -> Checkout.En el encabezado de color azul de la pagina seleccionar la opción Code.En el archivo con el nombre checkout5-custom.js colocar el siguiente código, a través del cual se realizará la ejecución del código que generará el device session id requerido para realizar transacciones con tarjeta de crédito o débito.Nota: El número en el nombre de este archivo podría cambiar dependiendo de laconfiguración de la plataforma, asegúrese de seleccionar el correcto. El nombre del archivo debe coincidir, a excepción del número que como se mencionó anteriormente puede ser distinto al especificado en función de la configuración de su comercio.

s = document.createElement('script');s.src = "https://js.openpay.mx/openpay-vtex.min.js";s.type = 'text/javascript';s.defer = true;document.getElementsByTagName('head').item(0).appendChild(s);country ='CO';sandboxMode = true;id = 'mxxxxxxxxxxxxxxxxxxx';pk = 'pk_xxxxxxxxxxxxxxxxx';

Dentro del código mencionado anteriormente existen 4 variables relativas al funcionamiento del script. las cuales están asociadas al correcto funcionamiento del mismo, en las últimas cuatro líneas del código reducido, estas variables son las siguientes:

• country – PE (Perú)
• sandboxMode – el valor asignado puede ser true = producción ó false = Sandbox
• id – Id del comercio
• pk – llave pública del comercio (Public Key)

Una vez modificados estos datos debe proceder a guardar la configuración pulsando el botón Save.

Configurar Payment Provider en Vtex

Configurar Payment Provider en Vtex

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

1. Ingresar al panel de administración de su tienda VTEX.
2. Acceder a la sección «Store Settings» > «Provider»  localizada en la lista de opciones desplegables de la izquierda en el panel de administrador.
3. En la parte superior de la ventana encontrará el botón New Provider, hacer click en el botón.
4. Buscar y seleccionar el conector de  OpenpayV2.
   • 
5. Capturar los campos solicitados.
   • Autenticación con Openpay: Ingresar las credenciales de API obtenidas en el dashboard Openpay.
     • App Key (Application Key): ID (identificador del comercio en Openpay)
     • App token (Application Token): Llave privada (obtenida de Openpay)

1. • Seleccione el modo de operación: Test (para realizar pruebas) o Producción.
   • País: Seleccionar el país donde se encuentra, en este caso Perú.
   • ¿Cómo procesar el cargo?:
     • Directo: Se realizará una evaluación del cargo y se rechazará si el sistema antifraude detecta alguna anomalía.
     • 3D Secure: Se realizará una validación mediante un proceso interno, si es necesario se tendrá que autenticar para continuar con el cargo, y si esto no es necesario, se continuará a  realizar el cargo.
   • Affiliation Name (Opcional): Alias asociado a una afiliación.
2. Hacer click en el botón Guardar.

 

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

• 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. 1. Ir al administrador de Payment Provider en VTEX
   2. Acceder a la sección «Store settings(Configuración de tienda)» > «Settings (Configuración)» localizada en la lista de opciones desplegables de la izquierda en el panel de administrador.
   3. En la pestaña «Payment conditions (Condiciones de pago)», haz clic en el signo de más (+) ubicado en la parte superior derecha de la pagina.
   4. 
   5. Luego, en la sección tarjetas, elige el medio de pago que quieras agregar.
   6. 
   7. Nombrar la regla para identificar el medio de pago y activarlo en el campo «Estado».
   8. En el campo «Process with provider(Procesar con la afiliación)», elige la afiliación creada en el paso anterior.
   9. Haz clic en «Save (Guardar)».

 

• PAGO EN AGENCIAS 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:a) Dar de alta la condición de pago

1. Ubicar la sección Transacciones > Pagos dentro de su panel de administración VTEX

2. Seleccionar la opción Configuración > Pagos personalizados ubicado en el panel superior.

3. Se dará de alta un nuevo método de pago, seleccionamos un Notes payables dar clic en Config y llenar el formulario como se indica a continuación:

• • • • • Name: Pago en Agencias
        • Description: Botón de pago en agencia
        • Note payable expiration date: 1

4. Por último daremos clic en Save

Configurar el método de pago de pago en agencia

Una vez dado de alta el método de pago nos redirigirá a la pantalla de configuración para hacer la relación con el conector de pago y configurar las condiciones comerciales dependiendo a la operación del comercio. Tomar en cuenta los siguientes tópicos para configurar correctamente le método de pago creado:

1. 1. 1. Status: Marcar el método de pago como activo
      2. Procesar con la afiliación: seleccionar el nombre del conector Openpay
      3. Configurar las condiciones especiales que consideren necesarias.
      4. Por último, ingresar un nombre al método de pago y dar clic en Save.

Validar configuración

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

Para activar la preautorización se deberá solicitar al equipo de Openpay, mediante el correo de soporte: soporte@openpay.pe

Una preautorización es una venta en donde el monto en lugar de ser descontado de la cuenta del cliente final, es retenido o congelado.Podrá disponer de dos opciones para capturar el pago, captura total y captura parcial.

Captura total

Para realizar la captura total, una vez recibida la orden dirigirse a «Gestión de pedidos» seleccionar la orden y proceder a dar clic en la opción «Invoice items«. Al finalizar se enviará automáticamente la petición para realizar la captura total del monto.

 

Captura parcial

Para registrar la captura de forma parcial, deberá seleccionar la orden y seguir los siguientes pasos1.- Poner la orden en «Preparando envío«2.- Seleccionar la opción de «Cambio de item«3.- Hacer las modificaciones correspondientes y dar clic en enviar.4.- Por último dar clic en Facturar paquete -> Enviar factura.

 

Habilitar 3DSecure en el panel de VTEX

Para habilitar 3DSecure deberá seguir los siguientes pasos:

1. Ir al administrador de Payment Provider en Vtex
2. Acceder a la sección de ajustes haciendo click en el icono de engrane en la parte inferior izquierda.
3. Seleccionar la opción de Afiliaciones y abrir la afiliación a la que desee aplicar 3DSecure.
4. Para finalizar en el parámetro Country deberá seleccionar Perú y el parámetro Processing Mode seleccione 3D Secure y guarde la configuracion.

Cuotas sin interés

Para poder establecer este tipo de pago es necesario seguir los siguientes pasos:

1. 1. 1. Dirigirse al panel de configuración de VTEX, ubicar la sección de Store Settings (Configuración de tienda)-> Settings (Configuraciones), configurar y habilitar el conector de meses sin intereses.
      2. Una vez habilitado y al momento de realizar un pago se le mostrarán las opciones de pagos a cuotas configuradas en el paso anterior.

 

Configuración de webhooks

Registrar Webhook en Openpay.

1.-Dentro de su dashboard ya sea Sandbox ó Producción, en la barra superior hacer click en el icono de engranaje y seleccionar “Configuraciones”.  3.- Hacer click en el botón Agregar.

• • • • 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 engranaje) > Credenciales API

• • • • • • Le aparecerá una ventana con los datos correspondientes al de su comercio.

• • • • • • •  
      • Eventos asociados: Se sugiere dejar el valor por default (Todos los eventos) pero en caso de no querer recibir todas las notificaciones, hacer clic 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, aquí se deberán de ingresar las credenciales con las que se validará y se registrará el WebHook.
        • Estas credenciales deben ser su MerchantID y su Llave privada.

• •  

5.- Ubicar el apartado de Webhooks. Si el webhook fue configurado correctamente habrá un registro en estado Verificado.