> ## Documentation Index
> Fetch the complete documentation index at: https://telr-docs.cashfree.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 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
name of the wallet. ex `phonepe`. All names [here]().
name of the wallet. ex `phonepe`. All names [here]().
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 [here](/payments/online/element/components)
name of the wallet. ex `phonepe`
10 digit phone number of your customer
```javascript theme={null}
let cashfree = Telr({
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. All names [here]().
Text for button. ex `phonepe`. All names [here]().
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 [here](/payments/online/element/components)
name of the bank
```javascript theme={null}
let cashfree = Telr({
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. All names [here]().
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 [here](/payments/online/element/components)
name of the wallet
10 digit phone number
```javascript theme={null}
let cashfree = Telr({
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. ex flexmoney
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 [here](/payments/online/element/components)
name of the provider
10 digit phone number
```javascript theme={null}
let cashfree = Telr({
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 [here](/payments/online/element/components)
does the user wants to save
```javascript theme={null}
let saveOptions = {
values: {
label: "Save Card for later"
}
};
let savecard = cashfree.create("savePaymentInstrument", saveOptions);
savecard.mount("#div-id");
let cashfree = Telr();
.....
cashfree.pay({
...
savePaymentInstrument: savecard
})
```
```
```