Once you have created the order, you can use the order to initiate payment. You can either use Cashfree’s user interface to capture payment details. You will do this by redirecting the customer to a Cashfree-hosted page, which can be customized as per your needs.

Pre-built Checkout Page

To use a pre-built checkout page, you just need to use our Javascript SDK which will redirect the customer to the standard checkout page.

Javascript SDK

Once you receive payment_session_id from create order response, you need to use Cashfree’s JS SDK 2.0.0.

📘

Environment

Cashfree’s JS SDK supports two different environments -

Sandbox: Use this environment during your testing. No actual debit occurs, everything is simulated. Using this environment you should be able to integrate the SDK, accept payments, get webhooks, etc.

Production: Once you have finalized your testing on a sandbox you can use the production environment.

Step 1: Include our SDK in your client code

Sandbox

<script src="https://sdk.cashfree.com/js/ui/2.0.0/cashfree.sandbox.js"></script>

Production

<script src="https://sdk.cashfree.com/js/ui/2.0.0/cashfree.prod.js"></script>

Step 2: Initialize the SDK

const paymentSessionId = "your payment session id"; 
const cashfree = new cashfree(paymentSessionId);

Step 3: Redirect to checkout

You would be using redirect function to redirect to pre-built checkout page.

cashfree.redirect();

Demo