Esto forma parte de la nueva versión del conector, conocida como V2, que se diferencia de la versión anterior (V1) por su capacidad para soportar, promociones especiales, cuotas y condiciones comerciales disponibles en la plataforma VTEX en pagos embebidos (Payment App)

Beneficios

La plataforma VTEX tiene un sistema de aplicación de pagos diseñado para que los clientes completen sus compras sin salir de tu sitio web. Sin embargo, esta solución presenta algunas limitaciones en lo que respecta a aplicar promociones específicas (por ejemplo, descuentos asociados a ciertas tarjetas o tags de marketing) y en la transmisión de información relevante sobre las opciones de financiamiento, como los planes de pago con o sin intereses.

Gracias a nuestras conversaciones con VTEX, hemos desarrollado una versión mejorada del widget. Esta nueva versión permite a los comercios aplicar promociones bajo condiciones específicas y facilita la transmisión de información sobre las opciones de financiamiento, incluyendo los detalles de los pagos a meses con y sin intereses.

¿Cómo Configurar el Widget V2 de DEUNA?

Para empezar a usar el widget V2 de DEUNA en tu tienda VTEX, necesitarás proporcionar algunos detalles al equipo de DEUNA:

1. VTEX API KEY
2. VTEX APP TOKEN
3. Nombre de la cuenta titular de la credencial

Con esta información, nuestro equipo podrá configurar todo lo necesario para que puedas aprovechar todas las ventajas del widget V2.

Te ofrecemos un tutorial paso a paso para guiarte en el proceso de configuración. Este recurso te ayudará a entender y ejecutar los pasos necesarios para integrar exitosamente esta herramienta en tu e-commerce.

Paso 1: Integrar script de Widget

Para poder utilizar el conector V2, debes integrar el siguiente script en tu configuración de checkout en tu tienda VTEX.

function loadScriptWithAttributes(url, attributes, target) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;

        if (attributes) {
            Object.keys(attributes).forEach(key => {
                script.setAttribute(key, attributes[key]);
            });
        } else {
           console.error("DEUNA: no attributes: ", attributes);
        }

        script.onload = resolve;
        script.onerror = reject;

		    const currentTarget = target ?? document.head
        if (!currentTarget) {
          console.error("DEUNA: 'currentTarget': is not defined")
 		    }
		    currentTarget.appendChild(script);        
    });
}

const baseURL = "<base_url>";
console.log("DEUNA cdn: ", baseURL);
const attributes = { 
	  env: "<environment_name>",
    publicApiKey: "<public_key>"
};
 

loadScriptWithAttributes(baseURL, attributes)
    .then(() => {
      console.log("DEUNA: loaded script Succesfully!")
    })
    .catch((err) => {
      console.error("DEUNA: Error load script cdn: ", err);
    });

Para checkout Legacy

• Para esto debes agregarlo ingresando en tu adminstrador de VTEX en la siguiente ruta: Store Settings -> Storefront -> Checkout -> Code -> checkoutcustom6.js

function loadScriptWithAttributes(url, attributes, target) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;

        if (attributes) {
            Object.keys(attributes).forEach(key => {
                script.setAttribute(key, attributes[key]);
            });
        } else {
           console.error("DEUNA: no attributes: ", attributes);
        }

        script.onload = resolve;
        script.onerror = reject;

		    const currentTarget = target ?? document.head
        if (!currentTarget) {
          console.error("DEUNA: 'currentTarget': is not defined")
 		    }
		    currentTarget.appendChild(script);        
    });
}

const baseURL = "<base_url>";
console.log("DEUNA cdn: ", baseURL);
const attributes = { 
	  env: "<environment_name>",
    publicApiKey: "<public_key>"
};
 

loadScriptWithAttributes(baseURL, attributes)
    .then(() => {
      console.log("DEUNA: loaded script Succesfully!")
    })
    .catch((err) => {
      console.error("DEUNA: Error load script cdn: ", err);
    });

