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:
- Paypal Merchant Account: Used to accept payment from the end user.
- 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
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.
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
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.
If this post helped you, can it get a calp? Two? Fifty?
Follow me for more such stuff. Kudos!