Express checkout

Le bouton de paiement express Sezzle offre aux acheteurs un chemin en un seul clic pour payer avec Sezzle directement depuis le panier, en utilisant les coordonnées et les informations de paiement de leur compte Sezzle. Moins de champs à remplir signifie moins de paniers abandonnés.

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

const checkoutSdk = new Checkout({
  mode: "popup",
  publicKey: "sz_pub_...",
  apiMode: "live",
  apiVersion: "v2",
});

string

défaut:"popup"

Options disponibles : popup, iframe, redirect

Si vous utilisez iframe mode, ajoutez *.sezzle.com à la liste d’autorisation de la politique de sécurité du contenu (CSP) de votre site afin que l’iframe de paiement Sezzle puisse se charger.

popup (recommandé) : fonctionne immédiatement pour la plupart des intégrations SDK basées sur un navigateur.
iframe : requis lorsque les popups sont bloqués (par exemple, dans une webview ou un navigateur intégré). Sezzle doit d’abord activer l’iframe pour votre ou vos domaines — soumettez votre UUID Marchand et les domaines à autoriser par environnement (sandbox et production). Par exemple : veuillez activer uat1.mysite.com, uat2.mysite.com en sandbox et www.mysite.com, mysite.com en production.
redirect : pris en charge mais généralement moins utile avec le SDK, car la valeur du SDK réside dans le paiement en contexte et la messagerie de fenêtre.

string

requis

Utilisé lors de la création d’un paiement ou de la capture d’un paiement. Trouvez vos clés API à https://dashboard.sezzle.com/merchant/settings/apikeys

string

défaut:"live"

Environnement dans lequel le paiement doit être effectuéOptions disponibles : live, sandbox

string

défaut:"v2"

La version de l’API Sezzle Checkout que le SDK appellera. Utilisez v2 sauf indication contraire.Options disponibles : v2

Bouton Sezzle

Configuration du bouton Sezzle

Placez l’extrait 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.

Modèle
Exemple
Options

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

<div
    id="sezzle-smart-button-container"
    style="text-align: center"
    templateText="Pay with %%logo%%"
    borderType="semi-rounded"
    customClass="action,primary,checkout"
></div>

string

défaut:"Checkout with %%logo%%"

Texte à afficher à l’intérieur du bouton. Utilisez %%logo%% dans le texte pour afficher l’image Sezzle

string

Options disponibles : square, semi-rounded

string

Classes personnalisées à appliquer

string

défaut:"1px"

Espace vide entre le haut du contenu et le bord supérieur du bouton

string

défaut:"7px"

Espace vide entre le bas du contenu et le bord inférieur du bouton

string

défaut:"30px"

Espace vide entre le côté gauche du contenu et le bord gauche du bouton

string

défaut:"30px"

Espace vide entre le côté droit du contenu et le bord droit du bouton

string

défaut:"84px"

Largeur du logo Sezzle à l’intérieur du bouton

string

CSS top décalage pour le logo Sezzle à l’intérieur du bouton (par ex., 2px).

string

CSS bottom décalage pour le logo Sezzle à l’intérieur du bouton (par ex., 2px).

string

CSS left décalage pour le logo Sezzle à l’intérieur du bouton (par ex., 2px).

string

CSS right décalage pour le logo Sezzle à l’intérieur du bouton (par ex., 2px).

string

Espacement entre les lettres du templateText.

string

Largeur du bouton

string

défaut:"4.2em"

Hauteur du bouton.

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.

await checkoutSdk.renderSezzleButton("sezzle-smart-button-container");

Initialiser le paiement

Gestionnaires d’événements

Le SDK utilise ces gestionnaires d’événements pour informer votre site de ce qui se passe lors du paiement. Implémentez chacun d’eux pour réagir aux actions de l’acheteur, comme compléter, annuler ou rencontrer une erreur.

Modèle
Exemple
Options

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
  ) {
    // Authentication and the checkout update must run on your backend -
    // the calls below hit Sezzle directly for illustration only.
    // See the onCalculateAddressRelatedCosts section for the backend-safe pattern.
    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,
    };
  },
});

