In this guide, you’ll learn how to build a simple web app using Lovable (an AI-powered no-code builder) and integrate Paygentic for usage-based monetization. We’ll walk through creating a bulk QR code generator with a freemium model—free for limited usage, paid for bulk.
No advanced coding skills required. Just follow along and let AI do most of the heavy lifting!

​
Setting Up Your Project on Lovable

1

Create your account

Go to lovable.dev and create a new account. Click on “New Project” to start building.  
2

Choose a template

Pick a basic template or start from scratch. Name your project (e.g., QR Code Generator).

​
Building the Core Functionality

1

Plan Your App's Design

The first step is to create a rough sketch of the design. This helps AI to understand the flow better—no guesswork involved.
      App Design Sketch

Design created using Excalidraw

2

Give the First Prompt

Now that you have a rough design, you can feed it to AI along with a basic flow of how the app would work.
The task is to build a Bulk QR code generator - It will be a simple web app following the design as shared. The flow would be:

- The user enters a bunch of comma separated links
- Next he clicks on convert
- Then on the right he should get a preview table which would contain 2/3 QRs and also a download all button. The button should download the QRs in PNG format, the name should be code1, code2 etc to easily map to the url.
- For styling, follow modern & sleek tailwind styles, and a good color scheme
3

Review & Improve

Check the output and give it a try. If you encounter bugs, tell AI to fix them!
      First App Iteration

First iteration output - perfect UI but download button needed fixing

​
Adding User Authentication

Now that your app is working, the next step is to authenticate users. Lovable’s default way to add authentication is through Supabase which needs just one prompt - 
add authentication to this app  
Lovable will prompt you to connect Supabase and set everything up for you.
  Authentication Setup

​
Monetising with Paygentic

​
Setting Up Paygentic

1

Create a Paygentic account

Go to paygentic.io and sign up. Choose Merchant during registration.
2

Create a Product

Open your merchant dashboard and create a new Product:
      Creating a Paygentic Product
3

Define Billable Metrics

This is what you’ll charge for—e.g., number of QR codes generated
      Defining Billable Metrics
4

Create Plan and Price

  • Create a usage plan
  • Set a price for your metric (e.g., $0.00001 per QR code)
      Creating Plan and Price

​
Integrating in Lovable App

Once your product and pricing are set up in Paygentic, it’s time to link everything to your Lovable app so users can authorize payments and be charged for usage.
1

Add Paygentic Environment Variables

Ask Lovable to add the following environment variables to your app:
  • PAYGENTIC_API_KEY: Your Paygentic API key (Found in settings/API keys in merchant dashboard)
  • PAYGENTIC_MERCHANT_ID: Your Paygentic merchant ID (Found in settings/Organization, starts with ‘org_’)
  • PAYGENTIC_BILLABLE_METRIC_ID: Your billable metric ID
  • PAYGENTIC_PLAN_ID: Your plan ID
 Please add the following environment variables for integrating the Paygentic API:
 PAYGENTIC_API_KEY, PAYGENTIC_MERCHANT_ID, PAYGENTIC_BILLABLE_METRIC_ID, PAYGENTIC_PLAN_ID
2

Store User Metadata in Supabase

By default, Lovable only stores the user’s email. You need to store two more fields:
  • auth_token (used to authorize the user with Paygentic)
  • customer_id (unique to each user in Paygentic)
Please update Supabase table to store **auth_token** and **customer_id** in the user profile.
Lovable will likely propose SQL changes—approve them and let it handle the update.
3

Set Up Authorization Flow

Every user needs a Paygentic Customer ID to be charged. We’ll guide Lovable to:
  • Check if a user already has this ID
  • If not, start the payment setup/authorization process
  • Save the result so it only happens once
The next task is to integrate Paygentic. Sharing the API docs for your reference: https://docs.paygentic.io/api-reference/customers/create-authorization-session-for-customer

After a user signs in:
1. Check if they already have a `customer_id` stored.
    - If yes, skip — they're already set up.
2. If not:
    - If `auth_token` exists, check the token's status using Paygentic's API.
       - If status is "success", fetch and save their `customer_id`.
    - If no token, create a new authorization session

Store the customer_id in local storage to avoid frequent db calls
By now the users should be able to Pay with Paygentic.
      Payment Setup

​
Final Step: Reporting Usage

1

Track Usage

The last step is to create a usage event whenever a customer generates QR codes. Ask lovable to follow the docs and create a usage event if the payment is authorised.
The next task is to report usage event. Please refer the docs and report usage whenever a customer generates QR codes: https://docs.paygentic.io/api-reference/usage-events/create-a-usage-event

Please show the QR codes only if usage is reported correctly, if it errors show the error instead of QR container
2

Testing

That’s all! Now it’s time to test it. Publish the app or use Lovable’s preview mode.In a different browser:
  1. Signup on the app (pretending as consumer)
  2. Authorise Paygentic - flow depends on how you prompt the user to authorise, in QR app we prompt the user if he inputs more than 2 urls
    • Register as Consumer
    • Subscribe to the plan
          Subscription Process       
  1. Generate lots of QRs and check the usage dashboard for complete transparency
      Usage Dashboard

​
Conclusion

Congratulations! You’ve created a fully functional QR code generator app with monetization using Paygentic.
This combination allows you to:
  • Quickly build a professional web application without advanced coding
  • Add monetization with a usage-based billing model
  • Create a smooth user experience from signup to payment
This same approach can be adapted for many different types of applications - just change the core functionality while keeping the authentication and monetisation architecture same.