Passer au contenu principal
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

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

​
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. 
<div
    id="sezzle-smart-button-container"
    style="text-align: center"
></div>

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

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