Bezahlvorgang

Übersicht

Die Funktion checkout() erstellt eine Bestellung aus dem aktuellen Warenkorb und leitet den Kunden automatisch zur gehosteten Checkout-Seite von Komerza weiter, um die Zahlung abzuschließen.

Die Checkout-Funktion validiert den Warenkorb, erstellt eine Bestellung und leitet automatisch zur Zahlungsseite weiter. Keine manuelle Weiterleitungsverarbeitung erforderlich.

Grundlegende Verwendung

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

Parameter

string

erforderlich

E-Mail-Adresse des Kunden für die Bestellung. Muss ein gültiges E-Mail-Format sein.

string

Optionaler Coupon-/Rabattcode für die Bestellung. Muss 3-32 Zeichen lang sein, wenn angegeben.

Rückgabe

Gibt ein Promise zurück, das zu ApiResponse<Order> aufgelöst wird:

interface ApiResponse<Order> {
  success: boolean; // Ob die Bestellung erstellt wurde
  message?: string; // Fehlermeldung bei Misserfolg
  invalidFields?: Array<{
    // Validierungsfehler falls vorhanden
    fieldName: string;
    reason: string;
  }>;
  data?: Order; // Bestelldetails bei Erfolg
}

Wenn success true ist, leitet der Browser automatisch zur Checkout-Seite weiter. Die Antwort ist hauptsächlich für die Fehlerbehandlung nützlich.

Validierung

Die Checkout-Funktion führt vor der Bestellerstellung eine Validierung durch: Warenkorb-Validierung:

Warenkorb darf nicht leer sein
Alle Artikel müssen gültige Produkt- und Varianten-IDs haben

E-Mail-Validierung:

Muss ein gültiges E-Mail-Format sein

Coupon-Validierung (falls angegeben):

Muss mindestens 3 Zeichen lang sein
Darf 32 Zeichen nicht überschreiten

Einfaches Beispiel

// Checkout-Button-Handler
async function handleCheckout() {
  const email = document.getElementById("email").value;
  const coupon = document.getElementById("coupon").value;

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

    // Wird nur ausgeführt, wenn der Checkout fehlschlug (keine Weiterleitung)
    if (!response.success) {
      alert(response.message || "Checkout fehlgeschlagen");
    }
  } catch (error) {
    console.error("Checkout-Fehler:", error);
    alert("Beim Checkout ist ein Fehler aufgetreten");
  }
}

Vollständiges Beispiel mit Validierung

<!DOCTYPE html>
<html>
  <head>
    <title>Bezahlen</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>Bezahlen</h2>

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

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

        <div>
          <label for="coupon">Gutscheincode (optional)</label>
          <input
            type="text"
            id="coupon"
            placeholder="Gutscheincode eingeben"
            minlength="3"
            maxlength="32"
          />
          <div id="coupon-error" class="error"></div>
        </div>

        <button type="submit" id="checkout-btn">Kauf abschließen</button>
      </form>
    </div>

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

      // Warenkorbzusammenfassung anzeigen
      function updateCartSummary() {
        const basket = komerza.getBasket();
        const count = komerza.getBasketItemCount();

        if (count === 0) {
          document.getElementById("cart-summary").innerHTML = `
          <p class="error">Ihr Warenkorb ist leer</p>
        `;
          document.getElementById("checkout-btn").disabled = true;
          return;
        }

        document.getElementById("cart-summary").innerHTML = `
        <p>${count} Artikel im Warenkorb</p>
      `;
      }

      // Checkout verarbeiten
      async function handleCheckout(event) {
        event.preventDefault();

        // Vorherige Fehler löschen
        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();

        // Grundlegende clientseitige Validierung
        if (!email) {
          document.getElementById("email-error").textContent =
            "E-Mail ist erforderlich";
          return;
        }

        // Schaltfläche deaktivieren und Ladeindikator anzeigen
        const btn = document.getElementById("checkout-btn");
        const originalText = btn.textContent;
        btn.disabled = true;
        btn.textContent = "Wird verarbeitet...";

        try {
          // Sicherung vor dem Checkout erstellen
          komerza.createBasketBackup();

          // Checkout versuchen
          const response = await komerza.checkout(email, coupon || undefined);

          // Wenn wir hier ankommen, ist der Checkout fehlgeschlagen (keine Weiterleitung)
          if (!response.success) {
            // Validierungsfehler behandeln
            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 {
              // Allgemeiner Fehler
              alert(
                response.message ||
                  "Checkout fehlgeschlagen. Bitte versuchen Sie es erneut.",
              );
            }

            // Warenkorb aus Sicherung wiederherstellen
            komerza.restoreBasketFromBackup();
          }
        } catch (error) {
          console.error("Checkout-Fehler:", error);
          alert(
            "Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es erneut.",
          );

          // Warenkorb aus Sicherung wiederherstellen
          komerza.restoreBasketFromBackup();
        } finally {
          // Schaltfläche wieder aktivieren
          btn.disabled = false;
          btn.textContent = originalText;
        }
      }

      // Anzeige initialisieren
      updateCartSummary();
    </script>
  </body>
</html>

Fehlerbehandlung

Häufige Fehlerszenarien und deren Behandlung:

Leerer Warenkorb

const response = await komerza.checkout(email);

if (!response.success && response.message === "Basket is empty") {
  alert("Bitte legen Sie Artikel in den Warenkorb, bevor Sie zur Kasse gehen");
}

Validierungsfehler

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

if (!response.success && response.invalidFields) {
  response.invalidFields.forEach((field) => {
    console.log(`${field.fieldName}: ${field.reason}`);
    // Fehler neben dem zugehörigen Formularfeld anzeigen
  });
}

Allgemeine Fehler

try {
  await komerza.checkout(email, coupon);
} catch (error) {
  // Netzwerkfehler oder andere Ausnahme
  console.error("Checkout fehlgeschlagen:", error);
  alert(
    "Checkout konnte nicht abgeschlossen werden. Überprüfen Sie Ihre Verbindung.",
  );
}

Getting Started

Client Library

Übersicht

Grundlegende Verwendung

Parameter

Rückgabe

Validierung

Einfaches Beispiel

Vollständiges Beispiel mit Validierung

Fehlerbehandlung

Leerer Warenkorb

Validierungsfehler

Allgemeine Fehler

​Übersicht

​Grundlegende Verwendung

​Parameter

​Rückgabe

​Validierung

​Einfaches Beispiel

​Vollständiges Beispiel mit Validierung

​Fehlerbehandlung

​Leerer Warenkorb

​Validierungsfehler

​Allgemeine Fehler

Übersicht

Grundlegende Verwendung

Parameter

Rückgabe

Validierung

Einfaches Beispiel

Vollständiges Beispiel mit Validierung

Fehlerbehandlung

Leerer Warenkorb

Validierungsfehler

Allgemeine Fehler