Skip to main content
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:
PackCredits
credits-small50 credits
credits-large100 credits
Credit grants are defined in lib/payments/types.ts. Display metadata (labels, prices, descriptions) lives in lib/payments/public-config.ts.
You can easily change the credit amounts, add new packs, or adjust pricing. Just update those two files and your payment provider’s catalog.

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