Integration

Le SDK Javascript peut être utilisé pour une intégration simple et légère, mais il inclut également un mode en contexte qui hébergera le paiement Sezzle dans un iframe modal ou une fenêtre pop-up.

Paiements

Créez des paiements et capturez des paiements avec Sezzle.

Intégrations

Paiement dans un iframe, une fenêtre pop-up, ou redirection vers Sezzle.

Paiements

Gérez le succès, l’échec ou l’annulation du paiement avec vos commandes Sezzle.

Bouton Sezzle

Affichez le bouton de paiement Sezzle sur votre boutique.

Inclure le code SDK

Incluez le script suivant dans la <head> section de la page.

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

Configuration du paiement

La première étape pour démarrer avec le SDK JavaScript direct est de configurer un nouvel objet Checkout.

Options de configuration

Modèle
Exemple
Options

const checkoutSdk = new Checkout({
  mode: string,
  publicKey: string,
  apiMode: string,
  apiVersion: string,
});

const checkoutSdk = new Checkout({
  mode: "popup",
  publicKey: "sz_pub_...",
  apiMode: "sandbox",
  apiVersion: "v2",
});

string

défaut:"popup"

Options disponibles : popup, iframe, redirect

Si vous utilisez le mode iframe, ajoutez *.sezzle.com à la liste d’autorisation de la politique de sécurité du contenu (CSP) de votre site afin que l’iframe de paiement Sezzle puisse se charger.

popup (recommandé) : fonctionne immédiatement pour la plupart des intégrations SDK basées sur un navigateur.
iframe : requis lorsque les pop-ups sont bloquées (par exemple, dans une webview ou un navigateur intégré). Sezzle doit d’abord activer l’iframe pour votre ou vos domaines — soumettez votre UUID Marchand et les domaines à autoriser par environnement (sandbox et production). Par exemple : veuillez activer uat1.mysite.com, uat2.mysite.com en sandbox et www.mysite.com, mysite.com en production.
redirect : pris en charge mais généralement moins utile avec le SDK, car la valeur du SDK réside dans le paiement en contexte et la messagerie de fenêtre.

string

requis

Utilisé lors de la création d’un paiement ou de la capture d’un paiement. Trouvez vos clés API sur https://dashboard.sezzle.com/merchant/settings/apikeys

string

défaut:"live"

Environnement dans lequel le paiement doit être effectuéOptions disponibles : live, sandbox

string

défaut:"v2"

La version de l’API Sezzle Checkout que le SDK appellera. Utilisez v2 sauf indication contraire.Options disponibles : v2

Option de paiement

Cette section explique comment présenter Sezzle comme méthode de paiement lors du paiement. Selon la conception de votre page web, vous pouvez souhaiter afficher Sezzle comme un bouton de méthode de paiement alternative (APM), une option radio dans une liste de méthodes de paiement, et/ou comme un bouton de soumission alternatif. Voici quelques exemples de mise en œuvre du composant front-end.

Si vous souhaitez utiliser un design différent des options affichées ci-dessous, veuillez vous référer à nos Directives de co-marquage pour les messages approuvés et l’utilisation acceptable du logo Sezzle.

Sezzle dans le tableau des méthodes de paiement

Voici un exemple de Sezzle comme radio de méthode de paiement.

Image
Exemple d'extrait

Cet exemple d’extrait est fourni à titre informatif uniquement. Veuillez suivre le format HTML établi de vos méthodes de paiement existantes.

        <div class="payment-method-tile">
            <input type="radio" id="sezzlepay" value="sezzlepay"/>
            <label for="sezzlepay">
                <div style="width: 100%; display: inline; align-items: center; justify-content: left;">
                    <img src="https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg" alt="Sezzle" style="height: 20px; width: fit-content; padding: 0px 4px 0 2px; position: relative; top: 4px;"/>
                    <span>Buy Now, Pay Later</span>
                </div>
            </label>
        </div>

