Utilisation du SDK JavaScript direct
Le SDK JavaScript peut être utilisé pour une intégration simple et légère, mais il comprend également un mode en contexte qui hébergera la caisse de SECUX dans un iframe modal ou une fenêtre contextuelle.
- Créer un paiement
- Capture le paiement
- prend en charge la caisse de Sezzle dans un iframe, une fenêtre contextuelle ou rediriger vers Sezzle
- Gérer le succès des paiements
- gérer l'annulation du paiement
- Gérer l'échec du paiement
- Rendez le bouton Sezzle
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 JavaScript direct consiste à configurer un nouvel objet de paiement.
Options de configuration
Attribut | Requis | options |
---|---|---|
publicKey | Oui | xxxx (utilisé uniquement lors de la création d'un paiement ou de la capture de paiement) |
mode | Non | popup ou iframe , ou redirect est également pris en charge |
apiMode | Non | live ou sandbox |
apiVersion | Non | v2 est la norme |
mode popup fonctionnera à l'extérieur de la boîte.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.
Exemple de configuration
const checkout = new Checkout({
'mode': "popup",
'publicKey': "xxxx",
'apiMode': "sandbox",
'apiVersion': "v2"
});
Configuration du bouton Sezzle
-Créez un élément d'espace réservé pour que le bouton SECUSE soit rendu sur la (s) 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 estCheckout with %%logo%% |
borderType | Les options sont squet and semi-rounded |
customClass | Des classes personnalisées à appliquer |
paddingTop | La valeur par défaut est1px |
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
<!-- espace place -->
<div id="sezzle-smart-button-container"></div>
<!-- bouton avec personnalisation -->
<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 lecheckout
oobjet 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
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 | Le paiement de Sezzle est terminé avec succès |
onCancel | Oui | Le paiement de Sezzle est annulé |
onFailure | Oui | Le paiement de Sezzle a échoué |
Détails du gestionnaire d'événements
- Une caisse de Sezzle terminée avec succès déclenchera un événement au gestionnaire
onComplete
. L'événement doit inclure un objetdata
avec des données. L'événement doit inclure un objetdata
avec des données pertinentes pour le paramètre d'entrée de départ de démarrage. - 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é.
Initialisation de paiement
Cette caisse sera lancée par charge utile
checkout.init({
onClick: function () {
event.preventDefault();
checkout.startCheckout({
checkout_payload: {
"order": {
"intent": "AUTH",
"reference_id": "ord_12345",
"description": "sezzle-store - #12749253509255",
"order_amount": {
"amount_in_cents": 10000,
"currency": "USD"
}
}
}
});
},
onComplete: function (event) {
console.log(event.data)
},
onCancel: function() {
console.log("checkout canceled");
},
onFailure: function() {
console.log("checkout failed");
}
})
Démarrer alternativement le paiement par une URL
checkout.startCheckout({
checkout_url: "https://checkout.sezzle.com/?id=example"
});
À mettre en œuvre dans la caisseonClick
gestionnaire.Il existe deux méthodes pour héberger une caisse.
- Utilisez une charge utile de paiement comme détaillé dans le Objet de session.
- Les URL d'annulation et complète ne sont pas requises pour
iframe
etsurgir
modee.
- Les URL d'annulation et complète ne sont pas requises pour
- Utilisez une URL de paiement existante.
- La
mode
utilisé lors de la configuration de la caisse du SDK doit correspondre aucheckout_mode
Lors de la création d'une session. - La fenêtre parent
origine
doit être fourni dans les URL d'annulation et de compléter lorsque lecheckout_mode
estiframe
oupopup
.
- La
:::Info Tokenisation du client
Ce n'est pas pris en charge dans le SDK.Veuillez contacter votre représentant Sezzle pour plus d'informations.
Ceci n'est pas pris en charge dans l'événement onComptete
. Pour recevoir un client UUID, abonnez-vous au customer.tokenized event.
:::
Cachée terminée par charge utile
function onCompleteHandler(event) {
var data = event.data || Object.create(null);
console.log('checkout data:',
data.session_uuid,
data.order_uuid);
}
checkout.init({
onComplete : onCompleteHandler
});
Cachée terminée par URL
function onCompleteHandler(event) {
var data = event.data || Object.create(null);
console.log('checkout data:',
data.checkout_uuid);
}
checkout.init({
onComplete : onCompleteHandler
});
Capture Payment
La capture d'une commande n'est pas requise si leCAPTURE
L'intention a été utilisée lors de la création de la caisse.
var payload = {
capture_amount: {
amount_in_cents: 5000,
currency: "USD"
}
};
checkout.capturePayment(data.order_uuid, payload);
Le mode de paiement de capture nécessite deux paramètres, leorder_uuid
et la charge utile comme détaillé dans leCapturez le montant par objet de commande.
Plan de versement
const checkout = new Checkout({});
checkout.getInstallmentPlan(1000);
{
"schedule": "bi-weekly",
"totalInCents": 1000,
"installments": [
{
"installment": 1,
"amountInCents": 250,
"dueDate": "2020-10-14"
},
{
"installment": 2,
"amountInCents": 250,
"dueDate": "2020-10-28"
},
{
"installment": 3,
"amountInCents": 250,
"dueDate": "2020-11-11"
},
{
"installment": 4,
"amountInCents": 250,
"dueDate": "2020-11-25"
}
]
}
Cette fonction fournira les détails de versement en fonction d'un montant en cents. Un existant vérifier peut être utilisé, ou unvérifier
Sans aucune configuration, peut également être utilisée pour obtenir rapidement des détails de versement.