Integrating Paypal in your react native app

Aditya Singh

If you haven’t created a paypal sandbox account, make sure you do that by heading over to: https://developer.paypal.com/developer/accounts/

We will be creating two sandbox accounts:

  1. Paypal Merchant Account: Used to accept payment from the end user.
  2. Paypal Personal Account: Used to make payment to the merchant account.

Next, we need to create a REST API app at paypal that will be used to setup paypal at our backend. Make sure you select the paypal merchant account you created above while creating the REST app. Got your client id and secret? Good, it is now time to code.

Finding it hard to follow up? I have also put up a 2 part series on youtube. Skip it, if you prefer reading.

Still here? Great!

We will start by creating backend for our app.

I am using Express.js to code our backend. But if you’re using different backend, make sure you follow logic behind how the backend needs to interact with our react native app.

Alright, time to install few libraries in backend.

npm install --save express consolidate ejs paypal-rest-sdk

I hope you guys are familiar with ejs . For those who aren’t, it is a view engine which is used to serve files from our server to the end user. An ejs file is nothing but an html document, the only advantage is that we can pass variables to this file from the server itself. And consolidate is a library that holds ejs library inside it.

We will be using paypal-rest-sdk provided by the Paypal’s official github account to handle Paypal related stuff.

Let’s define a basic app.js file first and serve all our ejs files from a new views directory inside our root folder.

When the user visits our site, they will be served with index.ejs (as seen on line 13) file which is inside our views directory.

This index.ejs file will have a simple form that makes a get request to /paypal route.

It is now a good time to configure paypal in our backend.

Next, we define the /paypal get route and create a new paypal payment.

Creating a new paypal payment is different than executing it, we first create a payment and then execute it. At least that’s how paypal likes to roll.

Alright, let’s create the payment first. This happens when the user clicks on the “Pay” button from our index.ejs file.

If the payment creation was successful, we will redirect the user to a link that paypal sends us inside payment object(line 33). This payment object has 3 links, inside an array. We are interested in second link, hence the code res.redirect(payment.links[1].href)

For the sake of simplicity, we are making this transaction with some dummy values(name, price, quantity, etc). In the future, these values can come from your front end app or database, that is upto you.

Now, the user is redirected to Paypal’s website. They can either complete the transaction or cancel it (Use personal account created above to make test payments). On line 8 and 9, we have declared routes for both these cases. Now is the time to define them.

Once, the user is at our /success route, we get few params from the URL that were sent to us from paypal. We need to use two of these params, viz. PayerID and paymentId.

Using these two params, we finally execute the transaction. If the transaction gets executed, we render our “success” view or else we throw an error. On cancel, we simply render out “cancel” view.

Notice, how the title is different in success and cancel views. This is the most important part of our application. We are going to use this little piece of information to inform our react native app about the transaction status.

Enough of the backend Aditya, please!!! Alright, alright! Let’s react!

This is going to be pretty straightforward at react native end considering how we have defined our backend from react native’s perspective.

The user opens our react native app, clicks on a button, we render our paypal form inside a modal using react native’s WebView and voila! Paypal integration done. No? I agree, we have two things pending.

First, we do not want the user to click on the “Pay” button again once our webview loads paypal form. We have to find a way to auto-submit the form right after the form loads. Well this is the easy part. We can inject javascript from our react native app inside the HTML document that is loaded inside a webview component. We can pass a prop to webview like so.

injectedJavaScript={`document.f1.submit()`}

f1 is the name of the form.

That being sorted, this brings to our next pending task. How do we close the Modal that holds webview after the transaction is successful or cancelled?

Well, remember that title tag inside success and cancel view? Yeah, we are going use that and handle this part. Whenever a new url loads inside react native’s webview, we have access to that particular URL’s title tag. Webview lets us access this information from a prop called onNavigationStateChange .

There are other ways to handle this such as sending a notification to the app, setting up a socket, throttle function, etc. But I find the title way to be more easy, fast and accurate way of doing this.

The entire codebase can be found at nodejs-paypal and react-native-paypal


If this post helped you, can it get a calp? Two? Fifty?

I work as a Javascript developer at Morfsys. I love to write about technology, science and more.

Follow me for more such stuff. Kudos!

Aditya Singh

Written by

Javascript develover | Coffee | 420 | Beer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade