How to add credit-based billing to your Claude Code app

Credit-based billing charges users from a pre-funded balance instead of invoicing at month-end. To add it to a Claude Code app with no-code billing setup, connect Credyt's MCP server and run three billing skills (pricing-strategy, billing-setup, billing-integration); they configure your pricing, wire balance authorization into your app, and add a link to Credyt's branded billing portal where users top up. End-to-end setup runs in one afternoon with no backend code written by hand.

This article shows how to ship the kind of credit-based pricing Lovable uses inside a Claude Code app: a balance display in the UI, a link to a branded billing portal where users top up, an automatic check before every paid action, and a real-time debit when each call completes. OpenAI prices its API the same way. Cursor's Pro tier runs on the same primitives.

You already built the product. The next step usually means weeks of glue code: Stripe webhooks, customer-ID mapping, end-of-month invoicing logic that doesn't fit per-call AI costs. You don't need any of it. Credyt's MCP server connects to Claude Code in one command, and three billing skills wire everything above through prompts, not code.

Prefer to write the integration yourself? The MCP setup is the same either way (MCP and the dashboard work equally well for getting products configured). The difference is integration: developers can wire Credyt into the app directly via the REST API and SDKs instead of running the billing-integration skill.

What we're going to build

When you finish this article, your Claude Code app will have:

A balance display somewhere in the UI ("$4.50 left" or "18 images left").
A "Manage billing" link that takes the user to Credyt's branded billing portal. The portal handles top-ups, auto top-up settings, usage history, and customer self-service. Your logo on the portal, no frontend code from you.
A check before every AI call that blocks if the user has $0.
A real-time debit when each call completes.
A dashboard for you showing every customer's balance, every charge, every top-up.

We'll wire it up in 6 steps. The whole thing takes one focused afternoon.

Minimum theory: billing vs Stripe

Before the steps, one piece of theory. This is the section that explains why you can't just use Stripe.

Stripe is great. It moves money. It's the card-capture system most developers reach for first. Credyt keeps Stripe in the loop: the billing portal uses Stripe Checkout for top-ups, and your existing Stripe account is where the money lands.

Stripe Billing was built for end-of-month invoicing: at the end of the cycle, sum up the customer's usage, send them a bill, charge their card. That timing works for SaaS subscriptions. It breaks for AI products.

Your app's $0.05 Anthropic call lands now. Your app's $0.20 Replicate image lands now. By the time the invoice fires at the end of the month, your app has already paid the provider for the work. If the card declines later, you eat the cost.

Credyt sits between Stripe and the app. Stripe handles dollars. Credyt handles balances. Top-ups still flow through Stripe Checkout, and the money still lands in your Stripe account.

Credyt holds the credit balance and exposes a Wallet API your app uses to authorize each billable action. If the balance is sufficient, the action proceeds and you send the usage to Credyt. Credyt debits the balance the moment that event lands. Metering and billing happen in the same atomic operation, not at cycle end.

Step 1. Registration and API key

Two things to do before you touch Claude Code:

Sign up at app.credyt.ai. The free tier covers your first 10 active wallets every month, no card required. See the Credyt Quickstart for the full walk-through.
Copy your API keys. Credyt auto-generates a test key (key_test_...) and a live key (key_live_...) the moment you sign up. Click the API keys link on the quickstart page, copy the test key, and keep it out of git. You'll paste it into the MCP install command in the next step.

That's it. No payment method, no time pressure.

Step 2. Connecting the MCP server

Credyt ships an MCP server at mcp.credyt.ai. Claude Code connects to it with one command. From your project directory:

claude mcp add --transport http credyt https://mcp.credyt.ai \
  --header "Authorization: Bearer key_test_..." \
  --scope project

A few notes:

Replace key_test_... with the test key you copied in Step 1.
The --scope project flag matters. Without it, Claude Code stores the MCP config globally on your machine. With it, the config lives in .mcp.json inside the project, so the integration travels with the repo when you push it.
Once the command succeeds, the Credyt MCP server is connected to Claude Code in this project.

