Passa al contenuto principale
Tutti i sistemi operativiNovitàv1
Accedi

V2 VTEX Widget

Installare e configurare il connettore V2 DEUNA Widget in VTEX.

In questa pagina
Metodo di integrazione

Configura un’esperienza di pagamento DEUNA dentro VTEX.

Installa il connettore certificato, configura le condizioni di pagamento ed estendi il checkout VTEX con DEUNA Widget.

Interfaccia
Checkout VTEX con DEUNA Widget
Modello di distribuzione
Configurazione dell’app e del connettore VTEX
Ideale per
Merchant VTEX che usano l’orchestrazione dei pagamenti DEUNA
Confronta i metodiApri riferimento

Questa pagina fornisce istruzioni per l'installazione del connettore VTEX V2.

La piattaforma VTEX dispone di un sistema di app di pagamento progettato per consentire ai clienti di completare i loro acquisti senza lasciare il tuo sito web.

Tuttavia, questa soluzione ha alcuni limiti quando si tratta di implementare promozioni mirate e fornire informazioni rilevanti sulle opzioni di finanziamento, come i piani di pagamento basati sugli interessi e senza interessi.

Il widget V2 ti permette di:

  • Applicare promozioni in condizioni specifiche
  • Facilita la trasmissione di informazioni sulle opzioni di finanziamento
  • Include i dettagli dei pagamenti mensili con e senza interesse.

Configurare il DEUNA Widget V2#

Per iniziare a utilizzare il widget DEUNA V2 nel tuo negozio VTEX, dovrai fornire alcuni dettagli al team DEUNA:

  1. VTEX API KEY
  2. VTEX APP TOKEN
  3. Nome del titolare del conto credenziali

Con queste informazioni, DEUNA sarà in grado di configurare tutto il necessario in modo da poter configurare il widget V2.

1. Integrare lo script Widget#

Per utilizzare il connettore V2, è necessario integrare lo script seguente nella configurazione di checkout nel negozio VTEX.

Per il checkout Legacy

Aggiungi lo script inserendo il tuo amministratore VTEX nel seguente percorso: 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);
    });

Clicca su Save per finire.

Per UI Checkout personalizzato

Aggiungi lo script inserendo il tuo amministratore VTEX nel seguente percorso: 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);
    });

Cliccare su Salva per finire.

Per il checkout personalizzato / personalizzato dal commerciante

Aggiungi il file di controllo JavaScript al seguente 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. Sostituire i valori delle variabili#

Dopo aver copiato lo script, sostituire le variabili con le informazioni corrispondenti:

Variabile

Descrizione

base_url

URL CDN dipendente da environment name. Con questo URL il nostro script carica la versione del widget.

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

environment_name

Ambiente per il widget. (staging, sandbox, produzione)

public_key

Chiave pubblica del tuo business

3. Fai il tuo primo acquisto#

Una volta configurato, è possibile effettuare un acquisto di prova in pochi semplici passaggi.

Ottenere carte per prendere test

Per il nostro ambiente sandbox, DEUNA ti fornisce carte per il test.

Puoi prenderli.Qui qui

Ricevi le credenziali di test del connettore

Per ottenere le credenziali per testare il connettore, è necessario inviare una email al proprio esecutivo o scrivendo a supports@deuna.com.

Risultato