Automated

C’est la façon la 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 et contextuelle pour émettre et utiliser une carte virtuelle Sezzle comme moyen de paiement.

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

Paiements

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

Détails de la carte

Activez les détails de la carte simple 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

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

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

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

mode

string

default:"popup"

Options disponibles :popup,iframe,redirect

popupLe mode fonctionnera directement. Aucune configuration supplémentaire n’est requise pour utiliserpopup. Sezzle recommande actuellement le modepopup.iframeLe mode ne fonctionnera pas correctement sans contacter d’abord Sezzle. Pour des raisons de sécurité, Sezzle doit activeriframepour 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 pourpopupetiframesont identiques, à l’exception du mode. L’utilisation du modepopupaccélérera votre développement. Une fois l’intégration terminée, siiframeest une exigence, contactez alors Sezzle pour activer votre(vos) domaine(s) et passez le mode àiframe.

publicKey

string

required

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

apiMode

string

default:"live"

Environnement dans lequel le paiement doit être effectué

Options disponibles :live,sandbox

isVirtualCard

boolean

Utiliseztruepour activer cette fonctionnalité

Bouton Sezzle

Configuration du bouton Sezzle

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

<div id="sezzle-smart-button-container" style="text-align: center"></div>

<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

default:"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

default:"1px"

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

paddingBottom

string

default:"7px"

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

paddingLeft

string

default:"30px"

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

paddingRight

string

default:"30px"

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

sezzleImageWidth

string

default:"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 texte du modèle.

width

string

Largeur du bouton

height

string

default:"4.2em"

Hauteur du bouton.

Rendre le bouton Sezzle

Nécessite d’avoir l’objetcheckoutcréé ci-dessus pour rendre le bouton. AppelezrenderSezzleButtonen passant leidde l’élément placeholder 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.

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.");
  },
});

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.");
  },
});

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

onClick

function

required

Le bouton Sezzle est cliqué par l’utilisateur.

Voir la sectionInitialisation du paiementpour les options de charge utile.

onComplete

function

required

Le paiement Sezzle est effectué avec succès. Un paiement Sezzle réussi déclenchera un événement vers le gestionnaireonComplete. L’événement devrait inclure un objet de données avec des données pertinentes pour le paramètre d’entrée de début de paiement.

onCancel

function

required

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

onFailure

function

required

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

Initialisation du paiement

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: 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_payloadest 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

default:"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 utilisantDéfinir l’ID de référence de la commande

customer

object

Le client pour la commande

items

array

Les articles achetés

`onComplete`avec les données de la carte

Leevent.datacontiendra une charge utile complète contenant le mode de paiement du client. Ces informations ne sont pas le mode de paiement utilisé pour payer Sezzle mais un mode de paiement qui peut être utilisé via votre passerelle de paiement (Cybersource, Stripe, Braintree, etc).

`event.data`réponse

{
    "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": 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": "1234",
        "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"
    }
}

session_id

string

card

object

holder

object

`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 pouronCompletecontiendra 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

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

Obtenir les données de la carte

Les données de la carte virtuelle peuvent être obtenues en utilisant le jeton ci-dessus en utilisant laDonnées de carte virtuelleméthode.

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. AppelezsetOrderReferenceIDpour définir l’ID de référence de commande Sezzle avec l’ID de commande du marchand après que la transaction de carte virtuelle a été effectuée avec succès.

Utilisation du SDK

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

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

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

session_id

string

order_id

string

Utilisation de l’API

LeMettre à jour la session de cartepoint de terminaison API existe où vous pouvez mettre à jour l’ID de commande basé.

Sezzle

Intégration Directe

Carte Virtuelle

Ressources

Paiement Express (Bêta)

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

`event.data`réponse

`onComplete`avec tokenisation

Initialisation du paiement

`event.data`réponse

Obtenir les données de la carte

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

Utilisation du SDK

Utilisation de l’API

Sezzle

Intégration Directe

Carte Virtuelle

Ressources

Paiement Express (Bêta)

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

​onCompleteavec les données de la carte

​event.dataréponse

​onCompleteavec tokenisation

​Initialisation du paiement

​event.dataréponse

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

`event.data`réponse

`onComplete`avec tokenisation

Initialisation du paiement

`event.data`réponse

Obtenir les données de la carte

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

Utilisation du SDK

Utilisation de l’API