Passer au contenu principal
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

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

​
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.
Payment Methods Table

​
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.
APM-button

Sezzle comme bouton aux côtés d’autres APM
Submit%20button

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

​
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. 
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.");
  },
});

​
Initialisation du paiement

checkoutSdk.startCheckout({
  checkout_payload: {
    order: {
      intent: string,
      reference_id: string,
      description: string,
      order_amount: {
        amount_in_cents: integer,
        currency: string,
      },
    },
  },
});
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.
var payload = {
    capture_amount: {
        amount_in_cents: integer,
        currency: string,
    },
};

checkout.capturePayment(data.order_uuid, payload);

​
Plan de versements

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

{
    "schedule": string,
    "totalInCents": integer,
    "installments": [
        {
            "installment": integer,
            "amountInCents": integer,
            "dueDate": string
        }
    ]
}
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.