How to add usage-based billing to your Lovable app

Real-time usage-based billing charges users per call against a pre-funded balance instead of invoicing at month-end. To add it to a Lovable app, connect Credyt's MCP server inside Lovable's Settings → Integrations → MCP Servers, then 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.

By the end of this afternoon, your Lovable app will charge users the same way the AI products on their desk already do. A balance lives in the app header. A "Manage billing" link sends users to a branded portal to top up. Before each paid action, the app checks the balance; the moment the action completes, the balance debits. OpenAI's API runs on this pattern. Cursor's Pro tier overages run on this pattern. Lovable bills its own credits this way too. If you'd rather show users a "credits left" counter than a dollar balance, see how to add credit-based billing to your Lovable app for the credit-token variant of this same setup.

You will not write Stripe webhook code. You will not write customer-ID mapping. You will not write end-of-month invoicing logic.

Credyt's MCP server connects to Lovable in three fields. Three billing skills walk through the rest as a prompt conversation. You paste two prompts, approve the diffs, and ship.

Building in Cursor, Bolt, Claude Code, Replit, or another AI coding tool? The same MCP path works everywhere. See the Credyt AI integration page for the full list of supported platforms and the platform-specific install steps.

What we're going to build

By the end of this guide, your Lovable app will have:

A balance display somewhere in the UI ("$22.50 left" or "15 photoshoots left").
A "Manage billing" link that opens Credyt's branded billing portal in a new tab. The portal handles Stripe Checkout top-ups, auto top-up settings, usage history, and customer self-service. Credyt-hosted with your logo on top; it is not embedded in the Lovable app.
A balance check before any billable action the customer takes in your app. If the user is at $0, the action halts and the UI prompts them to top up.
A real-time debit when each photoshoot completes. The balance updates the moment the four image-generation calls finish.
An operator 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

Stripe is fine. Stripe is great, actually. Stripe moves money between cards and bank accounts and stays in the loop here. The Credyt top-up flow runs Stripe Checkout under the hood, and the money still lands in your existing Stripe account.

The gap is this. Stripe Billing was built for end-of-month invoicing of SaaS subscriptions. Your app's $1.50 photoshoot costs you real money the moment the user clicks "generate." Four image-generation calls fire, your card gets debited by Replicate for roughly $0.60 within seconds. If the customer's card declines at the end of the month, you have already paid Replicate for the work. The invoice arrives weeks after the cost.

Credyt sits between Stripe (which moves dollars) and your Lovable app (which spends dollars per image-generation call). Stripe handles dollars. Credyt handles balances.

When a user kicks off a photoshoot, your app calls Credyt's balance endpoint and reads the current balance. Your app decides whether to proceed: if the balance covers $1.50, the four image-generation calls run and your app then posts a usage event to Credyt. Credyt debits $1.50 the moment the event lands. Metering and billing happen in the same atomic operation, not at cycle end.

Three things to do before you touch Lovable.

Sign up at app.credyt.ai. The free tier covers your first 10 active customer wallets, so you can build and test without paying anything. See the Credyt Quickstart for the full setup walkthrough.
Open Developers in the dashboard sidebar. Your API key is already there. Credyt pre-generates a test key (key_test_...) and a live key (key_live_...) the moment your account is created. Use the test key for this guide; switch to the live key in Step 6.
Copy the test key somewhere safe. Do not commit it to your Lovable project files. The next step pastes it into a Lovable settings field where it lives as a connection secret, not in source.

Step 2. Connect the MCP server inside Lovable

This is the Lovable-specific part. In your Lovable project, open Settings → Integrations → MCP Servers and create a new entry with three fields:

Name           credyt
URL            https://mcp.credyt.ai
Authorization  Bearer key_test_your_api_key_here

Replace key_test_your_api_key_here with the test key from Step 1. Save.

That is the entire install. Lovable's UI surfaces a link to the Lovable MCP docs inside the same panel for host-side reference; if you want to verify what Lovable's MCP layer supports beyond Credyt, that page is the source of truth on the Lovable side.

For the Credyt side, the Credyt MCP server reference lists every tool the server exposes and how skills compose against them. You do not need to read it now. The next step installs the skills that call the right tools for you.

Verify the connection. In a fresh Lovable conversation, ask:

What MCP servers are connected?

The response should include credyt. If it does not, double-check the Authorization header has the Bearer prefix (with a trailing space) before the key.

Step 3. Load the Credyt billing skills

The MCP server gives Lovable's AI access to Credyt's API tools. The billing skills give it the playbooks. Install them in your Lovable project:

npx skills add credyt/ai-tools

This installs three skills, each scoped to a different stage of the integration:

pricing-strategy. Helps you decide what to charge for, what to call the billable unit, and how to price it. Runs first.
billing-setup. Configures the product, the asset, the pricing, and the free entitlement in your Credyt account. Verifies the full billing cycle with a test customer and a sample usage event. Does not modify the Lovable app code.
billing-integration. Wires Credyt into your Lovable app code: sends usage events, adds the balance display, adds the "Manage billing" link.

