Pular para o conteúdo principal
Todos os sistemas operacionaisNovidadesv1
Entrar

Widget V2 VTEX

Instale e configure o conector DEUNA Widget V2 no checkout VTEX.

Nesta página
Método de integração

Configure uma experiência de pagamento da DEUNA dentro da VTEX.

Instale o conector certificado, configure condições de pagamento e amplie o checkout VTEX com o DEUNA Widget.

Interface
Checkout VTEX com DEUNA Widget
Modelo de entrega
Configuração do aplicativo e do conector VTEX
Ideal para
Lojistas VTEX que usam a orquestração de pagamentos DEUNA
Comparar métodosAbrir referência

Esta página fornece instruções para instalação do conector VTEX V2.

A plataforma VTEX conta com um sistema de aplicativos de pagamento desenvolvido para permitir que os clientes concluam suas compras sem sair do seu site.

No entanto, esta solução tem algumas limitações quando se trata de implementar promoções direcionadas e fornecer informações relevantes sobre opções de financiamento, como planos de pagamento com e sem juros.

O widget V2 permite:

  • Aplicar promoções sob condições específicas
  • Facilita a transmissão de informações sobre opções de financiamento
  • Inclui detalhes de pagamentos mensais com e sem juros.

Configurar o DEUNA Widget V2#

Para começar a utilizar o widget DEUNA V2 em sua loja VTEX, você precisará fornecer alguns detalhes para a equipe DEUNA:

  1. VTEX API KEY
  2. VTEX APP TOKEN
  3. Nome do titular da conta credencial

Com esta informação, DEUNA poderá configurar tudo o que for necessário para que possa configurar o widget V2.

1. Integre o script do widget#

Para utilizar o conector V2, você deve integrar o seguinte script na configuração de checkout da sua loja VTEX.

Para finalizar a compra Legado

Adicione o script informando seu administrador VTEX no seguinte caminho: 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);
    });

Clique em Save para terminar.

Para check-out personalizado da IU

Adicione o script informando seu administrador VTEX no seguinte caminho: 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);
    });

Clique Salvar para terminar.

Para Checkout Personalizado/Personalizado pelo comerciante

Adicione o arquivo de checkout JavaScript ao seguinte 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. Substitua os valores das variáveis#

Após copiar o script, substitua as variáveis pelas informações correspondentes:

Variável

Descrição

base_url

URL do CDN dependente de nome_do_ambiente. Com esta URL nosso script carregará a versão do widget.

Sandbox e Produção: https://cdn.deuna.io/snippets/v2.0.0/index.js

environment_name

Ambiente para o widget. (preparação, sandbox, produção)

public_key

Chave pública do seu negócio

3. Faça sua primeira compra#

Depois de configurado, você pode realizar uma compra experimental em algumas etapas simples.

Obtenha cartões para fazer testes

Para nosso ambiente sandbox, a DEUNA fornece cartões para teste.

Você pode obtê-losaqui

Obtenha credenciais de teste do conector

Para obter credenciais para testar o conector, você precisa enviar um e-mail ao seu executivo ou escrever para supports@deuna.com.

Resultado