checkoutSdk.init({
  onClick: function () {
    event.preventDefault();
    checkoutSdk.startCheckout({
      checkout_payload: {
        // "cancel_url":{
        //     "href": "http://localhost:44300/demo/v2checkout.html"
        // },
        // "complete_url":{
        //     "href": "http://localhost:44300/demo/v2checkout.html"
        // },
        express_checkout_type: "multi-step",
        order: {
          intent: "AUTH",
          reference_id: "543645yg5tg5675686",
          description: "sezzle-store - #12749253509255",
          requires_shipping_info: true,
          items: [
            {
              name: "widget",
              sku: "sku123456",
              quantity: 1,
              price: {
                amount_in_cents: 1000,
                currency: "USD",
              },
            },
          ],
          discounts: [
            {
              name: "20% off",
              amount: {
                amount_in_cents: 1000,
                currency: "USD",
              },
            },
          ],
          metadata: {
            location_id: "123",
            store_name: "Downtown Minneapolis",
            store_manager: "Jane Doe",
          },
          order_amount: {
            amount_in_cents: 10000,
            currency: "USD",
          },
        },
      },
    });
  },
  onComplete: function (response) {
    alert("Completed transaction. Capture started.");
    checkoutSdk
      .capturePayment(response.data.order_uuid, {
        capture_amount: {
          amount_in_cents: 10000,
          currency: "USD",
        },
        partial_capture: false,
      })
      .then((r) => {
        console.log(r);
      });
  },
  onCancel: function () {
    alert("Transaction cancelled.");
  },
  onFailure: function () {
    alert("Transaction failed.");
  },
  onCalculateAddressRelatedCosts: async function (
    shippingAddress,
    order_uuid
  ) {
    // Authentication and the checkout update must run on your backend -
    // the calls below hit Sezzle directly for illustration only.
    // See the onCalculateAddressRelatedCosts section for the backend-safe pattern.
    const response = await fetch(
      "https://gateway.sezzle.com/v2/authentication",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          private_key: "sz_pr_...",
          public_key: "sz_pub_..."
        }),
      }
    );
    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: "USD",
          address_uuid: shippingAddress.uuid,
          shipping_options: [
             {
               name: "Standard Shipping",
               description: "3-5 business days",
               shipping_amount_in_cents: 2000,
               tax_amount_in_cents: 3000,
               final_order_amount_in_cents: 10200
             },
             {
               name: "Express Shipping",
               description: "1-2 business days",
               shipping_amount_in_cents: 2000,
               tax_amount_in_cents: 3000,
               final_order_amount_in_cents: 10200
             }
          ]
        }),
      }
    );
    const updateStatus = updateResponse.ok;
    return {
      ok: updateStatus,
    };
  },
});

function

requis

S’exécute lorsque l’acheteur clique sur le bouton Sezzle.Utilisez cette fonction pour créer la session de paiement Sezzle et diriger l’acheteur dans ce flux.

Voir Initialisation du paiement section pour startCheckout options de payload.

function

requis

S’exécute lorsque le paiement Sezzle se termine avec succès. Utilisez ceci pour enregistrer la commande et, si vous avez utilisé intent: AUTH, pour capturer le paiement.

Voir Obtenir les détails de la commande section pour récupérer la méthode d’expédition sélectionnée et d’autres détails tels que l’adresse de livraison ou de facturation selon les besoins.
Voir Capturer le paiement section pour capturePayment options de payload.

Afficher paramètres

object

La réponse de finalisation du paiement

Afficher attributs enfants

object

Données de finalisation du paiement

Afficher attributs enfants

string

"success"

string

UUID du paiement

string

UUID de session

string

UUID de commande

string

URL d’origine de la fenêtre de paiement

function

requis

S’exécute lorsque l’acheteur quitte le paiement Sezzle avant de finaliser le paiement. Utilisez ceci pour mettre à jour le statut de la commande dans votre système.

Afficher paramètres

object

La réponse de l’événement d’annulation

Afficher attributs enfants

object

Données de l’événement d’annulation

Afficher attributs enfants

string

"cancel"

string

L’UUID du paiement qui a échoué

string

UUID de session

string

UUID de commande

string

URL d’origine de la fenêtre de paiement

function

requis

S’exécute lorsque le paiement Sezzle ne parvient pas à se charger ou rencontre une erreur. Utilisez ceci pour mettre à jour le statut de la commande et signaler l’échec à l’acheteur.

Afficher paramètres

object

La réponse d’échec

Afficher attributs enfants

