Passer au contenu principal
Si le Virtual Card SDK 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 processus de paiement.
L’intégration manuelle transmet le numéro de carte complet (PAN) et le 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 Virtual Card SDK avec l’option card_response_format: "token", qui garde les données de carte hors du navigateur.

​
Aperçu

  1. Créer une session de carte virtuelle
  2. Ajouter un écouteur d’événement de fenêtre avec le 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 terminé la session de carte
  5. Vérifier que l’event.origin du message 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 de 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

var SEZZLE_ORIGIN = "https://dashboard.sezzle.com";

window.addEventListener("message", function (event) {
    // Valider l'origine du message pour la sécurité
    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;
    }

    // Soumettre les données de carte et de titulaire à votre processeur de paiement.
    // IMPORTANT : Ne pas journaliser ou stocker les données brutes de carte (PAN, CVV)
    // dans votre frontend. Envoyez-les directement à votre serveur ou
    // passerelle de paiement pour traitement.
    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,
        },
    });
});