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

  • Modèle
  • Exemple
  • Options
const checkoutSdk = new Checkout({
  mode: string,
  publicKey: string,
  apiMode: string,
  apiVersion: string,
});

​
Bouton Sezzle

​
Configuration du bouton Sezzle

Créez un élément d’emplacement pour que le bouton Sezzle soit rendu sur la(les) page(s).
  • Modèle
  • Exemple
  • Options
<div id="sezzle-smart-button-container" style="text-align: center"></div>

​
Afficher le bouton Sezzle

Nécessite d’avoir l’objet checkout créé ci-dessus pour afficher le bouton. Appelez renderSezzleButton en passant le id de l’élément d’emplacement défini dans la Configuration du bouton, ci-dessus. 
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.
  • Modèle
  • Exemple
  • Options
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

  • Modèle
  • Exemple
  • Options
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 onClick. Il existe deux méthodes pour héberger un paiement. Utiliser une charge utile de paiement comme détaillé dans l’Objet de Session
  • Les URL d’annulation et de complétion ne sont pas requises pour les modes iframe et popup.
Utiliser une URL de paiement existante
  • Le mode utilisé lors de la configuration du SDK de paiement 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 complétion 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 à customer.tokenized event.

​
Paiement terminé 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 terminé 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 nécessaire si le CAPTURE intent a été utilisé lors de la création du paiement.
  • Modèle
  • Exemple
  • Options
var payload = {
    capture_amount: {
        amount_in_cents: integer,
        currency: string,
    },
};

checkout.capturePayment(data.order_uuid, payload);

​
Plan de Versement

const checkout = new Checkout({});
checkout.getInstallmentPlan(1000);
  • Modèle
  • Exemple
  • Options
{
    "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.