Aller au contenu principal
Tous les systèmes sont opérationnelsNouveautésv1
Se connecter

V2 Widget VTEX

Installez et configurez le connecteur DEUNA Widget V2 dans la caisse VTEX.

Sur cette page
Méthode d’intégration

Configurez une expérience de paiement DEUNA dans VTEX.

Installez le connecteur certifié, configurez les conditions de paiement et enrichissez le checkout VTEX avec DEUNA Widget.

Interface
Checkout VTEX avec DEUNA Widget
Mode de déploiement
Configuration de l’application et du connecteur VTEX
Idéal pour
Marchands VTEX utilisant l’orchestration des paiements DEUNA
Comparer les méthodesOuvrir la référence

Cette page fournit des instructions pour installer le connecteur VTEX V2.

La plateforme VTEX dispose d'un système d'application de paiement conçu pour permettre aux clients de réaliser leurs achats sans quitter votre site Web.

Toutefois, cette solution comporte certaines limites en ce qui concerne la mise en oeuvre de promotions ciblées et la fourniture d'informations pertinentes sur les options de financement, comme les plans de paiement fondés sur les intérêts et sans intérêt.

Le widget V2 vous permet de :

  • Appliquer des promotions dans des conditions spécifiques
  • Faciliter la transmission d'informations sur les options de financement
  • Comprend des détails sur les paiements mensuels avec et sans intérêts.

Configurer le widget DEUNA V2#

Pour commencer à utiliser le widget DEUNA V2 dans votre boutique VTEX, vous devrez fournir quelques détails à l'équipe DEUNA :

  1. VTEX API KEY
  2. VTEX APP TOKEN
  3. Nom du titulaire du compte de justificatifs

Avec cette information, DEUNA pourra configurer tout ce qui est nécessaire pour que vous puissiez configurer le widget V2.

1. Intégrer le script Widget#

Pour utiliser le connecteur V2, vous devez intégrer le script suivant dans votre configuration de commande dans votre boutique VTEX.

Pour le départ Legacy

Ajoutez le script en entrant votre administrateur VTEX dans le chemin suivant : 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);
    });

Cliquez sur Save pour finir.

Pour la commande personnalisée de l'interface utilisateur

Ajoutez le script en entrant votre administrateur VTEX dans le chemin suivant : 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);
    });

Cliquez Enregistrer pour finir.

Pour la caisse personnalisée / personnalisée par le marchand

Ajouter le fichier de caisse JavaScript au script suivant:

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. Remplacer les valeurs des variables#

Après avoir copié le script, remplacer les variables par les informations correspondantes:

Variable

Descriptif

base_url

URL CDN dépendant du nom d'environnement. Avec cette URL, notre script chargera la version du widget.

Boîte à sable y Producción: https://cdn.deuna.io/snippets/v2.0.0/index.js

environment_name

Environnement pour le widget. (portée, bac à sable, production)

public_key

Clé publique de votre entreprise

3. Faites votre premier achat#

Une fois configuré, vous pouvez effectuer un achat d'essai en quelques étapes simples.

Obtenez des cartes pour passer des tests

Pour notre environnement de bac à sable, DEUNA vous fournit des cartes pour les tests.

Tu peux les avoir.ici

Obtenez les identifiants de test de connecteur

Pour obtenir des références pour tester le connecteur, vous devez envoyer un email à votre exécutif ou en écrivant à supports@deuna.com.

Résultat