Quickstart

Integra ChurnCut en tu aplicación en minutos y comienza a retener clientes.

Requisitos previos

Una cuenta activa de Stripe con suscripciones (live o test)
Tu App ID y Secret Key de ChurnCut (disponibles en Settings)
Posibilidad de añadir un snippet de JavaScript a tu app web
Un desarrollador disponible para integrar la API

ChurnCut Settings page showing where to find your Secret Key and Organization ID under the API access section — Encuentra tu Secret Key y Organization ID en Settings → API access

Paso 1: Obtener URL de sesión

Llama a la API de ChurnCut desde tu backend para generar una URL de sesión.

Node.js

javascript

const requests = require('requests');

async function getCancellationUrl(apiKey, appId, customerEmail) {
  const expiration = Math.floor(Date.now() / 1000) + 3600;

  const response = await requests.post(
    'https://app.churncut.com/churncut-client-integration/get-cancellation-session-url',
    {
      headers: {
        'Authorization': `Bearer ${apiKey}`,
        'Content-Type': 'application/json'
      },
      json: {
        churncut_app_id: appId,
        expiration_date_timestamp: expiration,
        customer_email: customerEmail
      }
    }
  );

  return response.json(); // Returns { url, hmac }
}

Python

python

import requests
import time

def get_cancellation_url(api_key: str, app_id: str, customer_email: str):
    expiration = int(time.time()) + 3600

    response = requests.post(
        "https://app.churncut.com/churncut-client-integration/get-cancellation-session-url",
        headers={
            "Authorization": f"Bearer {api_key}",
            "Content-Type": "application/json"
        },
        json={
            "churncut_app_id": app_id,
            "expiration_date_timestamp": expiration,
            "customer_email": customer_email
        }
    )

    return response.json()  # Returns { url, hmac }

Important: La llamada a la API debe hacerse desde tu backend. Nunca expongas tu Secret Key en el cliente.

Paso 2: Añadir el script

Incluye el script de ChurnCut en tu aplicación web:

html

<script src="https://app.churncut.com/static/user_integration/js/integration_initiallizer.js"></script>

Paso 3: Iniciar el flujo de cancelación

Después de obtener la URL del paso 1, analízala y llama a starCancellationFromURl:

javascript

// After getting { url, hmac } from the API

starCancellationFromURl(url);

Ejemplos completos por framework

Elige tu framework para ver un ejemplo completo con botón de cancelación:

jsx

import { useCallback } from 'react';

function CancelButton({ customerEmail }) {
  const handleCancel = useCallback(async () => {
    // 1. Get session URL and hmac from your backend
    const res = await fetch('/api/churncut-url', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ customerEmail })
    });
    const { url } = await res.json();

    // 2. Parse URL and start cancellation flow
    const urlObj = new URL(url);
    const params = new URLSearchParams(urlObj.search);

    window.starCancellationFromURl(data.url);
  }, [customerEmail]);

  return (
    <button onClick={handleCancel} className="cancel-btn">
      Cancel subscription
    </button>
  );
}

Botón de cancelación con preview de suscripción

Un patrón común es mostrar los detalles de la suscripción del usuario con un botón para cancelar. Aquí tienes un componente completo que puedes adaptar:

Vista previa

Pro Plan

$49/month · Renews Feb 28, 2026

EstadoActiva

Método de pago•••• 4242

jsx

import { useCallback, useState, useEffect } from 'react';

function SubscriptionSettings({ customerEmail }) {
  const [subscription, setSubscription] = useState(null);

  useEffect(() => {
    // Fetch subscription details from your backend
    fetch(`/api/subscription?email=${customerEmail}`)
      .then(res => res.json())
      .then(data => setSubscription(data));
  }, [customerEmail]);

  const handleCancel = useCallback(async () => {
    // 1. Get session URL from your backend
    const res = await fetch('/api/churncut-url', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ customerEmail })
    });
    const { url } = await res.json();

    // 2. Parse URL and start cancellation flow
    const urlObj = new URL(url);
    const params = new URLSearchParams(urlObj.search);

    // 3. ChurnCut handles the rest — shows personalized offers,
    //    collects feedback, and only cancels if the user confirms
    window.starCancellationFromURl(data.url);
  }, [customerEmail]);

  if (!subscription) return <div>Loading...</div>;

  return (
    <div className="subscription-card">
      <h3>{subscription.planName}</h3>
      <p>${subscription.amount}/month · Renews {subscription.renewalDate}</p>

      <div className="subscription-details">
        <div><span>Status</span><span>{subscription.status}</span></div>
        <div><span>Payment</span><span>•••• {subscription.last4}</span></div>
      </div>

      <div className="subscription-actions">
        <button onClick={() => navigate('/change-plan')}>
          Change plan
        </button>
        <button onClick={handleCancel} className="cancel-btn">
          Cancel subscription
        </button>
      </div>
    </div>
  );
}

Tip: ChurnCut se encarga de mostrar ofertas personalizadas, recoger feedback y solo cancela si el usuario lo confirma. Tú solo necesitas llamar a starCancellationFromURl.

Método alternativo: Cancelación con Stripe IDs

Si prefieres usar IDs de Stripe en lugar del email del cliente:

json

{
  "churncut_app_id": "your-app-uuid",
  "expiration_date_timestamp": 1735689600,
  "external_user_id": "stripe_customer_id",
  "subscription_id": "stripe_subscription_id"
}

Warning: Al usar Stripe IDs, asegúrate de proporcionar también subscription_id válido.

Próximos pasos

Instalación - Guía completa de integración API Reference - Explora todos los endpoints

Introducción Instalación