VTEX
  • 19 Jun 2024
  • 3 Minutos para leer

VTEX


Resumen del artículo

¿Qué es VTEX?

VTEX es una plataforma de comercio electrónico y solución de comercio en la nube que permite a las empresas crear y gestionar tiendas en línea altamente personalizadas y escalables. Esta plataforma ofrece una amplia gama de características y herramientas para la gestión de productos, procesamiento de pagos, logística, y experiencias de compra personalizadas. VTEX se utiliza en todo el mundo y es conocida por su enfoque en la omnicanalidad y la capacidad de adaptarse a las necesidades de empresas de todos los tamaños y sectores.

Guía de integración VTEX

Para realizar la integración de OrkestaPay con la plataforma VTEX, es necesario seguir los siguientes pasos:

1 - Registrar una cuenta

Es necesario tener una cuenta de comercio en OrkestaPay para llevar a cabo la integración.

2 - Copiar credenciales de integración

Una vez que hayas registrado tu cuenta, dirígete a la sección de Desarrolladores que se encuentra como opción en el menú lateral. 

Es necesario que copies y guardes las credenciales que se muestran en pantalla, más adelante tendrás que ingresarlas en la pantalla de configuración del plugin.

OrkestaPay (6)(3)


3 - Configuración del conector de pago

3.1 - Configuración de proveedores

Dentro de tu portal de administración de tu comercio VTEX, selecciona la opción Store Settings > Payment > Providers.

Da clic en el botón superior “Nuevo proveedor“ e ingresa en el buscador de la ventana modal el nombre de “Orkesta“ y selecciona del listado el único resultado que se muestra.

Providers(1)

Se mostrará la pantalla de configuración del conector de pago donde deberás ingresar los datos obtenidos desde el portal de OrkestaPay:

  • Application key: Colocar la "Llave de acceso" obtenida en el portal de OrkestaPay

  • Application token: Colocar la "Llave secreta" obtenida en el portal de OrkestaPay

  • Webhook signing secret: Dejar en blanco por el momento

Dar clic en el botón Save.

Providers (1)(1)

Modo del conector

Si deseas realizar pruebas de integración, habilita la opción “Enable test mode“. Válida que el modo del conector y las llaves ingresadas correspondan al modo de operación deseada.

3.2 - Configuración Payment Conditions

Dentro de tu portal de administración de tu comercio VTEX, selecciona la opción Store Settings > Payment > Settings.

Da clic en el botón superior derecho de color verde para vincular el conector de OrkestaPay con un método de pago con tarjeta de crédito. Actualmente están soportados: American Express, Visa, Master Card, Diners, Discover y JCB.

Settings

Se mostrará la siguiente pantalla donde deberás de seleccionar el conector previamente configurado y habilitar el método de pago activando el toggle del Status, posteriormente dar clic al botón Save.

Settings (1)(1)

Meses sin intereses

OrkestaPay soporta MSI, es decir, puedes realizar la configuración que consideres necesaria para tu comercio sin problemas.

4 - Configuración de Google Tag Manager (GTM)

Para que su tienda VTEX funcione correctamente con OrkestaPay, se requiere de una configuración adicional que se gestiona a través de Google Tag Manager.

Una vez dentro del Contenedor y seleccionado el Espacio de Trabajo (el que trae por default puede servir), habrá que configurar un Activador y una Etiqueta.

4.1 - Configurar Activador

  • Seleccionar tipo de evento: Evento personalizado

  • Nombre del evento: .*

  • Marcar checkbox para la opción Utilizar una expresión regular que coincida con

  • Seleccionar la opción Algunos eventos personalizados para la opción Este activador se activa en

  • Configurar condición: Event -> contiene -> payment

4.2 - Configurar Etiqueta

  • Tipo de etiqueta: HTML personalizado

  • Agregar siguiente script

  • Vincular Activador previamente configurado

<script type="text/javascript" src="https://checkout.orkestapay.com/script/orkestapay.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        vtexjs.checkout.getOrderForm().done(function (orderForm) {
            var credentials = { merchant_id: 'REPLACE_VALUE', public_key: 'REPLACE_VALUE', is_sandbox: true };
            var orkestapay = initOrkestaPay(credentials);
            orkestapay.getDeviceInfo().then(function (result) {
                window.vtex.deviceFingerprint = result.device_session_id;
            });
        });
    });
</script>

IMPORTANTE

Debes reemplazar el valor de las credenciales: merchant_id, public_key y is_sandbox

El resultado será similar a esto:

Captura de pantalla 2024-06-04 a la(s) 1.30.23 p.m.

4.3 - Configurar Google Tag Manager en VTEX

Una vez finalizado el proceso de configuración en el Google Tag Manager, será necesario copia el ID del Contenedor de GTM dentro de la tienda de VTEX, para ello seguiremos los siguientes pasos:

  1. Ingresar a Storefront > Checkout

  2. Dar clic en el botón de configurar (ícono de engrane)

  3. En la siguiente pantalla seleccionar el tab Checkout

  4. Capturar el ID del contenedor de GTM (que tiene un formato como este GTM-XXXXXX)

  5. Dar clic en Guardar

5 - Puesta en marcha

Para comenzar a transaccionar es necesario que configures las credenciales de producción en el conector de pagos de VTEX que vimos en el paso 3 y deshabilites el modo de pruebas.


¿Te ha sido útil este artículo?

What's Next