Bouton Sezzle

L’option bouton est disponible en tant que composant de cette bibliothèque SDK. Elle est composée de deux parties : l’espace réservé d’élément configurable et la fonction de rendu.

Configuration du bouton Sezzle

Placez l’extrait d’élément de l’onglet Modèle à l’endroit où vous souhaitez que le bouton Sezzle soit rendu sur la page, puis mettez à jour les attributs Options selon vos besoins.

Image
Modèle
Exemple
Options

Sezzle comme bouton aux côtés d’autres APM

Sezzle comme bouton de soumission en alternative au bouton par défaut

<div id="sezzle-smart-button-container" style="text-align: center"></div>

<div
    id="sezzle-smart-button-container"
    style="text-align: center"
    templateText="Pay with %%logo%%"
    borderType="semi-rounded"
    customClass="action,primary,checkout"
></div>

string

défaut:"Checkout with %%logo%%"

Texte à afficher à l’intérieur du bouton. Utilisez %%logo%% dans le texte pour afficher l’image Sezzle

string

défaut:"light"

Le thème correspond à la couleur d’arrière-plan de votre site. Si theme: dark, le bouton sera blanc avec du texte sombre. Sinon, le bouton sera violet foncé avec du texte blanc.Options disponibles : dark, light

string

défaut:"square"

Options disponibles : square, semi-rounded

string

Classes personnalisées à appliquer

string

défaut:"1px"

Espace vide entre le haut du contenu et le bord supérieur du bouton

string

défaut:"7px"

Espace vide entre le bas du contenu et le bord inférieur du bouton

string

défaut:"30px"

Espace vide entre le côté gauche du contenu et le bord gauche du bouton

string

défaut:"30px"

Espace vide entre le côté droit du contenu et le bord droit du bouton

string

défaut:"84px"

Largeur du logo Sezzle à l’intérieur du bouton

string

CSS top décalage pour le logo Sezzle à l’intérieur du bouton (par ex., 2px).

string

CSS bottom décalage pour le logo Sezzle à l’intérieur du bouton (par ex., 2px).

string

CSS left décalage pour le logo Sezzle à l’intérieur du bouton (par ex., 2px).

string

CSS right décalage pour le logo Sezzle à l’intérieur du bouton (par ex., 2px).

string

Espacement entre les lettres du templateText.

string

Largeur du bouton

string

défaut:"4.2em"

Hauteur du bouton.

Afficher le bouton Sezzle

Ajoutez la fonction suivante pour afficher le bouton au moment approprié, par exemple lorsque la section des méthodes de paiement se charge, ou lorsque Sezzle est sélectionné comme méthode de paiement. Le paramètre correspond à l’élément créé à l’étape précédente.

checkoutSdk.renderSezzleButton("sezzle-smart-button-container");

Initialiser le paiement

Gestionnaires d’événements

Le SDK utilise ces gestionnaires d’événements pour informer votre site de ce qui se passe lors du paiement. Implémentez chacun d’eux pour réagir aux actions de l’acheteur, comme compléter, annuler ou rencontrer une erreur.

Modèle
Exemple
Options

checkoutSdk.init({
  onClick: function () {
    event.preventDefault();
    checkoutSdk.startCheckout({...});
  },
  onComplete: function (response) {
    console.log(response.data);
  },
  onCancel: function () {
    console.log("Checkout cancelled.");
  },
  onFailure: function () {
    console.log("Checkout failed.");
  },
});

checkoutSdk.init({
  onClick: function () {
    event.preventDefault();
    checkoutSdk.startCheckout({
      checkout_payload: {
        order: {
          intent: "AUTH",
          reference_id: "543645yg5tg5675686",
          description: "sezzle-store - #12749253509255",
          order_amount: {
            amount_in_cents: 10000,
            currency: "USD",
          },
        },
      },
    });
  },
  onComplete: function (response) {
    alert("Completed transaction. Capture started.");
    checkoutSdk
    .capturePayment(response.data.order_uuid, {
        capture_amount: {
        amount_in_cents: 10000,
        currency: "USD",
        },
        partial_capture: false,
    })
    .then((r) => {
        console.log(r);
    });
  },
  onCancel: function () {
    console.log("Checkout cancelled.");
  },
  onFailure: function () {
    console.log("Checkout failed.");
  },
});

