> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sezzle.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Integration
Le SDK Javascript peut être utilisé pour une intégration simple et légère, mais il inclut également un mode en contexte qui hébergera le paiement Sezzle dans un iframe modal ou une fenêtre pop-up.
Créez des paiements et capturez des paiements avec Sezzle.
Paiement dans un iframe, une fenêtre pop-up, ou redirection vers Sezzle.
Gérez le succès, l'échec ou l'annulation du paiement avec vos commandes Sezzle.
Affichez le bouton de paiement Sezzle sur votre boutique.
## Inclure le code SDK
Incluez le script suivant dans la `` section de la page.
```html theme={"system"}
```
## Configuration du paiement
La première étape pour démarrer avec le SDK JavaScript direct est de configurer un nouvel objet Checkout.
### Options de configuration
```javascript theme={"system"}
const checkoutSdk = new Checkout({
mode: string,
publicKey: string,
apiMode: string,
apiVersion: string,
});
```
```javascript theme={"system"}
const checkoutSdk = new Checkout({
mode: "popup",
publicKey: "sz_pub_...",
apiMode: "sandbox",
apiVersion: "v2",
});
```
Options disponibles : `popup`, `iframe`, `redirect`
Si vous utilisez le mode `iframe`, ajoutez `*.sezzle.com` à la liste d'autorisation de la politique de sécurité du contenu (CSP) de votre site afin que l'iframe de paiement Sezzle puisse se charger.
* **popup** (recommandé) : fonctionne immédiatement pour la plupart des intégrations SDK basées sur un navigateur.
* **iframe** : requis lorsque les pop-ups sont bloquées (par exemple, dans une webview ou un navigateur intégré). Sezzle doit d'abord activer l'iframe pour votre ou vos domaines — soumettez votre UUID Marchand et les domaines à autoriser par environnement (sandbox et production). Par exemple : *veuillez activer uat1.mysite.com, uat2.mysite.com en sandbox et [www.mysite.com](http://www.mysite.com), mysite.com en production*.
* **redirect** : pris en charge mais généralement moins utile avec le SDK, car la valeur du SDK réside dans le paiement en contexte et la messagerie de fenêtre.
Utilisé lors de la création d'un paiement ou de la capture d'un paiement. Trouvez vos clés API sur [https://dashboard.sezzle.com/merchant/settings/apikeys](https://dashboard.sezzle.com/merchant/settings/apikeys)
Environnement dans lequel le paiement doit être effectué
Options disponibles : `live`, `sandbox`
La version de l'API Sezzle Checkout que le SDK appellera. Utilisez `v2` sauf indication contraire.
Options disponibles : `v2`
## Option de paiement
Cette section explique comment présenter Sezzle comme méthode de paiement lors du paiement. Selon la conception de votre page web, vous pouvez souhaiter afficher Sezzle comme un bouton de méthode de paiement alternative (APM), une option radio dans une liste de méthodes de paiement, et/ou comme un bouton de soumission alternatif. Voici quelques exemples de mise en œuvre du composant front-end.
Si vous souhaitez utiliser un design différent des options affichées ci-dessous, veuillez vous référer à nos [Directives de co-marquage](https://sezzle.com/brand-assets/) pour les messages approuvés et l'utilisation acceptable du logo Sezzle.
### Sezzle dans le tableau des méthodes de paiement
Voici un exemple de Sezzle comme radio de méthode de paiement.
*Cet exemple d'extrait est fourni à titre informatif uniquement. Veuillez suivre le format HTML établi de vos méthodes de paiement existantes.*
```html theme={"system"}
```
### Bouton Sezzle
L'option bouton est disponible en tant que composant de cette bibliothèque SDK. Elle est composée de deux parties : l'espace réservé d'élément configurable et la fonction de rendu.
#### Configuration du bouton Sezzle
Placez l'extrait d'élément de l'onglet Modèle à l'endroit où vous souhaitez que le bouton Sezzle soit rendu sur la page, puis mettez à jour les attributs Options selon vos besoins.
Sezzle comme bouton aux côtés d'autres APM
Sezzle comme bouton de soumission en alternative au bouton par défaut
```html theme={"system"}
```
```html theme={"system"}
```
Texte à afficher à l'intérieur du bouton. Utilisez `%%logo%%` dans le texte pour afficher l'image Sezzle
Le thème correspond à la couleur d'arrière-plan de votre site. Si `theme`: `dark`, le bouton sera blanc avec du texte sombre. Sinon, le bouton sera violet foncé avec du texte blanc.
Options disponibles : `dark`, `light`
Options disponibles : `square`, `semi-rounded`
Classes personnalisées à appliquer
Espace vide entre le haut du contenu et le bord supérieur du bouton
Espace vide entre le bas du contenu et le bord inférieur du bouton
Espace vide entre le côté gauche du contenu et le bord gauche du bouton
Espace vide entre le côté droit du contenu et le bord droit du bouton
Largeur du logo Sezzle à l'intérieur du bouton
CSS `top` décalage pour le logo Sezzle à l'intérieur du bouton (par ex., `2px`).
CSS `bottom` décalage pour le logo Sezzle à l'intérieur du bouton (par ex., `2px`).
CSS `left` décalage pour le logo Sezzle à l'intérieur du bouton (par ex., `2px`).
CSS `right` décalage pour le logo Sezzle à l'intérieur du bouton (par ex., `2px`).
Espacement entre les lettres du templateText.
Largeur du bouton
Hauteur du bouton.
#### Afficher le bouton Sezzle
Ajoutez la fonction suivante pour afficher le bouton au moment approprié, par exemple lorsque la section des méthodes de paiement se charge, ou lorsque Sezzle est sélectionné comme méthode de paiement. Le paramètre correspond à l'élément créé à l'étape précédente.
```javascript theme={"system"}
checkoutSdk.renderSezzleButton("sezzle-smart-button-container");
```
## Initialiser le paiement
### Gestionnaires d'événements
Le SDK utilise ces gestionnaires d'événements pour informer votre site de ce qui se passe lors du paiement. Implémentez chacun d'eux pour réagir aux actions de l'acheteur, comme compléter, annuler ou rencontrer une erreur.
```javascript theme={"system"}
checkoutSdk.init({
onClick: function () {
event.preventDefault();
checkoutSdk.startCheckout({...});
},
onComplete: function (response) {
console.log(response.data);
},
onCancel: function () {
console.log("Checkout cancelled.");
},
onFailure: function () {
console.log("Checkout failed.");
},
});
```
```javascript expandable theme={"system"}
checkoutSdk.init({
onClick: function () {
event.preventDefault();
checkoutSdk.startCheckout({
checkout_payload: {
order: {
intent: "AUTH",
reference_id: "543645yg5tg5675686",
description: "sezzle-store - #12749253509255",
order_amount: {
amount_in_cents: 10000,
currency: "USD",
},
},
},
});
},
onComplete: function (response) {
alert("Completed transaction. Capture started.");
checkoutSdk
.capturePayment(response.data.order_uuid, {
capture_amount: {
amount_in_cents: 10000,
currency: "USD",
},
partial_capture: false,
})
.then((r) => {
console.log(r);
});
},
onCancel: function () {
console.log("Checkout cancelled.");
},
onFailure: function () {
console.log("Checkout failed.");
},
});
```
S'exécute lorsque l'acheteur clique sur le bouton Sezzle.
Utilisez cette fonction pour créer la session de paiement Sezzle et diriger l'acheteur dans ce flux.
Voir [Initialisation du paiement](#checkout-initialization) section pour `startCheckout` options de payload.
S'exécute lorsque le paiement Sezzle se termine avec succès. Utilisez ceci pour enregistrer la commande et, si vous avez utilisé `intent: AUTH`, pour capturer le paiement.
Voir [Capture du paiement](#capture-payment) section pour `capturePayment` options de payload.
La réponse de complétion du paiement
Données de complétion du paiement
`"success"`
UUID du paiement
UUID de session
UUID de commande
URL d'origine de la fenêtre de paiement
S'exécute lorsque l'acheteur quitte le paiement Sezzle avant d'avoir terminé le paiement. Utilisez ceci pour mettre à jour le statut de la commande dans votre système.
La réponse à l'événement d'annulation
Données de l'événement d'annulation
`"cancel"`
L'UUID du paiement qui a échoué
UUID de session
UUID de commande
URL d'origine de la fenêtre de paiement
S'exécute lorsque le paiement Sezzle ne parvient pas à se charger ou rencontre une erreur. Utilisez ceci pour mettre à jour le statut de la commande et signaler l'échec à l'acheteur.
La réponse à l'échec
Objet d'erreur ou réponse d'erreur API. Lorsque `data` est un `Error`:
`"failure"`
L'UUID du paiement qui a échoué
UUID de session
UUID de commande
Message d'erreur (par ex., `"Public Key is missing."`)
URL d'origine de la fenêtre de paiement
### Initialisation du paiement
```javascript theme={"system"}
checkoutSdk.startCheckout({
checkout_payload: {
order: {
intent: string,
reference_id: string,
description: string,
order_amount: {
amount_in_cents: integer,
currency: string,
},
},
},
});
```
```javascript theme={"system"}
checkoutSdk.startCheckout({
checkout_payload: {
order: {
intent: "AUTH",
reference_id: "543645yg5tg5675686",
description: "sezzle-store - #12749253509255",
order_amount: {
amount_in_cents: 10000,
currency: "USD",
},
},
},
});
```
Le `checkout_payload` le schéma reflète le [Create Session](/fr/docs/api/core/sessions/postv2session) corps de la requête. Consultez ce document de référence pour la liste complète des champs, types et contraintes.
Vous pouvez également démarrer le paiement par URL :
```javascript theme={"system"}
checkout.startCheckout({
checkout_url: "https://checkout.sezzle.com/?id=example",
});
```
Le `startCheckout` la méthode doit être implémentée dans le paiement `onClick` gestionnaire. Il existe deux façons de démarrer le paiement :
* **Avec un payload de paiement** — passez l'objet de session complet en ligne (comme indiqué ci-dessus). Les URL d'annulation et de finalisation sont facultatives pour `iframe` et `popup` mode.
* **Avec une URL de paiement existante** — appelez `startCheckout({ checkout_url })`. Le SDK `mode` doit correspondre au `checkout_mode` que vous avez utilisé lors de la [création de la session](/fr/docs/api/core/sessions/postv2session). Pour `iframe` et `popup`, incluez le `origin` de la fenêtre parente dans les URL d'annulation et de finalisation.
**Tokenisation du client :** l'UUID du client n'est pas transmis via `onComplete`. Pour le recevoir, abonnez-vous à l'événement webhook [customer.tokenized](/fr/docs/api/core/webhooks/postv2webhooks#valid-webhook-events).
### Paiement finalisé par payload
```javascript theme={"system"}
function onCompleteHandler(event) {
var data = event.data || Object.create(null);
console.log("session data:", data.session_uuid, data.order_uuid);
}
checkout.init({
onComplete: onCompleteHandler,
});
```
### Paiement finalisé par URL
```javascript theme={"system"}
function onCompleteHandler(event) {
var data = event.data || Object.create(null);
console.log("checkout data:", data.checkout_uuid);
}
checkout.init({
onComplete: onCompleteHandler,
});
```
### Capture du paiement
Ignorez cette étape si vous avez utilisé l'intention `CAPTURE` lors du démarrage du paiement — Sezzle capture la commande automatiquement.
```javascript theme={"system"}
var payload = {
capture_amount: {
amount_in_cents: integer,
currency: string,
},
};
checkout.capturePayment(data.order_uuid, payload);
```
```javascript theme={"system"}
var payload = {
capture_amount: {
amount_in_cents: 5000,
currency: "USD",
},
};
checkout.capturePayment(data.order_uuid, payload);
```
La méthode de capture du paiement nécessite deux paramètres, le `order_uuid` et le payload tel que détaillé dans le [Capture Amount By Order Object](/fr/docs/api/core/orders/postv2capturebyorder).
Le `capturePayment` le corps de la requête reflète le [Capture by Order](/fr/docs/api/core/orders/postv2capturebyorder) corps de la requête. Consultez ce document de référence pour la liste complète des champs, types et contraintes.
## Plan de versements
```javascript theme={"system"}
const checkout = new Checkout({});
checkout.getInstallmentPlan(1000);
```
```json theme={"system"}
{
"schedule": string,
"totalInCents": integer,
"installments": [
{
"installment": integer,
"amountInCents": integer,
"dueDate": string
}
]
}
```
```json theme={"system"}
{
"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"
}
]
}
```
Cadence de paiement pour le plan de versements
Montant total de la commande en centimes
Détail de chaque paiement dû
Numéro du versement dans la série
Montant du versement en centimes
Date d'échéance du versement
Cette fonction fournira les détails du versement en fonction d'un montant en centimes. Un [paiement](#checkout-initialization) existant peut être utilisé, ou un `checkout` sans aucune configuration peut également être utilisé pour obtenir rapidement les détails du versement.