> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crovver.com/llms.txt
> Use this file to discover all available pages before exploring further.

# useBillingRedirect

> Redirect users to checkout or the billing portal.

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

```tsx theme={null}
import { useBillingRedirect } from 'crovver-react';

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

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

## Return Value

```typescript theme={null}
{
  redirectToCheckout: (options?: CheckoutOptions) => void;
  redirectToBilling: () => void;
  isRedirecting: boolean;
}
```

<Note>
  `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.
</Note>

## `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

```typescript theme={null}
{
  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
}
```

| Option            | Type     | Description                                                                                                                                                                                                                     |
| ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `requiredFeature` | `string` | Shows a banner on the pricing page indicating which feature the user needs. Does not filter plans.                                                                                                                              |
| `requiredPlan`    | `string` | Hints which plan the user should select.                                                                                                                                                                                        |
| `productSlug`     | `string` | Scopes 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

```tsx theme={null}
// 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}`

```tsx theme={null}
function BillingSettings() {
  const { redirectToBilling } = useBillingRedirect();

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