function

requis

S’exécute lorsque l’acheteur clique sur le bouton Sezzle.Utilisez cette fonction pour créer la session de paiement Sezzle et diriger l’acheteur dans ce flux.

Voir Initialisation du paiement section pour startCheckout options de payload.

function

requis

S’exécute lorsque le paiement Sezzle se termine avec succès. Utilisez ceci pour enregistrer la commande et, si vous avez utilisé intent: AUTH, pour capturer le paiement.

Voir Capture du paiement section pour capturePayment options de payload.

Afficher paramètres

object

La réponse de complétion du paiement

Afficher attributs enfants

object

Données de complétion du paiement

Afficher attributs enfants

string

"success"

string

UUID du paiement

string

UUID de session

string

UUID de commande

string

URL d’origine de la fenêtre de paiement

function

requis

S’exécute lorsque l’acheteur quitte le paiement Sezzle avant d’avoir terminé le paiement. Utilisez ceci pour mettre à jour le statut de la commande dans votre système.

Afficher paramètres

object

La réponse à l’événement d’annulation

Afficher attributs enfants

object

Données de l’événement d’annulation

Afficher attributs enfants

string

"cancel"

string

L’UUID du paiement qui a échoué

string

UUID de session

string

UUID de commande

string

URL d’origine de la fenêtre de paiement

function

requis

S’exécute lorsque le paiement Sezzle ne parvient pas à se charger ou rencontre une erreur. Utilisez ceci pour mettre à jour le statut de la commande et signaler l’échec à l’acheteur.

Afficher paramètres

object

La réponse à l’échec

Afficher attributs enfants

object

Objet d’erreur ou réponse d’erreur API. Lorsque data est un Error:

Afficher attributs enfants

string

"failure"

string

L’UUID du paiement qui a échoué

string

UUID de session

string

UUID de commande

string

Message d’erreur (par ex., "Public Key is missing.")

string

URL d’origine de la fenêtre de paiement

Initialisation du paiement

Modèle
Exemple
Options

checkoutSdk.startCheckout({
  checkout_payload: {
    order: {
      intent: string,
      reference_id: string,
      description: string,
      order_amount: {
        amount_in_cents: integer,
        currency: string,
      },
    },
  },
});

checkoutSdk.startCheckout({
  checkout_payload: {
    order: {
      intent: "AUTH",
      reference_id: "543645yg5tg5675686",
      description: "sezzle-store - #12749253509255",
      order_amount: {
        amount_in_cents: 10000,
        currency: "USD",
      },
    },
  },
});

Le checkout_payload le schéma reflète le Create Session corps de la requête. Consultez ce document de référence pour la liste complète des champs, types et contraintes.

Vous pouvez également démarrer le paiement par URL :

checkout.startCheckout({
    checkout_url: "https://checkout.sezzle.com/?id=example",
});

Le startCheckout la méthode doit être implémentée dans le paiement onClick gestionnaire. Il existe deux façons de démarrer le paiement :

Avec un payload de paiement — passez l’objet de session complet en ligne (comme indiqué ci-dessus). Les URL d’annulation et de finalisation sont facultatives pour iframe et popup mode.
Avec une URL de paiement existante — appelez startCheckout({ checkout_url }). Le SDK mode doit correspondre au checkout_mode que vous avez utilisé lors de la création de la session. Pour iframe et popup, incluez le origin de la fenêtre parente dans les URL d’annulation et de finalisation.

Tokenisation du client : l’UUID du client n’est pas transmis via onComplete. Pour le recevoir, abonnez-vous à l’événement webhook customer.tokenized.

