Aller au contenu principal

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

AttributRequisoptions
publicKeyOuixxxx (utilisé uniquement lors de la création d'un paiement ou de la capture de paiement)
modeNonpopup ou iframe, ou redirect est également pris en charge
apiModeNonlive ou sandbox
apiVersionNonv2 est la norme
info

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.
Attributdescription
templateTextTexte qui sera apparenté avec le logo Sezzle.La valeur par défaut estCheckout with %%logo%%
borderTypeLes options sont squet and semi-rounded
customClassDes classes personnalisées à appliquer
paddingTopLa valeur par défaut est1px
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

<!-- 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énementRequisdescription
onClickOuiLe bouton Sezzle est cliqué par l'utilisateur
onCompleteOuiLe paiement de Sezzle est terminé avec succès
onCancelOuiLe paiement de Sezzle est annulé
onFailureOuiLe 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 objet data avec des données. L'événement doit inclure un objet data 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.

  1. 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 et surgirmodee.
  2. 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 le checkout_mode est iframe ou popup.

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