Cashfree.js Component Reference

Cashfree provides the following list of components along with the initial state that can be passed in options.values. Certain components are payable and might need other components to be mounted to be ready for payment

A component can only be mounted after cashfree.js has been initialized and DOM container is ready for mounting the component.

Card components

There are four card components as listed below:

cardNumber

A component to accept card number

Parameters

Card Number Object

Show properties

string

placeholder for your card number field

boolean

default:"false"

hide brand icons, default is false

Returned Value

You can get the value of a component by calling component.data().value. All returned values of component.data() can be found in the components reference

Card Number Object

Show properties

string

contains the brand of the card visa, amex, mastercard, rupay

string

contains the cvv length for the given brand eg 4 for amex

let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let card = cashfree.create("cardNumber", {
	values: {
		placeholder: "Enter card number",
	},
});
card.on("loaderror", function (data) {
	console.log(data.error);
});
card.mount("#mount-here");
card.on("ready", function (d) {
	console.log(card.data().value); //{brand: 'visa', cvvLength: 3}
	//or
	//console.log(d.value)
});

cardHolder

A component to accept card holder’s name kindinput payablefalse

Accepted `values`

You can pass values to a component using options cashfree.create('componentName', options)

key	description
placeholder `string` OPTIONAL	placeholder for your card number field
cardHolder `string` OPTIONAL	name of your customer

Returned `value`

You can get the value of a component by calling component.data().value. All returned values of component.data() can be found in the components reference

key	description
cardHolder `string`	name of your customer

Example

let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let cardHolder = cashfree.create("cardHolder", {
	values: {
		cardHolder: "Jane Doe",
	},
});
cardHolder.on("loaderror", function (data) {
	console.log(data.error);
});
cardHolder.mount("#mount-here");
cardHolder.on("ready", function (d) {
	console.log(cardHolder.data().value); //{cardHolder: 'Jane Doe'}
	//or
	//console.log(d.value);
});

cardExpiry

A component to accept card expiry kindinput payablefalse

Accepted `values`

Does not accept anything

Returned `value`

You can get the value of a component by calling component.data().value. All returned values of component.data() can be found in the components reference

key	description
cardExpiry `string`	card expiry in MM/YY format

Example

let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let cardExpiry = cashfree.create("cardExpiry", {
	values: {
		//does not accept any value
	},
});
cardExpiry.on("loaderror", function (data) {
	console.log(data.error);
});
cardExpiry.mount("#mount-here");
cardCvv.on("ready", function (d) {
	console.log(cardCvv.data().value); //{cardExpiry: '12/26'}
	//or
	//console.log(d.value)
});

cardCvv

A component to accept card cvv/cvc kindinput payablefalse

Returned `value`

You can get the value of a component by calling component.data().value. All returned values of component.data() can be found in the components reference

key	description
cardCvv `number`	card cvv

Example

let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let cardCvv = cashfree.create("cardCvv", {});
cardCvv.on("loaderror", function (data) {
	console.log(data.error);
});
cardCvv.mount("#mount-here");
cardCvv.on("ready", function (d) {
	console.log(cardCvv.data().value); //{cardCvv: '123'}
	//or
	//console.log(d.value)
});

UPI components

List of UPI components

upiCollect

A component to accept user’s vpa/upi id kindinput payabletrue

Accepted `values`

You can pass values to a component using options cashfree.create('componentName', options)

key	description
placeholder `string` OPTIONAL	placeholder for enter vpa field
upiId `string` OPTIONAL	vpa/ upi id of the customer

Returned `value`

You can get the value of a component by calling component.data().value. All returned values of component.data() can be found in the components reference

key	description
upiId `string`	vpa/ upi id of the customer

Example

let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let upiCollect = cashfree.create("upiCollect", {
	values: {
		upiId: "janedoe1@okbankname",
	},
});
upiCollect.on("loaderror", function (data) {
	console.log(data.error);
});
upiCollect.mount("#mount-here");
upiCollect.on("ready", function (d) {
	console.log(upiCollect.data().value); //{upiId: 'janedoe1@okbankname'}
	//or
	//console.log(d.value)
});

upiApp

A component to initiate UPI app/intent payment. Only works in mobile phones. If you mount it on desktop it will throw an error in loaderror kindbutton payabletrue

Mobile only. Component will not mount on custom webview/inappbrowser Android. It will however mount in popular apps like Facebook, Instagram, Twitter. For iPhone it will always mount.

Accepted `values`