• Una vez reemplaces las variables presiona el botón Save para guardar los cambios.

Para checkout con Checkout UI Custom

• Para esto debes agregarlo ingresando en tu adminstrador de VTEX en la siguiente ruta: Store Settings -> Storefront -> Checkout UI Custom -> Javascript

function loadScriptWithAttributes(url, attributes, target) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;

        if (attributes) {
            Object.keys(attributes).forEach(key => {
                script.setAttribute(key, attributes[key]);
            });
        } else {
           console.error("DEUNA: no attributes: ", attributes);
        }

        script.onload = resolve;
        script.onerror = reject;

		    const currentTarget = target ?? document.head
        if (!currentTarget) {
          console.error("DEUNA: 'currentTarget': is not defined")
 		    }
		    currentTarget.appendChild(script);        
    });
}

const baseURL = "<base_url>";
console.log("DEUNA cdn: ", baseURL);
const attributes = { 
	  env: "<environment_name>",
    publicApiKey: "<public_key>"
};
 

loadScriptWithAttributes(baseURL, attributes)
    .then(() => {
      console.log("DEUNA: loaded script Succesfully!")
    })
    .catch((err) => {
      console.error("DEUNA: Error load script cdn: ", err);
    });

• Una vez reemplaces las variables presiona el botón Publish para guardar los cambios.

Para Checkout Custom / Personalizado por el comercio

Esto para aquellos comercios que tienen su propio Checkout. Agregar el su javascript checkout file el siguiente script

function loadScriptWithAttributes(url, attributes, target) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;

        if (attributes) {
            Object.keys(attributes).forEach(key => {
                script.setAttribute(key, attributes[key]);
            });
        } else {
           console.error("DEUNA: no attributes: ", attributes);
        }

        script.onload = resolve;
        script.onerror = reject;

		    const currentTarget = target ?? document.head
        if (!currentTarget) {
          console.error("DEUNA: 'currentTarget': is not defined")
 		    }
		    currentTarget.appendChild(script);        
    });
}

const baseURL = "<base_url>";
console.log("DEUNA cdn: ", baseURL);
const attributes = { 
	  env: "<environment_name>",
    publicApiKey: "<public_key>"
};
 

loadScriptWithAttributes(baseURL, attributes)
    .then(() => {
      console.log("DEUNA: loaded script Succesfully!")
    })
    .catch((err) => {
      console.error("DEUNA: Error load script cdn: ", err);
    });

Paso 2: Reemplaza los valores de las variables

Una vez que copiaste el script es necesario que reemplaces las variables con la información correspondiente

Una vez que realizaste el cambio de variables por tu información ya podrás utilizar esta nueva versión del conector

Paso 3: Continuar con los siguientes pasos

https://docs.deuna.com/docs/vtex-1#pasos-para-la-instalaci%C3%B3n

Configuración de cuotas

En DEUNA, ofrecemos soporte para configurar cuotas en nuestro widget. Esto se puede realizar directamente en el administrador de DEUNA, permitiéndote establecer cuotas sin interés (MSI) y cuotas con interés (MCI). Además, brindamos soporte para la configuración de cuotas que requieren condiciones comerciales especiales a través de VTEX. Esta capacidad facilita la personalización del proceso de pago, adaptándolo a las necesidades específicas de tu negocio y tus clientes.

Beneficios del Widget DEUNA para cuotas

Utilizar el widget DEUNA para gestionar las cuotas en tus transacciones ofrece claras ventajas, especialmente cuando se compara con las limitaciones actuales de los plugins de pago embebido de VTEX (Payment App):

