Lovable introduced Agent mode (in beta) about a week ago, and I heard mixed message about how good/bad it is so I want to share my experience, how I'm generally using Lovable and also hopefully to share bit of my experience trying to set up my app with Stripe integrated (please note, I only tested/confirmed it with Sandbox environment)
Also before I start, I want to warn you that this post will be not about coding, and I know some people got offended with the concept of vibe coding so if you don't like it, please close the tab or find awesome dev/coding post made by many others :)
OK, now I assume you are somewhat interested with the vibe coding (hopefully) So I'll start with the process of refining prompts. Most people probably already do this but I will first start off with talking to Chat GPT like this:
hi, I'm not quite there but want to start thinking about how I can manage payment - I'm thinking of using Stripe, and looking for some good reference for me to learn how I can integrate Stripe into web app - could you help me with this? (bonus if you can find good reference for integrating Stripe with Lovable as that is where I'm building my app) Thanks!
(it then give me bunch of references for me)
Thanks - I wonder if I share with my current plan of pricing, could you suggest the best approach?
Basically I want to go with "credit" system pricing like:
- 50 credit for $9.99
- 100 credit for $19.99
- 250 credit for $39.99
- 500 credit for $69.99
User consume credit based on the length of their resume data + extra prompts (+ eventually premium feature) - and once they are low on credit, there is a "+" button on credit button showing remaining credit that user can bring up the modal where they are presented these 4 options:
I can see just keep using same modal (but just change the view/component) to render payment info - and most important thing for me is to make sure payment is done in very secure manner (but I believe Stripe should be able to handle this?)
With this bit of extra information, could you suggest the best approach of integrating Stripe into my app? Thanks again for being my thought partner throughout my journey!
(it can then narrow down the approach and give you good suggestion)
Amazing - thanks! Could you actually help me generate a prompt to Lovable to achieve all this integration? (I already created 4 products you mentioned in the Stripe account)
Just to recap, what I want is:
- from the existing "Top Up Credits" modal (accessible from clicking credit button), when user select one of 4 credit button to top up the credit, I want then transfer control over to Stripe through Supabase Edge function
- I want to be able to handle successful payment case (with thank you page, credit top up etc.) and failure case (provide some reason for failures, not top up credit etc.)
- I also want Lovable to generate payment_history table to keep track of detail of transaction (like any unique identifier help me connect it to Stripe, date & time, how much credit get purchased, by which user etc.)
Thank you very much in advance for your assistance!
(with that, Chat GPT created very detailed prompt like this)
-----------beginning of prompt to Lovable-----------
👋 I'd like help integrating Stripe payments into my app. Here's the complete context and what I'd like Lovable to build for me:
💳 Stripe Credit Purchase Integration (via Supabase Edge Function)
✅ Overview
I'm offering a credit-based pricing system, where users can buy credits via Stripe Checkout. The credits are consumed based on resume complexity or premium features.
I've already created 4 products in Stripe:
- 50 credits – $9.99
- 100 credits – $19.99
- 250 credits – $39.99
- 500 credits – $69.99
Each product is a one-time purchase.
🧩 Requirements
1. Frontend (Modal UI)
- I already have a "Top Up Credits" modal, which is shown when users click the "+" on the credit button.
- In that modal, I show 4 credit options (buttons or cards).
- When a user selects an option, I want to:
- Trigger a Supabase Edge Function that creates a Stripe Checkout session.
- Redirect the user to the Stripe-hosted checkout page.
2. Supabase Edge Function: createCheckoutSession
- This function should:
- Accept the selected credit pack (
50,100, etc.) from the frontend. - Look up the correct Stripe
price_id. - Use Stripe SDK to create a Checkout Session with:
- Mode:
payment - Success URL:
/payment-success - Cancel URL:
/payment-cancel -
customer_emailoruser_idvia metadata for identification. - Return the Stripe Checkout URL to the frontend.
- Accept the selected credit pack (
3. Supabase Webhook: /stripe-webhook
- Should handle
checkout.session.completed. - It should:
- Extract metadata or
customer_emailto find the user. - Read the number of credits purchased (via metadata or price lookup).
- Update the user's
credits_remainingfield in Supabase. - Log the transaction in a new table (see below).
- Extract metadata or
🧾 New Supabase Table: payment_history
Please create a Supabase table named payment_history with fields:
-
id: UUID (primary key) -
user_id: reference tousers.id -
stripe_session_id: string -
stripe_payment_intent: string (optional, for traceability) -
credit_amount: integer -
amount_paid: numeric (in USD or cents) -
status: string (success,failed, etc.) -
created_at: timestamp (default now())
This table should be written to from the webhook function.
✅ Routing After Payment
- On successful payment, users should be redirected to
/payment-success:- Show a simple thank you message and updated credit balance.
- On failed or cancelled payment, send to
/payment-cancel:- Show an error or cancellation message.
🧑💻 Optional:
- Please provide clear instructions or UI wiring for how the frontend should:
- Call the Edge Function
- Redirect to the returned Checkout URL
- If possible, write the Edge Function in TypeScript (preferred).
Let me know if anything is unclear or if you need additional info!
-----------end of prompt to Lovable-----------
After validating (very important! we want to always validate what AI generates as it can still misinterpret or just make things up), I then feed that prompt into Lovable with Agent mode on.
Then Lovable first offered to create Supabase table, once I approve, it then created Edge functions, update all UI necessary for my fairly complex ask, also tell me to do few things
- Update Price IDs in supabase/functions/create-checkout-session/index.ts
- Set Webhook Endpoint (done in Stripe)
- Add Webhook Secret (done in Supabase)
If I read carefully it also created a button with "Add API Key" but since it wasn't in the body of the message (and admit that I wanted to test this quickly), I reload my app, tried to buy credit and got error immediately so I asked Lovable again with prompt
hi, I'm getting error:
Failed to load resource: the server responded with a status of 500 ()
https://{appId}.supabase.co/functions/v1/create-checkout-sessionwhen I tried to simulate the purchase of 50 credit and I wonder if this is because Edge function is expected to have some auth? (I mean it should be called from at least authenticated user but I wonder if it has more strict check?)
also I have custom domain (api.resume2web.net) set up with Supabase so please use this URL instead of "dbzxvptibjvegujuwsgf.supabase.co" (not sure if it is causing any issue but I do set up webhook in Stripe using that URL)
it then tell me missing API KEY (my fault) but I also notice that credit shown as "0 credit" after the purchase screen which is so wrong! (this test user at least had 12 credit lol)
OK, missing API KEY was on my end but ... when payment go through thank you page show me "0 credit" (I expect to see new user credit balance there) - also credit wasn't added - could you look into this?
it says issue was that payment success page isn't getting userId, says it fixed so I tried again and while credit shows for the user, it was showing old credit lol
OK, now credit balance shows BUT we still didn't top up credit - so whatever the credit user choose (my test, I choose 50), new credit balance should reflect that -
in my test case, I had 12 credit to start with:
successfully purchase 50 credit12 + 50 = 62
user should have 62 credit (and wherever we display remaining credit should reflect that, by updating user_credits table
it insist code is right so I went to Stripe, check webhook and once I saw the error message, it was very clear what was going on so I grab the error and feed it into Lovable like:
OK, I checked and webhook set up seem to be correct but I'm getting following error inside Stripe webhook:
{
"error": "SubtleCryptoProvider cannot be used in a synchronous context.\nUseawait constructEventAsync(...)instead ofconstructEvent(...)"
}sounds like this has something to do with how you construct request? please update the code to address this issue, thanks!
and with that finally everything work as expected.
Honestly I'm still very impressed with this entire flow (yes, it can get better but if I can add Stripe to my app while I'm enjoying my morning coffee, I'm OK with that!) Knowing what the error says etc. definitely help but I think for the most part you can still get away of not knowing it and let Lovable handle it, which is crazy!
In the end this entire session cost me:
- Create Supabase table (0.60)
- Create Supabase Edge functions and handle initial UI change (3.20)
- Ask Lovable to investigate 500 error (1.80) <- my fault
- Troubleshoot why credit show as 0 (1.80)
- Troubleshoot why credit is not top up (1.20)
- Update function to use async ... await (0.60)
0.6 + 3.2 + 1.8 + 1.8 + 1.2 + 0.6 = 9.2
(or if you remove my mistake, 7.4)
so less than 10 credit to do all this!
Oh one more note - I should totally tell Lovable to make sure UI should be mobile friendly (I should probably put this at the Knowledge section as I keep forgetting to enter this) I notice previously created modal view was not that cleanly rendered in mobile when I was testing this credit top up flow.
Hopefully this post help someone (I wish I know how to format this better) This is my first post in DEV, planning to do more in future whenever I have something interest to share.
On the last note, in case you are wondering what is that I'm working on, please check my corporate site (kind of/sort of) at https://info.resume2web.net/ where you can see why I want to build this SaaS product, journey I took so far, also you can find a link to my app where it as waitlist so if you are even mildly interested with it, please sign up, thanks!
Top comments (0)