> ## Documentation Index
> Fetch the complete documentation index at: https://www.cashfree.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Lovable Integration

> Integrate Cashfree Payments into Lovable apps with a chat-driven setup, then progress to advanced flows using Supabase, custom server logic, and webhooks.

Integrate Cashfree Payments directly into your [Lovable](https://lovable.dev/) 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.

<CardGroup cols={2}>
  <Card title="No-code setup" icon="wand-magic-sparkles" href="#no-code-setup">
    Embed Payment Forms or Payment Buttons directly in your frontend
  </Card>

  <Card title="Advanced integration" icon="database" href="#advanced-integration-with-supabase">
    Advanced integration with authentication, server-side services, and database storage
  </Card>
</CardGroup>

## 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.

<Info>
  **Prerequisites**

  Ensure you have a functioning front-end for this integration.
</Info>

### Steps to integrate

<Steps>
  <Step title="Create a Payment Form in Cashfree">
    1. Log in to the [Merchant Dashboard](https://merchant.cashfree.com/).
    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](/payments/no-code/payment-forms/overview).
  </Step>

  <Step title="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](https://merchant.cashfree.com/).
    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](/payments/no-code/payment-button).
  </Step>

  <Step title="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.

    <Accordion title="Sample prompt for Lovable">
      "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 -->`"
    </Accordion>
  </Step>
</Steps>

## 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.

<Info>
  **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](https://merchant.cashfree.com/).
      2. Go to **Developers** > **Whitelisting**.

      For more information, see [Domain Whitelisting](/payments/online/go-live/whitelist#whitelist-your-website-or-app).
</Info>

### Integration steps

<Steps>
  <Step title="Connect Supabase to Lovable">
    In Lovable, click the **green Supabase button** (top-right).
  </Step>

  <Step title="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-functions](https://github.com/cashfree/cashfree-supabase-edge-functions)

    Follow these steps to deploy edge functions via a CLI:

    **Locate your Project Reference ID**

    1. Go to your [Supabase Dashboard](https://supabase.com/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**

    ```bash theme={"dark"}
    git clone https://github.com/cashfree/cashfree-supabase-edge-functions.git
    ```

    **Navigate to the Supabase Folder**

    ```bash theme={"dark"}
    cd cashfree-supabase-edge-functions
    ```

    **Development**

    To run the functions locally, you need to have the Supabase CLI installed:

    ```bash theme={"dark"}
    # Install Supabase CLI using brew
    brew install supabase/tap/supabase

    # Login to Supabase
    supabase login

    # Start local development
    supabase start
    ```
  </Step>

  <Step title="Configure Cashfree Integration Flow">
    Store API Keys and Environment in Supabase Secrets

    Either through Supabase CLI:

    ```bash theme={"dark"}
    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.")
  </Step>

  <Step title="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)

    <Accordion title="Example prompt for Lovable">
      ```
      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.
      ```
    </Accordion>
  </Step>
</Steps>