Utilisation du SDK de carte virtuelle

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 fournit pas de moyen 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 Gestionnaire de Compte et il pourra le faire pour vous.

Paiements

Paiement par carte virtuelle dans un iframe ou une fenêtre pop-up.

Détails de la carte

Activer les détails de carte en clair 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 de 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 Virtual Card SDK 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

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 mode fonctionnera immédiatement, et Sezzle le recommande pour la plupart des intégrations SDK basées sur un navigateur. Si votre paiement s’exécute dans une webview ou un navigateur intégré où les pop-ups peuvent être bloqués, utilisez iframe mode à la place. iframe mode ne fonctionnera pas correctement sans avoir d’abord contacté Sezzle. Pour des raisons de sécurité, Sezzle doit activer iframe pour votre ou vos domaines. Pour l’activer, veuillez soumettre une demande avec votre UUID Marchand Sezzle et une liste de 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. redirect mode est également pris en charge, mais il est généralement moins utile avec le SDK car la valeur principale du SDK est de gérer l’expérience de paiement en contexte et la messagerie entre votre site et Sezzle.

publicKey

string

requis

Utilisé lors de la création d’un paiement 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 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 de remplacement pour que le bouton Sezzle soit affiché sur la ou les pages.

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.

Afficher le bouton Sezzle

Nécessite d’avoir l’objet checkout créé ci-dessus pour afficher le bouton. Appelez renderSezzleButton en passant le id de l’élément de remplacement 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) {
  // 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

Le bouton Sezzle est cliqué par l’utilisateur.

Voir Initialisation du paiement section pour les options de payload.

onComplete

function

requis

Le paiement Sezzle est effectué avec succès. Un paiement Sezzle complété avec succès déclenchera un événement vers le onComplete gestionnaire. L’événement doit 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 quelque raison que ce soit, le onCancel gestionnaire 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 onFailure gestionnaire 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 underscores (_))

Utilisé uniquement pour le dépannage. L’ID de référence qui apparaît dans le Tableau de bord 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

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 les données de la carte

Ce format de réponse fournit le numéro de carte complet (PAN) et le 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 checkout

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.

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 checkout 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 après que la transaction par carte virtuelle a été complétée avec succès.