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 bouton de paiement express Sezzle est un outil puissant pour les marchands sur plateformes personnalisées. Intégré directement dans la page du panier, le bouton permet aux acheteurs de sélectionner Sezzle comme mode 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 des clients.

​
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

const checkoutSdk = new Checkout({
  mode: string,
  publicKey: string,
  apiMode: string,
  apiVersion: string,
});

​
Bouton Sezzle

​
Configuration du bouton Sezzle

Créez un élément de remplacement pour que le bouton Sezzle soit rendu sur la ou les pages. 
<div
    id="sezzle-smart-button-container"
    style="text-align: center"
></div>

​
Afficher le bouton Sezzle

Nécessite que l’objet de paiement créé ci-dessus soit disponible pour afficher le bouton. Appelez renderSezzleButton en passant l’identifiant de l’élément de remplacement 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. 
checkoutSdk.init({
  onClick: function () {
    event.preventDefault();
    checkoutSdk.startCheckout({...});
  },
  onComplete: function (response) {
    console.log(response.data);
  },
  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

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 onClick gestionnaire. 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 événement.

​
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.
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 authentification endpoint pour obtenir un jeton bearer
    • Vous devriez avoir déjà 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 l’endpoint de 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 Options onglet 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.
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
{
  ok: boolean,
  error: {
    code: string
  }
}