Product Documentation
Create Account📁 Change LogsContact Sales

Available Components

Suggest Edits

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. In the below HTML you can see an empty div with id mount-here where we will mount our components as an example

<html>
	<head>
		<title>My App</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body >
		<div id="mount-here"></div>
		<script src="https://sdk.cashfree.com.com/js/v3/cashfree.js"></script>
	</body>
</html>

Card components

There are four card components as listed below -

cardNumber

A component to accept card number

kindinput payabletrue dependenciescardExpiry, cardHolder, cardCvv

Accepted values

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

keydescription
placeholder string OPTIONALplaceholder for your card number field
hideBrandIcon bool OPTIONALhide 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 here

keydescription
brand stringcontains the brand of the card visa, amex, mastercard, rupay
cvvLength stringcontains the cvv length for the given brand eg 4 for amex

Example

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

Example of card

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

Important
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

Note
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

Note
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

Note
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

Note
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

Note
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

Check how to use here

Subscribe to Developer Updates

Updated 4 months ago

What’s Next