You can pass values to a component using options cashfree.create('componentName', options)

key	description
upiApp `string` Required	name of the upi app
buttonText `string` OPTIONAL	Text for button, ex Google Pay for upiApp gpay
buttonIcon `bool` OPTIONAL	whether to show app icon or not

View available options for upiApp in the appendix

In case buttonText is not provided the value of buttonIcon would be replaced to true. This has been done so that your customer always sees icon of the app.

Returned `value`

You can get the value of a component by calling component.data().value. All returned values of component.data() can be found in the components reference

key	description
upiApp	name of the upi app

Example

let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let upiApp = cashfree.create("upiApp", {
	values: {
		upiApp: "gpay",
		buttonText: "GPAY",
		buttonIcon: true,
	},
});
upiApp.on("loaderror", function (data) {
	console.log(data.error);
});
upiApp.mount("#mount-here");
upiApp.on("ready", function (d) {
	console.log(upiApp.data().value); //{upiApp: 'gpay'}
	//or
	//console.log(d.value)
});

Example

upiQr

A component to show a UPI qr code kindimage payabletrue

Accepted `values`

You can pass values to a component using options cashfree.create('componentName', options)

key	description
size `string` required	size of the qr code. ex “220px”

Returned `value`

You can get the value of a component by calling component.data().value. All returned values of component.data() can be found in the components reference

key	description
size `string`	size of the qr code. ex “220px”

Example

let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let upiQr = cashfree.create("upiQr", {
	values: {
		size: "220px",
	},
});
upiQr.on("loaderror", function (data) {
	console.log(data.error);
});
upiQr.mount("#mount-here");
upiQr.on("ready", function (d) {
	console.log(upiQr.data().value); //{size: '220px'}
	//or
	//console.log(d.value)
});

Wallet components

Wallet has only one component

wallet

A component to initiate wallet payment. kindbutton payabletrue

Accepted `values`

You can pass values to a component using options cashfree.create('componentName', options)

key	description
provider `string` Required	name of the wallet. ex `phonepe`. See all wallet provider names in the appendix
buttonText `string` OPTIONAL	Text for button, ex Google Pay for upiApp gpay
buttonIcon `bool` OPTIONAL	whether to show app icon or not
phone `string` Required	10 digit phone number of your customer

In case buttonText is not provided the value of buttonIcon would be replaced to true. This has been done so that your customer always sees icon of the app.

Returned `value`

You can get the value of a component by calling component.data().value. All returned values of component.data() can be found in the components reference

key	description
provider `string`	name of the wallet. ex `phonepe`. See all wallet provider names in the appendix
phone `string`	10 digit phone number of your customer

Example

let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let wallet = cashfree.create("wallet", {
	values: {
		provider: "phonepe",
		phone: "94140905",
		buttonText: "PhonePe",
		buttonIcon: true,
	},
});
wallet.on("loaderror", function (data) {
	console.log(data.error);
});
wallet.mount("#mount-here");
wallet.on("ready", function (d) {
	console.log(wallet.data().value); //{provide: 'phonepe', phone: '94140905'}
	//or
	//console.log(d.value)
});

All possible values of provider can be found in the wallet providers appendix

Netbanking components

Netbanking has only one component

netbanking

A component to initiate Net Banking payment. kindbutton payabletrue

Accepted `values`

You can pass values to a component using options cashfree.create('componentName', options)

key	description
netbankingBankName `string` Required	name of the bank. ex HDFCR. See list
buttonText `string` OPTIONAL	Text for button, ex Google Pay for upiApp gpay
buttonIcon `bool` OPTIONAL	whether to show app icon or not

In case buttonText is not provided the value of buttonIcon would be replaced to true. This has been done so that your customer always sees icon of the app.

Returned `value`

You can get the value of a component by calling component.data().value. All returned values of component.data() can be found in the components reference

key	description
netbankingBankName `string`	name of the bank

Example

let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let netbanking = cashfree.create("netbanking", {
	values: {
		netbankingBankName: "HDFCR",
		buttonText: "HDFC Bank",
		buttonIcon: true,
	},
});
netbanking.on("loaderror", function (data) {
	console.log(data.error);
});
netbanking.mount("#mount-here");
netbanking.on("ready", function (d) {
	console.log(netbanking.data().value); //{netbankingBankName: 'HDFCR'}
	//or
	//console.log(d.value)
});

All possible values of netbankingBankName can be found in the netbanking codes and names appendix

Paylater components

