2.1 Redirect to Cashfree Payments Checkout Page

Overview

This integration type allows you to redirect your customers to the standard Cashfree Payments checkout page and complete the payment. Once your customer has successfully created an order, you can redirect them to the checkout page to initiate payment. Cashfree Payments manages the complete checkout experience for your customers.

Prerequisites

• Cashfree Payments test account
• Client-id and client-secret (obtained from the dashboard)
• A backend server

Step 1: Create an order

To redirect your customer to Cashfree Payments checkout page, you must first create an order. Click here to read more on how to create an order.

Step 2: Include SDK in your client code

To use a pre-built checkout page, you need to use our javascript SDK. This redirects your customer to the standard checkout page. Use the payment_session_id received when creating an order in Cashfree Payments JS SDK 2.0.0.

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 3: Initialize the SDK

Use the snippet below to initialize and invoke JS SDK.

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

Step 4: Redirect to the checkout page

The next step is to redirect your customers to the Cashfree Payments checkout page. You should use the redirect function to redirect to the checkout page. When you redirect your customers to the checkout page, the URL has the payment_session_ID in it. The session ID is unique for each payment.

cashfree.redirect();

Demo

Step 5: Verify payment status and handle the response

Verify payment status

Once the payment is completed, Cashfree Payments verifies the payment status and handles the response.
When a payment is completed, there are two possible scenarios we handle:

• If the transaction is successful, Cashfree Payments redirects your customer to the successful URL you have provided.
• If the transaction fails, Cashfree Payments redirects your customer to the failure URL you have provided.

Handle response

When you present the payment form to your customer, they will be able to attempt the payment. When your customers complete the payment, you need to redirect them to a webpage that shows the payment status. This provides your customers with a complete payment experience.

You can provide two different event handlers onSuccess and onFailure to handle these two scenarios.

Handle onSuccess and onFailure

 onSuccess: (data) => {
      if (data.order && data.order.status == "PAID") {
            //order is paid
            //verify order status by making an API call to your server
            // using data.order.orderId
      } else {
          //order is still active and payment has failed
      }
    
},
onFailure: (data) => {                                                
      console.log(data.order.errorText)
}