Components

Learn about the components which are available with Cashfree.js

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

Show properties

placeholder · string

placeholder for your card number field

hideBrandIcon · boolean · default: "false"

hide brand icons, default is false

cardNumber · Card Number Object

Show properties

brand · string

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

cvvLength · 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 here

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 here

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 here

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 here

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

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

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

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 here

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. All names here
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 here

key	description
provider string	name of the wallet. ex phonepe. All names here
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 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)

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 here

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

key	description
provider string Required	name of the wallet. ex simpl. All names here
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 here

key	description
provider string	name of the provider. ex simpl. All names here
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 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)

key	description
provider string Required	name of the wallet. ex flexmoney. All names here
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 here

key	description
provider string	name of the provider. ex flexmoney. All names here
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 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)

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 here

key	description
saveInstrument bool	does the user wants to save