Embedded Checkouts

Recurrente Checkout es una librería JavaScript que te permite insertar un checkout responsivo y seguro en tu propia página web. Funciona mostrando un iframe con tu sesión de pago y maneja callbacks para eventos clave como éxito, fallo o pagos en proceso.

Video tutorial

Para ver un video de cómo funciona: https://youtu.be/OUIYVcrnPr0

Requisitos previos

Para usar esta biblioteca, necesitas crear un checkout en Recurrente. Consulta la documentación de creación de checkouts para obtener tu URL de checkout.

Cliq en checkouts embebidos

Dentro de un iframe, el navegador trata nuestras cookies como de terceros, así que Cliq no reconoce al cliente por su navegador. En su lugar lo reconoce por el correo o el teléfono que ya está escribiendo: si tiene tarjetas guardadas, Cliq le envía un código de un solo uso y, al confirmarlo, sus métodos guardados aparecen en el checkout.

No necesitas configurar nada para que esto funcione, y tu cliente nunca tiene que ajustar permisos del navegador.

Instalación

NPM (Recomendado)

$
npm install @recurrente/checkout

CDN

1
<script src="https://cdn.jsdelivr.net/npm/@recurrente/checkout/dist/recurrente-checkout.min.js"></script>

Uso

1
import RecurrenteCheckout from "@recurrente/checkout";
2
3
const checkout = new RecurrenteCheckout({
4
  url: "https://app.recurrente.com/checkout-session/ch_abc123",
5
  container: "#checkout-container",
6
  onSuccess: (data) => {
7
    console.log("Pago exitoso", data);
8
  },
9
  onFailure: (data) => {
10
    console.log("Pago fallido", data);
11
  },
12
  onPending: (data) => {
13
    console.log("Pago en proceso", data);
14
  },
15
});
16
17
checkout.open();

Parámetros

Flujo completo

1. Crea un checkout vía la API de Recurrente (POST /api/checkouts)
2. Usa la URL del checkout (checkout_url) para inicializar RecurrenteCheckout
3. Monta el checkout en un contenedor HTML de tu página
4. Maneja los callbacks de éxito, fallo o pago pendiente

1
// 1. Crea el checkout desde tu backend
2
const response = await fetch("/api/create-checkout", { method: "POST" });
3
const { checkout_url } = await response.json();
4
5
// 2-4. Monta e inicializa
6
const checkout = new RecurrenteCheckout({
7
  url: checkout_url,
8
  container: "#payment-form",
9
  onSuccess: () => window.location.href = "/gracias",
10
  onFailure: () => alert("El pago falló. Intenta de nuevo."),
11
});
12
13
checkout.open();