Passer au contenu principal
Le SDK Javascript peut être utilisé pour une intégration simple et légère, mais il comprend é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 des paiements 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 exigence pour commencer 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 checkout. Selon la conception de votre page web, vous pourriez 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 consulter 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 en tant que bouton radio de méthode de paiement.
Payment Methods Table

​
Bouton Sezzle

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

​
Configuration du bouton Sezzle

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

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

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

​
Rendre le bouton Sezzle

Ajoutez la fonction suivante pour rendre 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 nécessite les gestionnaires d’événements suivants qui peuvent être utilisés pour étendre les fonctionnalités de votre application. 
checkoutSdk.init({
  onClick: function () {
    event.preventDefault();
    checkoutSdk.startCheckout({...});
  },
  onComplete: function (event) {
    console.log(event.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,
      },
    },
  },
});
Alternativement, commencer le paiement par URL:
checkout.startCheckout({
    checkout_url: "https://checkout.sezzle.com/?id=example",
});
Le démarrage du paiement doit être implémenté dans le gestionnaire de paiement onClick. Il existe deux méthodes pour héberger un paiement. Utiliser une charge utile de paiement comme détaillé dans l’Objet Session
  • Les URL d’annulation et de finalisation ne sont pas requises pour iframe et popup mode.
Utiliser une URL de paiement existante
  • Le mode utilisé lors de la configuration du paiement SDK doit correspondre au checkout_mode lors de la création d’une session.
  • La fenêtre parent origin doit être fournie dans les urls d’annulation et de finalisation lorsque le checkout_mode est iframe ou popup.
Tokenisation du client Ceci n’est pas pris en charge dans l’événement onComplete. Pour recevoir un UUID client, abonnez-vous à l’événement customer.tokenized.

​
Paiement complété par charge utile

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 complété par URL

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

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

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

​
Capturer le paiement

La capture d’une commande n’est pas requise si l’intention CAPTURE a été utilisée lors de la création du paiement.
var payload = {
    capture_amount: {
        amount_in_cents: integer,
        currency: string,
    },
};

checkout.capturePayment(data.order_uuid, payload);

​
Plan de paiement échelonné

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

{
    "schedule": string,
    "totalInCents": integer,
    "installments": [
        {
            "installment": integer,
            "amountInCents": integer,
            "dueDate": string
        }
    ]
}
Cette fonction fournira les détails des versements basés sur un montant en centimes. Un checkout existant peut être utilisé, ou un checkout sans aucune configuration peut également être utilisé pour obtenir rapidement les détails des versements.