Passer au contenu principal

Documentation Index

Fetch the complete documentation index at: https://docs.sezzle.com/llms.txt

Use this file to discover all available pages before exploring further.

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 transactions 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 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 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 le snippet 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 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 (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,
      },
    },
  },
});
Alternativement, démarrez 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 onClick handler. Il existe deux méthodes pour héberger un paiement. Utiliser un payload de paiement tel que 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 parente origin doit être fournie dans les URL 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 event.

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

​
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 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 checkout existant peut être utilisé, ou un checkout sans aucune configuration peut également être utilisé pour obtenir rapidement les détails du versement.