Payment Options

You can set the paymentOptions in the following way.

let paymentOptions = {
    paymentMethod: component,
    paymentSessionId: "your-payment-session-id"



A reference to a payable component. Kindly note that the payable component should be ready and complete before invoking pay on it, otherwise it will throw an error. To get if a payable component is complete or not you can use component.isComplete() which returns a bool.

There are cases when one component also requires other components, in that case you will have to also check the completeness of those other component. Example- to process card you would need to make sure cardNumber, cardExpiry, cardCvv and cardHolder are all complete. We have a simple card example here.



To make payment you will need a paymentSessionId, you can get this by making a create order API call to POST /orders. Please make sure you are using the correct hostname for the environment you want to process the payment for. In the response of POST /orders you will find payment_session_id. Note that this is a backend call so you will need to have a server. Read how to generate payment_session_id here



This is the url where your customers will be redirected after they have complete the payment. The returnURL has to have a wild card entry {order_id}. Cashfree will replace {order_id} with the actual order id that was used to create the order. Let us suppose your order_id is myorder123 and you have specified{order_id} as your returnUrl then cashfree will redirect your customer to You can extract the order id here and call get order to confirm the payment status. Read more here. If there is redirect the pay() promise resolves with {redirect: true}



For certain paymentMethod you can choose to not redirect the customer to the returnUrl by passing if_required. Examples would be Card, UPI and QR. For payment method where redirection is required this flag will be completely ignored. If you decide not to redirect the customer then pay() promise resolves with {paymentDetails: {paymentMessage: "Payment finished. Check status."}}. To confirm the payment it is recommended that you always check the status of your order from your backend server with Cashfree using get order. Default is always



We also provide a way for you to decide how to redirect your customer. This takes all the values that are valid for hyperlink. Default is _self

_blankOpens the linked document in a new window or tab
_selfOpens the linked document in the same frame as it was clicked (this is default)
_parentOpens the linked document in the parent frame
_topOpens the linked document in the full body of the window
_framename_Opens the linked document in the named iframe



In certain component like the cardNumber component, you can let your users avail EMI options.
If you want to enable EMI options for your user set it to allow_if_possible. Default is null
If you want to pass number of months for the emi then set it the number of months. 3, 6 and so on.
If you want to process emi for a certain bank(ex HDFC) and tenure(ex 3 months) then use HDFC,3

You can find all the supported options here

EMI options will only be shown for credit cards for order_amount more than 2499



Assign a savePaymentInstrument to this to save the payment method. Works only for card payment. Default is null.


let saveOptions = {
	values: {
		label: "Save Card for later"
let savecard = cashfree.create("savePaymentInstrument", saveOptions);

let cashfree = Cashfree();
  savePaymentInstrument: savecard



You can pass an offer in the object which you can fetch using the get offer api. Please note that you need use the the offer_id value only. It is uuid.

What’s Next