Skip to main content
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 in the components reference
​
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 in the components reference
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 in the components reference
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 in the components reference
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 in the components reference
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 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)
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
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
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 in the components reference
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. See all wallet provider names in the appendix
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 in the components reference
keydescription
provider stringname of the wallet. ex phonepe. See all wallet provider names in the appendix
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 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)
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 in the components reference
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 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)
keydescription
provider string Requiredname of the wallet. ex simpl. See all pay later provider names in the appendix
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 in the components reference
keydescription
provider stringname of the provider. ex simpl. See all pay later provider names in the appendix
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 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)
keydescription
provider string Requiredname of the wallet. ex flexmoney. See all cardless EMI provider names in the appendix
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 in the components reference
keydescription
provider stringname of the provider. ex flexmoney. See all cardless EMI provider names in the appendix
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 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)
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 in the components reference
keydescription
saveInstrument booldoes the user wants to save