1. Visualización de cuotas en VTEX: Con nuestro widget, puedes ver el total de cuotas reflejadas directamente en la transacción en VTEX, una funcionalidad que no está disponible en los plugins de pago embebido actuales de VTEX debido a las limitaciones de su protocolo de pagos.
2. Soporte para cuotas con intereses: Mientras que las integraciones de pago embebido de VTEX no reflejan los montos con intereses, nuestro widget sí lo permite, asegurando que se muestre el monto exacto que el comprador paga, incluyendo los intereses.
3. Flexibilidad en reglas de negocio: Permite agregar reglas de negocio avanzadas como configurar el número de cuotas, franquicias, condiciones de pago (método de pago) o reglas personalizadas (metadata de la orden). Esto facilita que las transacciones se procesen por el proveedor seleccionado, incluso si este proveedor no está disponible en VTEX.
4. Mejora de la experiencia del comprador y del comercio: Al proporcionar información precisa y detallada sobre las cuotas y los intereses, el widget DEUNA mejora significativamente la experiencia tanto para el comprador como para el comercio, facilitando una mayor transparencia y confianza en el proceso de pago.

En resumen, mediante el uso del widget DEUNA, mejorarás notablemente la experiencia de compra para los clientes y la gestión financiera para el comercio, a la vez que aumentas la flexibilidad y capacidad de personalización de las transacciones financieras.

Configuración de cuotas en DEUNA

Requisitos

1. Credenciales del administrador de DEUNA.
2. PSPs configurados en DEUNA.

Pasos

1. Acceso al administrador de DEUNA
2. Configuración de cuotas en el administrador de DEUNA

Paso 1: Acceso al administrador de DEUNA

• Accede a https://admin.deuna.com
• Ingresa tus credenciales (usuario y contraseña)

Paso 2: Configuración de cuotas en el administrador de DEUNA

Importante: Antes de comenzar, solicita al equipo de DEUNA que habilite de cuotas en tus PSPs configurados.

Una vez ya iniciaste sesión en el administrador de DEUNA puedes entrar al módulo de "configuración de cuotas" para tu tienda, en donde puedes definir el número de cuotas que quieres soportar. En el siguiente ejemplo te mostramos como configurar cuotas con meses sin intereses (MSI)

Configuración de Meses con intereses (MCI):

Actualmente, esta configuración no está disponible en el administrador de DEUNA. Ponte en contacto con tu ejecutivo para ayuda.

Configuración de cuotas con soporte de condiciones comerciales para VTEX

VTEX permite a los comercios utilizar condiciones comerciales para agrupar un conjunto de productos (SKUs) en la plataforma. A través de estas condiciones comerciales, VTEX permite al comercio decidir por cual condición de pago (método de pago) realizar la transacción del comprador.

📘

Para obtener más información sobre las condiciones comerciales en VTEX, te invitamos a consultar el siguiente enlace: Qué es una condición comercial en VTEX ?

Beneficios del Widget DEUNA para condiciones comerciales

VTEX permite configurar diferentes proveedores de pago y asociarlos a condiciones de pagos en el cual puedes activar condiciones comerciales específicas (SKUs). Sin embargo, este proceso puede presentar algunos desafíos:

1. Limitación de proveedores: Algunos proveedores de pago que utilizas podrían no estar disponibles en los conectores de VTEX. Por lo cual no podrías asociar una condición comercial a un proveedor no disponible.
2. Habilitación de pagos embebidos: A diferencia de VTEX, que actualmente no soporta el uso de condiciones de pago en modalidades embebidas (payment app) debido a limitaciones en su protocolo de pagos, nuestro Widget permite integrar estas funcionalidades, ofreciendo una experiencia de pago mejorada.
3. Experiencia de pago: No todos los proveedores en VTEX ofrecen una experiencia de checkout embebida. Configurar distintos proveedores resulta en la aparición de múltiples botones en el checkout, lo que puede confundir al comprador y afectar negativamente la experiencia de compra.
4. Configuración sencilla: Con el widget de DEUNA, solo necesitas configurar una condición de pago (DeunaNow) para administrar todas las condiciones comerciales deseadas desde un única condición de pago.

Con estas ventajas, el Widget de DEUNA no solo mejora la funcionalidad y eficiencia al usar VTEX, sino que también eleva la experiencia de compra de tus clientes.

Requisitos

