Things to Understand for React Native Development with In-App Payments SDK

React Native Interfaces for the In-App Payments SDK

SQIPCore — Used to initialize the In-App Payments SDK in your React Native application.

SQIPCardEntry — Handles the standard credit card form capture. It is worth noting that if you’re wanting to store a Card on File for your user, then you’d want to only use this interface since you cannot store card details using digital wallets.

SQIPApplePay — Although fairly straightforward in the name, this interface is used for handling Apple Pay flow.

SQIPGooglePay — Same thing as the Apply Pay interface, but for handling Google Pay.

Each interface has some methods for initiating the flow, handling errors or the user closing the form, and completing authorization to get a nonce (a one-time use token). You are still required to have a backend implementation to use the nonce for either storing a card on a customer profile, or processing a transaction. You can find more on how this flow works in the Square documentation on.

Routing / Navigation

Although this can vary depending on which library you’re using, its worth explaining the one we use in our example. React Navigation is a commonly used library for routing and navigation in React Native apps.

You can add it by running:

npm install — save react-navigation react-native-gesture-handler

react-native link react-native-gesture-handler

The basic premise of the navigation library is to create a central hub at the root of your React Native app that can control which “screen” should be displayed at any given time. There are a few different types of navigation you can have with this library, but we’re just sticking with the stack navigator. It works exactly like a stack data structure that has each screen go “on” to the stack and when a user goes back it just pops them off the stack.

An Order Ahead Example Application

In order (so punny) to show what can be done with the React Native In-App Payments Plugin, we created an app to let people pick their own Square Lego person at conferences and also demonstrate how the new Orders Push Beta can push that into a Square Point of Sale (POS).

At the root of our app, we use the createAppContainer and createStackNavigator from React Navigation for wrapping our React app and handling all of our routing and navigation. This is also where we will initialize the In-App Payments SDK using SQIPCore in the componentDidMount() lifecycle method.

The root of the Order Ahead application.

We kept this really simple by having only two screens. The main screen displays all of our products (in this case, lego people) and the other screen is our checkout.

A lot of the code in the application is dedicated to styling the components, which could be its own blog post. The key part to take away from this is how to interact with the In-App Payments SDK.

Next, we’ll dig into our Checkout screen and look inside our componentWillMount() method of our CheckoutScreen component. This is where we set our iOS card entry theme (you need to set these in a styles.xml in Android).

componentWillMount() method of our CheckoutScreen component.

Then, we have to create a few lifecycle methods for handling events after starting the credit card form flow and handle getting our nonce for processing the card details.

To break this down, at our base method for starting the card flow is the onStartCardEntry() method. We then have our onCardNonceRequestSuccess , onCardEntryCancel , and onCardEntryComplete for handling the different events in our flow.

onCardNonceRequestSuccess — handles when we’ve successfully requested a nonce using the In-App Payments SDK, so we can send it to our backend for additional processing.

onCardEntryCancel — should be used to handle if a user closes out the card entry form before filling it out and triggering a card nonce response.