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

# Quickstart

> Get Crovver integrated in your SaaS app.

## 1. Create Your Org

Sign up at [app.crovver.com](https://app.crovver.com) — this is also where you create your organization. Choose your org type:

* **B2B** — your customers are companies or workspaces (multiple users per billing unit)
* **D2C** — your customers are individuals (each user is their own billing unit)

## 2. Create a Plan

In the dashboard, go to **Products → Plans** and create your first plan.

```json theme={null}
{
  "name": "Pro",
  "price_amount": 2900,
  "billing_interval": "monthly",
  "trial_days": 14,
  "features": {
    "advanced_analytics": true,
    "api_access": true,
    "custom_domain": false
  },
  "limits": {
    "api_calls": 10000,
    "team_members": 5
  }
}
```

## 3. Connect a Payment Provider

Go to **Settings → Payment Providers** and connect Stripe (or another supported provider). Add your API keys — Crovver stores them securely in your secrets manager.

## 4. Get Your API Keys

Go to **Settings → API Keys** and generate:

* A **Public Key** (`pk_live_...`) for your frontend
* A **Secret Key** (`sk_live_...`) for your backend

## 5. Install the React SDK

```bash theme={null}
npm install crovver-react
# or
pnpm add crovver-react
```

## 6. Wrap Your App

```tsx theme={null}
// app/layout.tsx
import { CrovverProvider } from "crovver-react";

export default function RootLayout({ children }) {
  return (
    <CrovverProvider
      config={{
        publicKey: process.env.NEXT_PUBLIC_CROVVER_PUBLIC_KEY,
        tenantId: currentUser.id, // Your user/workspace ID
      }}
    >
      {children}
    </CrovverProvider>
  );
}
```

## 7. Gate a Feature

```tsx theme={null}
import { FeatureGuard } from "crovver-react";

export function AnalyticsDashboard() {
  return (
    <FeatureGuard featureKey="advanced_analytics" fallback={<UpgradePrompt />}>
      <Analytics />
    </FeatureGuard>
  );
}
```

## 8. Add a Checkout Button

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

export function UpgradeButton() {
  const { redirectToCheckout } = useBillingRedirect();

  return <button onClick={() => redirectToCheckout()}>Upgrade to Pro</button>;
}
```

That's it. When the user clicks the button, Crovver handles the checkout flow end-to-end — plan selection, Stripe session, and webhook processing.

<Note>
  Test end-to-end by creating a plan with `test_mode: true` and using Stripe
  test card `4242 4242 4242 4242`.
</Note>