Documentación

Paso 2 - Como instalar Widget V2

Instrucciones para la instalación del conector V2 de VTEX

Suggest Edits

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, bines 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.

📘

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

Una vez que copiaste 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

Paso 3: Guardar los cambios

  • Listo, ahora ya tienes la instalación completa y puedes realizar una transación de prueba.

Updated 5 months ago

Continua leyendo