Automated

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 de Session de Carte pour fournir une solution facile à utiliser, en contexte, pour émettre et utiliser une carte virtuelle Sezzle comme moyen de paiement.

L’environnement non-production de Sezzle ne fournit pas de moyen de tester le traitement des paiements avec votre fournisseur.

Le domaine d’origine doit être mis sur liste blanche par Sezzle pour que le SDK de Carte Virtuelle fonctionne. Veuillez contacter votre Gestionnaire de Compte qui pourra le faire pour vous.

Paiements

Paiement par Carte Virtuelle dans un iframe ou une fenêtre pop-up.

Détails de la Carte

Activez les détails de carte simples via un événement de message ou une tokenisation.

Paiements

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

Bouton Sezzle

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 Paiement

La première exigence pour commencer avec le SDK de Carte Virtuelle est de configurer un nouvel objet Checkout.

Options de Configuration

Modèle
Exemple
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

popup mode fonctionnera immédiatement. Aucune configuration supplémentaire n’est requise pour utiliser popup. Sezzle recommande actuellement le mode popup.iframe mode ne fonctionnera pas correctement sans contacter d’abord Sezzle. Pour des raisons de sécurité, Sezzle doit activer iframe pour votre(vos) domaine(s). Pour l’activer, veuillez soumettre une demande avec votre UUID de Marchand Sezzle et une liste des domaines à autoriser par environnement (production et sandbox). Par exemple, please enable uat1.mysite.com, uat2.mysite.com in sandbox and www.mysite.com, mysite.com in production. L’intégration pour popup et iframe sont identiques, à l’exception du mode. L’utilisation du mode popup accélérera votre développement. Une fois l’intégration terminée, si iframe est une exigence, contactez alors Sezzle pour activer votre(vos) domaine(s) et passez le mode à iframe.

publicKey

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

apiMode

string

défaut:"live"

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

isVirtualCard

boolean

Utilisez true pour activer cette fonctionnalité

Bouton Sezzle

Configuration du Bouton Sezzle

Créez un élément d’emplacement pour que le Bouton Sezzle soit rendu sur la(les) page(s).

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>

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 négatif entre le haut du contenu et le bord du bouton

paddingBottom

string

défaut:"7px"

Espace négatif entre le bas du contenu et le bord du bouton

paddingLeft

string

défaut:"30px"

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

paddingRight

string

défaut:"30px"

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

sezzleImageWidth

string

défaut:"84px"

Largeur du logo Sezzle dans le bouton

sezzleImagePositionTop

string

Position du logo Sezzle depuis le haut.

sezzleImagePositionBottom

string

Position du logo Sezzle depuis le bas.

sezzleImagePositionLeft

string

Position du logo Sezzle depuis la gauche.

sezzleImagePositionRight

string

Position du logo Sezzle depuis la droite.

letterSpacing

string

Espacement entre les lettres du templateText.

width

string

Largeur du bouton

height

string

défaut:"4.2em"

Hauteur du bouton.

Rendre le Bouton Sezzle

Nécessite d’avoir l’objet checkout créé ci-dessus pour rendre le bouton. Appelez renderSezzleButton en passant le id de l’élément d’emplacement défini dans la Configuration du Bouton, ci-dessus.

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.