Verify the skills are loaded:

List the credyt skills.

The response should name all three. The AI skills reference documents what each one does under the hood.

Step 4. Configure billing through a Lovable conversation

This is where everything gets built. We'll use an AI product photoshoot generator as the running example: a tool that takes one product photo from an e-commerce seller and returns four visuals (ghost mannequin, on-model, lifestyle, and product video). Each shoot fires four image-generation calls through Replicate and costs you about $0.60. We'll charge $1.50 per shoot. Swap your scenario as you go.

Open your Lovable project and start a new conversation. Paste this and swap in your own product name:

Setup Credyt to bill users for [add your product name].

For the running example, that becomes: Setup Credyt to bill users for AI product photoshoots.

What pricing-strategy does first. Lovable picks up pricing-strategy and asks three or four clarifying questions to lock in the pricing model. Examples:

Q: What does each photoshoot cost you to produce? A: About $0.60 across four image-generation calls (Replicate).

Q: What do you want to charge per photoshoot? A: $1.50 per shoot. That leaves a 60% margin after Replicate.

Q: Should there be a free trial on signup? A: Yes. 2 free photoshoots per new user.

Q: Do you want depth tiers (basic vs premium) later, or one price for now? A: One price for now. I'll add tiers via a follow-up prompt.

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 "Product photoshoot" appears in your dashboard with a $1.50 per-shoot price. See the product creation docs.
Sets up the asset and the free entitlement. Pricing is wired against the USD asset by default. The 2-shoot free entitlement fires for every new customer.
Runs a verification loop. The skill creates a test customer, submits a sample usage event, and confirms the balance debits from $3.00 to $1.50 after one shoot. 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 and modifies the Lovable code in three places:

Usage events wired in. Before each photoshoot workflow runs, the app calls Credyt's balance check endpoint. If the returned balance covers $1.50, the four Replicate calls run; if not, the workflow halts and the UI prompts the user to top up. After all four calls return, the app POSTs to the usage event endpoint and the balance debits in real time.
Balance display added. A small badge in the app header shows the current balance and the remaining photoshoot count.
"Manage billing" link added. Opens Credyt's branded billing portal in a new tab. The portal handles top-ups (Stripe Checkout under the hood), auto top-up settings, usage history, and customer self-service.

A typical Lovable diff at this stage touches 6 to 10 files: the App shell, the route that orchestrates the four Replicate calls, a new BalanceBadge component, env vars for the Credyt API key, and a small server function that proxies the balance and usage calls. Approve the diffs. You now have working usage-based billing.

Step 5. Test it on dev

Five steps in the Lovable preview:

Sign up as a fresh user with a new email. The 2-shoot free entitlement appears in your Credyt operator dashboard within a couple of seconds.
Upload a test product photo. Watch the balance badge tick down by $1.50. Open the Credyt dashboard and confirm the usage event landed under that customer.
Burn through both free shoots. The third attempt is blocked at the balance step and the UI prompts you to top up.
Click Manage billing. The Credyt portal opens in a new tab. Top up $5 using Stripe's test card 4242 4242 4242 4242 (any future expiry, any CVC). Go back to the app. The balance reflects the $5 top-up, enough for three more photoshoots at $1.50 each with $0.50 fractional balance left over.
Run another photoshoot. Works.

If any step fails, the Credyt dashboard event log is the first place to look. Every balance check result and every usage event lands there with a timestamp and a result code.

Step 6. Pre-production checklist

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

Switch the API key from test to live. Replace key_test_... with key_live_... in the Lovable MCP Servers entry and in any deployment env vars (Vercel, Render, Fly, Railway).
Verify webhook signing. If you wired any Credyt webhooks, confirm your endpoint validates the Credyt-Signature header on every incoming request. Unsigned webhooks get replayed.
Upload your logo. In the Credyt dashboard under Branding, upload your logo so the customer billing portal carries your brand on top instead of Credyt's.
Wire a balance webhook (optional). If you want your own notification when a customer's balance crosses a threshold, configure a webhook destination in the dashboard and have your app send the email 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 Lovable 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 2 free photoshoots 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 Replicate 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: $30/month subscription, 25 photoshoots included, then
$1.20 per shoot after that.

This is hybrid billing in one prompt: a recurring fee bundled with a usage 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 depth

Charge $2.50 for premium photoshoots (8 visuals, includes video) and
$1.50 for standard (4 visuals, photos only). Make depth a toggle in the UI.

The toggle adds a depth attribute to each usage event. Credyt prices the event based on the attribute value. Same product, two prices, picked from a usage attribute. Useful when your underlying provider charges differently for the same operation at different quality levels. See dimensional pricing.

6. Switch to a custom asset

Move from dollars to a custom asset. 1 credit = $0.05. Standard photoshoots
cost 30 credits, premium cost 50.

Some products read better in their own asset than in dollars. Custom assets also let you bundle 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.

Sign up at app.credyt.ai, connect the MCP server in Settings → Integrations, ship billing this afternoon. Fix pricing later.