Automated - Sezzle

C’est le moyen le plus rapide de commencer à utiliser l’offre de carte virtuelle de Sezzle. Un paiement par carte virtuelle implémente l’API Card Session pour fournir une solution facile à utiliser, en contexte, pour émettre et utiliser une carte virtuelle Sezzle comme moyen de paiement.

L’environnement hors production de Sezzle ne permet pas de tester le traitement des paiements avec votre fournisseur.

Le domaine d’origine doit être ajouté à la liste d’autorisation de Sezzle pour que le Virtual Card SDK fonctionne. Veuillez contacter votre Account Manager et il pourra le faire pour vous.

Checkouts

Virtual Card Checkout dans un iframe ou une fenêtre pop-up.

Card Details

Activez les détails de carte en clair via un événement de message ou la tokenisation.

Payments

Gérez le succès, l’échec ou l’annulation du paiement avec vos commandes de carte virtuelle.

Sezzle Button

Affichez le bouton de paiement Sezzle sur votre boutique.

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

Configuration du Checkout

La première étape pour commencer avec le Virtual Card SDK est de configurer un nouvel objet Checkout.

Options de configuration

Template
Example
Options

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

const checkoutSdk = new Checkout({
  mode: "popup",
  publicKey: "sz_pub_...",
  apiMode: "sandbox",
  isVirtualCard: true,
});

mode

string

défaut:"popup"

Options disponibles : popup, iframe, redirect

