2. Open Cashfree Checkout
This is the second step in integrating Cashfree Checkout. Learn how to include, initialise the JS SDK, and finally open the Checkout Page.
Prerequisites
- Make sure you have created Cashfree Account and API keys are generated.
- 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
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 _blank
Opens the payment link in a new window or tab. _self
(default)Opens the payment link in the same frame as it was clicked. _modal
Opens the payment link in a pop-up window on the current page. _top
Opens the linked document in the full body of the window. <framename>
Opens the linked document in the named iframe.
Open Cashfree Checkout in following ways:
For _self
and _blank
redirect targets:
let checkoutOptions = {
paymentSessionId: "your-payment-session-id",
redirectTarget: "_blank" //optional (_self or _blank)
}
cashfree.checkout(checkoutOptions)
This method is straightforward for opening the checkout in the same frame (_self
) or a new window/tab (_blank
).
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(() => {
console.log("Payment is attempted, check for status!!");
});
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.
Updated 18 days ago