Custom integration

Add GreenLeaze easly on your product, cart and checkout pages

Le widget GreenLeaze vous permet d'ajouter GreenLeaze à vos pages produits, panier et à votre checkout en toute simplicité.

Installer le widget

Intégrez le script suivant dans votre code pour utiliser la version 1.0.6 de notre librairie.
En cas de changement de version vous serez prévenu et il suffira de modifier la version dans le lien.

JavaScript

<script src="https://cdn.greenleaze.com/widget/v1.0.6/greenleaze-widget.min.js"></script>

Insérez un élément div dans votre code HTML qui contiendra l'iframe In-Page.

HTML

 <div id="greenleaze-modal-container"></div>

Insérer un deuxième élément html dans votre code qui contiendra le Call-To-Action

HTML

<button id="greenleaze-button">Louer à partir de</button>

Ensuite, votre intégration dépend de votre page, en fonction choisissez le mode page produit ou le mode page panier.

Page produit

Dans un premier temps il est nécessaire d'initialiser GreenLeaze acec les informations du produit. Un sélecteur "priceSelector" peut être ajouté pour détecter automatiquement le prix du produit sur la page.

JavaScript

const greenLeaze = new window.GreenLeaze.GreenLeaze();
window.greenLeaze = greenLeaze;

 window.greenLeaze.init({
      instanceId: "default",
      buttonSelector: "#greenleaze-button",
      priceSelector: "#price",
      product: { // Les données qui sont ici seront renvoyé dans le callbackCreateOrder
        priceTTC: 1000,
        vatRate: 20,
      },
      customEvents: [],
      widgetConfig: {
        merchantId: "VOTRE IDENTIFIANT MARCHAND",
        publicKey: "VOTRE CLE API PUBLIQUE",
        apiMode: "prod",
        buttonText: "Louer à partir de [[rentalPrice]] € / mois",
      },
      callbackCreateOrder: (product) => {
        // Votre code pour déclencher la création d'une commande
      },
 });

Si votre page produit permet à vos client de sélectionner une variante de produit ou une personnalisation de ce dernier, vous pouvez mettre à jour les informations affichées à l'aide de la méthode updateProduct

JavaScript

window.greenLeaze.updateProduct(
        {
          priceTTC: priceElement.textContent,
          vatRate: 20,
          productId: "1234567890",
          variantId: "1234567890",
          quantity: 1,
        },
        "default",
);

Vous pouvez ajouter plusieurs widget GreenLeaze en modifiant l'identifiant du widget (par défaut "default")

Page Panier

Dans un premier temps il est nécessaire d'initialiser GreenLeaze acec les informations du panier.

JavaScript

const greenLeaze = new window.GreenLeaze.GreenLeaze();
window.greenLeaze = greenLeaze;

window.greenLeaze.init({
      instanceId: "default-cart",
      type: "cart",
      buttonSelector: "#greenleaze-button",
      cart: products,
      customEvents: [],
      widgetConfig: {
        merchantId: "VOTRE IDENTIFIANT MARCHAND",
        publicKey: "VOTRE CLE API PUBLIQUE",
        apiMode: "prod",
        buttonText: "Louer à partir de [[rentalPrice]] € / mois",
      },
      callbackCreateOrder: (cart) => {
        // Votre code pour déclencher la création d'une commande
      },
});

Lors d'une modification du panier vous pouvez ensuite mettre à jour le panier avec la méthode updateCart

JavaScript

  window.greenLeaze.updateCart(products, "default-cart");

L'objet products à la forme suivante :

JavaScript

[
  {
    id: "Identifiant unique de votre produit",
    variantId: "Identifiant secondaire de votre produit",
    quantity: 1,
    disabled: false, // Est-ce que le produit est en location ?
    vatRate: 20, // TVA en pourcentage
    priceTTC: 1000, // Prix avec TVA
    name: "Nom de votre produit",
    combination: "Variante de votre produit",
    productCategories: ["categorie de votre produit"]
  }
] 

Vous pouvez ajouter autant de champs supplémentaire que vous souhaitez sur chaque produit, ils seront retransmis lors de l'appel de callbackCreateOrder

Événements

Lors de l'instantiation du widget, votre bouton d'action est écouté pour ouvrir la page modale et des évènements sont envoyés lors de l'interaction de l'utilisateur. Vous pouvez écouter les événements suivants.

JavaScript

window.addEventListener("message", (e) => e.data.type === "greenleaze:modalInitialized" ? console.log("GreenLeaze Iframe has been loaded") : null)

Conséquence : Les prix sont recalculés et réinjectés.

JavaScript

window.addEventListener("message", (e) => e.data.type === "greenleaze:submitGreenleazeModal" ? console.log("User clicked on 'Submit'") : null)

Conséquence : La fonction callbackCreateOrder passée à l'instantiation du widget est appelée

JavaScript

window.addEventListener("message", (e) => e.data.type === "greenleaze:closeGreenleazeModal" ? console.log("User asked to close the iframe") : null)

Conséquence : La modale est retirée de la page

Rediriger l'utilisateur

Dans le callback callbackCreateOrder il est nécessaire que vous gériez :

1. La création de la transaction (Créer une transaction)
2. La redirection de l'utilisateur

⚠️ La création de la transaction ne doit pas s'effectuer côté client mais côté serveur avec une validation des prix unitaire des produits.

La redirection de l'utilisateur ne peux pas être effectuée dans une iframe. Il est nécessaire de rediriger l'utilisateur vers le lien de la transaction.