Skip to main content

​
1. Create Your Org

Sign up at 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. 
{
  "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

npm install crovver-react
# or
pnpm add crovver-react

​
6. Wrap Your App

// 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

import { FeatureGuard } from "crovver-react";

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

​
8. Add a Checkout Button

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.
Test end-to-end by creating a plan with test_mode: true and using Stripe test card 4242 4242 4242 4242.