object

Objet d’erreur ou réponse d’erreur API. Lorsque data est un Error :

Afficher attributs enfants

string

"failure"

string

L’UUID du paiement qui a échoué

string

UUID de session

string

UUID de commande

string

Message d’erreur (par ex., "Public Key is missing.")

string

URL d’origine de la fenêtre de paiement

Requis si express_checkout_type est single-step ou multi-step. Une fois que l’acheteur a fourni son adresse de livraison via le paiement express Sezzle, cette fonction de rappel doit être utilisée pour retourner les coûts de taxe et d’expédition à Sezzle. Le marchand peut également enregistrer l’adresse de livraison dans son système de gestion des commandes à ce moment-là, ou obtenir les détails de la commande depuis Sezzle lors du rappel onComplete.

Voir onCalculateAddressRelatedCosts section pour les détails d’implémentation.

Afficher paramètres

object

L’adresse de livraison fournie par l’acheteur

Afficher attributs enfants

string

Le prénom du client

string

Le nom de famille du client

string

Le numéro de téléphone du client

string

La rue et le numéro de l’adresse

string

L’appartement ou l’unité

string

La ville

string

Le code d’état à 2 caractères

string

Le code postal

string

Le code pays à 2 caractères

string

L’identifiant unique de l’adresse

string

L’identifiant unique de la commande

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

checkoutSdk.startCheckout({
  checkout_payload: {
    // "cancel_url":{
    //     "href": "http://localhost:44300/demo/v2checkout.html"
    // },
    // "complete_url":{
    //     "href": "http://localhost:44300/demo/v2checkout.html"
    // },
    express_checkout_type: "multi-step",
    order: {
      intent: "AUTH",
      reference_id: "543645yg5tg5675686",
      description: "sezzle-store - #12749253509255",
      requires_shipping_info: true,
      items: [
        {
          name: "widget",
          sku: "sku123456",
          quantity: 1,
          price: {
            amount_in_cents: 1000,
            currency: "USD",
          },
        },
      ],
      discounts: [
        {
          name: "20% off",
          amount: {
            amount_in_cents: 1000,
            currency: "USD",
          },
        },
      ],
      metadata: {
        location_id: "123",
        store_name: "Downtown Minneapolis",
        store_manager: "Jane Doe",
      },
      order_amount: {
        amount_in_cents: 10000,
        currency: "USD",
      },
    },
  },
});

Le checkout_payload schéma reflète le Créer une session corps de la requête. Consultez ce document de référence pour la liste complète des champs, types et contraintes - y compris express_checkout_type et order.requires_shipping_info.

Le startCheckout méthode doit être implémentée dans le onClick gestionnaire. Il existe deux façons de démarrer le paiement :

Avec un payload de paiement — passez l’objet de session complet en ligne (illustré ci-dessus). Les URLs d’annulation et de finalisation sont facultatives pour iframe et popup mode.
Avec une URL de paiement existante — appelez startCheckout({ checkout_url }). Le SDK mode doit correspondre au checkout_mode que vous avez utilisé lors de la création de la session. Pour iframe et popup, incluez l’origin de la fenêtre parente dans les URLs d’annulation et de finalisation.

Tokenisation du client : l’UUID du client n’est pas transmis via onComplete. Pour le recevoir, abonnez-vous à l’événement webhook customer.tokenized.

Capturer le paiement

Ignorez cette étape si vous avez utilisé l’intention CAPTURE lors du démarrage du paiement — Sezzle capture la commande automatiquement.

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

checkoutSdk
  .capturePayment(response.data.order_uuid, {
    capture_amount: {
      amount_in_cents: 10000,
      currency: "USD",
    },
    partial_capture: false,
  })
  .then((r) => {
    console.log(r);
  });

Le capturePayment corps de la requête reflète le Capturer par commande corps de la requête. Consultez ce document de référence pour la liste complète des champs, types et contraintes.

onCalculateAddressRelatedCosts

Pour des raisons de sécurité, l’authentification et la mise à jour du paiement doivent provenir du code back-end du marchand.

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
Mettre à jour la commande
- Appelez le Mettre à jour le paiement endpoint pour fournir à Sezzle les option(s) de livraison et le montant final des taxes et de la livraison en fonction de l’adresse de livraison de l’acheteur

