> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sezzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget de versements à la caisse

## Objectif

Le widget de versements à la caisse affiche un exemple de plan de versements, incluant les montants et les dates d'échéance, au moment de la décision finale.

<img src="https://mintcdn.com/sezzle/gU3SzsA5tCIMe9m_/images/docs/guides/checkout-installments.png?fit=max&auto=format&n=gU3SzsA5tCIMe9m_&q=85&s=c36be3df2cb55dca38f99cb1c7044b5e" alt="Checkout Installment Widget Pn" className="mx-auto" style={{ width:"66%" }} width="567" height="578" data-path="images/docs/guides/checkout-installments.png" />

## Installation

Sélectionnez l'implémentation qui correspond à vos besoins :

* [Package NPM](#npm-implementation)
* [Extrait de code (mise à jour automatique)](#cdn-implementation)
* [Extrait de code (fichier statique)](#static-implementation)

### Implémentation NPM

Avec npm : `npm install @sezzle/sezzle-installment-widget@latest`

Dans votre page de caisse, ajoutez l'extrait de code suivant pour importer la bibliothèque :

```html theme={"system"}
import SezzleInstallmentWidget from @sezzle/sezzle-installment-widget
```

À l'endroit où vous souhaitez que le widget s'affiche, ajoutez l'extrait de la section [Configuration](#configuration) ci-dessous, en mettant à jour les options pour déterminer le prix.

### Implémentation CDN

Dans votre page de caisse, ajoutez l'extrait de code suivant pour importer la bibliothèque :

```html theme={"system"}
<script type="text/javascript" defer src="https://checkout-sdk.sezzle.com/installment-widget.min.js"/>
```

À l'endroit où vous souhaitez que le widget s'affiche, ajoutez l'extrait de la section [Configuration](#configuration) ci-dessous, en mettant à jour les options pour déterminer le prix.

### Implémentation statique

<Note>
  La langue sera détectée automatiquement, d'abord par l'attribut lang HTML, puis par le navigateur par défaut de l'utilisateur, et enfin par défaut à EN.
</Note>

#### Méthode Shopify

<Note>
  Compatible avec les boutiques Shopify Plus uniquement.
</Note>

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](https://github.com/sezzle/static-widgets/blob/production/src/sezzle-checkout-installment-widget/sezzle-checkout-installment-widget.js), puis cliquez sur `Save`
6. Collez ce qui suit au bas du fichier `templates/checkout.liquid` dans Shopify, puis cliquez sur `Save` :
   ```html theme={"system"}
   {{ "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](https://github.com/sezzle/static-widgets/blob/production/src/sezzle-checkout-installment-widget/sezzle-checkout-installment-widget.js) 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 :
  ```html theme={"system"}
  <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 :
  ```html theme={"system"}
      <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

<Note>
  Non applicable pour l'implémentation statique
</Note>

<Tabs>
  <Tab title="Modèle">
    ```html theme={"system"}
    <div id="sezzle-installment-widget-box"></div>
    <script type='text/javascript'>
        new SezzleInstallmentWidget({
            'platform': `${yourPlatformIfSupported}`,
            'checkoutTotalElemTargetPath': `${yourPriceElementXPath}`
        });
    </script>
    ```
  </Tab>

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

  <Tab title="Options">
    <Note>
      Soit `platform` ou `checkoutTotalElemTargetPath` est requis, mais pas les deux.
    </Note>

    <ParamField body="platform" type="string">
      La plateforme de commerce électronique qui héberge la page de caisse. Si elle n'est pas prise en charge, veuillez vous référer à checkoutTotalElemTargetPath.

      Options disponibles : `shopify`, `woocommerce`, `3dcart`, `commentsold`, `magento2`, `prestashop`, `shopware`, `opencart`
    </ParamField>

    <ParamField body="checkoutTotalElemTargetPath" type="string">
      L'identifiant ou le nom de classe de l'élément contenant le montant total de la commande.
    </ParamField>

    <ParamField body="currency" default="$" type="string">
      Le symbole de devise à afficher dans le prix. Par défaut, le widget imitera la devise de l'élément ciblé du montant total de la commande si présent, et utilisera \$ par défaut si non fourni.
    </ParamField>
  </Tab>
</Tabs>