1. Cuotas configuradas en DEUNA
2. Credenciales de VTEX proporcionadas a equipo de DEUNA
3. Credenciales de PSP para realizar la configuración en DEUNA

Pasos

1. Configura los PSPs en DEUNA para condiciones comerciales
2. Configura el método de pago en VTEX
3. Configura reglas en DEUNA para procesar las cuotas con condiciones comerciales

Paso 1: Configuración de PSPs en DEUNA para condiciones comerciales

Antes de realizar la configuración en tu tienda de VTEX es importante que puedas configurar tu PSP en DEUNA, para esto debes seguir los siguientes pasos:

• Entrar a tu administrador de DEUNA con tu usuario y contraseña. Luego selecciona el módulo de "Conexiones"
• Agrega tu PSP y configura las credenciales. Para poder soportar condiciones comerciales te sugerimos agregar múltiples conexiones de tu PSP utilizando la siguiente nomenclatura:

Nombre de PSP - Nombre condicion comercial de VTEX

Detalles de la nomenclatura

• Nombre de PSP: Nombre del PSP que estás configurado. Ejemplo: Mercadopago
• Nombre condición comercial de VTEX: El nombre que identifique la condición comercial que utilizaras en donde esta esta construida por: nombre de la condicón + porcentaje de activación de la regla en VTEX. Ejemplo: stationary items > 20%

📘

Para encontrar más ejemplos de nombre de condición comercial te sugerimos revisar la sección: Tabla de ejemplo para condiciones comerciales con identificador para DEUNA

En el siguiente tutorial te mostramos como realizar esta configuración

Una vez finalices esta configuración, puedes pasar al siguiente paso.

Paso 2: Configuración de método de pago en VTEX

Para garantizar que DEUNA identifique correctamente las condiciones comerciales en VTEX, es fundamental realizar una configuración adecuada en el método de pago DeunaNow. Aquí te explicamos el proceso paso a paso, incluyendo cómo utilizar la nomenclatura correcta para que tu widget soporte cuotas con condiciones comerciales

• Agregar un método de pago: Agregar método de pago DeunaNow. Te recomendamos usar un nombre descriptivo que identifique el nombre de la regla que utilizarás. (En la tabla adjunta puedes encontrar un ejemplo de nombre de la regla)
• Activar cuotas para la condición de pago: Una vez agregas el método de pago de DeunaNow, asignas un conector y agregar el nombre. Debes presionar la opción "Total de número de cuotas".
• Asociar identificador: En el campo "Total de número de cuotas", debes ingresar una combinación del número máximo de cuotas permitidas junto con el identificador de la condición comercial adjunta en la tabla, según la siguiente nomenclatura:

[Número máximo de cuotas a mostrar en el widget],[Identificador de la condición comercial]

Detalles de la nomenclatura

• Número máximo de cuotas a mostrar en el widget: Corresponde al límite de cuotas que se configuró en el administrador de DEUNA. Este número define hasta cuántas cuotas se pueden ofrecer al cliente durante el proceso de compra.
• Identificador de la condición comercial: Es un número asignado a cada condición comercial, establecido en la tabla de identificación adjunta. Este identificador permite que DEUNA reconozca la condición comercial específica aplicada a la transacción.

Ejemplo práctico

Si tienes una condición comercial que permite pagos hasta 6 cuotas y está asociada con el identificador 50 (stationary items > 20%) de la tabla de condiciones, deberás ingresar en el campo de cuotas:

6, 50

Este formato asegura que DEUNA reconozca tanto el número máximo de cuotas permitidas como la condición comercial aplicable, facilitando el proceso de pago y asegurando la correcta aplicación de las políticas comerciales de tu tienda.

En el siguiente tutorial te mostramos como realizar esta configuración

Importante:La configuración de cuotas realizada anteriormente, es referencial para que nuestro widget detecte la configuración. El identificador de la condición comercial configurado en VTEX no se mostrará al comprador.

Paso 3: Configuración de reglas en DEUNA para procesar las cuotas con condiciones comerciales

