Aller au contenu principal

Utilisation du SDK de la carte virtuelle

C'est le moyen le plus rapide de commencer à utiliser l'offre de cartes virtuelles de Sezzle.Une caisse de carte virtuelle implémente l'API de session de la carte pour fournir une solution facile à utiliser et en contexte pour l'émission et l'utilisation d'une carte virtuelle SEZUX comme paiement.

L'environnement de non-production de Sezzle ne fournit pas de moyen de tester le traitement des paiements à l'aide de votre fournisseur

Caractéristiques

  • Virtual Carte Checkout dans un iframe ou une fenêtre contextuelle
  • Gérer le succès de l'approbation des cartes virtuelles
  • Gérer l'annulation de l'approbation de la carte virtuelle
  • Gérer l'échec de l'approbation de la carte virtuelle
  • Rendez le bouton Sezzle
  • Activer les détails de la carte ordévénement de messagessage event](https://developer.mozilla.org/en-US/docs/Web/API/Window/message_event) ou tokenisation

Inclure le code SDK

Inclure https://checkout-sdk.sezzle.com/checkout.min.js dans le <head> Section de la page.

<head>
<script type="text/javascript" src="https://checkout-sdk.sezzle.com/checkout.min.js"></script>
</head>

Configuration de paiement

La première exigence pour commencer avec le SDK VC consiste à configurer un nouvel objet de paiement.

Exemple: Veuillez activeruat1.mysite.com, uat2.mysite.com dans Sandbox.Activerwww.mysite.com et mysite.com fou production

Options de configuration

AttributRequisOptions
publicKeyOuixxxx (utilisé uniquement lors de la création d'un paiement)
modeNonpopup ou iframe
apiModeNonlive ou sandbox
isVirtualCardNontrue
info

mode popup fonctionnera à l'extérieur de la boîte (à condition que Sezzle ait configuré votre compte marchand en tant que carte virtuelle). Aucune configuration supplémentaire n'est requise pour utiliser popup. Sezzle recommande actuellement le mode popup.

mode iframe ne fonctionnera pas correctement sans contacter d'abord Sezzle. Pour des raisons de sécurité, Sezzle doit activer iframe pour vos domaines. Pour l'avoir activé, s'il vous plaît soumettre une demande avec votre Merchant UUID Sezzle et une liste de domaines à être autorisée par environnement (production et bac à sable). Par exemple, veuillez activer uat1.mysite.com, uat2.mysite.com dans sandbox et www.mysite.com, mysite.com en production.

mode popup et iframe est identique, à part le 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 Sezzle pour activer vos domaines et basculez le mode à iframe.

Example configuration

const checkout = new Checkout({
'mode': "iframe",
'publicKey': "xxxx",
'apiMode': "sandbox",
'isVirtualCard': true
});

Configuration du bouton Sezzle

  • Créez un élément d'espace réservé pour que le bouton SEZUX soit rendu sur le page(s).

  • Utilisez des attributs HTML pour personnaliser le bouton.

Attributdescription
templateTextTexte qui sera apparenté avec le logo Sezzle.La valeur par défaut estVérifier avec %%logo%%
borderTypeLes options sont square et semi-rounded
customClassDes classes personnalisées à appliquer
paddingTopLa valeur par défaut est 1px
paddingBottomLa valeur par défaut est 7px
paddingLeftLa valeur par défaut est 30px
paddingRightLa valeur par défaut est 30px
sezzleImageWidthLa valeur par défaut est 84px
sezzleImagePositionTopPosition du logo Sezzle en haut.
sezzleImagePositionBottomPosition du logo SECUX en bas.
sezzleImagePositionLeftPosition du logo Sezzle de gauche.
sezzleImagePositionRightPosition du logo Sezzle de la droite.
letterSpacingEspacement entre la lettre TemplateText.
widthLargeur du bouton
heightHauteur du bouton.La valeur par défaut est 4.2em

Exemple de configuration

<!-- button placeholder -->
<div id="sezzle-smart-button-container"></div>

<!-- button with customization -->
<div id="sezzle-smart-button-container" style="text-align: center"
templateText="Pay with %%logo%%"
borderType="semi-rounded"
customClass="action,primary,checkout">
</div>

Rendez le bouton SECUX

Nécessite d'avoir le checkout objet créé par-dessus pour rendre le bouton.Appel renderSezzleButton passant le id de l'élément de placement défini dans la configuration des bouton, ci-dessus.

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

Initialiser le paiement

Maintenant, le bouton est rendu à l'écran, nous devons définir la gestion de clics pour connecter votre application de commerce électronique à Sezzle. L'initialisation du paiement le fera et fournira tous les gestionnaires nécessaires pour réussir votre site.

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.

ÉvénementRequisdescription
onClickOuiLe bouton Sezzle est cliqué par l'utilisateur
onCompleteOuiLa carte virtuelle Sezzle est approuvée avec succès
onCancelOuiLe processus d'approbation de la carte virtuelle de Sezzle est annulé
onFailureOuiLa carte virtuelle Sezzle n'est pas approuvée

Détails du gestionnaire d'événements

  • Une caisse de Sezzle terminée avec succès déclenchera un événement au onComplete gestionnaire.L'événement doit inclure undata Object avec le session_id et objets avec card et holder détails.
  • Si l'utilisateur quitte la caisse de Sezzle pour quelque raison que ce soit, le onCancel Le gestionnaire sera exécuté.
  • S'il y a une erreur de chargement de la page de caisse de Sezzle, le onFailure Le gestionnaire sera exécuté.

Exemple

checkout.init({
onClick: function () {
event.preventDefault();
checkout.startCheckout({
checkout_payload: {
amount_in_cents: 100,
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 canceled");
},
onFailure: function() {
console.log("checkout failed");
}
})

checkout_payload est facultatif mais fournir autant d'informations que possible améliorera l'expérience client.Si utilisé le corps de demande doit être un session object.

merchant_reference_id dans la charge utile ci-dessus est utilisé uniquement pour le dépannage.L'ID de référence qui montre dans le tableau de bord marchand peut être défini en utilisant Set Order Reference ID

onComplete avec les données de la carte

La event.data contiendra une charge utile entièrement formée contenant le mode de paiement des clients.Ces informations ne sont pas le mode de paiement utilisé pour payer Sezzle mais qui peut être utilisé par votre passerelle de paiement (Cybersource, Stripe, Braintree, etc.).

event.data réponse

{
"session_id": "example-sezzle-id",
"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 commerçants qui ne veulent pas que les informations de carte envoyées directement via l'événement de message.À la place la charge utile à onComplete contiendra une chaîne de jeton de carte.

Initialisation de 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 des données de carte

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

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

Dans de nombreux cas, l'ID de commande marchande ne sera généré qu'après la fin du paiement et une commande. Appel setOrderReferenceID Pour définir l'ID de référence de l'ordre SECUSE avec l'ID de commande marchand une fois la transaction de carte virtuelle terminée avec succès.

Utilisation du SDK

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

Utilisation de l'API

La Update Card Session Le point de terminaison de l'API existe où vous pouvez mettre à jour l'identifiant de commande basé.