Subscription Hub

The SubscriptionHub is the quickest way to get started with subscription management. It renders a complete subscription management widget that allows users to view and manage their subscriptions, including retention flows when they try to cancel.

React Integration

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

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

function App() {
  return (
    <RenumerateProvider config={{
      getAuthToken,
      fallbackEmail: 'support@yourcompany.com'
    }}>
      <SubscriptionHub />
    </RenumerateProvider>
  );
}

SubscriptionHub Props

Styled Example

<SubscriptionHub
  wrapperClassName="h-96 w-full border rounded-lg"
  iframeClassName="w-full h-full rounded-lg"
  loadingComponent={<div>Loading subscription data...</div>}
  callbacks={{
    onComplete: () => console.log("Action completed"),
    onRetained: () => alert("Your subscription has been saved!"),
    onCancelled: () => window.location.href = "/goodbye"
  }}
/>

Vanilla JavaScript

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;
  }
});

await renumerate.mountSubscriptionHub(
  'subscription-hub-container',
  'hub-wrapper-class',
  'hub-iframe-class',
  {
    onComplete: () => console.log("Action completed"),
    onRetained: () => console.log("Customer was retained!"),
    onCancelled: () => console.log("Customer cancelled")
  }
);

Callbacks

Session State (React)

Access session state using the useRenumerateContext hook:

import { useRenumerateContext } from '@renumerate/js/react';

function SessionStatus() {
  const { session, isSessionLoading, sessionError } = useRenumerateContext();

  if (isSessionLoading) return <div>Loading...</div>;
  if (sessionError) return <div>Error: {sessionError.message}</div>;
  if (session) return <div>Session: {session.sessionId}</div>;
  return null;
}