Skip to main content
Handles redirects to the Crovver checkout flow and billing portal. Internally calls the Crovver API to generate a short-lived JWT, then redirects the user.

​
Usage

import { useBillingRedirect } from 'crovver-react';

function UpgradeButton() {
  const { redirectToCheckout, isRedirecting } = useBillingRedirect();

  return (
    <button
      onClick={() => redirectToCheckout()}
      disabled={isRedirecting}
    >
      {isRedirecting ? 'Redirecting...' : 'Upgrade Plan'}
    </button>
  );
}

​
Return Value

{
  redirectToCheckout: (options?: CheckoutOptions) => void;
  redirectToBilling: () => void;
  isRedirecting: boolean;
}
isRedirecting is currently always false. Do not rely on it to show a loading state — both redirect functions trigger a full page navigation, so the component unmounts before any state update would take effect.

​
redirectToCheckout(options?)

Redirects the user to the Crovver pricing/checkout page. Internally:
  1. Calls POST /api/public/auth/checkout-token with the tenant’s public key
  2. Receives a signed JWT token
  3. Redirects to {ecomUrl}/pricing?token={jwt}

​
Options

{
  requiredFeature?: string;   // Pre-selects a plan that includes this feature
  requiredPlan?: string;      // Pre-selects a specific plan ID
  productSlug?: string;       // Scopes the pricing page to a single product
}
OptionTypeDescription
requiredFeaturestringShows a banner on the pricing page indicating which feature the user needs. Does not filter plans.
requiredPlanstringHints which plan the user should select.
productSlugstringScopes the pricing page to only show plans for the given product. Use this in multi-product orgs where different parts of your app sell different plan sets. The slug must match a product slug configured in your Crovver org.

​
Examples

// Basic upgrade
redirectToCheckout();

// Upgrade prompted by a specific locked feature
redirectToCheckout({ requiredFeature: 'advanced_analytics' });

// Redirect to a specific plan
redirectToCheckout({ requiredPlan: 'plan_enterprise' });

// Scope pricing page to a single product (multi-product orgs)
redirectToCheckout({ productSlug: 'marketing' });

​
redirectToBilling()

Redirects the user to the billing portal to manage their subscription (view invoices, update payment method, cancel).
  1. Calls POST /api/public/auth/portal-token
  2. Redirects to {portalUrl}/billing?token={jwt}
function BillingSettings() {
  const { redirectToBilling } = useBillingRedirect();

  return (
    <button onClick={() => redirectToBilling()}>
      Manage Billing
    </button>
  );
}