To verify, open a fresh Claude Code conversation and ask:

What MCP servers are connected?

Claude Code should respond with credyt in the list.

For the canonical install syntax and the full list of tools the MCP server exposes, see the Credyt MCP server reference. For host-side configuration questions, see Anthropic's Claude Code MCP guide.

Step 3. Loading the Credyt skills

Once the MCP server is connected, install the Credyt billing skills:

npx skills add credyt/ai-tools

Claude Code now has three billing skills:

pricing-strategy. Helps you decide what to charge for and how to price it.
billing-setup. Discovers your pricing model, configures products, assets, and pricing via MCP, and verifies the full billing cycle with a test customer. Does not touch your application code.
billing-integration. Wires Credyt into your application code: sends usage events and adds the balance display and portal link to your UI.

To confirm Claude Code can see all three, run:

List the credyt skills.

For details on each skill, see the AI skills reference.

Step 4. Configuration through dialog

This is where everything gets built. The next prompt does most of the work.

We'll walk through the canonical scenario: an image-generation app that wraps Replicate at $0.20 per image. If your app is different (text generation per token, agent runs per session, transcription per minute), swap the noun and the price; the flow is identical.

Open Claude Code in your project and paste:

Setup Credyt to bill users for generating images.

What pricing-strategy does first. Claude Code asks 3 to 4 clarifying questions to lock in the pricing model. Examples:

What does an image cost you to produce? ($0.20 from Replicate is a fair starting number.)
What do you want to charge per image? ($0.25 leaves you a margin.)
Should there be a free trial? (10 free images as a one-time entitlement is a common default.)
Do you want HD/standard tiers later, or just one price for now?

Answer each one. The skill records your choices for the rest of the configuration.

What billing-setup does next. Three things, executed automatically:

Creates a Credyt product. A product called "image generation" appears in your dashboard with a $0.25 per-image price. See the products docs.
Sets up assets and pricing. Pricing is wired against the right asset (USD by default; a custom asset if you asked for one).
Runs a verification loop. The skill creates a test customer, submits a sample usage event, and confirms the balance debits correctly. You see the full billing cycle work end-to-end before you touch your app's code.

billing-setup does not modify your application code. Its only job is to get the product side right.

Next, integrate Credyt into your app. With the product configured, run:

Now integrate Credyt into my app.

This kicks off billing-integration. Three things happen:

Usage events get wired in. Before each Replicate call, your app authorizes against Credyt's Wallet API. If the balance is sufficient, the call proceeds; afterwards, your app POSTs to the usage-event endpoint and the customer's balance debits.
A balance display lands in the user header ("You have $4.50 left").
A "Manage billing" link appears next to the balance. The link opens Credyt's branded billing portal in a new tab. The portal handles top-ups (Stripe Checkout under the hood), auto top-up controls, usage history, and customer self-service.

Claude Code shows a diff covering 6 to 10 changed files. Approve the diffs the same way you do any other Claude Code edit.

You now have working billing.

Step 5. Test on dev

Five steps to verify. Run your app locally first.

Sign up as a fresh user. Confirm the free trial entitlement of 10 images appears in the user's balance.
Generate an image. Watch the balance tick down by $0.25. Confirm the usage event lands in your Credyt dashboard.
Exhaust the free trial. Generate nine more times. The next request should block and prompt the user to top up.
Click "Manage billing". The Credyt portal opens. Top up $5 with Stripe test card 4242 4242 4242 4242 (any future expiry, any CVC). Return to your app. Confirm the balance reflects the new $5 balance.
Generate again. It should work. The balance debits to $4.75.

If any step fails, the most common cause is an API key in the wrong scope or a missing customerId mapping. The Credyt dashboard surfaces both.

Step 6. Pre-production checklist

Five checks before you ship. None of them take more than a minute.

