Skip to main content
Integrate Cashfree Payments directly into your Lovable app using a chat-driven setup. Describe what you need in plain language, and Lovable generates the required flows for you with no manual coding required. This makes payment integration accessible to beginner-level developers while offering advanced options for teams that need more control.

No-code setup

Embed Payment Forms or Payment Buttons directly in your frontend

Advanced integration

Advanced integration with authentication, server-side services, and database storage

​
No-code setup

If you want to integrate Cashfree’s no-code solutions, such as a Payment Form or Payment Button, you can do so without setting up any server-side services. This is the simplest integration path and works entirely in a no-code environment.
PrerequisitesEnsure you have a functioning front-end for this integration.

​
Steps to integrate

1

Create a Payment Form in Cashfree

  1. Log in to the Merchant Dashboard.
  2. Go to Payment Gateway > Payment Forms.
  3. Fill in the required details and create a Payment Form.
  4. Copy the Payment Form Link.
For more information, see Payment Forms.
2

Create a Payment Button (Optional)

If you want to embed a button that directly opens the payment form:
  1. Log in to the Merchant Dashboard.
  2. Go to Payment Gateway > Payment Buttons.
  3. Generate a Payment Button.
  4. Copy the Payment Button Code provided by Cashfree.
For more information, see Payment Buttons.
3

Embed in Lovable

In Lovable, you just need to provide the button code or the payment form link. Lovable will automatically embed it in your app.
“Integrate Cashfree Payments using a Payment Form (no code solution). The form should open when clicking on Cashfree’s payment button. Please embed the following button code in the app. When clicked, it should redirect to the Cashfree Payment Form:Form Link: <!-- Paste your Payment Form link here -->Payment Button Code: <!-- Paste your Payment Button code here -->”

​
Advanced integration with Supabase

If your use case involves server-side services, authentication, or transaction persistence, Supabase is the recommended path. Lovable comes with native Supabase integration, making it easy to set up your server-side services. By connecting Cashfree with Supabase, you can securely store API keys, process payments through Edge Functions, and maintain transaction records all within a single, streamlined setup. Why Supabase integration?
  • Secure API key storage in Supabase secrets
  • User authentication
  • Server-side edge functions for order creation, loading Cashfree checkout and payment verification
  • Database persistence for transactions and order mappings
This gives you much more control and flexibility compared to the no-code setup.
Prerequisites
  • A functioning frontend that can initiate payment requests
  • A Supabase connection activated in Lovable
  • Your Cashfree credentials: App ID and Secret Key
  • The correct environment URLs:
    • Sandbox (test) for development
    • Production for live payments: The domain you use must be whitelisted in the Cashfree dashboard. To request whitelisting:
      1. Log in to the Merchant Dashboard.
      2. Go to Developers > Whitelisting.
      For more information, see Domain Whitelisting.

​
Integration steps

1

Connect Supabase to Lovable

In Lovable, click the green Supabase button (top-right).
2

Add Edge Functions for Payment Flow to Supabase using CLI

Use the provided Edge Functions from the repository: https://github.com/cashfree/cashfree-supabase-edge-functionsFollow these steps to deploy edge functions via a CLI:Locate your Project Reference ID
  1. Go to your Supabase Dashboard.
  2. Open your project and check the address. Your project reference ID is embedded in it (for example, https://supabase.com/dashboard/project/<project-reference-id>).
Clone the Cashfree-Supabase Repository
git clone https://github.com/cashfree/cashfree-supabase-edge-functions.git
Navigate to the Supabase Folder
cd cashfree-supabase-edge-functions
DevelopmentTo run the functions locally, you need to have the Supabase CLI installed:
# Install Supabase CLI using brew
brew install supabase/tap/supabase

# Login to Supabase
supabase login

# Start local development
supabase start
3

Configure Cashfree Integration Flow

Store API Keys and Environment in Supabase SecretsEither through Supabase CLI:
supabase secrets set CASHFREE_APP_ID=your_client_id
supabase secrets set CASHFREE_SECRET_KEY=your_client_secret
supabase secrets set CASHFREE_ENVIRONMENT=PRODUCTION
OR through prompt on Lovable (Example: “Help me securely store my Cashfree App ID and Secret Key in Supabase secrets. I will also provide the environment. These will be used by my Edge Functions.”)
4

Configure Your Frontend to Accept Payments via Cashfree

The Edge Functions are designed to work with the minimum order details required by Cashfree. You can customize these functions based on your specific needs while keeping the same base structure. To ensure proper functioning, your frontend must send the essential order details to Supabase in the exact format expected by the Edge Functions, including:
  • Order amount
  • Order currency
  • Customer details (customer ID and mobile number)
Step 1 – Payment flow
When the user clicks the Pay Now button, open Cashfree's checkout page in the same window using the Cashfree SDK.
Follow the Cashfree documentation to have a redirect Cashfree-hosted experience using their frontend SDK.
After the payment is completed, redirect the user back to the home page and display the order status.

Step 2 – Use existing Edge Functions only. Do NOT create new Edge Functions.
I already have these Edge Functions in Supabase:
pg-create-order (order creation)
pg-get-order (order status retrieval)
Use only these existing functions and their code for the payment integration. Strictly follow the variables defined in the Edge Functions when sending data from the frontend.

Step 3 – Data sent from frontend
Send order amount, order currency (INR), and customer details (ID and mobile number — randomly generated in the frontend) to the server-side via Supabase.
Match the parameter names/variables exactly as used in the Edge Function.
⌘I