Paiement

Aperçu

La fonction checkout() crée une commande à partir du panier actuel et redirige automatiquement le client vers la page de paiement hébergée de Komerza pour finaliser le paiement.

La fonction de paiement valide le panier, crée une commande et redirige automatiquement vers la page de paiement. Aucune gestion manuelle de la redirection n’est nécessaire.

Utilisation de base

const response = await komerza.checkout(emailAddress, couponCode);

Paramètres

string

requis

L’adresse e-mail du client pour la commande. Doit être un format e-mail valide.

string

Code coupon/remise optionnel à appliquer à la commande. Doit faire entre 3 et 32 caractères si fourni.

Retours

Retourne une Promise qui se résout en ApiResponse<Order> :

interface ApiResponse<Order> {
  success: boolean; // Si la commande a été créée
  message?: string; // Message d'erreur en cas d'échec
  invalidFields?: Array<{
    // Erreurs de validation éventuelles
    fieldName: string;
    reason: string;
  }>;
  data?: Order; // Détails de la commande si succès
}

Si success est true, le navigateur redirigera automatiquement vers la page de paiement. La réponse est principalement utile pour la gestion des erreurs.

Validation

La fonction de paiement effectue une validation avant de créer la commande : Validation du panier :

Le panier ne peut pas être vide
Tous les articles doivent avoir des ID de produit et de variante valides

Validation de l’e-mail :

Doit être un format d’adresse e-mail valide

Validation du coupon (si fourni) :

Doit faire au moins 3 caractères
Ne peut pas dépasser 32 caractères

Exemple simple

// Gestionnaire du bouton de paiement
async function gererPaiement() {
  const email = document.getElementById("email").value;
  const coupon = document.getElementById("coupon").value;

  try {
    const response = await komerza.checkout(email, coupon);

    // S'exécute uniquement si le paiement a échoué (pas de redirection)
    if (!response.success) {
      alert(response.message || "Le paiement a échoué");
    }
  } catch (error) {
    console.error("Erreur de paiement :", error);
    alert("Une erreur s'est produite lors du paiement");
  }
}

Exemple complet avec validation

<!DOCTYPE html>
<html>
  <head>
    <title>Paiement</title>
    <script src="https://cdn.komerza.com/komerza.min.js"></script>
    <style>
      .error {
        color: red;
        font-size: 14px;
      }
      .field-error {
        border-color: red;
      }
    </style>
  </head>
  <body>
    <div id="checkout-form">
      <h2>Paiement</h2>

      <div id="cart-summary"></div>

      <form onsubmit="handleCheckout(event)">
        <div>
          <label for="email">Adresse e-mail *</label>
          <input
            type="email"
            id="email"
            required
            placeholder="votre@email.com"
          />
          <div id="email-error" class="error"></div>
        </div>

        <div>
          <label for="coupon">Code coupon (optionnel)</label>
          <input
            type="text"
            id="coupon"
            placeholder="Entrez le code coupon"
            minlength="3"
            maxlength="32"
          />
          <div id="coupon-error" class="error"></div>
        </div>

        <button type="submit" id="checkout-btn">Finaliser l'achat</button>
      </form>
    </div>

    <script>
      // Initialisation
      komerza.init("your-store-id");

      // Afficher le résumé du panier
      function updateCartSummary() {
        const basket = komerza.getBasket();
        const count = komerza.getBasketItemCount();

        if (count === 0) {
          document.getElementById("cart-summary").innerHTML = `
          <p class="error">Votre panier est vide</p>
        `;
          document.getElementById("checkout-btn").disabled = true;
          return;
        }

        document.getElementById("cart-summary").innerHTML = `
        <p>${count} article(s) dans le panier</p>
      `;
      }

      // Gérer le paiement
      async function handleCheckout(event) {
        event.preventDefault();

        // Effacer les erreurs précédentes
        document.getElementById("email-error").textContent = "";
        document.getElementById("coupon-error").textContent = "";
        document.getElementById("email").classList.remove("field-error");
        document.getElementById("coupon").classList.remove("field-error");

        const email = document.getElementById("email").value.trim();
        const coupon = document.getElementById("coupon").value.trim();

        // Validation côté client de base
        if (!email) {
          document.getElementById("email-error").textContent =
            "L'e-mail est requis";
          return;
        }

        // Désactiver le bouton et afficher le chargement
        const btn = document.getElementById("checkout-btn");
        const originalText = btn.textContent;
        btn.disabled = true;
        btn.textContent = "Traitement en cours...";

        try {
          // Créer une sauvegarde avant le paiement
          komerza.createBasketBackup();

          // Tenter le paiement
          const response = await komerza.checkout(email, coupon || undefined);

          // Si on arrive ici, le paiement a échoué (pas de redirection)
          if (!response.success) {
            // Gérer les erreurs de validation
            if (response.invalidFields) {
              response.invalidFields.forEach((field) => {
                const errorEl = document.getElementById(
                  `${field.fieldName}-error`,
                );
                const inputEl = document.getElementById(field.fieldName);

                if (errorEl) errorEl.textContent = field.reason;
                if (inputEl) inputEl.classList.add("field-error");
              });
            } else {
              // Erreur générale
              alert(response.message || "Paiement échoué. Veuillez réessayer.");
            }

            // Restaurer le panier depuis la sauvegarde
            komerza.restoreBasketFromBackup();
          }
        } catch (error) {
          console.error("Erreur de paiement :", error);
          alert("Une erreur inattendue s'est produite. Veuillez réessayer.");

          // Restaurer le panier depuis la sauvegarde
          komerza.restoreBasketFromBackup();
        } finally {
          // Réactiver le bouton
          btn.disabled = false;
          btn.textContent = originalText;
        }
      }

      // Initialiser l'affichage
      updateCartSummary();
    </script>
  </body>
</html>

Gestion des erreurs

Scénarios d’erreur courants et comment les gérer :

Panier vide

const response = await komerza.checkout(email);

if (!response.success && response.message === "Basket is empty") {
  alert(
    "Veuillez ajouter des articles à votre panier avant de passer commande",
  );
}

Erreurs de validation

const response = await komerza.checkout(email, coupon);

if (!response.success && response.invalidFields) {
  response.invalidFields.forEach((field) => {
    console.log(`${field.fieldName}: ${field.reason}`);
    // Afficher l'erreur à côté du champ de formulaire concerné
  });
}

Erreurs générales

try {
  await komerza.checkout(email, coupon);
} catch (error) {
  // Erreur réseau ou autre exception
  console.error("Échec du paiement :", error);
  alert("Impossible de finaliser le paiement. Vérifiez votre connexion.");
}

Getting Started

Client Library

Aperçu

Utilisation de base

Paramètres

Retours

Validation

Exemple simple

Exemple complet avec validation

Gestion des erreurs

Panier vide

Erreurs de validation

Erreurs générales

​Aperçu

​Utilisation de base

​Paramètres

​Retours

​Validation

​Exemple simple

​Exemple complet avec validation

​Gestion des erreurs

​Panier vide

​Erreurs de validation

​Erreurs générales

Aperçu

Utilisation de base

Paramètres

Retours

Validation

Exemple simple

Exemple complet avec validation

Gestion des erreurs

Panier vide

Erreurs de validation

Erreurs générales