Luego de que haz configurado el método de pago DeunaNow con el identificador de condición comercial en el paso anterior, es sumamente importante configurar las reglas en el admin de DEUNA. Con esto nuestro widget podrá identificar por cual condición comercial realizar el proceso de pago. Para realizar la configuración de reglas en DEUNA para procesar las cuotas con condiciones comerciales debes hacer lo siguiente:

• Entrar al administrador de DEUNA con tu usuario y contraseña, y seleccionar el módulo "Estratégias de pago"
• Presionar el botón "Crear regla específica" y agregar un nombre a la regla. Te sugerimos utilizar un nombre que te permita identificar la regla de la condición comercial. Luego presiona el botón "Ir al siguiente paso"
• En la sección "Agrega condiciones" debes presionar el botón "Agregar condición +" y debes buscar la opción "Metadata"
• En Metadata es importante que utilices el nombre de variable "commercial_condition", tipo de formato "Texto", Propiedades: "({}) Contiene" y agregar el número identificador que utilizaste en el paso anterior. Ejemplo: 50 (Correspondiente a stationary items > 20%)
• Una vez agregues esta información presiona el botón "Guardar metadato" y luego presionar el botón "Guardar" para ir al siguiente paso.
• Una vez vuelvas a la seccio2n de "Crea una regla especifica" presiona el botón "Ir al paso siguiente"
• En la sección "Define el orden de procesamiento de la transacción" presiona el botón "Editar ruteo" selecciona el procesamiento (conexión) que configuraste para la condición comercial. Ejemplo: Mercadopago - Special Stationary.
• Selecciona la regla de procesamiento y presiona el botón "Guardar". Con esto haz terminado de configurar la regla específica para tu condición comercial.

En el siguiente tutorial te mostramos como realizar esta configuración

📘

Para encontrar más ejemplos de nombre de condición comercial te sugerimos revisar la sección: Tabla de ejemplo para condiciones comerciales con identificador para DEUNA

Tabla de ejemplo para condiciones comerciales con identificador para DEUNA

En la siguiente tabla te proporcionamos un ejemplo de nombre de condiciones comerciales, con un identificador sugerido. El nombre de la regla de condición comercial hace referencia al nombre de la condición comercial que tienes en VTEX, por otro lado nosotros sugerimos utilizar un número mayor o igual a 49 para poder identificarlo en DEUNA.

Este número será el que configures dentro del administrador de DEUNA al momento de configurar reglas de procesamiento para el PSP.

Agregamos la siguiente tabla con ejemplos sugeridos para la identificación de tus condiciones comerciales, donde:

• Nombre de regla para condición comercial: Es el nombre de la condición comercial seguido de la regla que configuras en el método de pago que sea válido
• Identificador: Identificador que utiliza el widget de DEUNA para poder identificar que condición comercial debe utilizar. Este identificador se utilizará al momento que realices el paso Configuración de cuotas con soporte de condiciones comerciales para VTEX. El identificador debe ser mayor o igual al número 49

Qué es una condición comercial en VTEX ?

Una condición comercial en VTEX es un recurso que permite a los comerciantes agrupar distintos productos (SKUs) para definir escenarios específicos de pago (condiciones de pago) en la plataforma. Al configurar tu condición de pago con condiciones de pago especiales podrás activar la condición comercial. VTEX te permite establecer, basado en un porcentaje del total del carrito, cuándo se activará dicha condición comercial. Por ejemplo, consideremos una tienda en VTEX donde vendes los siguientes productos:

Como dueño de la tienda, podrías querer establecer condiciones comerciales que agrupen los productos en categorías como Vestuario y Tecnología. Además, podrías desear que las transacciones de Vestuario se procesen a través de MercadoPago (condición de pago) y las de Tecnología a través de Stripe (condición de pago).

