Skip to content
BuildBase

Add usage credits to a v0 app (Next.js App Router, BuildBase sign-in)

One prompt that gives each workspace in a v0 app a credit balance, a Buy credits button and a server-side spend, plus where the secret lives.

v0 can also connect to BuildBase itself while it builds: Use BuildBase in v0.

Each workspace gets a credit balance, a Buy credits button that opens the credit store, and a spend that runs in a route handler, so a person cannot skip it from the browser. This page assumes the app already signs people in with @buildbase/sdk, as the v0 guide sets up. If it signs people in with something else, such as Supabase or Clerk, read keep your existing sign-in first.

Before you start

Stripe connected and a credit package on sale in the console, under Billing > Credit packages (Credits and usage).

The prompt

v0's docs document no link that opens v0 with a prompt filled in, so copy this into your project's chat.

This app signs people in with BuildBase (@buildbase/sdk), set up as https://www.buildbase.app/guides/add-sign-in-teams-and-paid-plans-to-a-v0-app shows. If it does not, stop and tell me.
Read https://docs.buildbase.app/credits/overview.md first and do not invent endpoints.
Add usage credits per workspace:
- In the header, a client component shows useCreditBalance(currentWorkspace._id).balance?.available, with currentWorkspace from useSaaSWorkspaces(), and a Buy credits button that calls openCreditStore() from useSaaSAuth().
- Spend on the server only: in app/api/credits/spend/route.ts, call bb().credits.consume(workspaceId, { amount, description, idempotencyKey }) from lib/buildbase.ts before the paid work runs. On the error code INSUFFICIENT_CREDITS answer 402, and open the credit store in the page.
Do not store balances in my database.

Where the secrets go

This job adds no new secret. The spend uses the signed-in person's session cookie, bb-session-id. BUILDBASE_CLIENT_SECRET stays where the guide put it: in the Vercel project's environment variables (Project menu > Settings > Environment Variables in v0), with no NEXT_PUBLIC_ prefix. Your Stripe keys go into the BuildBase console, not into Vercel.

The v0 trap

If the build on Vercel fails with "orgId is required", v0 created BuildBase(...) at the top of lib/buildbase.ts instead of inside bb(). At build time the environment variables are not there yet. Ask v0 to create the client inside the function on first use, as the Next.js guide shows.

v0 works on a branch and deploys it as a preview with its own vercel.app address. Sign-in on a preview loops unless that exact address is registered on the auth client, so test the spend on production.

Full guides