Cashfree Hosted Checkout
Learn about the web integration for a Cashfree hosted payment page
Cashfree Hosted Integration
This integration allows you to integrate with a Cashfree hosted payment page. The process consists of three essential steps: creating an order, opening the payment page page, and confirming the order. Below is a step-by-step guide for each part of the integration process.
Requirements
- Create a Cashfree Merchant Account.
- Log in to the Merchant Dashboard and generate test keys from Cashfree Dashboard.
- Generate API Keys - Client ID & Secret Key.
- Ensure you have whitelisted your website domain for integration. Read more about whitelisting.
Step 1: Creating an Order
To integrate the Cashfree Payment Gateway, the first step is to create an Order. This must be done before any payment processing can occur. Set up an endpoint on your server to handle order creation, which will also facilitate communication between your backend and frontend.
API Request for Creating an Order
Here’s a sample request for creating an order using your desired backend language. Cashfree offers backend SDKs to simplify the integration process.
You can find the SDKs here.
After successfully creating an order, you will receive a unique order_id and payment_session_id that you need for subsequent steps.
You can view all the complete api request and response for /orders here.
Step 2: Opening the Payment Page
After creating the order, the next step is to direct the customer to the payment page for payment. You have two options:
redirect: Redirect the customer to the payment page using a standard redirect or an iframe.popup: Open the payment pop-up window, allowing payment without navigating away from the current page.
To implement this, ensure you include the cashfree.js JavaScript library in your frontend code.
After importing the javascript, you need to initialize the library and plug-in the payment_session_id from Step 1.
The redirectTarget parameter decides how the payment page will open up. You can provide the following values:
| Property Value | Description |
|---|---|
| _self(default) | Opens the payment link in the same frame as it was clicked. |
| _blank | Opens the payment link in a new window or tab. |
| _top | Opens the linked document in the full body of the window. |
| _modal | Opens the payment link in a pop-up window on the current page. |
| DOM element | Opens the payment link directly within a specified DOM element. |
Step 3: Confirming the Payment
Once the payment is completed, you need to confirm whether the payment was successful by checking the order status.
Redirecting after payment
Once the payment process finishes, the user will be redirected to the return URL you provided during order creation (Step 1). If no return URL is provided, customers will be redirected to a Cashfree’s default page.
We recommend you to provide a return URL while creating an order. This will improve the overall user experience by ensuring your customers don’t land on broken or duplicated pages. Also, remember to add context of the order in your return url so that you can identify the order once customer has returned on this url.
To verify an order you can call our /pg/orders endpoint from your backend. You can also use our SDK to achieve the same.
Testing
You should now have a working checkout button that redirects your customer to Cashfree hosted payment page. If your integration isn’t working:
- Open the Network tab in your browser’s developer tools.
- Click the button and check the console logs.
- Use console.log(session) inside your button click listener to confirm the correct error returned.
Was this page helpful?