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

​
Bouton Sezzle

​
Configuration du bouton Sezzle

Créez un élément de placeholder pour que le bouton Sezzle soit rendu sur la(les) page(s).

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

​
Rendre le bouton Sezzle

Nécessite d’avoir l’objetcheckoutcréé ci-dessus pour rendre le bouton. AppelezrenderSezzleButtonen passant leidde l’élément placeholder 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.

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, commencez le paiement par URL :

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

Le début du paiement doit être implémenté dans le gestionnaire deonClickpaiement. Il existe deux méthodes pour héberger un paiement.

Utilisez une charge utile de paiement comme détaillé dans l’Objet de Session

  • Les URLs d’annulation et de complétion ne sont pas requises pour les modesiframeetpopup.

Utilisez une URL de paiement existante

  • Lemodeutilisé lors de la configuration du paiement SDK doit correspondre aucheckout_modelors de lacréation d’une session.
  • La fenêtre parentorigindoit être fournie dans les urls d’annulation et de complétion lorsque lecheckout_modeestiframeoupopup.

Tokenisation du clientCeci n’est pas pris en charge dans l’événementonComplete. 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.

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.