> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anotherwrapper.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Credits & Billing

> How credits, purchases, and access control work

<Info>
  Credits are the usage meter across your apps. Payments top them up, and app routes check balances before expensive actions run. Simple as that.
</Info>

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

<Steps>
  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Failed generations can refund">
    If a generation fails, the app can refund the credits so users aren't charged for nothing.
  </Step>

  <Step title="Purchases add more credits">
    When a user buys a credit pack, the payment webhook fires, the purchase is stored, and credits are added automatically.
  </Step>
</Steps>

## Credit Packs

The repo ships with two default packs:

| Pack            | Credits     |
| --------------- | ----------- |
| `credits-small` | 50 credits  |
| `credits-large` | 100 credits |

Credit grants are defined in `lib/payments/types.ts`. Display metadata (labels, prices, descriptions) lives in `lib/payments/public-config.ts`.

<Tip>
  You can easily change the credit amounts, add new packs, or adjust pricing. Just update those two files and your payment provider's catalog.
</Tip>

## The Billing Flow

<Steps>
  <Step title="User clicks checkout">
    They pick a credit pack and hit the checkout button.
  </Step>

  <Step title="Payment provider handles checkout">
    The user completes payment through the hosted checkout flow.
  </Step>

  <Step title="Webhook fires">
    Your payment provider sends a webhook to your app.
  </Step>

  <Step title="Webhook is verified">
    The app validates the webhook signature to make sure it's legit.
  </Step>

  <Step title="Purchase is stored">
    The purchase is recorded in the `purchases` table.
  </Step>

  <Step title="Credits are added">
    The user's profile is updated and credits are added automatically.
  </Step>
</Steps>

## Verify It Works

<Check>
  Your billing setup is working if:

  * Checkout completes successfully
  * The purchase appears in the database
  * The credits number updates in the UI
</Check>