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
Attribut | Requis | Options |
---|---|---|
publicKey | Oui | xxxx (utilisé uniquement lors de la création d'un paiement) |
mode | Non | popup ou iframe |
apiMode | Non | live ou sandbox |
isVirtualCard | Non | true |
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.
Attribut | description |
---|---|
templateText | Texte qui sera apparenté avec le logo Sezzle.La valeur par défaut estVérifier avec %%logo%% |
borderType | Les options sont square et semi-rounded |
customClass | Des classes personnalisées à appliquer |
paddingTop | La valeur par défaut est 1px |
paddingBottom | La valeur par défaut est 7px |
paddingLeft | La valeur par défaut est 30px |
paddingRight | La valeur par défaut est 30px |
sezzleImageWidth | La valeur par défaut est 84px |
sezzleImagePositionTop | Position du logo Sezzle en haut. |
sezzleImagePositionBottom | Position du logo SECUX en bas. |
sezzleImagePositionLeft | Position du logo Sezzle de gauche. |
sezzleImagePositionRight | Position du logo Sezzle de la droite. |
letterSpacing | Espacement entre la lettre TemplateText. |
width | Largeur du bouton |
height | Hauteur 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énement | Requis | description |
---|---|---|
onClick | Oui | Le bouton Sezzle est cliqué par l'utilisateur |
onComplete | Oui | La carte virtuelle Sezzle est approuvée avec succès |
onCancel | Oui | Le processus d'approbation de la carte virtuelle de Sezzle est annulé |
onFailure | Oui | La 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 lesession_id
et objets aveccard
etholder
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é.