> ## 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.
# Express checkout
Le bouton de paiement express Sezzle offre aux acheteurs un chemin en un seul clic pour payer avec Sezzle directement depuis le panier, en utilisant les coordonnées et les informations de paiement de leur compte Sezzle. Moins de champs à remplir signifie moins de paniers abandonnés.
## Installation
### Inclure le code SDK
Incluez le script suivant dans la `` section de la page.
```html theme={"system"}
```
### Configuration du paiement
#### 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: "live",
apiVersion: "v2",
});
```
Options disponibles : `popup`, `iframe`, `redirect`
Si vous utilisez `iframe` mode, 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 popups sont bloqués (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 à [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`
### Bouton Sezzle
#### 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.
```html theme={"system"}
```
```html theme={"system"}
```
Texte à afficher à l'intérieur du bouton. Utilisez `%%logo%%` dans le texte pour
afficher l'image Sezzle
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"}
await 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 expandable theme={"system"}
checkoutSdk.init({
onClick: function () {
event.preventDefault();
checkoutSdk.startCheckout({...});
},
onComplete: function (response) {
console.log(response.data);
},
onCancel: function () {
alert("Transaction cancelled.");
},
onFailure: function () {
alert("Transaction failed.");
},
onCalculateAddressRelatedCosts: async function (
shippingAddress,
order_uuid
) {
// Authentication and the checkout update must run on your backend -
// the calls below hit Sezzle directly for illustration only.
// See the onCalculateAddressRelatedCosts section for the backend-safe pattern.
const response = await fetch(
"https://gateway.sezzle.com/v2/authentication",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
public_key: string,
private_key: string,
}),
}
);
const data = await response.json();
const token = data.token;
const updateResponse = await fetch(
`https://gateway.sezzle.com/v2/order/{order_uuid}/checkout`,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
currency_code: string,
address_uuid: shippingAddress.uuid,
shipping_options: [
{
name: string,
description: string,
shipping_amount_in_cents: integer,
tax_amount_in_cents: integer,
final_order_amount_in_cents: integer
}
]
}),
}
);
const updateStatus = updateResponse.ok;
return {
ok: updateStatus,
};
},
});
```
```javascript expandable theme={"system"}
checkoutSdk.init({
onClick: function () {
event.preventDefault();
checkoutSdk.startCheckout({
checkout_payload: {
// "cancel_url":{
// "href": "http://localhost:44300/demo/v2checkout.html"
// },
// "complete_url":{
// "href": "http://localhost:44300/demo/v2checkout.html"
// },
express_checkout_type: "multi-step",
order: {
intent: "AUTH",
reference_id: "543645yg5tg5675686",
description: "sezzle-store - #12749253509255",
requires_shipping_info: true,
items: [
{
name: "widget",
sku: "sku123456",
quantity: 1,
price: {
amount_in_cents: 1000,
currency: "USD",
},
},
],
discounts: [
{
name: "20% off",
amount: {
amount_in_cents: 1000,
currency: "USD",
},
},
],
metadata: {
location_id: "123",
store_name: "Downtown Minneapolis",
store_manager: "Jane Doe",
},
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 () {
alert("Transaction cancelled.");
},
onFailure: function () {
alert("Transaction failed.");
},
onCalculateAddressRelatedCosts: async function (
shippingAddress,
order_uuid
) {
// Authentication and the checkout update must run on your backend -
// the calls below hit Sezzle directly for illustration only.
// See the onCalculateAddressRelatedCosts section for the backend-safe pattern.
const response = await fetch(
"https://gateway.sezzle.com/v2/authentication",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
private_key: "sz_pr_...",
public_key: "sz_pub_..."
}),
}
);
const data = await response.json();
const token = data.token;
const updateResponse = await fetch(
`https://gateway.sezzle.com/v2/order/{order_uuid}/checkout`,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
currency_code: "USD",
address_uuid: shippingAddress.uuid,
shipping_options: [
{
name: "Standard Shipping",
description: "3-5 business days",
shipping_amount_in_cents: 2000,
tax_amount_in_cents: 3000,
final_order_amount_in_cents: 10200
},
{
name: "Express Shipping",
description: "1-2 business days",
shipping_amount_in_cents: 2000,
tax_amount_in_cents: 3000,
final_order_amount_in_cents: 10200
}
]
}),
}
);
const updateStatus = updateResponse.ok;
return {
ok: updateStatus,
};
},
});
```
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 [Obtenir les détails de la commande](/fr/docs/api/core/orders/getv2order) section pour récupérer la méthode d'expédition sélectionnée et d'autres détails tels que l'adresse de livraison ou de facturation selon les besoins.
* Voir [Capturer le paiement](#capture-payment) section pour `capturePayment` options de payload.
La réponse de finalisation du paiement
Données de finalisation 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 de finaliser le paiement. Utilisez ceci pour mettre à jour le statut de la commande dans votre système.
La réponse de 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 d'é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
Requis si `express_checkout_type` est `single-step` ou `multi-step`. Une fois que l'acheteur a fourni son adresse de livraison via le paiement express Sezzle, cette fonction de rappel doit être utilisée pour retourner les coûts de taxe et d'expédition à Sezzle. Le marchand peut également enregistrer l'adresse de livraison dans son système de gestion des commandes à ce moment-là, ou [obtenir les détails de la commande](/fr/docs/api/core/orders/getv2order) depuis Sezzle lors du rappel onComplete.
Voir [onCalculateAddressRelatedCosts](#oncalculateaddressrelatedcosts) section pour les détails d'implémentation.
L'adresse de livraison fournie par l'acheteur
Le prénom du client
Le nom de famille du client
Le numéro de téléphone du client
La rue et le numéro de l'adresse
L'appartement ou l'unité
La ville
Le code d'état à 2 caractères
Le code postal
Le code pays à 2 caractères
L'identifiant unique de l'adresse
L'identifiant unique de la commande
#### Initialisation du paiement
```javascript expandable theme={"system"}
checkoutSdk.startCheckout({
checkout_payload: {
// "cancel_url":{
// "href": string
// },
// "complete_url":{
// "href": string
// },
express_checkout_type: string,
order: {
intent: string,
reference_id: string,
description: string,
requires_shipping_info: boolean,
items: [
{
name: string,
sku: string,
quantity: integer,
price: {
amount_in_cents: integer,
currency: string,
},
},
],
discounts: [
{
name: string,
amount: {
amount_in_cents: integer,
currency: string,
},
},
],
metadata: {
some_property: string,
some_other_property: string
},
order_amount: {
amount_in_cents: integer,
currency: string,
},
},
},
});
```
```javascript theme={"system"}
checkoutSdk.startCheckout({
checkout_payload: {
// "cancel_url":{
// "href": "http://localhost:44300/demo/v2checkout.html"
// },
// "complete_url":{
// "href": "http://localhost:44300/demo/v2checkout.html"
// },
express_checkout_type: "multi-step",
order: {
intent: "AUTH",
reference_id: "543645yg5tg5675686",
description: "sezzle-store - #12749253509255",
requires_shipping_info: true,
items: [
{
name: "widget",
sku: "sku123456",
quantity: 1,
price: {
amount_in_cents: 1000,
currency: "USD",
},
},
],
discounts: [
{
name: "20% off",
amount: {
amount_in_cents: 1000,
currency: "USD",
},
},
],
metadata: {
location_id: "123",
store_name: "Downtown Minneapolis",
store_manager: "Jane Doe",
},
order_amount: {
amount_in_cents: 10000,
currency: "USD",
},
},
},
});
```
Le `checkout_payload` schéma reflète le [Créer une 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 - y compris `express_checkout_type` et `order.requires_shipping_info`.
Le `startCheckout` méthode doit être implémentée dans le `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 (illustré ci-dessus). Les URLs 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 l'`origin` de la fenêtre parente dans les URLs 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).
#### Capturer le 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"}
checkoutSdk
.capturePayment(response.data.order_uuid, {
capture_amount: {
amount_in_cents: integer,
currency: string,
},
partial_capture: boolean,
})
.then((r) => {
console.log(r);
});
```
```javascript theme={"system"}
checkoutSdk
.capturePayment(response.data.order_uuid, {
capture_amount: {
amount_in_cents: 10000,
currency: "USD",
},
partial_capture: false,
})
.then((r) => {
console.log(r);
});
```
Le `capturePayment` corps de la requête reflète le [Capturer par commande](/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.
#### onCalculateAddressRelatedCosts
Pour des raisons de sécurité, l'authentification et la mise à jour du paiement doivent provenir
du code back-end du marchand.
1. Obtenir un jeton d'authentification
* Appelez le [authentification](/fr/docs/api/core/authentication/postauthentication) endpoint pour obtenir un jeton bearer
* Vous devriez avoir déjà configuré cela dans votre back-end pour l'intégration standard
* Au lieu de pointer directement vers Sezzle comme dans l'exemple ci-dessous, vous pouvez réutiliser votre fonction existante
2. Mettre à jour la commande
* Appelez le [Mettre à jour le paiement](/fr/docs/api/core/orders/patchv2updatecheckoutbyorder) endpoint pour fournir à Sezzle les option(s) de livraison et le montant final des taxes et de la livraison en fonction de l'adresse de livraison de l'acheteur
Votre back-end doit répondre dans les 40 secondes. Si Sezzle ne reçoit pas vos option(s) de livraison dans ce délai, le paiement échoue avec une erreur `merchant_shipping_cost_timeout` et l'acheteur ne peut pas finaliser son achat.
Une fois que `shipping_options` ont été fournis à Sezzle pour un paiement, ils ne peuvent pas être modifiés à moins que l'acheteur ne change son adresse de livraison.
```javascript expandable theme={"system"}
onCalculateAddressRelatedCosts: async function (
shippingAddress,
order_uuid
) {
// Call authentication endpoint
const response = await fetch(
yourBackendAuthenticationURL,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
public_key: string,
private_key: string,
}),
}
);
const data = await response.json();
const token = data.token;
const updateResponse = await fetch(
yourBackendUpdateOrderURL,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
currency_code: string,
address_uuid: shippingAddress.uuid,
shipping_options: [
{
name: string,
description: string,
shipping_amount_in_cents: integer,
tax_amount_in_cents: integer,
final_order_amount_in_cents: integer
}
]
}),
}
);
const updateStatus = updateResponse.ok;
return {
ok: updateStatus,
};
},
```
```javascript expandable theme={"system"}
onCalculateAddressRelatedCosts: async function (
shippingAddress,
order_uuid
) {
// All this must be done inside your backend endpoint and this should be replaced with your endpoint communication logic
// Call authentication endpoint
const response = await fetch(
`https://sandbox.gateway.sezzle.com/v2/authentication`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
private_key: "sz_pr_...",
public_key: "sz_pub_..."
}),
}
);
const data = await response.json();
const token = data.token;
// Calculate your shipping options based on the provided shippingAddress
const shipping_options = [
{
name: "Standard Shipping",
description: "3-5 business days",
shipping_amount_in_cents: 1000,
tax_amount_in_cents: 500,
final_order_amount_in_cents: 11500
},
{
name: "Express Shipping",
description: "1-2 business days",
shipping_amount_in_cents: 2000,
tax_amount_in_cents: 1000,
final_order_amount_in_cents: 13000
}
]
// Update your checkout with the calculated shipping options
const updateResponse = await fetch(
`https://sandbox.gateway.sezzle.com/v2/order/{order_uuid}/checkout`,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
currency_code: "USD",
address_uuid: shippingAddress.uuid,
shipping_options,
}),
}
);
const updateStatus = updateResponse.ok;
return {
ok: updateStatus,
};
}
```
Le corps de la requête de mise à jour reflète le [Mettre à jour le paiement par commande](/fr/docs/api/core/orders/patchv2updatecheckoutbyorder) corps de la requête. Consultez ce document de référence pour la liste complète des champs, types et contraintes.
Comportement spécifique à Express pour `shipping_options`:
* Si `express_checkout_type` est `multi-step` mais qu'une seule méthode est fournie, l'expérience utilisateur suivra le flux `single-step` à partir de ce point
* Si `express_checkout_type` est `single-step` mais que plusieurs méthodes sont fournies, l'acheteur recevra un message d'erreur.
* Si `express_checkout_type` est `multi-step` ou `single-step` et qu'aucune méthode n'est fournie, l'acheteur sera invité à vérifier son adresse de livraison et à réessayer.
##### Réponse
```json theme={"system"}
{
ok: boolean,
error: {
code: string
}
}
```
```json theme={"system"}
{
ok: false,
error: {
code: "merchant_unsupported_shipping_address"
}
}
```
Défini sur `true` une fois que les options de livraison ont été écrites avec succès dans Sezzle, ou `false` si le marchand rejette l'adresse (retourner un `error.code` en accompagnement).
Options disponibles : `merchant_unsupported_shipping_address`, `merchant_error`
`merchant_unsupported_shipping_address` indique que le marchand ne prend pas en charge l'adresse de livraison fournie.
`merchant_error` est une erreur générique retournée par le marchand lorsque quelque chose se passe mal de son côté.