Modèle
Exemple
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) {
  // Les données de carte virtuelle sont disponibles dans response.data.card et response.data.holder.
  // Utilisez ces données pour débiter la carte via votre propre processeur de paiement
  // (ex. 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

Le Bouton Sezzle est cliqué par l’utilisateur.

Voir la section Initialisation du Paiement pour les options de charge utile.

onComplete

function

requis

Le paiement Sezzle est complété avec succès. Un paiement Sezzle complété avec succès déclenchera un événement vers le gestionnaire onComplete. L’événement devrait inclure un objet de données avec des données pertinentes au paramètre d’entrée de démarrage du paiement.

onCancel

function

requis

Le paiement Sezzle est annulé. Si l’utilisateur quitte le paiement Sezzle pour une raison quelconque, le gestionnaire onCancel sera exécuté.

onFailure

function

requis

Le paiement Sezzle a échoué. S’il y a une erreur lors du chargement de la page de paiement Sezzle, le gestionnaire onFailure sera exécuté.

Initialisation du Paiement

Modèle
Exemple
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.

amount_in_cents

integer

Le montant de l’article en centimes

currency

string

défaut:"USD"

Le code de devise à 3 caractères tel que défini par ISO 4217

merchant_reference_id

string

Généralement un identifiant de paiement ou de panier, actuellement utilisé uniquement pour le suivi (doit contenir uniquement des caractères alphanumériques, des tirets (-) et des traits de soulignement (_))

Utilisé uniquement pour le dépannage. L’ID de référence qui apparaît dans le Tableau de bord du Marchand peut être défini en utilisant Définir l’ID de Référence de Commande

customer

object

Le client pour la commande

Afficher attributs enfants

string

L’adresse e-mail du client

first_name

string

Le prénom du client

last_name

string

Le nom de famille du client

phone

string

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

billing_address_street1

string

La rue et le numéro de l’adresse

billing_address_street2

string

L’appartement ou l’unité

billing_address_city

string

La ville

billing_address_state

string

Le code d’état à 2 caractères

billing_address_postal_code

string

Le code postal de livraison

billing_address_country_code

string

Le code pays à 2 caractères

items

array

Les articles achetés

Afficher attributs enfants

name

string

Le nom de l’article

sku

string

L’identifiant sku

quantity

integer

La quantité achetée

price

object

L’objet prix

Afficher attributs enfants

amount_in_cents

integer

Le montant de l’article en centimes

currency

string

défaut:"USD"

Le code de devise à 3 caractères tel que défini par ISO 4217

`onComplete` avec données de carte

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

Le event.data contiendra une charge utile complète contenant le moyen de paiement du client. Ces informations ne sont pas le moyen de paiement utilisé pour payer Sezzle mais celui qui peut ê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 garde 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 côté serveur uniquement.

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 de message. Au lieu de cela, la charge utile vers onComplete contiendra une chaîne de jeton de carte, que votre serveur peut échanger contre les données de carte en utilisant l’API Données de Carte Virtuelle. Le jeton 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 jeton ci-dessus en utilisant la méthode Données de Carte Virtuelle.

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

Dans de nombreux cas, l’ID de commande du marchand ne sera pas généré avant que le paiement ne soit terminé et qu’une commande ne soit créée. Appelez setOrderReferenceID pour définir l’ID de référence de commande Sezzle avec l’ID de commande du marchand après que la transaction par carte virtuelle ait é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 données de l’événement onComplete

order_id

string

Votre identifiant de commande marchand à associer à cette commande Sezzle

Utilisation de l’API

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

Sezzle

Direct Integration

Virtual Card

Assets

Express Checkout

Autre

Paiements

Détails de la Carte

Paiements

Bouton Sezzle

Inclure le code SDK

Configuration du Paiement

Options de Configuration

Bouton Sezzle

Configuration du Bouton Sezzle

Rendre le Bouton Sezzle

Initialiser le Paiement

Gestionnaires d’Événements

Initialisation du Paiement

`onComplete` avec 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

Sezzle

Direct Integration

Virtual Card

Assets

Express Checkout

Autre

Paiements

Détails de la Carte

Paiements

Bouton Sezzle

​Inclure le code SDK

​Configuration du Paiement

​Options de Configuration

​Bouton Sezzle

​Configuration du Bouton Sezzle

​Rendre le Bouton Sezzle

​Initialiser le Paiement

​Gestionnaires d’Événements

​Initialisation du Paiement

​onComplete avec 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 Paiement

Options de Configuration

Bouton Sezzle

Configuration du Bouton Sezzle

Rendre le Bouton Sezzle

Initialiser le Paiement

Gestionnaires d’Événements

Initialisation du Paiement

`onComplete` avec 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