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

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

​
Bouton Sezzle

​
Configuration du bouton Sezzle

Créez un élément de substitution pour que le bouton Sezzle soit rendu sur la(les) page(s).

<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’id de l’élément de substitution 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) {
    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({
          amount_in_cents: integer,
          currency_code: string,
          shipping_amount_in_cents: integer,
          tax_amount_in_cents: integer,
          address_uuid: shippingAddress.uuid,
        }),
      }
    );
    const updateStatus = updateResponse.ok;
    return {
      ok: updateStatus,
    };
  },
});

​
Initialisation du paiement

checkoutSdk.startCheckout({
  checkout_payload: {
    // "cancel_url":{
    //     "href": string
    // },
    // "complete_url":{
    //     "href": string
    // },
    is_express_checkout: boolean,
    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
      },
      shipping_amount: {
        amount_in_cents: integer,
        currency: string,
      },
      tax_amount: {
        amount_in_cents: integer,
        currency: string,
      },
      order_amount: {
        amount_in_cents: integer,
        currency: string,
      },
    },
  },
});

Le démarrage du paiement doit être implémenté dans le gestionnaire de paiementonClick. 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 pouriframeetpopupmode.

Utiliser une URL de paiement existante

  • Lemodeutilisé lors de la configuration du paiement SDK doit correspondre aucheckout_modelors dela création d’une session.
  • La fenêtre parentorigindoit être fournie dans les URL d’annulation et de finalisation lorsque lecheckout_modeestiframeoupopup.

Tokenisation du clientCeci n’est pas pris en charge dans l’événementonComplete. 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’intentionCAPTUREa é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 le jeton d’authentification
    • Appelez le point de terminaisonauthenticationpour 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 de mise à jour et de paiement pour mettre à jour les montants d’expédition et de taxe
    • Voir l’ongletOptionsci-dessous pour plus de détails
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({
        amount_in_cents: integer,
        currency_code: string,
        shipping_amount_in_cents: integer,
        tax_amount_in_cents: string,
        address_uuid: shippingAddress.uuid,
      }),
    }
  );
  const updateStatus = updateResponse.ok;
  return {
    ok: updateStatus,
  };
},
Réponse
{
  ok: boolean,
  error: {
    code: string
  }
}