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
Navigate to the Supabase Folder
DevelopmentTo run the functions locally, you need to have the Supabase CLI installed:
3

Configure Cashfree Integration Flow

Store API Keys and Environment in Supabase SecretsEither through Supabase CLI:
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 customise 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)