Votre back-end doit répondre dans les 40 secondes. Si Sezzle ne reçoit pas vos option(s) de livraison dans ce délai, le paiement échoue avec une erreur merchant_shipping_cost_timeout et l’acheteur ne peut pas finaliser son achat.

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

onCalculateAddressRelatedCosts: async function (
  shippingAddress,
  order_uuid
) {
  // All this must be done inside your backend endpoint and this should be replaced with your endpoint communication logic
  // Call authentication endpoint
  const response = await fetch(
      `https://sandbox.gateway.sezzle.com/v2/authentication`,
      {
          method: "POST",
          headers: {
              "Content-Type": "application/json",
          },
          body: JSON.stringify({
            private_key: "sz_pr_...",
            public_key: "sz_pub_..."
          }),
      }
  );
  const data = await response.json();
  const token = data.token;

  // Calculate your shipping options based on the provided shippingAddress
  const shipping_options = [
      {
          name: "Standard Shipping",
          description: "3-5 business days",
          shipping_amount_in_cents: 1000,
          tax_amount_in_cents: 500,
          final_order_amount_in_cents: 11500
      },
      {
          name: "Express Shipping",
          description: "1-2 business days",
          shipping_amount_in_cents: 2000,
          tax_amount_in_cents: 1000,
          final_order_amount_in_cents: 13000
      }
  ]
  // Update your checkout with the calculated shipping options
  const updateResponse = await fetch(
      `https://sandbox.gateway.sezzle.com/v2/order/{order_uuid}/checkout`,
      {
          method: "PATCH",
          headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${token}`,
          },
          body: JSON.stringify({
              currency_code: "USD",
              address_uuid: shippingAddress.uuid,
              shipping_options,
          }),
      }
  );
  const updateStatus = updateResponse.ok;
  return {
      ok: updateStatus,
  };
}

Le corps de la requête de mise à jour reflète le Mettre à jour le paiement par commande corps de la requête. Consultez ce document de référence pour la liste complète des champs, types et contraintes.

Comportement spécifique à Express pour shipping_options:

Si express_checkout_type est multi-step mais qu’une seule méthode est fournie, l’expérience utilisateur suivra le flux single-step à partir de ce point
Si express_checkout_type est single-step mais que plusieurs méthodes sont fournies, l’acheteur recevra un message d’erreur.
Si express_checkout_type est multi-step ou single-step et qu’aucune méthode n’est fournie, l’acheteur sera invité à vérifier son adresse de livraison et à réessayer.

Réponse

Modèle
Exemple
Options

{
  ok: boolean,
  error: {
    code: string
  }
}

{
  ok: false,
  error: {
    code: "merchant_unsupported_shipping_address"
  }
}

boolean

Défini sur true une fois que les options de livraison ont été écrites avec succès dans Sezzle, ou false si le marchand rejette l’adresse (retourner un error.code en accompagnement).

object

Afficher attributs enfants

string

Options disponibles : merchant_unsupported_shipping_address, merchant_error

merchant_unsupported_shipping_address indique que le marchand ne prend pas en charge l’adresse de livraison fournie. merchant_error est une erreur générique retournée par le marchand lorsque quelque chose se passe mal de son côté.

Sezzle

Intégration Directe

Carte Virtuelle

Ressources

Paiement Express

SDKs Mobiles

Autre

Express checkout

Installation

Inclure le code SDK

Configuration du paiement

Options de configuration

Bouton Sezzle

Configuration du bouton Sezzle

Afficher le bouton Sezzle

Initialiser le paiement

Gestionnaires d’événements

Initialisation du paiement

Capturer le paiement

onCalculateAddressRelatedCosts

Réponse

​Installation

​Inclure le code SDK

​Configuration du paiement

​Options de configuration

​Bouton Sezzle

​Configuration du bouton Sezzle

​Afficher le bouton Sezzle

​Initialiser le paiement

​Gestionnaires d’événements

​Initialisation du paiement

​Capturer le paiement

​onCalculateAddressRelatedCosts

Réponse

Installation

Inclure le code SDK

Configuration du paiement

Options de configuration

Bouton Sezzle

Configuration du bouton Sezzle

Afficher le bouton Sezzle

Initialiser le paiement

Gestionnaires d’événements

Initialisation du paiement

Capturer le paiement

onCalculateAddressRelatedCosts