Google Pay with React Native

November 11, 2021 Publish By : EXPERT APP DEVS 4 min read Viewed By : 189
integrate google pay in react native app

Google pay introduction -

In this tutorial, I am going to explain to you “What is google pay”, I think you must be aware about google pay.

google pay with react native

It’s a very good way to pay, and in today’s era we all prefer digital transactions in place of cash pay, so here we see how we use google pay in react native app.

Google pay popularity -

In recent years we see that google pay has gained a lot of popularity and it gives the new standard to payment through mobile apps.
It also provides very fast and simple checkout and easy access to rewards and offers too.

It also makes payment safer and easier for anyone.
You can book anything using google pay and pay it faster.

Users are attracted to google pay more just because it has a very simple process of paying and it gains the user trust a lot.

Google pay in native-

Paying using android pay is simple because the kotlin and java document for android pay is very documented and understandable, native developers do not face much issue to implementing the android pay in native.

But in react native it has some issues because it doesn't have many javascript libraries and well documented processes.

So we have some third party libraries by using which you will be able to implement the google pay in react native following are the libraries.

  • React-native-gpay
  • React-native-google-pay

Above are the libraries by using which you can implement the android pay in react native app. 

So let’s start the process of implementing these libraries

React-native-gpay -

I am preferring to use react native g-pay because it has very clear documentation and it provides a git repo and that repo is awesome. Anyone can easily understand each step and implement those steps in a very simple way.

In the git page you find the exact steps of how we install the npm package and implement that and it also provides the way how you can add them in ios and android too.

And here you get all the differences between android and iOS, so that you cannot face any trouble regarding figuring out the difference.

And if you want to accept the payment through the credit card it has also built in support for multiple payment gateway accepting like - stripe and braintree etc.

How to integrate Google Pay in React Native using react-native-gpay - 

Here we are going to describe the process of how we install, import and set up gpay in our app, so let’s start.

Step 1-  Create a project

First we need to create a new project, run the following command for creating the project .

react-native init ReactNativeGooglePay

Step 2 -  Run the server

Now you need to go to the path and run the server 

Npm start

Step 3 -  Install plugin

Now you need to install the plugin for accessing the gpay. 

npm install --save react-native-gpay

Step 4 -  Link plugin

Now you need to link the plugin for accessing the gpay and if you have the latest version then skip this step.

react-native link react-native-gpay

Step 5 -  Import plugin

Now you need to import the plugin for accessing the gpay in your file.

import RNGpay from 'react-native-gpay';

Step 6 -  Implement the plugin

Here we are going to do the final step of this tutorial implementing the google pay in your app. 

const paymentRequest = {

cardPaymentMethodMap: {

gateway: {

  name: 'GATEWAY_NAME', // Identify your gateway and your app's

  merchantId: '055XXXXXXXXXXXXX336',  // YOUR_GATEWAY_MERCHANT_ID

  clientKey: 'sandbox_XXXXXXXXXXXXndxm44jw',

  sdkVersion: 'client.VERSION

},

cardNetworks

},

transaction: {

totalPrice: '50',

totalPriceStatus: 'FINAL', // PAYMENT AMOUNT STATUS

currencyCode: 'USD' // CURRENCY CODE

},

merchantName: 'XXXXXXXXXXXX'  // MERCHANT NAME Information about the merchant requesting payment information

}

Here you use your key.

I hope you like the tutorial, if you have any query please feel free to ask.
Note - reference:
https://www.npmjs.com/package/react-native-google-pay 
https://www.npmjs.com/package/react-native-gpay 

Happy coding.
 

Need a consultation?

Drop us a line! We are here to answer your questions 24/7.