VTEX

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

3 - Configuración de webhook

Es necesario configurar un webhook para notificar los pagos completados a VTEX. Para eso puedes seguir nuestra guía de Configuración de webhooks, sin embargo es importante remarcar que la URL que se debe de ingresar durante la configuración es como la siguiente: https://vtex-connector.orkesta.io/webhook/{vtex_account_name}

Donde deberás de reemplazar {vtex_account_name}, con el nombre de cuenta de tu comercio.

4 - Configuración del conector de pago

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

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: Colocar la “Llave secreta” que se obtiene al configurar un webhook

Dar clic en el botón Save.

4.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, Visa Electron, Master Card, Master Card Debit, Diners, Discover y JCB.

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.

Meses sin intereses

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

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

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

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

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

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