How to integrate Google pay UPI payment with react native

By Mr. Rahul February 8, 2022 React Native 0 Comments

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

npm i react-native-upi-pay

1	npm i react-native-upi-pay

and then link to react-native app with this command

react-native link react-native-upi-pay

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.

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>
        );
    }
}

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 (

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

Total views : 644

About Author

@rahul

Website designer, Full stack developer, Blogger with 10+ years of experience.

FineTricks.com

How to integrate Google pay UPI payment with react native

About Author

@rahul

Add a Comment

Related Posts

About Author

@rahul

Add a Comment