Passer au contenu principal
Le bouton de paiement express Sezzle est un outil puissant pour les marchands utilisant des plateformes personnalisées. Intégré directement dans la page du panier, le bouton permet aux acheteurs de sélectionner Sezzle comme méthode de paiement en un seul clic, en utilisant leur compte Sezzle pour une expérience de paiement fluide. Cette fonctionnalité est conçue pour réduire l’abandon de panier, augmenter le taux de conversion et améliorer la satisfaction client.

​
Installation

​
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/express_checkout.min.js"
></script>

​
Configuration du paiement

​
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>

​
Rendre le bouton Sezzle

Nécessite d’avoir l’objet de paiement créé ci-dessus pour rendre le bouton. Appelez renderSezzleButton en passant l’identifiant de l’élément d’emplacement défini dans la Configuration du bouton, ci-dessus. 
await 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 (response) {
    checkoutSdk
      .capturePayment(response.data.order_uuid, {...})
      .then((r) => {
        console.log(r);
      });
  },
  onCancel: function () {
    alert("Transaction cancelled.");
  },
  onFailure: function () {
    alert("Transaction failed.");
  },
  onCalculateAddressRelatedCosts: async function (
    shippingAddress,
    order_uuid
  ) {
    // Call authentication endpoint
    const response = await fetch(
      "https://gateway.sezzle.com/v2/authentication",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          public_key: string,
          private_key: string,
        }),
      }
    );
    const data = await response.json();
    const token = data.token;
    const updateResponse = await fetch(
      `https://gateway.sezzle.com/v2/order/${order_uuid}/checkout`,
      {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          currency_code: string,
          address_uuid: shippingAddress.uuid,
          shipping_options: [
             {
               name: string,
               description: string,
               shipping_amount_in_cents: integer,
               tax_amount_in_cents: integer,
               final_order_amount_in_cents: integer
             }
          ]
        }),
      }
    );
    const updateStatus = updateResponse.ok;
    return {
      ok: updateStatus,
    };
  },
});

​
Initialisation du paiement

  • Modèle
  • Exemple
  • Options
checkoutSdk.startCheckout({
  checkout_payload: {
    // "cancel_url":{
    //     "href": string
    // },
    // "complete_url":{
    //     "href": string
    // },
    express_checkout_type: string,
    order: {
      intent: string,
      reference_id: string,
      description: string,
      requires_shipping_info: boolean,
      items: [
        {
          name: string,
          sku: string,
          quantity: integer,
          price: {
            amount_in_cents: integer,
            currency: string,
          },
        },
      ],
      discounts: [
        {
          name: string,
          amount: {
            amount_in_cents: integer,
            currency: string,
          },
        },
      ],
      metadata: {
        some_property: string,
        some_other_property: string
      },
      order_amount: {
        amount_in_cents: integer,
        currency: string,
      },
    },
  },
});
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 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 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énementcustomer.tokenized .

​
Capture du 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.
  • Modèle
  • Exemple
  • Options
checkoutSdk
  .capturePayment(response.data.order_uuid, {
    capture_amount: {
      amount_in_cents: integer,
      currency: string,
    },
    partial_capture: boolean,
  })
  .then((r) => {
    console.log(r);
  });

​
onCalculateAddressRelatedCosts

Pour des raisons de sécurité, l’authentification et la mise à jour du paiement doivent provenir du code back-end du marchand.
  1. Obtenir un jeton d’authentification
    • Appelez le point de terminaison authentication pour obtenir un jeton bearer
    • Vous devriez déjà avoir configuré cela dans votre back-end pour l’intégration standard
    • Au lieu de pointer directement vers Sezzle comme dans l’exemple ci-dessous, vous pouvez réutiliser votre fonction existante
  2. Mettre à jour la commande
    • Appelez le point de terminaison Mise à jour du paiement pour fournir à Sezzle les options de livraison et le montant final des taxes et de la livraison en fonction de l’adresse de livraison de l’acheteur
    • Voir l’onglet Options ci-dessous pour plus de détails
Une fois que shipping_options ont été fournis à Sezzle pour un paiement, ils ne peuvent pas être modifiés à moins que l’acheteur ne change son adresse de livraison.
  • Modèle
  • Exemple
  • Options
onCalculateAddressRelatedCosts: async function (
  shippingAddress,
  order_uuid
) {
  // Call authentication endpoint
  const response = await fetch(
    yourBackendAuthenticationURL,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",

      },
      body: JSON.stringify({
        public_key: string,
        private_key: string,
      }),
    }
  );
  const data = await response.json();
  const token = data.token;
  const updateResponse = await fetch(
    yourBackendUpdateOrderURL,
    {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify({
        currency_code: string,
        address_uuid: shippingAddress.uuid,
        shipping_options: [
           {
           name: string,
           description: string,
           shipping_amount_in_cents: integer,
           tax_amount_in_cents: integer,
           final_order_amount_in_cents: integer
           }
        ]
      }),
    }
  );
  const updateStatus = updateResponse.ok;
  return {
    ok: updateStatus,
  };
},
Réponse
  • Modèle
  • Exemple
  • Options
{
  ok: boolean,
  error: {
    code: string
  }
}