Accepting Payments in a React Native App (Part 1)

Integrating Braintree Payments into a React Native Application

Background

I recently reached the point that I needed to integrate a payment platform in a React Native application. Fortunately, there are many user friendly payment providers available for use in mobile applications. I decided to choose Braintree due to its built in Paypal integration. However, I believe the techniques covered in this article can be applied to working with other payment providers.

Not only are there several payment providers, there are multiple payment libraries that work with React Native applications. A quick Google search shows that there are several for Braintree specifically. However, I required a solution that excluded native code due to my applications integration with Expo, and unfortunately, all the current (at the time this article was published) cross platform solutions require some amount of native code.

This meant that I needed to create my own…

That feeling you get when you can’t find what you need in npm.

So, in this series of posts, I will walk through creating a JavaScript only (no native code) Braintree payment component, and releasing that component as an NPM package. The posts are divided as follows in order to keep each article “bite-sized”:

1. Project Introduction. This section may not sound like much, but it’s a good explanation on how everything will fit together.
2. Application Server using Amazon Web Services. This portion explains how to interact with Braintree’s server in a secure manner.
3. Initial Version Using Vanilla-JavaScript discusses building an application that can receive payments.
4. React Component Based Version is about putting React inside a React Native application.

The three different code based portions of this series

My goal is that writing these articles will force me to improve my knowledge of the listed topics, document what I’ve found for future reference, and help others who have the same requirements.

Application

I anticipate that this series will have applicability that reaches beyond React Native. For example, I will discuss server integration using AWS Lambda (which itself has applicability to node.js). Also, React Native (RN) is at its core React which itself is built on HTML & JavaScript, so don’t let my focus on RN turn you off. There will also be some webpack and CSS along the way. Finally, all payment systems that I’ve seen have a token based authentication and authorization system that is eerily similar to a third party authentication system.

Bottom line is that don’t let the type of hammer I use distract you from building the dog house. The techniques are the important part, not necessarily the tool.

Design

I will briefly cover the project’s anticipated design here. However, each article will have a more in depth design discussion related to that particular stage.

At a big picture level, the project will enable the following:

1. User is presented with items to “purchase”.
2. User fills a shopping cart with those items.
3. User starts the purchase flow so that they can pay for those items.
4. User inputs their payment information.
5. Braintree processes payment .
6. User sees feedback based on status of purchase.

Now, lets break down each of those steps a little bit.

1. No need for a real store in this case; I’m not writing an article about building an e-commerce site. I can just put item information in an array of objects. Then I can display those objects in the UI as store items.
2. Simplest implementation would be to tap on an item which fires an event which in turn adds the item to an object representing the shopping cart. Might as well update the total cart price at the same time.
3. Sounds like pressing on a button to check-out to me.
4. Okay! Here’s where things get a bit more complicated. Fortunately Braintree provides a UI element that can be dropped into a webpage. Unfortunately, the use of React Native vice just React makes the whole webpage to native application interaction a bit more interesting. But don’t worry, that’s why I wrote these articles.
5. Braintree does a great job of describing the payment development process. Their documentation provides an overview of the entire process, as well as descriptions of the client and server’s responsibilities and interactions. Braintree also provides a sandbox for you to experiment as you learn how to use it.
6. Displaying a message to the user after the Braintree payment process is completed will suffice for this project.

Implementation

Once again, more specifics will be presented in subsequent articles, but at a high level I know I need an application server to perform server functions. I’ll use an AWS Lambda function couple with AWS API Gateway for this functionality. Additionally, you’ve probably gathered by now that I intend to used React Native to build a mobile client that interfaces with the user and the application server.

Conclusion

That’s it for now. Hopefully this article has described what I intend to do, how I intend to do it, and why I’m doing it this way. I hope you will stick with me for the rest of the articles in this series.