Widget de versements à la caisse

​

Objectif

​

Installation

• Package NPM
• Extrait de code (mise à jour automatique)
• Extrait de code (fichier statique)

​

Implémentation NPM

import SezzleInstallmentWidget from @sezzle/sezzle-installment-widget

​

Implémentation CDN

<script type="text/javascript" defer src="https://checkout-sdk.sezzle.com/installment-widget.min.js"/>

​

Implémentation statique

​

Méthode Shopify

1. Connectez-vous à votre interface d’administration Shopify
2. Accédez à Online Store > Themes
3. Sur le thème que vous souhaitez modifier, cliquez sur ... puis sélectionnez Edit Code
4. Dans le Assets dossier, cliquez sur New File et nommez-le sezzle-installment-widget.js
5. Copiez-collez le code depuis Github, puis cliquez sur Save
6. Collez ce qui suit au bas du fichier templates/checkout.liquid dans Shopify, puis cliquez sur Save :
   {{ "sezzle-installment-widget.js" | asset_url | script_tag }}
   <script type="text/javascript">
       document.addEventListener('readystatechange', function(){
           var sezzlePaymentLine = document.querySelector('[alt="Sezzle"]').parentElement.parentElement.parentElement;
           var sezzleCheckoutWidget = document.createElement('div');
           sezzleCheckoutWidget.id = 'sezzle-installment-widget-box';
           sezzlePaymentLine.parentElement.insertBefore(sezzleCheckoutWidget, sezzlePaymentLine.nextElementSibling);
       })
   </script>
   
7. De retour dans le fichier Javascript, mettez à jour les valeurs des options suivantes selon le cas, puis cliquez sur Enregistrer :

• merchantLocale (facultatif) : Le code pays. Actuellement, Sezzle est uniquement disponible aux États-Unis et dans ses territoires, ainsi qu’au Canada. Par défaut : “US”.
• currencySymbol (facultatif) : Le symbole de devise à afficher dans le widget de versements. S’il n’est pas défini, le symbole de devise sera automatiquement détecté dans le contenu de l’élément total de caisse ciblé ou par défaut à $
• checkoutTotal (requis) : L’élément où le total de la caisse est affiché. (La valeur d’exemple est donnée pour Shopify par défaut)

​

Méthode indépendante de la plateforme

1. Créez une copie du code depuis Github dans le code du thème de votre boutique, puis importez-le dans le code de la page de caisse.
2. Invocation:

• Option 1 (recommandée) : Pour injecter dynamiquement l’élément de remplacement, ajoutez les lignes de code suivantes à exécuter une fois que le reste de la page a été chargé, en mettant à jour sezzlePaymentLine pour cibler la ligne de méthode de paiement Sezzle, en dessous de laquelle l’élément du widget de versements s’affichera :
  <script type="text/javascript">
      document.addEventListener('readystatechange', function(){
          var sezzlePaymentLine = document.querySelector('[alt="Sezzle"]').parentElement.parentElement.parentElement; // Shopify example
          var sezzleCheckoutWidget = document.createElement('div');
          sezzleCheckoutWidget.id = 'sezzle-installment-widget-box';
          sezzlePaymentLine.parentElement.insertBefore(sezzleCheckoutWidget, sezzlePaymentLine.nextElementSibling);
      })
  </script>
  
• Option 2 : Entrez les deux lignes de code suivantes à l’endroit où le widget de versements doit apparaître :
      <div id="sezzle-installment-widget-box"></div>
      <script src="sezzle-checkout-installment-widget.js"></script>
  

3. De retour dans le fichier Javascript, mettez à jour les valeurs des options suivantes selon le cas, puis enregistrez les modifications :

• merchantLocale (facultatif) : Le code pays. Actuellement, Sezzle est uniquement disponible aux États-Unis et dans ses territoires, ainsi qu’au Canada. Par défaut : “US”.
• currencySymbol (facultatif) : Le symbole de devise à afficher dans le widget de versements. S’il n’est pas défini, le symbole de devise sera automatiquement détecté dans le contenu de l’élément total de caisse ciblé ou par défaut à $
• checkoutTotal (requis) : L’élément où le total de la caisse est affiché. (La valeur d’exemple est donnée pour Shopify par défaut, les valeurs des autres principales plateformes sont enregistrées en tant que commentaires)

​

Configuration

<div id="sezzle-installment-widget-box"></div>
<script type='text/javascript'>
    new SezzleInstallmentWidget({
        'platform': `${yourPlatformIfSupported}`,
        'checkoutTotalElemTargetPath': `${yourPriceElementXPath}`
    });
</script>

<div id="sezzle-installment-widget-box"></div>
<script type='text/javascript'>
    new SezzleInstallmentWidget({
        'platform': 'shopify',
        // 'checkoutTotalElemTargetPath': '.payment-due__price'
    });
</script>