Switch the API key. Replace key_test_... with key_live_... in your env vars. Update the secret in your hosting provider (Vercel, Render, Fly, Railway, Cloudflare Workers).
Verify webhooks have signing. If you're consuming Credyt's webhooks, confirm your endpoint verifies the Credyt-Signature header on every request. See the webhooks docs for the verification code.
Upload your logo. Drop your logo into the Credyt dashboard. The billing portal users land on will carry your brand on top of Credyt's UI.
Wire a balance webhook (optional). If you want your own notifications when a customer's balance crosses a threshold, configure a webhook destination in the dashboard and have your app send the email or in-app message through whatever provider you already use.
Test the live flow once. Use a real card with a real $5 top-up on a staging URL. Refund yourself afterward. This catches any production-only config issues.

What else can Credyt do: more prompts to try

The integration you just shipped covers the basics: balance, authorization, real-time debit, and a portal link for top-ups. Everything else Credyt does is one prompt away. Paste any of these into Claude Code with the MCP server connected.

1. Customer-controlled auto top-up

Make sure auto top-up is enabled in the billing portal for my users.

Auto top-up is customer-initiated: each user turns it on in the Credyt portal, picks their threshold and refill amount, and saves a card. After that they rarely see a "you're out" screen. Credyt charges the saved card the moment the balance hits the threshold and credits the wallet immediately, so the next balance check the app performs already shows funds. See the auto top-up docs.

2. Free starter entitlement

Add a free starter entitlement: every new user gets 10 free images on signup.

This is a one-time entitlement on the product, not an account adjustment. Credyt issues the entitlement when the customer is created in your app's signup flow. Entitlements are tracked separately from paid balance, so revenue recognition stays clean. See the credit grants docs.

3. Show me unprofitable customers

Show me which customers cost me more than they paid in the last 30 days.

This is the question you can't answer with Stripe alone. Credyt tracks both sides: what each customer paid in top-ups, and what each customer cost you in provider calls. Together that's a per-customer P&L. The profitability analytics view ranks customers by net revenue so you can see which ones are subsidizing the others.

4. Pro tier subscription

Add a Pro tier: $20/month subscription, 200 free images included, then
$0.20/image after that.

This is hybrid billing in one prompt: a recurring fee bundled with a credit allowance, then per-unit overages. AI products often shift here from pure usage billing within their first year. Pure usage billing scares heavy users, and pure subscription billing leaves money on the table.

The bundled-with-overage model splits the difference. The skill creates the subscription product, the included entitlement, and the overage pricing in one operation. See the hybrid model docs.

5. Different prices per quality

Charge $0.40 for HD images and $0.20 for standard. Make HD a toggle in the UI.

The toggle adds a quality attribute to each usage event. Credyt prices the event based on the attribute value. No separate product, no separate pricing structure. Useful when your underlying provider charges differently for the same operation at different quality levels. See dimensional pricing.

6. Refund a transaction

Refund the last 3 charges for customer cust_abc123.

A refund is processed as a balance adjustment that credits the customer back. Credyt handles it through the Adjustments API, so the balance is corrected and the event history is preserved. Confirm refund behavior in your account settings before relying on this in production. See the refunds docs.

7. Switch to a custom asset

Move from dollars to a custom asset. 1 credit = $0.01. Standard images cost
20 credits, HD costs 40.

Some products read better in their own asset than in dollars. Custom assets also let you bundle in promos ("buy 100 credits, get 20 free") without messy discount logic. Credyt supports any custom asset alongside or instead of dollars. See the assets docs.

What's next

You shipped billing. Two places to go next.

For everything else the MCP layer can do (multi-asset wallets, B2B org hierarchy, real-time profitability dashboards, custom assets), see the Credyt MCP server reference.

For a wider view of how billing platforms compare and where Credyt sits next to Stripe Billing, Lago, Flexprice, and Stigg for no-code and prompt-driven setups, see the usage-based billing platforms comparison.