ReactNative: Quickly integrate contactless payments into your react-native projects

Quickly integrate contactless payments into your react-native projects

Trying to go out an build a contactless payment solution from scratch is not something that everyone has the time and gumption to do. As far as approach there are principally two successful approaches to contactless one can follow. The RFC and the QR methodology.
The RFC Methodology
This ist the incumbent process in most of Europe and North America. Buyers use an RFC chip based Credit or Debit card or mobile device. Buyers swipe the device over a specialized card reader and seller, then, connects to card or payment processor.
Popular implementations of this in the US for mobile devices are represented by Apple Pay and Google Pay. The issue for us what that this method had a few drawbacks:

• We needed to have special hardware. Some of which has be rented on a monthly basis by the seller (merchant).
  
• It really wasn't completely touch free. Debit cards still required touching the seller terminals. Other terminals required confirmations on occasion.
  
• Getting up and running in a real world store was not a matter of hours, but weeks and months.
  

The advantages were that users mostly are familiar with the payment processes in the US.
The QR Methodology
This is the Asian model and very popular in China. Both AliPay and WeChat pay and some others use this as their standard of starting the payment processing cycle.
The drawbacks here are users in US and Europe are less familiar with this methodology then they are with others though this is quickly changing. We see more users becoming familiar with QRs for other purposes besides advertising. Users now see them in restaurants for menu lookup and on rentals when renting scooters or bikes.
Thus the drawbacks:
a) User familiarity with process
b) Since processing occurs on different device than payment initiation closing the payment loop requires effort on programmers.
The advantages are that this, when done right, is:
a) Very quick to implement since no other hardware is needed
b) Very inexpensive for seller (merchants)
c) Can be truly contactless even with debit cards
d) Can close the payment loop even when process is distributed across devices.
Thus, in this tutorial we will focus on QR based contactless payments and show you how to quickly get started using them in your react-native based mobile applications.
We use the XcooBee contactless payments since it needs very little effort while providing many options as well as the ability to close the payment notification loop. capabilities and programming in the app.

Getting Started from Scratch

Prerequisites:

• Node 12
• Free Stripe account
• Free XcooBee Professional account

Setting up Payment Processing Backend

In our example, you will need a XcooBee Professional account and a Stripe account. Both of these are free to setup. Use the video tutorials or web tutorial to configure your first XcooBee Payment Project. This sets up you base infrastructure to process payments for your app. This is what you will need to do all the back-end processing.

The App

You can use create react native (CRA) or Expo project as baseline for our example. We will use Expo based version.
If you have never installed expo first install the command line tools:

npm install expo-cli --global

Create Your Expo Project

Creating your expo project is also straight forward.
expo init myPayProject => select blank (with Typescript)

cd myPayProject
expo start

The last command should start a expo session with your expo app.

Install libraries

Now that we have a base app lets add the needed libraries
yarn add react-native-svg => adds needed SVG support for vector graphics
yarn add @xcoobee/react-native-xcoobee-payment-sdk => adds the XcooBee libraries

App.tsx

There is only one file that we need to change. That is App.tsx.
Add import statement to your import section. import XcooBeePaySDK from '@xcoobee/react-native-xcoobee-payment-sdk';
Follow this with initial configuration of the payment SDK. Here is where you could set Expo Install Id etc. if you need to communicate back to your device about success and failure. For our purposes the only needed config items are campaignId and formId. You can find these values in your XcooBee Payment Project summary page. Replace your values instead of using the example values.

XcooBeePaySDK.setSystemConfig({
  campaignId: 'e98.eg0000000',
  formId: 't000'
});

The remainder of the code is only a few <Text> to display labels, one <TextInput> to have the user enter the amount they wish to charge. The default is $1.
Your App.tsx should look like this:

import React from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';
import XcooBeePaySDK from '@xcoobee/react-native-xcoobee-payment-sdk';


// TODO: replace with actual values from XcooBee Payment Project
// Open your payment project in edit mode and review the summary screen
XcooBeePaySDK.setSystemConfig({
  campaignId: 'e98.eg0000000',
  formId: 't000'
});

export default function App() {
  const [chargeAmount, setText] = React.useState('1.00');
  const XcooBeePayQR = XcooBeePaySDK.createPayQR(parseFloat(chargeAmount));
  return (
    <View style={styles.container}>
      <Text>
      How much do you want to charge:      
      </Text>
      <TextInput
        defaultValue='1.00' 
        style={{textAlign:'right' }}
        onChangeText={text => setText(text)}
        value={chargeAmount}
      />

      <Text style={{
          marginBottom: 20, marginTop: 20
        }}>Please scan and pay</Text>

      {XcooBeePayQR}

      <Text>powered by XcooBee</Text>  
      
    </View>
  );
}

Most of this is boilerplate generated by Expo during project creation. With this line we define the QR object and amount we want to represent: const XcooBeePayQR = XcooBeePaySDK.createPayQR(parseFloat(chargeAmount) where the createPayQR is the main function from the Payment SDK and chargeAmount is the amount we wish to charge buyer-user. See the Payment SDK documentation for additional options of types of QRs that can be generated and call options.
When we wish to render we use the QR object like this {XcooBeePayQR}.
This will add the QR in your current render container.
Here is the application when running (this example uses invalid project codes so the payment cycle cannot be started):

Using our Pre-Build example

Of course we have already pre-build app you can experiment with if you do not want to go through all the steps. You will still need a XcooBee Payment Project setup completed if you want to process payments (test or live).
Please replace the campaign Id and form id in App.tsx
Expo Code GitHub Example
You can also clone this to your local machine like so:
git clone https://github.com/XcooBee/example-payment-sdk-react-native.git

Congratulations

This is all it takes to have an app that can accept contactless payments.
Of course, there are many more options for QR and direct Payment URL generations than this sample can show. Feel free to experiment with the XcooBee Payment SDK, XcooBee Professional Account, and Stripe or Paypal payment processing.
Pro tip: If you use Stripe test accounts or Paypal Sandbox accounts you will not incur any XcooBee charges either.
You can experiment and refine from here.

Cheers,
Bilal