Passer au contenu principal
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 et contextuelle 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 section <head> 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,
});

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

​
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 (event) {
    console.log(event.data);
  },
  onCancel: function () {
    console.log("Checkout cancelled.");
  },
  onFailure: function () {
    console.log("Checkout failed.");
  },
});

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

​
onComplete avec données de carte

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

​
onComplete avec tokenisation

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.

​
Initialisation du paiement

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

​
event.data réponse

  • Modèle
  • Exemple
  • Options
{
    "card": {
        "token": string
    }
}

​
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 a été complétée avec succès.

​
Utilisation du SDK

  • Modèle
  • Exemple
  • Options
checkoutSdk.setOrderReferenceID({
    session_id: string,
    order_id: string,
});

​
Utilisation de l’API

Le Mettre à jour la session de carte point de terminaison API existe où vous pouvez mettre à jour l’ID de commande.