Podrías configurar las reglas de la siguiente manera: si el total de los productos de Vestuario supera el 20% del total del carrito, entonces se procesarán por MercadoPago. De forma similar, si el total de los productos de Tecnología excede el 20% del total del carrito, entonces se procesarán por Stripe. Aquí tienes cómo se configuraría:

Escenarios de ejemplo:

• Escenario 1: Un comprador adquiere 10 camisetas y 10 pantalones, y también compra 1 celular.

La condición comercial de Vestuario, que supera el 80% del total del carrito, se procesará mediante MercadoPago. Por otro lado, la condición de Tecnología, que representa el 16% del total, no se activa.

• Escenario 2: Un comprador adquiere 1 celular, 1 computador, 1 tablet y 1 camiseta.

La condición comercial de Tecnología supera el 90% del total del carrito y se procesará mediante Stripe, mientras que la de Vestuario, que representa solo el 4.55%, no se activa.

En resumen, las condiciones comerciales en VTEX permiten al comerciante procesar transacciones mediante diferentes condiciones de pago (métodos de pago como MercadoPago o Stripe, etc), dependiendo de la configuración realizada en base al porcentaje total del carrito. Esto facilita el manejo de distintos PSPs según la configuración del pago.

Para más información sobre cómo funcionan las condiciones comerciales en VTEX, te invitamos a consultar su documentación:

• Registrar condición comercial [Link]
• Configurar condiciones de pago [Link]
• Configurar condiciones especiales de pago [Link]

Configuración para motores de fraude

La nueva versión del Widget de DEUNA introduce una forma innovadora de manejar múltiples motores de fraude con apenas unas líneas de código. Esta funcionalidad permite centralizar toda la información relevante en un único lugar, facilitando el control y la gestión por parte del comercio.

Beneficios de configurar motores de fraude con Widget DEUNA

1. Implementación Limpia: No es necesario implementar scripts adicionales para los motores antifraude; el widget se encarga automáticamente de este proceso. Solo necesitas ingresar el motor de fraude deseado y sus credenciales para activarlo.
2. Centralización de la Información: Todos los datos de tus configuraciones de motores antifraude se mantienen en un solo lugar, lo que facilita su gestión.
3. Automatización y actualización: Nosotros gestionamos las actualizaciones necesarias y enviamos la información de fraude a VTEX y al procesador de pago que configures.
4. Flexibilidad en las reglas de pago: Puedes configurar múltiples motores para distintas reglas de pago desde el administrador de DEUNA, asegurándote de que la información se envíe correctamente.

Motores de antifraude disponibles en DEUNA

Puedes consultar el siguiente enlace en donde puedes revisar los proveedores de antifraude soportados con DEUNA.

Requisitos

1. Credenciales del administrador de DEUNA
2. Credenciales de tus motores antifraude

Pasos para la configuración

1. Acceso al administrador de DEUNA
2. Configuración de motores antifraude en el administrador de DEUNA
3. Configuración de motores antifraude en VTEX mediante el Widget

Paso 1: Acceso al administrador de DEUNA

• Accede a https://admin.deuna.com
• Ingresa tus credenciales (usuario y contraseña)

Paso 2: Configuración de motores antifraude en el administrador de DEUNA

• Ve al módulo Pagos -> Conexiones
• En el buscador busca el motor de antifraude deseado y presiona el botón para agregarlo
• Llena la información y presiona el botón para guardar

Paso 3: Configuración de motores antifraude en VTEX mediante el Widget

• Entra al administrador de tu tienda VTEX

Para checkout Legacy

Para esto debes agregarlo ingresando en tu adminstrador de VTEX en la siguiente ruta: Store Settings -> Storefront -> Checkout -> Code -> `checkoutcustom6.js

Para checkout con Checkout UI Custom

Para esto debes agregarlo ingresando en tu adminstrador de VTEX en la siguiente ruta: Store Settings -> Storefront -> Checkout UI Custom -> `Javascript

Para Checkout Custom / Personalizado por el comercio

Esto para aquellos comercios que tienen su propio Checkout. Agregar el su javascript checkout file el siguiente scrip