This integration allows you to integrate with a Cashfree hosted payment page. Below is a step-by-step guide for each part of the integration process.

​
Requirements

​
Step 1: Create a Plan

API Documentation: Create Plan 
curl --request POST \
  --url https://sandbox.cashfree.com/pg/plans \
  --header 'accept: application/json' \
  --header 'content-type: application/json' \
  --header 'x-api-version: 2023-08-01' \
  --header 'x-client-id: xyz' \
  --header 'x-client-secret: abc' \
  --data '{
	"plan_id": "plan_cashfree_sbox",
	"plan_name": "Premium_10",
	"plan_type": "ON_DEMAND",
	"plan_currency": "INR",
	"plan_max_amount": 100,
	"plan_note": "Test Plan Cashfree"
}'

​
Step 2: Create Subscription

API Documentation: Create Subscription 
curl --request POST \
  --url https://sandbox.cashfree.com/pg/subscriptions \
  --header 'accept: application/json' \
  --header 'content-type: application/json' \
  --header 'x-api-version: 2023-08-01' \
  --header 'x-client-id: xyz' \
  --header 'x-client-secret: abc' \
  --data '{
	"customer_details": {
		"customer_name": "Sushane Yadav",
		"customer_email": "sushane.yadav@abc.com",
		"customer_phone": "9999999999",
		"customer_bank_account_holder_name": "Sushane Yadav",
		"customer_bank_account_number": "010080198715",
		"customer_bank_ifsc": "ICIC0001008",
		"customer_bank_code": "ICIC",
		"customer_bank_account_type": "SAVINGS"
	},
	"plan_details": {
		"plan_id": "plan_cashfree_sbox",
		"plan_name": "Premium_09",
		"plan_type": "ON_DEMAND"
	},
	"authorization_details": {
		"authorization_amount": 1,
		"authorization_amount_refund": true,
		"authorization_time": 1
	},
	"subscription_tags": {
		"subscription_note": "test create subs"
	},
	"subscription_meta": {
		"return_url": "https://wa.me/8473222?textPayment%20Successfull",
		"notification_channel": [
			"EMAIL",
			"SMS"
		]
	},
	"subscription_id": "create-ondemand-subs-12",
	"subscription_expiry_time": "2028-12-24T14:15:22Z"
}'

​
Step 3: Initiate an Auth

Use the subscription_session_id received in the response of create subscription to initiate the subscription auth checkout. Refer to below code module to integrate :- 
const paymentMessage = document.getElementById("paymentMessage");

const cashfree = Cashfree({
  mode: "sandbox" // or production
});

document.getElementById("subsCheckout").addEventListener("click", function(){
  paymentMessage.innerText = "";
  paymentMessage.classList.remove("alert-danger");
  paymentMessage.classList.remove("alert-success");

  cashfree.subscriptionsCheckout({
    subsSessionId: document.getElementById("subsSessionId").value,
    redirectTarget: "_blank"
  }).then(function(result){
    if(result.error){
      document.getElementById("paymentMessage").innerHTML = (result.error.message)
    }
  })
})
Try out here: codepen
  • Take the subscription_session_id and paste it in the codepen link and click on submit.
  • You will be redirected to the subscription checkout page.
  • Choose the payment mode you want to setup the subscription and submit. In case of sandbox you will be asked to simulate the payment.
  • You will be redirected to the return url post the transaction is completed.

​
Step 4: Get Subscription Details

Use this API to check the subscription status and auth details post completion of the payment. API Documentation: Get Subscription 
curl --request GET \
  --url https://sandbox.cashfree.com/pg/subscriptions/{subscription_id} \
  --header 'accept: application/json' \
  --header 'x-api-version: 2023-08-01' \
  --header 'x-client-id: xyz' \
  --header 'x-client-secret: abc'

​
Step 5: Raise a charge on subscription

API Documentation: Raise a charge 
curl --request POST \
  --url https://sandbox.cashfree.com/pg/subscriptions/pay \
  --header 'accept: application/json' \
  --header 'content-type: application/json' \
  --header 'x-api-version: 2023-08-01' \
  --header 'x-client-id: xyz' \
  --header 'x-client-secret: abc' \
  --data '{
	"subscription_id": "create-ondemand-subs-12",
	"payment_id": "test-payment-subs-07",
	"payment_type": "CHARGE",
	"payment_amount": 10,
	"payment_remarks": "first payment",
	"payment_schedule_date": "2024-11-30T14:15:22Z"
}'