PayPal integration with React Native

INTRO

In this blog post we will share some of our learnings during the process of integrating PayPal into a React Native application. We will address some problems that we encountered, reveal how we solved them, and give you an insight into what you need to pay attention to before even starting with the implementation. So if you are planning to integrate PayPal into your React Native application, you are in the right place.

Let’s start with a short description of what was our use case. Our requirement was to validate the idea of using PayPal for charity-like applications where users can donate money to certain organizations (merchants). We had one week to validate it in the form of a proof of concept, which didn’t seem too complicated if you are considering using simple elements like WebView for opening the PayPal Checkout page in the React Native application, or PayPal REST SDK within your API for simple integration, etc.

Now, if you have at least one spark of suspicion here, you are right because this is where we made our first mistake.

Can a WebView be used to load a PayPal Checkout page in React Native?

WebView is a common choice (or rather the most simple one) that comes to mind when loading web content inside the browser in the React Native application, so you might be tempted to use it for PayPal integration as well.

PayPal is really restricted when it comes to security, so one of the main issues with WebView when loading the PayPal Checkout page is that WebView doesn’t show the URL of the web page that the user is currently on, which PayPal treats as a huge security risk.

So, what would be an alternative then?

Deep links (universal links)

Since we couldn’t use the WebView but still had to navigate the user to the web page where our PayPal Payment Smart Buttons are hosted in order to launch the PayPal Checkout experience so that he/she can finish the payment, we had to find another way. Linking is a mechanism that can be used to navigate users directly to the specific location within the mobile application using dedicated links. We used the InAppBrowser module from react-native-inappbrowser-reborn for Android phones and Linking from react-native for iOS to open our dedicated Web page for displaying PayPal Payment Smart Buttons form which uses PayPal JavaScript SDK, which will eventually forward users to the PayPal Checkout page. After the user is done with the payment, he/she needs to be able to navigate back to the specific screen in our mobile application. This is also possible thanks to the Deep Linking.

ⓘ Make sure that you read review guidelines before submitting your application for the App Store release. 

We initially used only InAppBrowser for opening links on both Android and iOS, but Apple rejected release because we used InAppBrowser for the PayPal payment process, they expect it to be open in an external browser such as Safari instead.

PayPal Checkout with Smart Payment Buttons

PayPal documentation recommends using Smart Payment Buttons for PayPal Checkout experience because of its simplicity and security.

In this section, we will dive into some details on how we integrated Smart Payment Buttons on our website which we later load from our mobile app using Deep Links.

The reason for hosting Smart Payment Buttons on our website and loading it from there is that there is no right and proper way to get them embedded in React Native directly. We are also taking advantage of using the PayPal JavaScript SDK for Smart Payment Buttons, which we had injected through the script to render it.

Smart Buttons provide callback functions (createOrder, onApprove, etc.) which give us more control over the payment process (for example, you can use createOrder to set up transaction details like amount, item details, etc.). Since our use case was a little bit different, in the sense that we had to allow a user to preselect the amount before reaching to the PayPal Checkout page, we used our Lambda function to create an order with all required attributes, and then we would pass down returned orderID from the Lambda function to the createOrder callback function, which pre-populates order details when a user initiates the PayPal Checkout experience.

Another callback function that we use is onApprove. This function is called when a user approves an order in PayPal, and we use it to invoke our Lambda function to initiate orders capture API to capture an order.

The last callback function is onError which is called if an error occurs and the user is not able to proceed with the checkout process.

PayPal payment flow

In this section, we will focus on describing the complete payment flow.

For that purpose, we’ve created a Sequence diagram to visualize how we did the PayPal integration into a React Native application.

Let’s go through each step from the diagram above:

(1) Our mobile app invokes our backend service (Lambda function) which calls PayPal’s Checkout Order API (POST /v2/checkout/orders/) to create an Order. Once a PayPal Order is created, an Order ID is returned to the mobile app.

(2) After this step, the mobile app is in charge of opening and sending an Order ID to our Web Page using Deep Linking, where we host PayPal Payment Smart Buttons.

(3) From this point on, the user is presented with PayPal Payment Smart Buttons and is able to continue with PayPal Checkout experience using his/her PayPal account, credit card, or some other service that Smart Buttons are providing. Once the user approves the order, onApprove callback will be executed inside the Smart Buttons where we can invoke our Lambda function to continue with the capturing of the payment.

(4) At this step, we will use our Lambda function to send a request to PayPal’s Checkout Orders API (POST /v2/checkout/orders/{id}/capture) to capture the payment.

(5) After capturing the payment, we will receive an event notification that will be sent from the PayPal Webhook API when the actual transaction occurs. We created another Lambda function to set up a POST /events – endpoint to listen for related events. PayPal knows where to send notifications based on the notify_url that we’ve specified as the part of the request body when creating the order (step 1.2).

(6) Since PayPal signs every notification message that it delivers, one of the implementation requirements was to verify the signature of the incoming message (POST /v1/notifications/verify-webhook-signature) so that we know that notification is actually sent from the PayPal. If verification is successful, we are good to update our resources in the database based on the capture status.

CONCLUSION

Ok, so we gotta admit integrating PayPal within React Native application was challenging. We encountered various problems, but in the end, we managed to find a solution for each of them and also learned a lot in a process of implementation.

If your next task in the project is to integrate PayPal into a React Native application and you are reading this blog, we hope it will help you and give you ideas on how to solve your task.