Paylater has only one component

paylater

A component to initiate paylater payment. kindbutton payabletrue

Accepted `values`

You can pass values to a component using options cashfree.create('componentName', options)

key	description
provider `string` Required	name of the wallet. ex `simpl`. See all pay later provider names in the appendix
buttonText `string` OPTIONAL	Text for button, ex Simpl
buttonIcon `bool` OPTIONAL	whether to show app icon or not
phone `string` Required	10 digit phone number of your customer

In case buttonText is not provided the value of buttonIcon would be replaced to true. This has been done so that your customer always sees icon of the app.

Returned `value`

You can get the value of a component by calling component.data().value. All returned values of component.data() can be found in the components reference

key	description
provider `string`	name of the provider. ex `simpl`. See all pay later provider names in the appendix
phone `string`	10 digit phone number of your customer

Example

let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let p = cashfree.create("paylater", {
	values: {
		provider: "simpl",
		phone: "94140905",
		buttonText: "Use Simpl",
		buttonIcon: true,
	},
});
p.on("loaderror", function (data) {
	console.log(data.error);
});
p.mount("#mount-here");
p.on("ready", function (d) {
	console.log(d.value);
});

All possible values of provider can be found in the pay later providers appendix

Cardless EMI components

Paylater has only one component

cardlessEMI

A component to initiate Cardless EMI payment. kindbutton payabletrue

Accepted `values`

You can pass values to a component using options cashfree.create('componentName', options)

key	description
provider `string` Required	name of the wallet. ex `flexmoney`. See all cardless EMI provider names in the appendix
buttonText `string` OPTIONAL	Text for button, ex Flexmoney
buttonIcon `bool` OPTIONAL	whether to show app icon or not
phone `string` Required	10 digit phone number of your customer

In case buttonText is not provided the value of buttonIcon would be replaced to true. This has been done so that your customer always sees icon of the app.

Returned `value`

You can get the value of a component by calling component.data().value. All returned values of component.data() can be found in the components reference

key	description
provider `string`	name of the provider. ex `flexmoney`. See all cardless EMI provider names in the appendix
phone `string`	10 digit phone number of your customer

Example

let cashfree = Cashfree({
	mode: "sandbox", //or production
});
let cl = cashfree.create("cardlessEMI", {
	values: {
		provider: "flexmoney",
		phone: "94140905",
		buttonText: "Flexmoney",
		buttonIcon: true,
	},
});
cl.on("loaderror", function (data) {
	console.log(data.error);
});
cl.mount("#mount-here");
cl.on("ready", function (d) {
	console.log(d.value);
});

All possible values of provider can be found in the cardless EMI providers appendix

Other components

savePaymentInstrument

A component that can be used in .pay() to save a payment method for a customer. This works for only cards. This will tokenise your card kindcheckbox payablefalse

Accepted `values`

You can pass values to a component using options cashfree.create('componentName', options)

key	description
label `string` OPTIONAL	Label for the checkbox

Returned `value`

You can get the value of a component by calling component.data().value. All returned values of component.data() can be found in the components reference

key	description
saveInstrument `bool`	does the user wants to save

​Card components

​cardNumber

​Parameters

Returned Value

​cardHolder

Accepted values

Returned value

​cardExpiry

Accepted values

Returned value

​cardCvv

Returned value

​UPI components

​upiCollect

Accepted values

Returned value

​upiApp

Accepted values

Returned value

Example

​upiQr

Accepted values

Returned value

​Wallet components

​wallet

Accepted values

Returned value

​Netbanking components

​netbanking

Accepted values

Returned value

​Paylater components

​paylater

Accepted values

Returned value

​Cardless EMI components

​cardlessEMI

Accepted values

Returned value

​Other components

​savePaymentInstrument

Accepted values

Returned value

Card components

cardNumber

Parameters

cardHolder

Accepted `values`

Returned `value`

cardExpiry

Accepted `values`

Returned `value`

cardCvv

Returned `value`

UPI components

upiCollect

Accepted `values`

Returned `value`

upiApp

Accepted `values`

Returned `value`

upiQr

Accepted `values`

Returned `value`

Wallet components

wallet

Accepted `values`

Returned `value`

Netbanking components

netbanking

Accepted `values`

Returned `value`

Paylater components

paylater

Accepted `values`

Returned `value`

Cardless EMI components

cardlessEMI

Accepted `values`

Returned `value`

Other components

savePaymentInstrument

Accepted `values`

Returned `value`