> ## 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.
# Automated
C'est le moyen le plus rapide de commencer à utiliser l'offre de carte virtuelle de Sezzle. Un paiement par carte virtuelle implémente l'API Card Session pour fournir une solution facile à utiliser, en contexte, pour émettre et utiliser une carte virtuelle Sezzle comme moyen de paiement.
L'environnement hors production de Sezzle ne permet pas de tester le traitement des paiements avec votre fournisseur.
Le domaine d'origine doit être ajouté à la liste d'autorisation de Sezzle pour que le Virtual Card SDK fonctionne. Veuillez contacter votre Account Manager et il pourra le faire pour vous.
Virtual Card Checkout dans un iframe ou une fenêtre pop-up.
Activez les détails de carte en clair via un événement de message ou la tokenisation.
Gérez le succès, l'échec ou l'annulation du paiement avec vos commandes de carte virtuelle.
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 Checkout
La première étape pour commencer avec le Virtual Card SDK est de configurer un nouvel objet Checkout.
### Options de configuration
```javascript theme={"system"}
const checkoutSdk = new Checkout({
mode: string,
publicKey: string,
apiMode: string,
isVirtualCard: boolean,
});
```
```javascript theme={"system"}
const checkoutSdk = new Checkout({
mode: "popup",
publicKey: "sz_pub_...",
apiMode: "sandbox",
isVirtualCard: true,
});
```
Options disponibles : `popup`, `iframe`, `redirect`
Si vous utilisez le mode `iframe`, ajoutez `*.sezzle.com` à la liste d'autorisation de la Content Security Policy (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 Merchant UUID 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 checkout 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 checkout doit être effectué
Options disponibles : `live`, `sandbox`
Utilisez `true` pour activer cette fonctionnalité
## Sezzle Button
### Configuration du Sezzle Button
Placez le snippet d'élément de l'onglet Template à l'endroit où vous souhaitez que le Sezzle Button soit affiché 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 Sezzle Button
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 Checkout
### 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: {
amount_in_cents: 1000,
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 (response) {
// Virtual card data is available in response.data.card and response.data.holder.
// Use this data to charge the card through your own payment processor
// (e.g., Stripe, Cybersource, Braintree).
console.log("Card data received:", response.data);
},
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 [Checkout Initialization](#checkout-initialization) section pour `startCheckout` options de payload.
S'exécute lorsque le paiement Sezzle se termine avec succès. Utilisez ceci pour enregistrer les détails de la commande et du paiement.
Le corps de la réponse dépend de la valeur de `card_response_format` fournie dans `startCheckout`.
* Pour `token` (recommandé), voir [onComplete with tokenization](#oncomplete-with-tokenization)
* Sinon, voir [onComplete with card data](#oncomplete-with-card-data)
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 checkout qui a échoué
Session UUID
Order UUID
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 checkout qui a échoué
Session UUID
Order UUID
Message d'erreur (par ex., `"Public Key is missing."`)
URL d'origine de la fenêtre de paiement
### Initialisation du Checkout
```javascript expandable theme={"system"}
checkoutSdk.startCheckout({
checkout_payload: {
amount_in_cents: integer,
currency: string,
merchant_reference_id: string,
customer: {
email: string,
first_name: string,
last_name: string,
phone: string,
billing_address_street1: string,
billing_address_street2: string,
billing_address_city: string,
billing_address_state: string,
billing_address_postal_code: string,
billing_address_country_code: string,
},
items: [
{
name: string,
sku: string,
quantity: integer,
price: {
amount_in_cents: integer,
currency: string,
},
},
],
},
});
```
```javascript expandable theme={"system"}
checkoutSdk.startCheckout({
checkout_payload: {
amount_in_cents: 1000,
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",
},
},
],
},
});
```
`checkout_payload` est optionnel, mais fournir autant d'informations que possible améliorera l'expérience client.
Le `checkout_payload` schéma reflète le [Créer une session de carte](/fr/docs/api/core/sessions/virtual/postv2sessioncard) corps de la requête. Consultez ce document de référence pour la liste complète des champs, types et contraintes - y compris `card_response_format`.
`merchant_reference_id` est utilisé uniquement pour le dépannage. L'identifiant de référence qui s'affiche dans le tableau de bord marchand peut être défini à l'aide de [Définir l'ID de référence de commande](#set-order-reference-id).
### `onComplete` avec les données de carte
Ce format de réponse fournit le **numéro de carte complet (PAN) et CVV** directement à votre JavaScript frontend. Si vos systèmes ne traitent pas déjà les données brutes des titulaires de carte, cela peut élargir votre périmètre de conformité PCI DSS. Pour une alternative plus sécurisée, voir [`onComplete` avec tokenisation](#oncomplete-with-tokenization), qui maintient les données de carte hors du navigateur et limite leur traitement à votre serveur.
Le `event.data` contiendra un payload entièrement formé contenant le moyen de paiement du client. Ces informations ne correspondent pas au moyen de paiement utilisé pour payer Sezzle, mais à un moyen pouvant être utilisé via votre passerelle de paiement (Cybersource, Stripe, Braintree, etc).
#### `event.data` réponse
```json expandable theme={"system"}
{
"session_id": string,
"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
}
}
```
```json expandable theme={"system"}
{
"session_id": "123",
"card": {
"firstName": "John",
"lastName": "Doe",
"pan": "4242424242424242",
"cvv": "123",
"expiryMonth": "02",
"expiryYear": "28"
},
"holder": {
"email": "john.doe@example.com",
"phone": "6125551234",
"firstName": "John",
"lastName": "Doe",
"address1": "123 W Lake St",
"address2": "Unit 104",
"city": "Minneapolis",
"state": "MN",
"country": "US",
"postalCode": "55408"
}
}
```
L'identifiant unique de cette session de carte
Le prénom sur la carte
Le nom de famille sur la carte
Le numéro de carte à 16 chiffres
Le code de sécurité au dos de la carte
Le mois d'expiration sur la carte
L'année d'expiration sur la carte
L'adresse e-mail du client
Le numéro de téléphone du client
Le prénom du client
Le nom de famille 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 pays à 2 caractères
Le code postal
### `onComplete` avec tokenisation
**Recommandé pour la plupart des marchands.** La tokenisation maintient les données de carte hors de votre navigateur et réduit votre périmètre de conformité PCI DSS. Les données de carte sont récupérées uniquement côté serveur.
La tokenisation est une fonctionnalité développée pour les marchands qui ne souhaitent pas que les informations de carte soient envoyées directement via l'événement message. À la place, le payload vers `onComplete` contiendra une chaîne de token de carte, que votre serveur peut échanger contre des données de carte en utilisant l'[Virtual Card Data](/fr/docs/api/core/sessions/virtual/carddatabytoken) API. Le token est à usage unique et expire après 24 heures.
#### Initialisation du paiement
```diff theme={"system"}
checkout.init({
onClick: function () {
event.preventDefault();
checkout.startCheckout({
checkout_payload: {
...
+ "card_response_format":"token"
}
});
},
onComplete: function (response) {
console.log(response.data);
},
onCancel: function() {
console.log("checkout canceled");
},
onFailure: function() {
console.log("checkout failed");
}
})
```
#### `event.data` réponse
```json theme={"system"}
{
"card": {
"token": string
}
}
```
```json theme={"system"}
{
"card": {
"token": "abc12345"
}
}
```
L'identifiant unique de cette session de carte
Token à usage unique pour récupérer les données de carte côté serveur via l'[Virtual Card Data](/fr/docs/api/core/sessions/virtual/carddatabytoken) API. Expire après 24 heures.
L'adresse e-mail du client
Le numéro de téléphone du client
Le prénom du client
Le nom de famille 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 pays à 2 caractères
Le code postal
#### Obtenir les données de carte
Les données de carte virtuelle peuvent être obtenues en utilisant le token ci-dessus via la méthode [Virtual Card Data](/fr/docs/api/core/sessions/virtual/carddatabytoken) méthode.
## Définir l'ID de référence de commande
Dans de nombreux cas, l'ID de commande marchand ne sera pas généré avant la fin du paiement et la création d'une commande. Appelez `setOrderReferenceID` pour définir l'ID de référence de commande Sezzle avec l'ID de commande marchand une fois que la transaction par carte virtuelle a été complétée avec succès.
### Utilisation du SDK
```javascript theme={"system"}
checkoutSdk.setOrderReferenceID({
session_id: string,
order_id: string,
});
```
```javascript theme={"system"}
checkoutSdk.setOrderReferenceID({
session_id: "example-session-id",
order_id: "merchant-order-id",
});
```
L'identifiant unique de la session de carte, retourné dans les `onComplete` données d'événement
Votre ID de commande marchand à associer à cette commande Sezzle
### Utilisation de l'API
Le [Update Card Session](/fr/docs/api/core/sessions/virtual/setorderid) Le point de terminaison API vous permet de mettre à jour l'ID de commande pour une session de carte donnée.