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

​
cardNumber
Card Number Object

Returned Value

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

​
cardNumber
Card Number Object
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)

keydescription
placeholder string OPTIONALplaceholder for your card number field
cardHolder string OPTIONALname 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 here

keydescription
cardHolder stringname 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 here

keydescription
cardExpiry stringcard 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 here

keydescription
cardCvv numbercard 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)

keydescription
placeholder string OPTIONALplaceholder for enter vpa field
upiId string OPTIONALvpa/ 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 here

keydescription
upiId stringvpa/ 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 Andoird. 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)

keydescription
upiApp string Requiredname of the upi app
buttonText string OPTIONALText for button, ex Google Pay for upiApp gpay
buttonIcon bool OPTIONALwhether to show app icon or not

Available options for upiApp are here

In case bttonText 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 here

keydescription
upiAppname 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)

keydescription
size string requiredsize 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 here

keydescription
size stringsize 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)

keydescription
provider string Requiredname of the wallet. ex phonepe. All names here
buttonText string OPTIONALText for button, ex Google Pay for upiApp gpay
buttonIcon bool OPTIONALwhether to show app icon or not
phone string Required10 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 here

keydescription
provider stringname of the wallet. ex phonepe. All names here
phone string10 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 here

​
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)

keydescription
netbankingBankName string Requiredname of the bank. ex HDFCR. See list
buttonText string OPTIONALText for button, ex Google Pay for upiApp gpay
buttonIcon bool OPTIONALwhether 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 here

keydescription
netbankingBankName stringname 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 here

​
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)

keydescription
provider string Requiredname of the wallet. ex simpl. All names here
buttonText string OPTIONALText for button, ex Simpl
buttonIcon bool OPTIONALwhether to show app icon or not
phone string Required10 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 here

keydescription
provider stringname of the provider. ex simpl. All names here
phone string10 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 here

​
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)

keydescription
provider string Requiredname of the wallet. ex flexmoney. All names here
buttonText string OPTIONALText for button, ex Flexmoney
buttonIcon bool OPTIONALwhether to show app icon or not
phone string Required10 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 here

keydescription
provider stringname of the provider. ex flexmoney. All names here
phone string10 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 here

​
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 tokenize your card

kindcheckbox payablefalse
Accepted values

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

keydescription
label string OPTIONALLabel 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 here

keydescription
saveInstrument booldoes the user wants to save

Was this page helpful?