Package Exports

recurrente-checkout
recurrente-checkout/recurrente-checkout.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (recurrente-checkout) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Plugin de Checkout Recurrente - Guía de Integración

Esta guía explica cómo integrar la biblioteca de checkout de Recurrente en tus propios proyectos.

Instalación

NPM (Recomendado)

npm install recurrente-checkout

CDN

Unpkg

<script src="https://unpkg.com/recurrente-checkout@latest/recurrente-checkout.js"></script>

jsDelivr

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

Uso

ES6 Modules (Recomendado)

import RecurrenteCheckout from 'recurrente-checkout';

RecurrenteCheckout.load({
  url: "https://app.recurrente.com/checkout-session/ch_1234",
  onSuccess: function(paymentData) {
    console.log('Pago exitoso:', paymentData);
    // Manejar pago exitoso
    // ej., redirigir a página de éxito, actualizar UI, etc.
  },
  onFailure: function(error) {
    console.log('Pago fallido:', error);
    // Manejar pago fallido
    // ej., mostrar mensaje de error, opción de reintentar, etc.
  }
});

Importación Nominal

import { loadRecurrenteCheckout } from 'recurrente-checkout';

loadRecurrenteCheckout({
  url: "https://app.recurrente.com/checkout-session/ch_1234",
  onSuccess: function(paymentData) {
    console.log('Pago exitoso:', paymentData);
  },
  onFailure: function(error) {
    console.log('Pago fallido:', error);
  }
});

CommonJS

const RecurrenteCheckout = require('recurrente-checkout');

RecurrenteCheckout.load({
  url: "https://app.recurrente.com/checkout-session/ch_1234",
  onSuccess: function(paymentData) {
    console.log('Pago exitoso:', paymentData);
  },
  onFailure: function(error) {
    console.log('Pago fallido:', error);
  }
});

Navegador (Global)

<script src="https://unpkg.com/recurrente-checkout@latest/recurrente-checkout.js"></script>
<script>
  RecurrenteCheckout.load({
    url: "https://app.recurrente.com/s/your-checkout-url",
    onSuccess: function(paymentData) {
      console.log('Pago exitoso:', paymentData);
    },
    onFailure: function(error) {
      console.log('Pago fallido:', error);
    }
  });
</script>

Integración Rápida

1. Incluir la Biblioteca JavaScript

Elige uno de los métodos de instalación anteriores.

2. Inicializar el Checkout

Elige uno de los dos métodos de integración:

Método A: URL de Checkout Directa

RecurrenteCheckout.load({
  url: "https://app.recurrente.com/checkout-session/ch_1234",
  onSuccess: function(paymentData) {
    console.log('Pago exitoso:', paymentData.checkoutId);
    // Manejar pago exitoso
    // ej., redirigir a página de éxito, actualizar UI, etc.
  },
  onFailure: function(data) {
    console.log('Pago fallido:', data.error);
    // Manejar pago fallido
    // ej., mostrar mensaje de error, opción de reintentar, etc.
  }
});

Método B: URL de Producto

También puedes usar una URL de producto con el formato https://app.recurrente.com/s/{organization}/{product-slug}:

RecurrenteCheckout.load({
  url: "https://app.recurrente.com/s/mi-cuenta/mi-producto",
  onSuccess: function(paymentData) {
    console.log('Pago exitoso:', paymentData);
    // Manejar pago exitoso
    // ej., redirigir a página de éxito, actualizar UI, etc.
  },
  onFailure: function(error) {
    console.log('Pago fallido:', error);
    // Manejar pago fallido
    // ej., mostrar mensaje de error, opción de reintentar, etc.
  }
});

Nota: Reemplaza mi-cuenta con tu slug de organización y mi-producto con tu slug de producto.

Solución de Problemas

Problemas Comunes

Iframe no carga: Verifica que la URL de checkout sea accesible
Errores CORS: Asegúrate de que tu backend permita solicitudes desde tu dominio frontend
Errores de API: Verifica tus claves de API de Recurrente y permisos
Contenido mixto: Usa HTTPS tanto para frontend como backend en producción

Modo Debug

La biblioteca incluye logging en consola. Revisa la consola del navegador para información detallada sobre el proceso de checkout.

Ejemplo Completo

Consulta el directorio example/ para una implementación completa funcional usando Sinatra (Ruby).

Soporte

Para preguntas de integración: Revisa esta guía y la implementación de ejemplo
Para problemas de API de Recurrente: Contacta al soporte de Recurrente
Para preguntas generales: Consulta la documentación oficial de Recurrente