Documentación

2. Instala V2 Widget

Suggest Edits

Esta página provee instrucciones para la instalación del conector V2 de VTEX

Esto forma parte de la nueva versión del V2 widget.

El V2 widget se diferencia de la versión V1 por su capacidad para soportar las siguientes funcionalidades disponibles en el Payment App de VTEX:

  • Promociones especiales
  • Cuotas
  • Condiciones comerciales

Sobre el Widget

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 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, DEUNA desarrolla una versión mejorada del widget.

El V2 widget te permite:

  • Aplicar promociones bajo condiciones específicas
  • Facilita la transmisión de información sobre las opciones de financiamiento
  • Incluye detalles de pagos a meses con y sin intereses.

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.

📘

El tutorial te ayudará a entender y ejecutar los pasos necesarios para integrar exitosamente esta herramienta en tu e-commerce.

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.

📘

Asegurarse que notification_type está configurado como "sync". Para esta configuración puedes pedir ayuda al soporte de DEUNA.

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

Después de copiar el script es necesario que reemplaces las variables con la información correspondiente:

Variable Descripción
base_urlURL del CDN dependiente del environment_name. Con esta URL nuestro script cargará la versión del widget.

Staging: https://cdn.stg.deuna.io/snippets/v1.0.0/index.js
Sandbox y Producción: https://cdn.getduna.com/snippets/v1.0.0/index.js
environment_nameAmbiente en el que utilizarás el widget. (staging, sandbox, production)
public_keyLlave pública de tu comercio

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

Guardar los cambios.

👍

Ahora ya tienes la instalación completa y puedes realizar una transación de prueba.

Updated 3 days ago

Continua leyendo