Credits are the usage meter across your apps. Payments top them up, and app routes check balances before expensive actions run. Simple as that.
Where You’ll See Credits
Credits show up in several places:- The dashboard sidebar
- The account center
- Purchase flows
- API routes for paid generation features
How Credits Work
1
Users start with a default balance
When a new user signs up, they get a starting credit balance from the database setup. Enough to explore the app.
2
Actions consume credits
AI generation features check the user’s balance before running. If they have enough, credits are deducted. If not, they’re prompted to buy more.
3
Failed generations can refund
If a generation fails, the app can refund the credits so users aren’t charged for nothing.
4
Purchases add more credits
When a user buys a credit pack, the payment webhook fires, the purchase is stored, and credits are added automatically.
Credit Packs
The repo ships with two default packs:
Credit grants are defined in
lib/payments/types.ts. Display metadata (labels, prices, descriptions) lives in lib/payments/public-config.ts.
The Billing Flow
1
User clicks checkout
They pick a credit pack and hit the checkout button.
2
Payment provider handles checkout
The user completes payment through the hosted checkout flow.
3
Webhook fires
Your payment provider sends a webhook to your app.
4
Webhook is verified
The app validates the webhook signature to make sure it’s legit.
5
Purchase is stored
The purchase is recorded in the
purchases table.6
Credits are added
The user’s profile is updated and credits are added automatically.
Verify It Works
Your billing setup is working if:
- Checkout completes successfully
- The purchase appears in the database
- The credits number updates in the UI