2. Open Cashfree Checkout

Prerequisites

1. Make sure you have created Cashfree Account and API keys are generated.
2. You have created an order.

1. Include JS SDK in your client code

To integrate the Cashfree Checkout, you must include our JavaScript SDK within your JS file.

You can do this by

Option 1: Including the Script Tag. Import the URL in the snippet below to your HTML file.

<script src="https://sdk.cashfree.com/js/v3/cashfree.js"></script>

Option 2: Install from npm

npm install @cashfreepayments/cashfree-js

Try Cashfree DevStudio

Try Now

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 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 cashfree.checkout()method.
This method can take in following parameters -

• paymentSessionId(required)- This is received in the response of Create Order API.

• redirectTarget(optional) - This lets you decide how to open the Cashfree Checkout. Values allowed and their descriptions are mentioned in the table below.

  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.

Open Cashfree Checkout in following ways:

Cashfree Hosted: Redirect

For _self, _blank, and _top redirect targets:

Learn more about these targets here

let checkoutOptions = {
    paymentSessionId: "your-payment-session-id",
    redirectTarget: "_self" //optional ( _self, _blank, or _top)
}

cashfree.checkout(checkoutOptions)

This method is straightforward for opening the checkout in the same frame (_self), a new window/tab (_blank), or the full body of the window (_top).

Cashfree Hosted: Pop-up

For the _modal redirect target:

When using _modal, the checkout opens in a pop-up window on the current page. The usage differs slightly as you should handle the promise returned by cashfree.checkout() to execute additional code after the payment attempt:

let checkoutOptions = {
    paymentSessionId: "your-payment-session-id",
    redirectTarget: "_modal"
};

cashfree.checkout(checkoutOptions).then((result) => {
    if(result.error){
        // This will be true whenever user clicks on close icon inside the modal or any error happens during the payment
        console.log("User has closed the popup or there is some payment error, Check for Payment Status");
        console.log(result.error);
    }
    if(result.redirect){
        // This will be true when the payment redirection page couldnt be opened in the same window
        // This is an exceptional case only when the page is opened inside an inAppBrowser
        // In this case the customer will be redirected to return url once payment is completed
        console.log("Payment will be redirected");
    }
    if(result.paymentDetails){
        // This will be called whenever the payment is completed irrespective of transaction status
        console.log("Payment has been completed, Check for Payment Status");
        console.log(result.paymentDetails.paymentMessage);
    }
});

For the DOM element redirect target:

Opens the checkout within a specific element on your page by specifying the target element’s ID. Customize the appearance by setting width and height. You should also handle the promise returned by cashfree.checkout() to execute additional code after the payment attempt:

 let checkoutOptions = {
     paymentSessionId: "your-payment-session-id",
     redirectTarget: document.getElementById("cf_checkout"),
     appearance: {
         width: "425px",
         height: "700px",
     },
 };
 cashfree.checkout(checkoutOptions).then((result) => {
     if (result.error) {
       // This will be true when there is any error during the payment
       console.log("There is some payment error, Check for Payment Status");
       console.log(result.error);
     }
     if (result.redirect) {
       // This will be true when the payment redirection page couldnt be opened in the same window
       // This is an exceptional case only when the page is opened inside an inAppBrowser
       // In this case the customer will be redirected to return url once payment is completed
       console.log("Payment will be redirected");
     }
     if (result.paymentDetails) {
       // This will be called whenever the payment is completed irrespective of transaction status
       console.log("Payment has been completed, Check for Payment Status");
       console.log(result.paymentDetails.paymentMessage);
     }
});

Try Cashfree DevStudio

Try Now

Whitelist Domain

❗️

Attention

This integration will require whitelisting of your domain used for opening the checkout page. Any other domain used to open the checkout page will be blocked by Cashfree. You can request for domain whitelisting via Developers > Whitelisting from your merchant dashboard.

You can check the step-by-step process of whitelist request here.

Subscribe to Developer Updates