{"id":6851,"date":"2022-12-26T12:33:46","date_gmt":"2022-12-26T12:33:46","guid":{"rendered":"https:\/\/www.ardorsys.com\/blog\/?p=6851"},"modified":"2023-05-09T13:32:33","modified_gmt":"2023-05-09T13:32:33","slug":"how-to-build-a-upi-app-with-react-native","status":"publish","type":"post","link":"https:\/\/www.ardorsys.com\/blog\/how-to-build-a-upi-app-with-react-native\/","title":{"rendered":"How to build a UPI app with React Native?"},"content":{"rendered":"<p>With the <a href=\"https:\/\/www.ardorsys.com\/blog\/top-emerging-technologies-to-enhance-your-business-in-2023\/\">increase of digital transactions<\/a> across the economy, the demand for the use of UPI is growing as well. One of the primary reasons for emphasizing the surge in the use of UPI apps is that developers of <a href=\"https:\/\/www.4waytechnologies.com\/react-native-app-development\" rel=\"nofollow\"><strong>React Native app development company <\/strong><\/a><\/p>\n<p>can use React Native framework to build such UPI apps.<\/p>\n<p>Here, in this tutorial blog, you will learn about the codebase and third-party React Native package used for creating the UPI app. For a better understanding, I will explain the code syntaxes stored in the App.js folder.<\/p>\n<p>However, first, we need to check the prerequisite learnings.<\/p>\n<h4>Prerequisite knowledge<\/h4>\n<ol>\n<li>The first and foremost thing that you need to learn is \u2018How to set up the React Native environment\u2019. You have to get software such as a Virtual device or emulator, Node.js, and others. Find all the software and dependencies that you need to install in your dev system from the attached article. Also, get step-by-step guidance from the <a href=\"https:\/\/www.4waytechnologies.com\/blog\/how-to-set-up-the-react-native-development-environment\" rel=\"nofollow \">linked article<\/a>.<\/li>\n<li>The next thing that you should have a fair knowledge of is \u2018<a href=\"https:\/\/www.4waytechnologies.com\/blog\/how-to-create-and-run-react-native-app-on-android-phone\" rel=\"nofollow \">How to create and run React Native app on an Android phone<\/a>\u2019.<\/li>\n<\/ol>\n<p>Now, let&#8217;s learn more about the React Native components and third-party packages used for the current project.<\/p>\n<h4>Considered React Native components and third-party packages<\/h4>\n<ul>\n<li>useState- It is a React Native hook. You can use it to set the initial state of a variable. It is used in function components. Before using the useState in the codebase, you have to import it from \u2018react\u2019. It holds the initial state and is also used to show updates to a state variable.<\/li>\n<li>log()- It is one of the most important functions that you use in your codebase using which you can log a definite message on the console.<\/li>\n<li>StyleSheet- It is a styling component <a href=\"https:\/\/www.ardorsys.com\/blog\/what-are-the-main-features-of-react-native-for-mobile-app-development\/\">used in React Native<\/a>. With this component, you can give margins and set definite fonts and font sizes.<\/li>\n<li>React-native-upi-pay- It is a third-party React Native library. You can easily get the UPI pay interface by installing this package and store in your app directory.<\/li>\n<\/ul>\n<h4>Understanding the code snippets in the App.js folder<\/h4>\n<pre lang=\"javascript\" escaped=\"true\">import React, {useState} from 'react';\r\nimport {View, StyleSheet} from 'react-native';\r\nimport {Header, Button} from 'react-native-elements';\r\nimport {TextInput} from 'react-native-paper';\r\nimport RNUpiPayment from 'react-native-upi-pay';<\/pre>\n<p>As you can notice, this syntax is about importing React Native components from the libraries. You have to import React and useState from \u2018react\u2019; View and StyleSheet from \u2018react-native\u2019; Header and Button from \u2018react-native-elements\u2019; TextInput from \u2018react-native-paper\u2019 and RNupiPayment from \u2018react-native-upi-pay\u2019.<\/p>\n<pre lang=\"javascript\">const App = () =&gt; {\r\n  const [vpa, setVpa] = useState('');\r\n  const [payeeName, setPayeeName] = useState('');\r\n  const [amount, setAmount] = useState(1);\r\n  const [transactionRef, setTransactionRef] = useState('');\r\n\u00a0 const [transactionNote, setTransactionNote] = useState('');<\/pre>\n<p>Here, you need to introduce a function App under which you will use the useState hook to track the state of vpa, payeeName, amount, transactionRef and transcationNote. Further, setVpa, setPayeeName, setAmount, setTransactionRef, and setTranscationNote are used to update the value of the respective variable.<\/p>\n<pre lang=\"javascript\" escaped=\"true\">  console.log('vpa&gt;&gt;&gt;&gt;&gt;&gt;&gt;', vpa);\r\n  console.log('payeeName&gt;&gt;&gt;&gt;&gt;&gt;&gt;', payeeName);\r\n  console.log('amount&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;', amount);\r\n  console.log('transactionRef&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;', transactionRef);\r\n\u00a0 console.log('transactionNote&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;', transactionNote);\r\n\r\nHere, console.log() is used to print vpa&gt;&gt;&gt;&gt;&gt;&gt;&gt;, payeeName&gt;&gt;&gt;&gt;&gt;&gt;&gt;, transactionRef&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;, amount&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; and transactionNote&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;.<\/pre>\n<p>In simple terms, it is a console.log statement. It prints the value of the chosen variable to the console.<\/p>\n<pre lang=\"javascript\">const payMoney = () =&gt; {\r\n \u00a0\u00a0 RNUpiPayment.initializePayment(\r\n \u00a0\u00a0\u00a0\u00a0 {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 vpa, \/\/ or can be john@ybl or mobileNo@upi\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 payeeName,\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 amount,\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transactionRef,\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transactionNote,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 },<\/pre>\n<p>Here, you specify a function payMoney. It takes an object and considers it as an argument. The function further calls another method initializePayment.It is a part of the RNUpiPayment library. As you can notice, there are two parameters included under initializePaymnet. One is the callback function and the other is an object.\u00a0 You can call the second parameter after the payment is done. However, the first parameters hold the necessary information for executing a payment like vpa, transcationRef, transcationNote, amount, and payeeName.<\/p>\n<p>Moving forward, you have to give the output of whether the payment was successful or not.<\/p>\n<pre lang=\"javascript\" escaped=\"true\">So, for this, use console.log().\r\n\r\n \u00a0\u00a0\u00a0\u00a0 () =&gt; {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log('success&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;');\r\n \u00a0\u00a0\u00a0\u00a0 },\r\n \u00a0\u00a0\u00a0\u00a0 err =&gt; {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log('err&gt;&gt;&gt;&gt;&gt;&gt;&gt;', err);\r\n \u00a0\u00a0\u00a0\u00a0 },\r\n \u00a0\u00a0 );\r\n\u00a0 };<\/pre>\n<p>Here, if the payment is successful, it will print success and if it faces any glitch, it will log an error.<\/p>\n<pre lang=\"javascript\" escaped=\"true\">return (\r\n \u00a0\u00a0 &lt;View&gt;\r\n \u00a0\u00a0\u00a0\u00a0 &lt;Header\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 style={styles.header}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 leftComponent={{icon: 'menu', color: '#fff'}}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 centerComponent={{\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 text: 'NC PAY',\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 style: {color: '#fff', marginTop: 5},\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 rightComponent={{icon: 'home', color: '#fff'}}<\/pre>\n<p>Now, you have to get the UI of the app. First, you have to use the return() and wrap the other component under the return() function.<\/p>\n<p>The syntax defines the header and the styling parameters attached to it. The leftComponent has an icon of \u2018menu\u2019, centerComponent has a text element \u2018NC PAY\u2019 and the rightComponent has a \u2018home\u2019 icon.<\/p>\n<p>Note that, for these icons, you have to install the package react-native-vector-icions and store it in your package.json folder.<\/p>\n<p>Now, you have to introduce elements in the main Container of the app, i.e., on the main app screen. Refer to the following syntax.<\/p>\n<pre lang=\"javascript\" escaped=\"true\">\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;View style={styles.container}&gt;\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;TextInput\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 mode=\"outlined\"\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 label=\"VPA ID\"\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 onChangeText={value =&gt; setVpa(value)}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/&gt;\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;TextInput\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 mode=\"outlined\"\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 label=\"Payee Name\"\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 onChangeText={value =&gt; setPayeeName(value)}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/&gt;\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;TextInput\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 mode=\"outlined\"\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 label=\"Amount\"\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 onChangeText={value =&gt; setAmount(value)}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/&gt;\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;TextInput\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 mode=\"outlined\"\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 label=\"Transaction Reference\"\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 onChangeText={value =&gt; setTransactionRef(value)}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/&gt;\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;TextInput\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 mode=\"outlined\"\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 label=\"Transaction Note\"\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 onChangeText={value =&gt; setTransactionNote(value)}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/View&gt;<\/pre>\n<p>Here, I have added five labels: VPA ID, Payee Name, Amount, Transaction Reference, and Transaction Note. you need to hold all these five labels under a separate TextInput component. Also, I used an onChangeText prop for each of these labels. As the user will click on each box, it will display a text, for example, setVpa, as in asking the user to provide their VPA ID. This will be specific for each label.<\/p>\n<p>&nbsp;<\/p>\n<p>Now, you need to add another button below these five labels. You can add the button using the below-given syntax.<\/p>\n<pre lang=\"javascript\" escaped=\"true\"> \u00a0\u00a0\u00a0\u00a0 &lt;View style={styles.btnStlye}&gt;\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;Button title=\"Pay Now\" onPress={payMoney} \/&gt;\r\n \u00a0\u00a0\u00a0\u00a0 &lt;\/View&gt;\r\n \u00a0\u00a0 &lt;\/View&gt;\r\n  );\r\n};<\/pre>\n<p>The Button will have the title \u201cPay Now\u201d. Also, use an onPress prop to call the payMoney function and initializePayment.<\/p>\n<p>Lastly, you have to use StyleSheet to style the app. The code syntax that I have used for styling the header, container, and btnStyle is given below.<\/p>\n<pre lang=\"javascript\" escaped=\"true\">const styles = StyleSheet.create({\r\n  header: {\r\n \u00a0\u00a0 marginTop: 30,\r\n\u00a0 },\r\n\r\n  container: {\r\n \u00a0\u00a0 justifyContent: 'center',\r\n \u00a0\u00a0 marginTop: 130,\r\n \u00a0\u00a0 marginLeft: 20,\r\n \u00a0\u00a0 marginRight: 20,\r\n\u00a0 },\r\n\r\n  btnStlye: {\r\n \u00a0\u00a0 marginTop: 20,\r\n \u00a0\u00a0 marginLeft: 20,\r\n \u00a0\u00a0 marginRight: 20,\r\n\u00a0 },\r\n});<\/pre>\n<p>It uses the styling parameters of marginTop, marginLeft, marginRight, and justifyContent.<\/p>\n<p>You have to close the codebase by adding the line export default App; This is a way to export the App function.<\/p>\n<h4>Steps to test the app on the virtual device<\/h4>\n<ol>\n<li>Go to the command prompt on your system and pass npm install. This is for getting the package.<\/li>\n<li>After the step is done, you have to pass another command: npx react-native run-android. This is for the emulator to activate. As the emulator starts, you will get a screen similar shown in the below-provided image. Note that it may take time to bundle.<\/li>\n<\/ol>\n<p><img  loading=\"lazy\"  decoding=\"async\"  class=\"aligncenter size-full wp-image-6856 pk-lazyload\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUUAAAJBAQMAAADrwzWVAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAC1JREFUeNrtwQEBAAAAgiD\/r25IQAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8GVeqgABUMqJTAAAAABJRU5ErkJggg==\"  alt=\"\"  width=\"325\"  height=\"577\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 325px) 100vw, 325px\"  data-pk-src=\"https:\/\/www.ardorsys.com\/blog\/wp-content\/uploads\/2022\/12\/test-app.png\"  data-pk-srcset=\"https:\/\/avfockc25ltq.cdn.shift8web.com\/blog\/wp-content\/uploads\/2022\/12\/test-app.png 325w, https:\/\/avfockc25ltq.cdn.shift8web.com\/blog\/wp-content\/uploads\/2022\/12\/test-app-169x300.png 169w\" ><\/p>\n<p>You see that running the app on an emulator does not take any effort. All you need to run two commands and it is done.<\/p>\n<p>The major challenge that you may face is creating the codebase. However, I have got you covered with the detailed logic behind each code syntax.<\/p>\n<p>So <a href=\"https:\/\/www.ardorsys.com\/quote-us\/\">get started now<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"With the increase of digital transactions across the economy, the demand for the use of UPI is growing&hellip;\n","protected":false},"author":1,"featured_media":6859,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,62],"tags":[63],"class_list":{"0":"post-6851","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-mobile","8":"category-react","9":"tag-react-native"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/posts\/6851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/comments?post=6851"}],"version-history":[{"count":1,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/posts\/6851\/revisions"}],"predecessor-version":[{"id":7151,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/posts\/6851\/revisions\/7151"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/media\/6859"}],"wp:attachment":[{"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/media?parent=6851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/categories?post=6851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/tags?post=6851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}