Wallets, Net banking and BNPL components

Learn to create components for Wallets, Net banking and BNPL.

wallet

A component to show a UPI qr code

wallet · Wallet Object

Show properties

provider · string · required

name of the wallet. ex phonepe. All names here.

buttonText · string

name of the wallet. ex phonepe. All names here.

buttonIcon · boolean

Decide whether to show app icon or not

phone · string

10 digit phone number of your customer

wallet · Wallet Object

Show properties

provider · string

name of the wallet. ex phonepe

phone · string · required

10 digit phone number of your customer

Code snippet for wallet component

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

netbanking

A component to initiate Net Banking payment.

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.

netbanking · Wallet Object

Show properties

netbankingBankName · string · required

name of the bank. ex HDFC. All names here.

buttonText · string

Text for button. ex phonepe. All names here.

buttonIcon · boolean

Decide whether to show app icon or not

netbanking · Netbanking Object

Show properties

netbankingBankName · string

name of the bank

Code snippet for wallet component

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

paylater

A component to initiate paylater payment.

paylater · Paylater Object

Show properties

provider · string · required

name of the wallet. ex simpl. All names here.

buttonText · string

Text for button, ex Simpl.

buttonIcon · boolean

Decide whether to show app icon or not

phone · string · required

10 digit phone number of your customer

paylater · Paylater Object

Show properties

provider · string

name of the wallet

phone · string

10 digit phone number

Code snippet for paylater component

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

cardlessEMI

A component to initiate Cardless EMI payment.

cardlessemi · Cardless EMI Object

Show properties

provider · string · required

name of the wallet. ex flexmoney

buttonText · string

Text for button, ex Flexmoney

buttonIcon · boolean

Decide whether to show app icon or not

phone · string · required

10 digit phone number of your customer

cardlessemi · Cardless EMI Object

Show properties

provider · string

name of the provider

phone · string

10 digit phone number

Code snippet for paylater component

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

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

savePaymentInstrument · Save Payment Instrument Object

Show properties

label · string

Label for the checkbox

savePaymentInstrument · Save Payment Instrument Object

Show properties

saveInstrument · string

does the user wants to save

Code snippet for savePaymentInstrument component

let saveOptions = {
	values: {
		label: "Save Card for later"
	}
};
let savecard = cashfree.create("savePaymentInstrument", saveOptions);
savecard.mount("#div-id");

let cashfree = Cashfree();
.....
cashfree.pay({
...
savePaymentInstrument: savecard
})