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

# Intégration manuelle

Si le [SDK de carte virtuelle](./automated) n'est pas une option viable, l'intégration manuelle vous guidera à travers les étapes pour compléter une session de carte virtuelle dans votre paiement.

<Warning>
  L'intégration manuelle délivre le **numéro de carte complet (PAN) et CVV** directement à votre JavaScript frontend via `postMessage`. Cela place votre frontend dans le périmètre PCI DSS. Si vous souhaitez minimiser l'exposition PCI, envisagez le [SDK de carte virtuelle](./automated) avec l'option [`card_response_format: "token"` option](./automated#oncomplete-with-tokenization), qui maintient les données de carte hors du navigateur.
</Warning>

## Aperçu

1. Créer une [session de carte virtuelle](/fr/docs/api/core/sessions/virtual/postv2sessioncard)
2. Ajouter un écouteur d'événement de fenêtre de type `message` à la page de paiement
3. Ouvrir la session de carte `dashboard_url` en utilisant le mode fourni dans la demande de création de session de carte
4. Sezzle enverra un message à l'écouteur lorsque l'utilisateur aura complété la session de carte
5. Vérifier que le message `event.origin` correspond au domaine Sezzle attendu
6. Vérifier que le message `event.data` existe
7. Vérifier `event.data.szl_source` `=` `v_card`
8. Vérifier `event.data.card` et `event.data.holder` existent tous les deux
   * S'ils existent
     * Utiliser les données de carte et du titulaire pour soumettre la commande par carte de crédit
   * S'ils n'existent pas
     * L'utilisateur n'a pas fourni de données de carte virtuelle

## Exemple Javascript

```javascript [expandable] theme={"system"}
var SEZZLE_ORIGIN = "https://dashboard.sezzle.com";

window.addEventListener("message", function (event) {
    // Validate the message origin for security
    if (event.origin !== SEZZLE_ORIGIN) {
        return;
    }

    var data = event.data || Object.create(null);

    if (data.szl_source !== "v_card") {
        return;
    }

    var card = data.card;
    var holder = data.holder;
    if (!card && !holder) {
        console.log("failed virtual card session");
        return;
    }

    // Submit card and holder data to your payment processor.
    // IMPORTANT: Do not log or store raw card data (PAN, CVV)
    // in your frontend. Send it directly to your server or
    // payment gateway for processing.
    submitToPaymentGateway({
        card: {
            number: card.pan,
            cvv: card.cvv,
            expiryMonth: card.expiryMonth,
            expiryYear: card.expiryYear,
            firstName: card.firstName,
            lastName: card.lastName,
        },
        billingAddress: {
            email: holder.email,
            phone: holder.phone,
            firstName: holder.firstName,
            lastName: holder.lastName,
            address1: holder.address1,
            address2: holder.address2,
            city: holder.city,
            state: holder.state,
            country: holder.country,
            postalCode: holder.postalCode,
        },
    });
});
```