> ## Documentation Index
> Fetch the complete documentation index at: https://www.cashfree.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Wallets, Net Banking and BNPL Components
> Add Cashfree.js components for wallets, netbanking, BNPL, and UPI QR codes to your custom checkout to support diverse payment methods on a single page.
## wallet
A component to show a UPI qr code
name of the wallet. ex `phonepe`. See [all wallet names in the appendix](/payments/online/element/appendix#wallet-providers).
name of the wallet. ex `phonepe`.
Decide whether to show app icon or not
10 digit phone number 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](/payments/online/element/components).
name of the wallet. ex `PhonePe`
10 digit phone number of your customer
```javascript theme={"dark"}
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.
name of the bank. ex HDFC. See [all bank names in the appendix](/payments/online/element/appendix#netbanking-code-and-names).
Text for button. ex `HDFC Bank`.
Decide whether to show app icon or not
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](/payments/online/element/components)
name of the bank
```javascript theme={"dark"}
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.
name of the wallet. ex simpl. See [all pay later provider names in the appendix](/payments/online/element/appendix#paylater-providers).
Text for button, ex `Simpl`.
Decide whether to show app icon or not
10 digit phone number 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](/payments/online/element/components)
name of the wallet
10 digit phone number
```javascript theme={"dark"}
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.
name of the wallet. Example- flexmoney. See [all cardless EMI provider names in the appendix](/payments/online/element/appendix#cardless-emi-providers)
Text for button, ex `Flexmoney`
Decide whether to show app icon or not
10 digit phone number 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](/payments/online/element/components)
name of the provider
10 digit phone number
```javascript theme={"dark"}
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
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 in the [components reference](/payments/online/element/components)
does the user wants to save
```javascript theme={"dark"}
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
})
```