There are three UPI components as listed below:
upiCollect A component to accept user’s vpa/upi id
placeholder for enter vpa field
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
vpa/upi id of the customer
Code snippet for upiCollect component
let cashfree = Telr ({ 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
Component will not mount on custom webview/inappbrowser Android. It will
however mount in popular apps like Facebook, Instagram, Twitter. However,
since iOS handles intent differently than android it will always mount in iOS
Text for button, ex Google Pay for upiApp gpay
Indicate whether to show the 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
Code snippet for the upiApp component
let cashfree = Telr ({ 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) }); upiQr A component to show a UPI qr code
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
size of the qr code. ex “220px”
Code snippet for upiQr component
let cashfree = Telr ({ 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) }) 