How to add credit-based billing to your Lovable app

Credit-based pricing lets customers prepay for a bundle of credits and redeem them as they use your product. 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 define a credit asset with an exchange rate, wire credit redemption into your app, and add a link to Credyt's branded billing portal where users buy credit packs. 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 vibe coders keep hitting walls on inside a Lovable app: a balance display in the header, a link to a branded billing portal where users top up, a check before every paid call, and a real-time debit when each call completes. OpenAI prices its API the same way. Perplexity Pro runs on the same primitives. Lovable's own credit meter does the same job.

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.

Are you a developer who wants the API path? This guide is the no-code MCP path. If you're going to write the integration code yourself, head straight to the Credyt Quickstart for the REST and webhook walkthrough.

What we're going to build

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

A credit-balance display in the app header: "44 brand credits left" or "22 brand checks remaining."
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, and usage history. 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 brand check completes. The balance updates the moment the four LLM calls finish.
A dashboard for you showing every customer's balance, every charge, every top-up.

We'll wire it up in 6 steps.

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.

The gap is this. Stripe Billing was built for end-of-month invoicing of SaaS subscriptions. Your app's brand checks cost you real money the moment the user clicks "run check." Four LLM API calls fire, your card gets debited by OpenAI, Anthropic, Google, and Perplexity within seconds. If the customer's card declines at the end of the month, you have already paid four AI providers from your own pocket. The invoice arrives weeks after the cost.

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

When a user runs a brand check, your app calls Credyt's balance endpoint and reads the current credit balance. Your app decides whether to proceed: if the balance covers 2 credits (the cost of one brand check), the check runs and Credyt debits 2 credits immediately on the usage event. If not, your app surfaces a top-up prompt. The decision lives in your app code. Credyt provides the real-time balance state and the atomic debit that make the decision possible. By default Credyt itself does not block at zero; the block logic is wired into your app by billing-integration in Step 4.

For the longer version of the same problem applied to per-call AI workloads, see how Stripe metered billing breaks for AI products.

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 it when your account is created. You start with a test key (key_test_...); your live key (key_live_...) is activated by Credyt when you're ready to go live in production. Use the test key for the rest of this guide.
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 Credyt AI skills reference documents what each one actually does under the hood.

Step 4. Configure billing through a Lovable conversation

This is where everything gets built. We'll use the AI search brand-visibility checker as the running example: a tool that fans a brand query out to ChatGPT, Perplexity, Claude, and Gemini and reports whether the brand was cited. 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 brand visibility checks across AI search.

Lovable picks up pricing-strategy first. Before it asks anything, it knows which pricing models Credyt supports out of the box. You can mix and match without changing app code later:

Usage-based. Per-call, per-token, per-GPU-second, or any unit you define.
Prepaid credits. Customer pre-loads balance; spend deducts in real time. Default for our brand-check scenario.
Subscription. Fixed recurring charge on any cadence.
Hybrid. Subscription base fee plus usage overage in one customer relationship.
Seat-based. Per-user pricing, combinable with any of the above.
Free tier. Hard-capped free allocation per customer per period so free users do not run up your inference bill.

If you're not sure what to charge yet, the skill will steer you toward prepaid credits (lowest risk for AI workloads where the per-call cost is variable). You can change the model later through another prompt without touching app code. For our example, prepaid credits is the right starting model. The skill then asks three or four clarifying questions:

Q: How much does each brand check cost you in LLM API fees? A: About $0.10 to $0.15 across four engines (ChatGPT, Perplexity, Claude, Gemini).

Q: What unit do you want users to see in your app? A: Brand credits. Each brand check costs 2 credits.

Q: What is the exchange rate between dollars and credits? A: $0.10 per credit. So a $10 top-up converts to 100 brand credits, which is 50 brand checks.

Q: Anything free on signup? A: 20 brand credits per new user — that covers their first 10 brand checks.

Once the answers are in, billing-setup takes over and walks four steps:

Creates a custom asset called "Brand credits" with an exchange rate of $0.10 per credit. When a customer tops up $10, Credyt converts the payment to 100 brand credits at the moment of payment and writes the new balance to their wallet.
Creates a Credyt product called "Brand check" priced at 2 brand credits per check.
Adds a 20-credit grant that fires on every new customer (their first 10 brand checks are free).
Runs a verification loop: creates a test customer, simulates a $10 top-up, sends three sample usage events, confirms the credit balance drops from 120 (100 from top-up + 20 free) to 114 after three checks.

billing-setup does not touch your app code. Its only job is to get the product side right. When it finishes you'll see the new product in your Credyt dashboard.

Now paste the second prompt:

Now integrate Credyt into my app.

This kicks off billing-integration and modifies the Lovable code in three places:

A balance check before a billable action. Before the four LLM calls fire, the app calls Credyt's balance check endpoint. The app code (not Credyt) compares the returned credit balance against the cost of one brand check (2 credits). If the balance is below the threshold, the workflow halts and the UI prompts the user to top up. If it covers the call, the four LLM requests run.
Usage event after each completed check. Once the brand-check report is generated, the app POSTs a usage event to Credyt. The balance debits in real time and the new value flows back to the UI.
Balance display and portal link in the UI. A small badge in the app header shows the current balance and remaining check count. A "Manage billing" link opens the Credyt billing portal in a new tab where the user can top up, set auto top-up, and view usage history.

A typical Lovable diff at this stage touches 6 to 10 files: the App shell, the route that orchestrates the LLM fan-out, 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 diff. You now have working credit-based billing.

Step 5. Test it on dev

Five steps in the Lovable preview:

Open the preview. Sign up as a fresh user with a new email. The 10-check free entitlement appears in your Credyt operator dashboard within a couple of seconds.
Run a brand check against a real brand. Watch the balance badge tick down by one check. Open the Credyt dashboard and confirm the usage event landed under that customer.
Burn through all 10 free checks. The 11th 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 converted at $0.10 per credit. That's 50 brand credits, enough for 25 brand checks at 2 credits each.
Run another brand check. Works.

If any step fails, the Credyt dashboard's 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

Before the live launch, walk through this list once.

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.
Test the live flow once. Use a real card and a real $5 top-up on a staging URL. Refund yourself afterward.

What else Credyt can do

Once you have billing live, the same MCP connection gives Lovable's AI access to the rest of Credyt's primitives. Some changes drop in through a single prompt; others are features that live in the Credyt dashboard for now. The first three below are drop-in prompts. The last three are dashboard or portal features worth knowing about as your product grows.

1. Pro tier subscription

Add a Pro tier: $20/month subscription, 150 brand checks included, then 2 credits per check after that (drawn from the customer's prepaid credit balance).

Swaps your pricing model from pure prepaid credits to a hybrid: a subscription grants a monthly allowance of brand checks, and overages still draw from the customer's credit balance at the standard rate. See the hybrid model use case for the full setup.

2. Different prices per depth

Charge 3 credits for deep brand checks (8 engines + sentiment) and 2 credits for quick brand checks (4 engines, citation-only). Make depth a toggle in the UI.

Same product, two prices, picked based on a usage attribute. Credyt routes the event to the correct price automatically based on the depth attribute on the usage event. See dimensional pricing.

3. Change the exchange rate

Update the exchange rate from $0.10 per credit to $0.08 per credit. Apply to new top-ups only.

Useful for running a promotion or rebalancing your margins. Credyt lets you update custom asset exchange rates on demand and supports scheduled rate changes for time-limited campaigns. Existing balances stay valued at the rate they were purchased; only future top-ups convert at the new rate.

4. Auto top-up

Already available — no prompt needed. Your customers enable it themselves from the billing portal: "when my balance drops below $1, top up $10." The operator does not configure it on the customer's behalf. Most products go live with the feature available and let users find it in the portal when they need it. See auto top-up.

5. Refunds

Refunds in Credyt are a manual operation through the dashboard, not an automated prompt. When a brand check fails midway (one of the four LLM providers times out), you reverse the wallet debit one charge at a time, with explicit review. The MCP skills do not automate this. See refunds and adjustments for the dashboard flow.

6. Per-customer profitability

Available once you start submitting cost data with each usage event (the AI provider fees behind each brand check). The Credyt dashboard then shows revenue minus cost per customer, so you can see which power users are eating your margin. Cost-event submission lives outside the scope of this guide and is not wired by billing-integration by default. See profitability analytics when you're ready to set it up.

What's next

You have one full afternoon of work in front of you. After that, two starting points:

The Credyt MCP server reference lists every API tool the MCP layer exposes. The billing skills cover the common path; the reference covers everything else.
Credyt vs Stripe goes deeper on the contrast that §3 sketched: where Stripe Billing fits, where it does not, and how the two systems stay in the loop together.

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