Skip to main content
Integrate Cashfree Payments directly into your Replit application using a chat-driven workflow. Simply describe what you want in natural language, and Replit automatically generates the required pages, server routes, and payment flow with minimal or no manual coding. This approach makes payment integration accessible to developers at all levels by leveraging natural language instructions to build complete payment flows.

​
Prerequisites

Before you begin, ensure that you have the following requirements:
  • Cashfree credentials: App ID, Secret Key, and Environment (Sandbox or Production).
  • A working frontend: Your Replit app should already include a checkout flow and the ability to send order details (amount, currency, customer info) to the server.
  • Domain whitelisting: Your Replit domain must be whitelisted on the Cashfree Merchant Dashboard for production mode.
To request domain whitelisting:
  1. Log in to the Merchant Dashboard.
  2. Go to Developers > Whitelisting.
For more information, see Domain Whitelisting.

​
Sample prompts for implementation

Use the following prompts with Replit’s chat-driven interface to generate your payment integration automatically.

​
App setup

Sample prompt for initial app setup: 
Create a Replit full-stack app for an electronics store with:

- Product listing (name, image, price)
- Add-to-cart functionality
- Checkout page with total amount and a Pay Now button
- Payments processed using Cashfree Payments

​
Payment integration

Sample prompt for payment integration: 
Refer to Cashfree's Hosted Checkout documentation to understand the 
redirect flow:https://www.cashfree.com/docs/payments/online/web/redirect

Key requirements:

- Use Cashfree API version: 2025-01-01
- When the user clicks Pay Now:
  1. Call your backend to create an order
  2. Capture the payment_session_id returned by Cashfree while creating the order
  3. Use Cashfree's frontend SDK to open the hosted checkout page

​
Handling payment completion

Sample prompt for payment completion: 
Handling Payment Completion

1. Create a Thank You Page
Generate a dedicated Thank You page that:
- Accepts the order_id as a URL path parameter
- Example: /thank-you/:order_id
- Stores this order_id in the page's context or local state

2. Update the Return URL
Set Cashfree's return_url to point to the Thank You page:
https://<your-app>.replit.app/thank-you/{order_id}

Cashfree will redirect the customer here after payment.

3. Fetch and Display Payment Status
On the Thank You page:
- Extract the order_id from the URL
- Call your backend, which should use Cashfree's Get Payments for Order API: 
https://www.cashfree.com/docs/api-reference/payments/latest/payments/get-payments-for-order#get-payments-for-an-order
- Display the payment status in a clean status banner: Success/Failed/Pending
- The Thank You page should always reflect the latest payment state for 
  the given order_id.

​
Common issues and solutions

The following section describes common integration issues and their solutions:
  • Production app breaking after domain whitelisting
    • Cause: Sandbox and production databases diverge.
    • Solution: Ask Replit to ensure data consistency between sandbox and production environments or explicitly seed production with sample data including products and images.
  • Replit automatically generated endpoints breaking the flow
    • Cause: When you don’t explicitly specify a required Cashfree endpoint (for example, Get Payments for Order), Replit may automatically generate its own route, causing mismatched logic.
    • Solution: Always provide the endpoint details explicitly in your prompts to ensure proper integration.
  • Environment mode mismatch
    • Cause: Frontend is hardcoded to production while server defaults to sandbox, or the reverse scenario occurs.
    • Solution: Ensure that both client and server use the same Cashfree environment in frontend configuration and server environment variables.