Using Lovable with NaafiPay

Lovable is a full-stack AI development environment that builds React + TanStack Start applications from natural-language prompts. It has a live preview, a managed Supabase backend, and the ability to write server functions in the same chat where you describe what you want. This makes it a fast way to ship a NaafiPay-integrated payment form: you describe the form, Lovable scaffolds the UI, and you add the NaafiPay server function with a short follow-up prompt. This page walks you through the workflow step by step and gives you two ready-to-paste Lovable prompts.

Workflow overview

1. Paste the NaafiPay API Overview, Create Checkout, and Verify Payment pages into the Lovable chat as a single message (Lovable holds them in conversation context).
2. Describe the page you want — for example, a course landing page with a Buy button.
3. Tell Lovable to put the NaafiPay API key in Secrets, never inline.
4. Ask for a createServerFn server function that calls Create Checkout and a thank-you route that calls Verify Payment.
5. Test the flow in the preview using your NaafiPay test key.

Lovable prompt 1 — Build the buy flow

1Here is the NaafiPay API I want to integrate:
2[paste API Overview + Create Checkout + Verify Payment pages]
3 
4Build a single course landing page route at /course/$slug with:
5- A hero section (title from a static array of 3 courses)
6- A "Buy for BDT X" button
7 
8Wiring:
91. Add NAAFIPAY_KEY to Lovable Cloud Secrets (instruct me how, do not paste it)
102. Create a server function createCheckout({ slug }) that:
11   - Looks up the course in the static array
12   - Calls https://naafipay.com/api/public/v1/payments with the secret
13   - success_url uses the current origin + "/thank-you"
14   - cancel_url uses the current origin + "/course/" + slug
15   - Returns checkout_url
163. The Buy button calls createCheckout and window.location.href = checkout_url
17 
18Use only the existing TanStack Start + Tailwind setup. No new dependencies.

Lovable prompt 2 — Add the thank-you page

1Now add a /thank-you route that:
2- Reads ?invoice_id from the URL
3- Calls a new verifyPayment(invoice_id) server function that POSTs to
4  https://naafipay.com/api/public/v1/verify-payment with the secret
5- Renders three states:
6  - "completed": "Thanks! Your course access is ready." + a Continue button
7  - "pending":   "We're confirming your payment, refresh in a moment."
8  - anything else: "Payment was not completed."
9- Loads the verification in the route loader, not in useEffect, so the right
10  state is rendered on first paint
11 
12Use the same NAAFIPAY_KEY secret. No client-side API calls.

Anti-patterns to avoid

Lovable can produce a working checkout in a few prompts, but watch out for these common mistakes when you direct it:

1. Pasting the API key directly into the chat instead of using Secrets — never do this, the key ends up in the codebase.
2. Calling NaafiPay from a client component (anything that runs in the browser) — always insist on a server function.
3. Skipping Verify Payment and trusting the success URL alone — Lovable will do this if you do not specifically ask for verification.
4. Forgetting to handle the pending status — for MFS payments this state is brief but real, and the customer can land on the thank-you page first.