Retention Flow (Cancel Button)

The cancel button is the quickest way to get started with the Renumerate Retention Engine. It renders a button that manages the entire retention workflow when clicked.

React Integration

Using CancelButton Component

import { RenumerateProvider, CancelButton } from '@renumerate/js/react';

async function getAuthToken() {
  const response = await fetch('/api/renumerate-token');
  const { token } = await response.json();
  return token;
}

function SubscriptionSettings() {
  return (
    <RenumerateProvider config={{
      getAuthToken,
      fallbackEmail: 'support@yourcompany.com'
    }}>
      {/* Default styled cancel button */}
      <CancelButton />

      {/* Custom styling with callbacks */}
      <CancelButton
        className="bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded-lg"
        callbacks={{
          onCancelled: () => window.location.href = "/goodbye"
        }}
      />
    </RenumerateProvider>
  );
}

Using the useRenumerate Hook

For more control over when and how the retention flow is triggered:

import { RenumerateProvider, useRenumerate } from '@renumerate/js/react';

function CustomCancelComponent() {
  const { open, isReady } = useRenumerate({
    callbacks: {
      onRetained: () => {
        alert("Welcome back! Your subscription has been saved.");
        window.location.reload();
      },
      onCancelled: () => {
        window.location.href = "/feedback";
      }
    }
  });

  const handleCancelClick = () => {
    if (confirm('Are you sure you want to cancel?')) {
      open();
    }
  };

  return (
    <button
      onClick={handleCancelClick}
      disabled={!isReady}
      className="cancel-subscription-btn"
    >
      Cancel My Subscription
    </button>
  );
}

Vanilla JavaScript

Using mountCancelButton

import { Renumerate } from '@renumerate/js';

const renumerate = new Renumerate({
  getAuthToken: async () => {
    const response = await fetch('/api/renumerate-token');
    const { token } = await response.json();
    return token;
  }
});

renumerate.mountCancelButton("cancel-button-container", {
  classes: "my-cancel-btn",
  onRetained: () => console.log("Customer was retained!"),
  onCancelled: () => console.log("Customer cancelled"),
  onComplete: () => console.log("Flow completed")
});

Using showRetentionView

For programmatic control:

// Show retention view for default subscription
await renumerate.showRetentionView();

// Show retention view for specific subscription
await renumerate.showRetentionView("sub_xxx", {
  onRetained: () => window.location.reload(),
  onCancelled: () => window.location.href = "/goodbye"
});

Options

Multiple Subscriptions

If a customer has multiple subscriptions, specify which one to cancel:

// React
<CancelButton subscriptionId="sub_xxx" />

// Vanilla JS
renumerate.showRetentionView("sub_xxx");

If no subscription ID is provided, the SDK will use the customer's first active subscription.