How to build a UPI app with React Native?

With the increase of digital transactions 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 React Native app development company

can use React Native framework to build such UPI apps.

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.

However, first, we need to check the prerequisite learnings.

Prerequisite knowledge

1. The first and foremost thing that you need to learn is ‘How to set up the React Native environment’. 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 linked article.
2. The next thing that you should have a fair knowledge of is ‘How to create and run React Native app on an Android phone’.

Now, let’s learn more about the React Native components and third-party packages used for the current project.

Considered React Native components and third-party packages

• 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 ‘react’. It holds the initial state and is also used to show updates to a state variable.
• 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.
• StyleSheet- It is a styling component used in React Native. With this component, you can give margins and set definite fonts and font sizes.
• 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.

Understanding the code snippets in the App.js folder

import React, {useState} from 'react';
import {View, StyleSheet} from 'react-native';
import {Header, Button} from 'react-native-elements';
import {TextInput} from 'react-native-paper';
import RNUpiPayment from 'react-native-upi-pay';

As you can notice, this syntax is about importing React Native components from the libraries. You have to import React and useState from ‘react’; View and StyleSheet from ‘react-native’; Header and Button from ‘react-native-elements’; TextInput from ‘react-native-paper’ and RNupiPayment from ‘react-native-upi-pay’.

const App = () => {
  const [vpa, setVpa] = useState('');
  const [payeeName, setPayeeName] = useState('');
  const [amount, setAmount] = useState(1);
  const [transactionRef, setTransactionRef] = useState('');
  const [transactionNote, setTransactionNote] = useState('');

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.

  console.log('vpa>>>>>>>', vpa);
  console.log('payeeName>>>>>>>', payeeName);
  console.log('amount>>>>>>>>', amount);
  console.log('transactionRef>>>>>>>>>>>>>>>', transactionRef);
  console.log('transactionNote>>>>>>>>>>', transactionNote);
 
Here, console.log() is used to print vpa>>>>>>>, payeeName>>>>>>>, transactionRef>>>>>>>>>>>>>>>, amount>>>>>>>> and transactionNote>>>>>>>>>>.

In simple terms, it is a console.log statement. It prints the value of the chosen variable to the console.

const payMoney = () => {
    RNUpiPayment.initializePayment(
      {
        vpa, // or can be john@ybl or mobileNo@upi
        payeeName,
        amount,
        transactionRef,
        transactionNote,
      },

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

Moving forward, you have to give the output of whether the payment was successful or not.

So, for this, use console.log().
 
      () => {
        console.log('success>>>>>>>>>>>');
      },
      err => {
        console.log('err>>>>>>>', err);
      },
    );
  };

Here, if the payment is successful, it will print success and if it faces any glitch, it will log an error.

return (
    <View>
      <Header
        style={styles.header}
        leftComponent={{icon: 'menu', color: '#fff'}}
        centerComponent={{
          text: 'NC PAY',
          style: {color: '#fff', marginTop: 5},
        }}
        rightComponent={{icon: 'home', color: '#fff'}}

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.

The syntax defines the header and the styling parameters attached to it. The leftComponent has an icon of ‘menu’, centerComponent has a text element ‘NC PAY’ and the rightComponent has a ‘home’ icon.

Note that, for these icons, you have to install the package react-native-vector-icions and store it in your package.json folder.

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.

      <View style={styles.container}>
 
        <TextInput
          mode="outlined"
          label="VPA ID"
          onChangeText={value => setVpa(value)}
        />
 
        <TextInput
          mode="outlined"
          label="Payee Name"
          onChangeText={value => setPayeeName(value)}
        />
 
        <TextInput
          mode="outlined"
          label="Amount"
          onChangeText={value => setAmount(value)}
        />
 
        <TextInput
          mode="outlined"
          label="Transaction Reference"
          onChangeText={value => setTransactionRef(value)}
        />
 
        <TextInput
          mode="outlined"
          label="Transaction Note"
          onChangeText={value => setTransactionNote(value)}
        />
 
      </View>

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.

Now, you need to add another button below these five labels. You can add the button using the below-given syntax.

      <View style={styles.btnStlye}>
        <Button title="Pay Now" onPress={payMoney} />
      </View>
    </View>
  );
};

The Button will have the title “Pay Now”. Also, use an onPress prop to call the payMoney function and initializePayment.

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.

const styles = StyleSheet.create({
  header: {
    marginTop: 30,
  },
 
  container: {
    justifyContent: 'center',
    marginTop: 130,
    marginLeft: 20,
    marginRight: 20,
  },
 
  btnStlye: {
    marginTop: 20,
    marginLeft: 20,
    marginRight: 20,
  },
});

It uses the styling parameters of marginTop, marginLeft, marginRight, and justifyContent.

You have to close the codebase by adding the line export default App; This is a way to export the App function.

Steps to test the app on the virtual device

1. Go to the command prompt on your system and pass npm install. This is for getting the package.
2. 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.

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.

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.

So get started now.