Saltar al contenido principal
Todos los sistemas operativosNovedadesv1
Iniciar sesión

Widget V2 VTEX

Instalar y configurar el conector DEUNA Widget V2 en el checkout de VTEX.

En esta página
Método de integración

Configura una experiencia de pago impulsada por DEUNA dentro de VTEX.

Instala el conector certificado, configura las condiciones de pago y amplía el checkout de VTEX con DEUNA Widget.

Interfaz
Checkout de VTEX con DEUNA Widget
Modelo de entrega
Configuración de la aplicación y el conector de VTEX
Ideal para
Comercios VTEX que usan la orquestación de pagos de DEUNA
Comparar métodosAbrir referencia

Esta página proporciona instrucciones para instalar el conector VTEX V2.

La plataforma VTEX cuenta con un sistema de aplicación de pago diseñado para permitir a los clientes completar sus compras sin salir de su sitio web.

Sin embargo, esta solución tiene algunas limitaciones a la hora de implementar promociones específicas y proporcionar información relevante sobre opciones de financiación, como planes de pago basados y sin intereses.

El widget V2 le permite:

  • Aplicar promociones bajo condiciones específicas.
  • Facilita la transmisión de información sobre opciones de financiación.
  • Incluye detalle de pagos mensuales con y sin intereses.

Configurar el widget DEUNA V2#

Para comenzar a utilizar el widget DEUNA V2 en tu tienda VTEX, deberás proporcionar algunos detalles al equipo de DEUNA:

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

Con esta información DEUNA podrá configurar todo lo necesario para que puedas configurar el widget V2.

1. Integre el script del widget#

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

Para pagar Legado

Agregue el script ingresando a su administrador VTEX en la siguiente ruta: Store Settings -> Storefront -> Checkout -> Code -> checkoutcustom6.js

jsJavaScript
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);
    });

Haga clic en Save para terminar.

Para pago personalizado de UI

Agregue el script ingresando a su administrador VTEX en la siguiente ruta: Store Settings -> Storefront -> Checkout UI Custom -> Javascript

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);
    });

Clic Guardar para terminar.

Para realizar el pago Personalizado/Personalizado por el comerciante

Agregue el archivo de pago de JavaScript al siguiente script:

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);
    });

2. Reemplazar los valores de las variables.#

Después de copiar el script, reemplace las variables con la información correspondiente:

variable

Descripción

base_url

La URL de CDN depende de nombre_entorno. Con esta URL nuestro script cargará la versión del widget.

Sandbox y Producción: https://cdn.deuna.io/snippets/v2.0.0/index.js

environment_name

Entorno para el widget. (puesta en escena, sandbox, producción)

public_key

Clave pública de tu negocio

3. Realiza tu primera compra#

Una vez configurado, podrás realizar una compra de prueba en unos sencillos pasos.

Obtener tarjetas para realizar exámenes

Para nuestro entorno sandbox, DEUNA le proporciona tarjetas para realizar pruebas.

puedes conseguirlosaquí

Obtenga credenciales de prueba de conector

Para obtener las credenciales para probar el conector es necesario enviar un correo electrónico a su ejecutivo o escribir a supports@deuna.com.

Resultado