Si vous utilisez le mode iframe, ajoutez *.sezzle.com à la liste d’autorisation de la Content Security Policy (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 pop-ups sont bloquées (par exemple, dans une webview ou un navigateur intégré). Sezzle doit d’abord activer l’iframe pour votre ou vos domaines — soumettez votre Merchant UUID 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.

publicKey

string

requis

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

apiMode

string

défaut:"live"

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

isVirtualCard

boolean

Utilisez true pour activer cette fonctionnalité

Sezzle Button

Configuration du Sezzle Button

Placez le snippet d’élément de l’onglet Template à l’endroit où vous souhaitez que le Sezzle Button soit affiché sur la page, puis mettez à jour les attributs Options selon vos besoins.

Template
Example
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>

templateText

string

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

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

borderType

string

Options disponibles : square, semi-rounded

customClass

string

Classes personnalisées à appliquer

paddingTop

string

défaut:"1px"

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

paddingBottom

string

défaut:"7px"

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

paddingLeft

string

défaut:"30px"

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

paddingRight

string

défaut:"30px"

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

sezzleImageWidth

string

défaut:"84px"

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

sezzleImagePositionTop

string

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

sezzleImagePositionBottom

string

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

sezzleImagePositionLeft

string

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

sezzleImagePositionRight

string

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

letterSpacing

string

Espacement entre les lettres du templateText.

width

string

Largeur du bouton

height

string

défaut:"4.2em"

Hauteur du bouton.

Afficher le Sezzle Button

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.

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

Initialiser le Checkout

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.

Template
Example
Options

checkoutSdk.init({
  onClick: function () {
    event.preventDefault();
    checkoutSdk.startCheckout({...});
  },
  onComplete: function (response) {
    console.log(response.data);
  },
  onCancel: function () {
    console.log("Checkout cancelled.");
  },
  onFailure: function () {
    console.log("Checkout failed.");
  },
});

checkoutSdk.init({
  onClick: function () {
    event.preventDefault();
    checkoutSdk.startCheckout({
            checkout_payload: {
                amount_in_cents: 1000,
                currency: "USD",
                merchant_reference_id: "merchant-checkout-id-max-255",
                customer: {
                    email: "test@test.com",
                    first_name: "John",
                    last_name: "Doe",
                    phone: "0987654321",
                    billing_address_street1: "3432 Terry Lane",
                    billing_address_street2: "12",
                    billing_address_city: "Katy",
                    billing_address_state: "TX",
                    billing_address_postal_code: "77449",
                    billing_address_country_code: "US",
                },
                items: [
                    {
                        name: "Blue tee",
                        sku: "sku123456",
                        quantity: 1,
                        price: {
                            amount_in_cents: 1000,
                            currency: "USD",
                        },
                    },
                ],
            },
    });
  },
onComplete: function (response) {
  // Virtual card data is available in response.data.card and response.data.holder.
  // Use this data to charge the card through your own payment processor
  // (e.g., Stripe, Cybersource, Braintree).
  console.log("Card data received:", response.data);
  },
  onCancel: function () {
    console.log("Checkout cancelled.");
  },
  onFailure: function () {
    console.log("Checkout failed.");
  },
});

onClick

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 Checkout Initialization section pour startCheckout options de payload.

onComplete

function

requis

S’exécute lorsque le paiement Sezzle se termine avec succès. Utilisez ceci pour enregistrer les détails de la commande et du paiement.

Le corps de la réponse dépend de la valeur de card_response_format fournie dans startCheckout.

Pour token (recommandé), voir onComplete with tokenization
Sinon, voir onComplete with card data

onCancel

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

response

object

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

Afficher attributs enfants

data

object

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

Afficher attributs enfants

status

string

"cancel"

checkout_uuid

string

L’UUID du checkout qui a échoué

session_uuid

string

Session UUID

order_uuid

string

Order UUID

origin

string

URL d’origine de la fenêtre de paiement

onFailure

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

response

object

La réponse d’échec

Afficher attributs enfants

data

object

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

Afficher attributs enfants

status

string

"failure"

checkout_uuid

string

L’UUID du checkout qui a échoué

session_uuid

string

Session UUID

order_uuid

string

Order UUID

message

string

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

origin

string

URL d’origine de la fenêtre de paiement

Initialisation du Checkout

Template
Example
Options

checkoutSdk.startCheckout({
  checkout_payload: {
    amount_in_cents: integer,
    currency: string,
    merchant_reference_id: string,
    customer: {
        email: string,
        first_name: string,
        last_name: string,
        phone: string,
        billing_address_street1: string,
        billing_address_street2: string,
        billing_address_city: string,
        billing_address_state: string,
        billing_address_postal_code: string,
        billing_address_country_code: string,
    },
    items: [
        {
            name: string,
            sku: string,
            quantity: integer,
            price: {
                amount_in_cents: integer,
                currency: string,
            },
        },
    ],
  },
});

checkoutSdk.startCheckout({
  checkout_payload: {
    amount_in_cents: 1000,
    currency: "USD",
    merchant_reference_id: "merchant-checkout-id-max-255",
    customer: {
        email: "test@test.com",
        first_name: "John",
        last_name: "Doe",
        phone: "0987654321",
        billing_address_street1: "3432 Terry Lane",
        billing_address_street2: "12",
        billing_address_city: "Katy",
        billing_address_state: "TX",
        billing_address_postal_code: "77449",
        billing_address_country_code: "US",
    },
    items: [
        {
            name: "Blue tee",
            sku: "sku123456",
            quantity: 1,
            price: {
                amount_in_cents: 1000,
                currency: "USD",
            },
        },
    ],
  },
});

checkout_payload est optionnel, mais fournir autant d’informations que possible améliorera l’expérience client.

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

merchant_reference_id est utilisé uniquement pour le dépannage. L’identifiant de référence qui s’affiche dans le tableau de bord marchand peut être défini à l’aide de Définir l’ID de référence de commande.

`onComplete` avec les données de carte

Ce format de réponse fournit le numéro de carte complet (PAN) et CVV directement à votre JavaScript frontend. Si vos systèmes ne traitent pas déjà les données brutes des titulaires de carte, cela peut élargir votre périmètre de conformité PCI DSS. Pour une alternative plus sécurisée, voir onComplete avec tokenisation, qui maintient les données de carte hors du navigateur et limite leur traitement à votre serveur.

Le event.data contiendra un payload entièrement formé contenant le moyen de paiement du client. Ces informations ne correspondent pas au moyen de paiement utilisé pour payer Sezzle, mais à un moyen pouvant être utilisé via votre passerelle de paiement (Cybersource, Stripe, Braintree, etc).

`event.data` réponse

Modèle
Exemple
Options

{
    "session_id": string,
    "card": {
        "firstName": string,
        "lastName": string,
        "pan": string,
        "cvv": string,
        "expiryMonth": string,
        "expiryYear": string
    },
    "holder": {
        "email": string,
        "phone": string,
        "firstName": string,
        "lastName": string,
        "address1": string,
        "address2": string,
        "city": string,
        "state": string,
        "country": string,
        "postalCode": string
    }
}

{
    "session_id": "123",
    "card": {
        "firstName": "John",
        "lastName": "Doe",
        "pan": "4242424242424242",
        "cvv": "123",
        "expiryMonth": "02",
        "expiryYear": "28"
    },
    "holder": {
        "email": "john.doe@example.com",
        "phone": "6125551234",
        "firstName": "John",
        "lastName": "Doe",
        "address1": "123 W Lake St",
        "address2": "Unit 104",
        "city": "Minneapolis",
        "state": "MN",
        "country": "US",
        "postalCode": "55408"
    }
}

`onComplete` avec tokenisation

Recommandé pour la plupart des marchands. La tokenisation maintient les données de carte hors de votre navigateur et réduit votre périmètre de conformité PCI DSS. Les données de carte sont récupérées uniquement côté serveur.

La tokenisation est une fonctionnalité développée pour les marchands qui ne souhaitent pas que les informations de carte soient envoyées directement via l’événement message. À la place, le payload vers onComplete contiendra une chaîne de token de carte, que votre serveur peut échanger contre des données de carte en utilisant l’Virtual Card Data API. Le token est à usage unique et expire après 24 heures.

Initialisation du paiement

checkout.init({
    onClick: function () {
        event.preventDefault();
        checkout.startCheckout({
            checkout_payload: {
                ...
+               "card_response_format":"token"
            }
        });
    },
    onComplete: function (response) {
      console.log(response.data);
    },
    onCancel: function() {
        console.log("checkout canceled");
    },
    onFailure: function() {
        console.log("checkout failed");
    }
})

`event.data` réponse

Modèle
Exemple
Options

{
    "card": {
        "token": string
    }
}

{
    "card": {
        "token": "abc12345"
    }
}

Obtenir les données de carte

Les données de carte virtuelle peuvent être obtenues en utilisant le token ci-dessus via la méthode Virtual Card Data méthode.

Définir l’ID de référence de commande

Dans de nombreux cas, l’ID de commande marchand ne sera pas généré avant la fin du paiement et la création d’une commande. Appelez setOrderReferenceID pour définir l’ID de référence de commande Sezzle avec l’ID de commande marchand une fois que la transaction par carte virtuelle a été complétée avec succès.

Utilisation du SDK

Modèle
Exemple
Options

checkoutSdk.setOrderReferenceID({
    session_id: string,
    order_id: string,
});

checkoutSdk.setOrderReferenceID({
    session_id: "example-session-id",
    order_id: "merchant-order-id",
});

session_id

string

L’identifiant unique de la session de carte, retourné dans les onComplete données d’événement

order_id

string

Votre ID de commande marchand à associer à cette commande Sezzle

Utilisation de l’API

Le Update Card Session Le point de terminaison API vous permet de mettre à jour l’ID de commande pour une session de carte donnée.

Checkouts

Card Details

Payments

Sezzle Button

​Inclure le code SDK

​Configuration du Checkout

​Options de configuration

​Sezzle Button

​Configuration du Sezzle Button

​Afficher le Sezzle Button

​Initialiser le Checkout

​Gestionnaires d’événements

​Initialisation du Checkout

​onComplete avec les données de carte

​event.data réponse

​onComplete avec tokenisation

​Initialisation du paiement

​event.data réponse

​Obtenir les données de carte

​Définir l’ID de référence de commande

​Utilisation du SDK

​Utilisation de l’API

Inclure le code SDK

Configuration du Checkout

Options de configuration

Sezzle Button

Configuration du Sezzle Button

Afficher le Sezzle Button

Initialiser le Checkout

Gestionnaires d’événements

Initialisation du Checkout

`onComplete` avec les données de carte

`event.data` réponse

`onComplete` avec tokenisation

Initialisation du paiement

`event.data` réponse

Obtenir les données de carte

Définir l’ID de référence de commande

Utilisation du SDK

Utilisation de l’API