> ## 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.

# UPI Component

> Use the UPI Component to collect UPI information from the customer

There are three UPI components as listed below:

## upiCollect

A component to accept user's vpa/upi id

<ResponseField name="upiCollect" type="UPI Collect Object">
  <Expandable title="properties">
    <ParamField body="placeholder" type="string" optional>
      placeholder for enter vpa field
    </ParamField>

    <ParamField body="upiId" type="string" optional>
      vpa/upi id of the customer
    </ParamField>
  </Expandable>
</ResponseField>

<h4>Returned Value</h4>
You can get the value of a component by calling `component.data().value`. All returned
values of `component.data()` can be found [here](/component-overview#get-component-data)

<ResponseField name="upiCollect" type="UPI Collect Object">
  <Expandable title="properties">
    <ResponseField name="upiId" type="string">
      vpa/upi id of the customer
    </ResponseField>
  </Expandable>
</ResponseField>

<Accordion title="Code snippet for upiCollect component">
  ```js theme={null}
  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) 
  });
  ```
</Accordion>

## 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

<Warning>
  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
</Warning>

<ResponseField name="upiApp" type="UPI App Object">
  <Expandable title="properties">
    <ParamField body="upiApp" type="string" required>
      name of the upi app
    </ParamField>

    <ParamField body="buttonText" type="string" optional>
      Text for button, ex Google Pay for upiApp gpay
    </ParamField>

    <ParamField body="buttonIcon" type="bool" optional>
      Indicate whether to show the app icon or not
    </ParamField>
  </Expandable>
</ResponseField>

<h4>Returned Value</h4>
You can get the value of a component by calling `component.data().value`. All returned
values of `component.data()` can be found [here](/component-overview#get-component-data)

<ResponseField name="upiApp" type="UPI App Object">
  <Expandable title="properties">
    <ResponseField name="upiApp" type="string">
      name of the upi app
    </ResponseField>
  </Expandable>
</ResponseField>

<Accordion title="Code snippet for the upiApp component">
  ```javascript theme={null}
  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) 
  });
  ```
</Accordion>

## upiQr

A component to show a UPI qr code

<ResponseField name="upiQr" type="UPI QR Object">
  <Expandable title="properties">
    <ParamField body="size" type="string" required>
      size of the qr code. ex "220px"
    </ParamField>
  </Expandable>
</ResponseField>

<h4>Returned Value</h4>
You can get the value of a component by calling `component.data().value`. All returned
values of `component.data()` can be found [here](/component-overview#get-component-data)

<ResponseField name="upiQr" type="UPI QR Object">
  <Expandable title="properties">
    <ResponseField name="size" type="string">
      size of the qr code. ex "220px"
    </ResponseField>
  </Expandable>
</ResponseField>

<Accordion title="Code snippet for upiQr component">
  ```javascript theme={null}
  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) 
  })
  ```
</Accordion>