> ## 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.

# About sezzle

Inclure une page dédiée à Sezzle sur votre site Web aide les clients à comprendre comment Sezzle fonctionne et met en valeur les avantages de l'utiliser comme option de paiement. Nous fournissons un modèle HTML prêt à l'emploi pour simplifier le processus. Pour commencer :

Sélectionnez votre plateforme de site Web :

* [Shopify](#shopify-process)
* [Lightspeed](#lightspeed-process)
* [Autre](#other-platforms)

<Tip>
  Pour voir un exemple de ce à quoi ressemble la page, cliquez [ici](https://sezzle-test.myshopify.com/pages/how-sezzle-works).
</Tip>

## Processus Shopify

Pour configurer la page sur Shopify, suivez les étapes ci-dessous.

### Partie 1 : Créer la page

1. Connectez-vous à votre boutique Shopify
2. Sous `Online Store`, cliquez sur `Pages`
3. Cliquez sur `Add Page`, et donnez-lui un titre - nous recommandons quelque chose comme "Comment fonctionne Sezzle" ou "Comment utiliser Sezzle"
4. Cliquez sur `</>` (Afficher le HTML)
5. Copiez le [code](#code-snippet) et collez-le dans le nouveau modèle
6. Dans la configuration, mettez à jour la valeur `merchant_uuid` avec votre [identifiant marchand Sezzle](https://dashboard.sezzle.com/merchant/settings/business), puis cliquez sur `Save`
   * Voir [ci-dessous](#options) pour des détails supplémentaires et les options de configuration
7. Cliquez sur `Save` puis cliquez sur `Preview` pour confirmer le succès de l'installation.
8. Retournez dans l'éditeur, passez à `Visible` puis cliquez sur `Save`

### Partie 2 : Ajouter à la navigation

1. Allez à `Content` > `Menus`
2. Sélectionnez le menu que vous souhaitez modifier (ex : `Main menu`, `Footer menu`)
3. Cliquez sur `Add menu item`
4. Saisissez le libellé tel que vous souhaitez que le lien apparaisse, ex : `About Sezzle`
5. Cliquez dans la zone `Link`, sélectionnez `Pages`, puis la nouvelle page Sezzle que vous avez créée
6. Cliquez sur `Save`

## Processus Lightspeed

En raison des restrictions de Lightspeed qui empêchent `script` et `style` les balises d'être enregistrées dans les Pages, notre script d'installation standard est incompatible. Vous trouverez ci-dessous les instructions pour installer le HTML et le CSS séparément à partir d'une ancienne version de notre code.

1. Connectez-vous à l'administration de votre boutique
2. Naviguez vers `Content` > `Add Page`
3. Saisissez le titre : `About Sezzle` ou `How Sezzle Works`
4. Sous Contenu, cliquez sur le bouton `<>` bouton
5. Copiez-collez le code depuis [Github](https://github.com/sezzle/sezzle-merchant-resources/blob/4eb6f8bafb645c8b4e41524d7dc968bf5c60afb1/light-theme.html) (`<script>` et `<style>` les balises seront supprimées automatiquement, en raison des restrictions de Lightspeed)
6. Cliquez sur `Save`, puis cliquez sur `Back to Home`
7. Naviguez vers `Design` > `Theme Editor`
8. Dans la vignette du thème, cliquez sur `Advanced` puis `Customize CSS`
9. Copiez-collez le contenu de la balise style depuis [Github](https://github.com/sezzle/sezzle-merchant-resources/blob/4eb6f8bafb645c8b4e41524d7dc968bf5c60afb1/light-theme.html)
10. Partout où la `font-family` est simplement indiquée comme `Comfortaa`, remplacez la valeur par `'Comfortaa', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', cursive, sans-serif;`
11. Trouvez `.sezzle-container section .breakdown-row .breakdown` et réduisez `font-size` de `28px` à `24px`.
12. Cliquez sur `Save`

## Autres plateformes

Pour configurer la page sur toute autre plateforme, veuillez travailler avec votre développeur Web et/ou suivre les étapes ci-dessous.

1. Créez une nouvelle page dans votre thème
2. Copiez et collez le code dans la page de votre site Web
3. Cliquez sur enregistrer et/ou publier !

## Extrait de code

Insérez le code suivant dans votre fichier HTML :

<Tabs>
  <Tab title="Modèle">
    ```html expandable theme={"system"}
    <div id="how-sezzle-works"></div>
      <script>
          const config = {
              merchant_uuid: string,
              theme: string,
              language: string,
              countryCode: string,
              numberOfPayments: integer
          }
          const node = document.getElementById('how-sezzle-works');
          const iframe = document.createElement('iframe');
          iframe.src = 'https://media.sezzle.com/how-sezzle-works/v2/index.html';
          iframe.height = '2000px';
          iframe.width = '100%';
          iframe.style.border = 'none';
          iframe.onload = function () {
              iframe.contentWindow.postMessage({
                  key: "about_sezzle_config",
                  ...config
              }, "*")
          };
          node.appendChild(iframe);
      </script>
    ```
  </Tab>

  <Tab title="Exemple">
    ```html expandable theme={"system"}
    <div id="how-sezzle-works"></div>
      <script>
          const config = {
              merchant_uuid: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
              theme: "light",
              language: "en",
              countryCode: "US",
              numberOfPayments: 5
          }
          const node = document.getElementById('how-sezzle-works');
          const iframe = document.createElement('iframe');
          iframe.src = 'https://media.sezzle.com/how-sezzle-works/v2/index.html';
          iframe.height = '2000px';
          iframe.width = '100%';
          iframe.style.border = 'none';
          iframe.onload = function () {
              iframe.contentWindow.postMessage({
                  key: "about_sezzle_config",
                  ...config
              }, "*")
          };
          node.appendChild(iframe);
      </script>
    ```
  </Tab>

  <Tab title="Options">
    <ParamField path="merchant_uuid" type="string" required>
      Votre identifiant marchand qui est au format : `xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx` [Trouvez-le ici](https://dashboard.sezzle.com/merchant/settings/business).
    </ParamField>

    <ParamField path="theme" default="light" type="string">
      Affiche le design de la page en mode sombre ou clair

      Options disponibles : `dark`, `light`
    </ParamField>

    <ParamField path="language" default="en" type="string">
      Contrôle la traduction du contenu de la page

      Options disponibles : `en`, `fr` , `es`
    </ParamField>

    <ParamField path="countryCode" default="US" type="string">
      Gère la disponibilité régionale des produits. Configuré pour lire la localisation IP de l'acheteur, ou la valeur sélectionnée dans le menu déroulant de pays de votre boutique si l'adresse IP n'est pas disponible. Si le code pays n'est pas CA, la logique sera par défaut US.

      Options disponibles : `US`, `CA`
    </ParamField>

    <ParamField path="numberOfPayments" default="5" type="integer">
      Gère le nombre maximum de versements bimensuels disponibles. Remplacez cette valeur par `4` si le paiement en 5 fois ne doit pas être affiché. Utilisez `countryCode` pour la disponibilité régionale des produits.

      Options disponibles : `5`, `4`
    </ParamField>

    ### Financement à long terme

    Si vous êtes inscrit à notre programme de financement à long terme, les options suivantes sont également disponibles :

    <ParamField path="LTgroup" type="string">
      Applique les paramètres à long terme en fonction de votre forfait de prêt. Veuillez confirmer la valeur applicable pour votre inscription auprès de votre gestionnaire de compte.

      Options: `a`, `b`
    </ParamField>

    <ParamField path="minPriceLT" type="integer">
      Remplacement du prix minimum (en dollars) pour lequel l'achat est éligible au prêt à long terme. Au-dessus de ce montant, les versements mensuels avec intérêts seront reflétés. En dessous de ce montant, seuls les versements bimensuels seront affichés.

      **Détails supplémentaires :** Lorsque LTgroup est défini, la valeur par défaut est `150` pour `a` ou `400` pour `b`.
    </ParamField>

    <ParamField path="maxPriceLT" type="string">
      Remplacement du prix maximum (en dollars) pour lequel l'achat est éligible au prêt à long terme. En dessous de ce montant, les versements mensuels avec intérêts seront reflétés. Au-dessus de ce montant, le champ de saisie indiquera une erreur.

      **Détails supplémentaires :** Lorsque LTgroup est défini, la valeur par défaut est `15000` pour `a` ou `8000` pour `b`.
    </ParamField>

    <ParamField path="minAPR" type="number">
      Taux annuel effectif global (TAEG) le plus bas proposé par le partenaire prêteur. Affiché comme la borne inférieure de la plage de TAEG dans la clause de non-responsabilité.

      **Détails supplémentaires :** Lorsque LTgroup est défini, la valeur par défaut est `9.99` pour `a` ou `24.99` pour `b`.
    </ParamField>

    <ParamField path="medianAPR" type="number">
      TAEG représentatif utilisé pour calculer le montant des versements mensuels affiché dans la carte de versements.

      **Détails supplémentaires :** Lorsque LTgroup est défini, la valeur par défaut est `21.99` pour `a` ou `29.99` pour `b`.
    </ParamField>

    <ParamField path="maxAPR" type="number">
      TAEG le plus élevé proposé par le partenaire prêteur. Affiché comme la borne supérieure de la plage de TAEG dans la clause de non-responsabilité.

      **Détails supplémentaires :** Lorsque LTgroup est défini, la valeur par défaut est `34.99` pour `a` ou `35.99` pour `b`.
    </ParamField>

    <ParamField path="termsToShow" type="object">
      Définit les durées de prêt (en mois) qui s'affichent en fonction du montant de la commande. Les clés sont des seuils de prix (en dollars) ; le code sélectionne le tableau de durées dont le seuil est dépassé par le prix (la correspondance la plus haute l'emporte). La clé par défaut est utilisée lorsqu'aucun seuil ne correspond. Les durées minimale et maximale affichées dans la clause de non-responsabilité sont dérivées de l'union de tous les tableaux de durées.

      **Détails supplémentaires :** Lorsque LTgroup est défini, la valeur par défaut est `{ default: [3, 6, 9], 300: [6, 9, 12], 500: [12, 18, 24], 1000: [24, 36, 48] }` pour `a` ou `{ default: [3, 6, 9], 600: [6, 9, 12], 800: [9, 12, 24], 1000: [12, 24, 36] }` pour `b`.
    </ParamField>
  </Tab>
</Tabs>