Pago

Descripción general

La función checkout() crea un pedido a partir del carrito actual y redirige automáticamente al cliente a la página de pago alojada de Komerza para completar el pago.

La función de pago valida el carrito, crea un pedido y redirige automáticamente a la página de pago. No se necesita manejo manual de la redirección.

Uso básico

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

Parámetros

string

requerido

Dirección de correo electrónico del cliente para el pedido. Debe tener un formato de correo válido.

string

Código de cupón/descuento opcional para aplicar al pedido. Debe tener entre 3 y 32 caracteres si se proporciona.

Retorna

Retorna una Promise que se resuelve en ApiResponse<Order>:

interface ApiResponse<Order> {
  success: boolean; // Si el pedido fue creado
  message?: string; // Mensaje de error si falló
  invalidFields?: Array<{
    // Errores de validación si los hay
    fieldName: string;
    reason: string;
  }>;
  data?: Order; // Detalles del pedido si fue exitoso
}

Si success es true, el navegador redirigirá automáticamente a la página de pago. La respuesta es principalmente útil para el manejo de errores.

Validación

La función de pago realiza validaciones antes de crear el pedido: Validación del carrito:

El carrito no puede estar vacío
Todos los artículos deben tener IDs de producto y variante válidos

Validación del correo:

Debe tener un formato de correo electrónico válido

Validación del cupón (si se proporciona):

Debe tener al menos 3 caracteres
No puede superar los 32 caracteres

Ejemplo simple

// Controlador del botón de pago
async function manejarPago() {
  const email = document.getElementById("email").value;
  const coupon = document.getElementById("coupon").value;

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

    // Solo se ejecuta si el pago falló (no hubo redirección)
    if (!response.success) {
      alert(response.message || "El pago falló");
    }
  } catch (error) {
    console.error("Error de pago:", error);
    alert("Ocurrió un error durante el pago");
  }
}

Ejemplo completo con validación

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

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

      <form onsubmit="handleCheckout(event)">
        <div>
          <label for="email">Dirección de correo *</label>
          <input type="email" id="email" required placeholder="tu@correo.com" />
          <div id="email-error" class="error"></div>
        </div>

        <div>
          <label for="coupon">Código de cupón (opcional)</label>
          <input
            type="text"
            id="coupon"
            placeholder="Introduce el código de cupón"
            minlength="3"
            maxlength="32"
          />
          <div id="coupon-error" class="error"></div>
        </div>

        <button type="submit" id="checkout-btn">Completar compra</button>
      </form>
    </div>

    <script>
      // Inicialización
      komerza.init("your-store-id");

      // Mostrar resumen del carrito
      function updateCartSummary() {
        const basket = komerza.getBasket();
        const count = komerza.getBasketItemCount();

        if (count === 0) {
          document.getElementById("cart-summary").innerHTML = `
          <p class="error">Tu carrito está vacío</p>
        `;
          document.getElementById("checkout-btn").disabled = true;
          return;
        }

        document.getElementById("cart-summary").innerHTML = `
        <p>${count} artículo(s) en el carrito</p>
      `;
      }

      // Manejar el pago
      async function handleCheckout(event) {
        event.preventDefault();

        // Limpiar errores previos
        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();

        // Validación básica del lado del cliente
        if (!email) {
          document.getElementById("email-error").textContent =
            "El correo es obligatorio";
          return;
        }

        // Deshabilitar botón y mostrar carga
        const btn = document.getElementById("checkout-btn");
        const originalText = btn.textContent;
        btn.disabled = true;
        btn.textContent = "Procesando...";

        try {
          // Crear copia de seguridad antes del pago
          komerza.createBasketBackup();

          // Intentar el pago
          const response = await komerza.checkout(email, coupon || undefined);

          // Si llegamos aquí, el pago falló (no hubo redirección)
          if (!response.success) {
            // Manejar errores de validación
            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 {
              // Error general
              alert(
                response.message ||
                  "El pago falló. Por favor, inténtalo de nuevo.",
              );
            }

            // Restaurar carrito desde la copia de seguridad
            komerza.restoreBasketFromBackup();
          }
        } catch (error) {
          console.error("Error de pago:", error);
          alert("Ocurrió un error inesperado. Por favor, inténtalo de nuevo.");

          // Restaurar carrito desde la copia de seguridad
          komerza.restoreBasketFromBackup();
        } finally {
          // Volver a habilitar el botón
          btn.disabled = false;
          btn.textContent = originalText;
        }
      }

      // Inicializar vista
      updateCartSummary();
    </script>
  </body>
</html>

Manejo de errores

Escenarios de error comunes y cómo manejarlos:

Carrito vacío

const response = await komerza.checkout(email);

if (!response.success && response.message === "Basket is empty") {
  alert("Por favor añade artículos a tu carrito antes de pagar");
}

Errores de validación

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

if (!response.success && response.invalidFields) {
  response.invalidFields.forEach((field) => {
    console.log(`${field.fieldName}: ${field.reason}`);
    // Mostrar el error junto al campo de formulario correspondiente
  });
}

Errores generales

try {
  await komerza.checkout(email, coupon);
} catch (error) {
  // Error de red u otra excepción
  console.error("El pago falló:", error);
  alert("No se pudo completar el pago. Comprueba tu conexión.");
}

Getting Started

Client Library

Descripción general

Uso básico

Parámetros

Retorna

Validación

Ejemplo simple

Ejemplo completo con validación

Manejo de errores

Carrito vacío

Errores de validación

Errores generales

​Descripción general

​Uso básico

​Parámetros

​Retorna

​Validación

​Ejemplo simple

​Ejemplo completo con validación

​Manejo de errores

​Carrito vacío

​Errores de validación

​Errores generales

Descripción general

Uso básico

Parámetros

Retorna

Validación

Ejemplo simple

Ejemplo completo con validación

Manejo de errores

Carrito vacío

Errores de validación

Errores generales