How to integrate Google pay UPI payment with react native
In this smartphone era, most users trust Google Pay UPI payment because everybody doesn’t want to share or remember 16 digit numbers of cards and pin. That’s why, according to security purposes Google pay is the best app for instant payment. As per the increase in the demand for Google pay, all eCommerce mobile applications want to integrate Google pay UPI so users can pay easily without any hassle. So, today with help of this article describing how we can integrate Google pay UPI payment in react native mobile application so let’s begin:
In my experience, there are very limited resources on the internet for react native apps. So I am sharing how we can integrate it with a simple method. I have done this job with the help of react-native-upi-pay.
This library will accept googlepay, phonepe and paytm UPI payments. so you can use them if you needs them.
For installation you need to run this command in your terminal
1 |
npm i react-native-upi-pay |
and then link to react-native app with this command
1 |
react-native link react-native-upi-pay |
Now this plugin is ready for use. You can add this code in your component like that.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import React, {Component} from 'react'; import {View,Text,Button} from 'react-native'; import RNUpiPayment from 'react-native-upi-pay'; /* npm install react-native-upi-pay react-native link */ export default class Upipayment extends Component{ constructor(props){ super(); this.state={ Status:"", txnId:"", GOOGLE_PAY:'GOOGLE_PAY', PHONEPE:'PHONEPE', PAYTM:'PAYTM', message:"" } } successCallback(data) { console.log("success", data); } failureCallback(data) { console.log("fail", data); } floo = (paymentApp)=>{ RNUpiPayment.initializePayment({ vpa: 'something@bank', //your upi address like 12345464896@okhdfcbank payeeName: ' abc', // payee name amount: '1', //amount transactionNote:'Testing Upi', //note of transaction transactionRef: 'aasf-332-aoei-fn' //some refs to aknowledge the transaction },this.successCallback, this.failureCallback); } render(){ return ( <View style={{alignItems:"center",justifyContent:"center",flex:1}}> <View style={{flexDirection:'row',padding:5}}> <Button title="Google pay" onPress={() => {this.floo(this.state.GOOGLE_PAY)}} /> <Button title="Phone pe" onPress={() => {this.floo(this.state.PHONEPE)}} /> <Button title="PAYTM" onPress={() => {this.floo(this.state.PAYTM)}} /> </View> <Text>{this.state.Status+" "+this.state.txnId}</Text> <Text>{this.state.message}</Text> </View> ); } } |
After hit this code you can see UPI payment apps show in popup and redirecting after click on google pay icon.
This code return success and failure status for show the messages. The result will show in your terminal like that.