Skip to main content
Cashfree’s web checkout offers merchants a secure, pre-built, and user-friendly interface that supports a wide variety of payment methods, enhancing the transaction experience for both merchants and customers.

​
Why choose Cashfree?

  • Simplified checkout: Provides a pre-built, easy-to-use checkout page that delivers an optimised payment experience. It accepts payments from over 120 payment methods easily and securely.
  • Secure and PCI compliant: Securely collects payment details and submits them directly to Cashfree servers, removing the need for Payment Card Industry Data Security Standard (PCI DSS) compliance requirements at the merchant’s end.
  • Personalised: Customise your payment methods, branding, and various other elements to align seamlessly with your company’s specific theme.

​
Pre-requisites

  1. Create a Cashfree Merchant Account.
  2. Log in to the Merchant Dashboard and generate App ID and Secret Key. Learn how to generate API keys.
  3. Ensure you have whitelisted your website domain for integration. Read more about Domain Whitelisting.
The web checkout integration consists of three essential steps:
  1. Creating an order.
  2. Opening the checkout page.
  3. Confirming the payment.
The step-by-step guide for each step of the integration process is as follows:

​
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 as you cannot call this API from client side.
Order creation must be done through your backend, as this API requires your secret key. It should not be called directly from the client-side.
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. 
import { Cashfree, CFEnvironment } from "cashfree-pg";

const cashfree = new Cashfree(
	CFEnvironment.PRODUCTION,
	"{Client ID}",
	"{Client Secret Key}"
);

function createOrder() {
	var request = {
		order_amount: "1",
		order_currency: "INR",
		customer_details: {
			customer_id: "node_sdk_test",
			customer_name: "",
			customer_email: "[email protected]",
			customer_phone: "9999999999",
		},
		order_meta: {
			return_url:
				"https://test.cashfree.com/pgappsdemos/return.php?order_id=order_123",
		},
		order_note: "",
	};

	cashfree
		.PGCreateOrder(request)
		.then((response) => {
			var a = response.data;
			console.log(a);
		})
		.catch((error) => {
			console.error("Error setting up order request:", error.response.data);
		});
}
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 checkout page

This step requires you to whitelist your domain with Cashfree.

​
1. Include JS SDK in your client code

To integrate the Cashfree checkout, you must include our JavaScript SDK within your JS file. 
<script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>

​
2. Initialise the SDK

You need to initialise the variable using the Cashfree() function. There are two modes applicable for this: sandbox or production. Sandbox is used for a test environment, whereas production is used for production mode. 
const cashfree = Cashfree({
    mode:"sandbox" //or production
});

​
3. Open Cashfree checkout

To open the checkout, you can use the cashfree.checkout() method. This method can take in the following parameters :
  • paymentSessionId: Received from Create Order response.
  • redirectTarget (optional): This parameter decides how the payment page will open up.You can provide the following values:
    • Property ValueDescription
    _self(default)Opens the payment link in the same frame as it was clicked.
    _blankOpens the payment link in a new window or tab.
    _topOpens the linked document in the full body of the window.
    _modalOpens the payment link in a pop-up window on the current page.
    DOM elementOpens the payment link directly within a specified DOM element.
    Checkout Variants
  • Redirect checkout : For redirectTarget _self, _blank, _top
  • Popup checkout: For redirectTarget _modal
  • Inline checkout: For redirectTarget DOM element
    • When using pop-up and inline checkout, the approach varies slightly. You need to manage the promise returned by cashfree.checkout() to execute any additional code following the payment attempt.
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Cashfree Checkout Integration</title>
        <script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>
    </head>
    <body>
        <div class="row">
            <p>Click below to open the checkout page in the current tab</p>
            <button id="renderBtn">Pay Now</button>
        </div>
        <script>
            const cashfree = Cashfree({
                mode: "production",
            });
            document.getElementById("renderBtn").addEventListener("click", () => {
                let checkoutOptions = {
                    paymentSessionId: "your-payment-session-id",
                    redirectTarget: "_self",
                };
                cashfree.checkout(checkoutOptions);
            });
        </script>
    </body>
</html>

    ​
    Step 3: Confirming the payment

    Once the payment is completed, you need to confirm whether the payment was successful by checking the order status.
  • Redirect checkout
    • 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 Cashfree’s default page.
    We recommend that you 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 the customer has returned to this URL.
  • Popup and inline checkout
    • Once the payment process finishes, the cashfree.checkout() function returns a promise which should be handled by the merchant.

    ​
    Order status verification

    To verify an order you can call our /pg/orders endpoint from your backend. You can also use our SDK to achieve the same. 
    version := "2023-08-01"
response, httpResponse, err := cashfree.PGFetchOrder(&version, "<order_id>", nil, nil, nil)
if err != nil {
	fmt.Println(err.Error())
} else {
	fmt.Println(httpResponse.StatusCode)
	fmt.Println(response)
}
    Before delivering services to the customer, always verify the status of the order, which can be done using the Get Order API. An order is considered successful when the order_status is PAID.

    ​
    Testing

    You should now have a working checkout button that opens the Cashfree-hosted payment page. If your integration isn’t working, try the following steps:
    1. Open the Network tab in your browser’s developer tools.
    2. Click the button and check the console logs.
    3. Ensure that the correct environment and payment session ID are being passed.
    4. Use console.log() inside your button click listener to confirm whether the data is being passed correctly or not.

    ​
    💻 Quick dev-to-dev talk

    You clearly care about building better payment experiences for your clients, here’s a quick tip: Earn additional income doing exactly what you’re doing now!Join the Cashfree Affiliate Partner Program and get rewarded every time your clients use Cashfree.What’s in it for you?
    • Earn up to 0.25% commission on every transaction
    • Be more than a dev - be the trusted fintech partner for your clients
    • Get a dedicated partner manager, your go-to expert
    What’s in it for your clients?
    • Instant activation, go live in minutes.
    • Industry-best success rate across all payment modes.
    • Effortlessly accept international payments in 140+ currencies
    Ready to push to prod? 👉 Become a Partner now