Paiement finalisé par payload

function onCompleteHandler(event) {
    var data = event.data || Object.create(null);

    console.log("session data:", data.session_uuid, data.order_uuid);
}

checkout.init({
    onComplete: onCompleteHandler,
});

Paiement finalisé par URL

function onCompleteHandler(event) {
    var data = event.data || Object.create(null);

    console.log("checkout data:", data.checkout_uuid);
}

checkout.init({
    onComplete: onCompleteHandler,
});

Capture du paiement

Ignorez cette étape si vous avez utilisé l’intention CAPTURE lors du démarrage du paiement — Sezzle capture la commande automatiquement.

Modèle
Exemple
Options

var payload = {
    capture_amount: {
        amount_in_cents: integer,
        currency: string,
    },
};

checkout.capturePayment(data.order_uuid, payload);

var payload = {
    capture_amount: {
        amount_in_cents: 5000,
        currency: "USD",
    },
};

checkout.capturePayment(data.order_uuid, payload);

La méthode de capture du paiement nécessite deux paramètres, le order_uuid et le payload tel que détaillé dans le Capture Amount By Order Object.

Le capturePayment le corps de la requête reflète le Capture by Order corps de la requête. Consultez ce document de référence pour la liste complète des champs, types et contraintes.

Plan de versements

const checkout = new Checkout({});
checkout.getInstallmentPlan(1000);

Modèle
Exemple
Options

{
    "schedule": string,
    "totalInCents": integer,
    "installments": [
        {
            "installment": integer,
            "amountInCents": integer,
            "dueDate": string
        }
    ]
}

{
    "schedule": "bi-weekly",
    "totalInCents": 1000,
    "installments": [
        {
            "installment": 1,
            "amountInCents": 250,
            "dueDate": "2020-10-14"
        },
        {
            "installment": 2,
            "amountInCents": 250,
            "dueDate": "2020-10-28"
        },
        {
            "installment": 3,
            "amountInCents": 250,
            "dueDate": "2020-11-11"
        },
        {
            "installment": 4,
            "amountInCents": 250,
            "dueDate": "2020-11-25"
        }
    ]
}

Cette fonction fournira les détails du versement en fonction d’un montant en centimes. Un paiement existant peut être utilisé, ou un checkout sans aucune configuration peut également être utilisé pour obtenir rapidement les détails du versement.

Sezzle

Intégration Directe

Carte Virtuelle

Ressources

Paiement Express

SDKs Mobiles

Autre

Paiements

Intégrations

Paiements

Bouton Sezzle

Inclure le code SDK

Configuration du paiement

Options de configuration

Option de paiement

Sezzle dans le tableau des méthodes de paiement

Bouton Sezzle

Configuration du bouton Sezzle

Afficher le bouton Sezzle

Initialiser le paiement

Gestionnaires d’événements

Initialisation du paiement

Paiement finalisé par payload

Paiement finalisé par URL

Capture du paiement

Plan de versements

Paiements

Intégrations

Paiements

Bouton Sezzle

​Inclure le code SDK

​Configuration du paiement

​Options de configuration

​Option de paiement

​Sezzle dans le tableau des méthodes de paiement

​Bouton Sezzle

​Configuration du bouton Sezzle

​Afficher le bouton Sezzle

​Initialiser le paiement

​Gestionnaires d’événements

​Initialisation du paiement

​Paiement finalisé par payload

​Paiement finalisé par URL

​Capture du paiement

​Plan de versements

Inclure le code SDK

Configuration du paiement

Options de configuration

Option de paiement

Sezzle dans le tableau des méthodes de paiement

Bouton Sezzle

Configuration du bouton Sezzle

Afficher le bouton Sezzle

Initialiser le paiement

Gestionnaires d’événements

Initialisation du paiement

Paiement finalisé par payload

Paiement finalisé par URL

Capture du paiement

Plan de versements