Free and open source, Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps. You can use your native JavaScript and web development skills
With XcooBee you can easily add a contactless payment solution to your project with a few lines of coding. The implementation is secure and easily managed across many devices and can include push notification and complex enterprise serverless processing workflows. This enables you to get to market with a complete solution quickly rather than spending development cycles on this.
As far as approach there are principally two successful approaches to contactless payments 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.
XcooBee also is not a closed loop system like the other providers. Consumers do not need an app or an account to participate which makes it far more acceptable in your solutions.
Getting Started from Scratch
Prerequisites:
- Node 12
- Free Stripe account
- Free XcooBee Professional account
- Ionic CLI
Install Ionic Client if you do not have it:
npm install -g @ionic/cli
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 tutorialsor 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
We will start with an Ionic React template to get started. We will do this from your command line or console.
If you have never installed Ionic, first install the command line tools by typing the following in your console:
ionic start myPaymentApp blank --type=react
This will install the blank Ionic template using the React JS as syntax.
once completed navigate into the directory of the newly created app.
cd myPaymentApp
Install libraries
Now that we have a base app lets add the needed libraries
npm install @xcoobee/payment-sdk --save
That is all that is needed.
Start the application by typing:
ionic serve
If your browser does not automatically open after you see Files successfully emitted.. message in console try to manually go to the start page: http://localhost:8100/home
It should look like this:
Home.tsx
There is only one file that we need to change. That is Home.tsx. Should be located in {app}/src/Pages/Home.tsx
Imports
Remove all existing import statements and we will build it up. These are the components we will use on our sample page from Ionic Framework:
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonFooter, IonRow, IonCol, IonItem, IonInput, IonImg } from '@ionic/react';
Change the react JS import like so to include useEffect which allows us to use hooks. Hooks let you use state and other React features without writing a class:
import React, {useEffect, useState } from 'react';
Now, add XcooBee support to the page:
import XcooBeePaySDK from '@xcoobee/react-native-xcoobee-payment-sdk';
Overall this is what your import section should look like when done:
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonFooter, IonRow, IonCol, IonItem, IonInput, IonImg } from '@ionic/react';
import React, {useEffect, useState } from 'react';
import { BrowserXcooBeePaymentSDK } from '@xcoobee/payment-sdk';
import './Home.css';
Initialize XcooBee
We now need to initialize the XcooBee class. Here is where you could set push notification device or install Id etc. This would be needed if you need to communicate back to your device about success and failure of payment. For our purposes the only needed config items are campaignId and formId. You can find these values in your XcooBee Payment Project Wizard Summary page. Replace your values instead of using the example values.
const sdk = new BrowserXcooBeePaymentSDK({ campaignId: "test", formId: "test" });
The logic
We want to have some placeholders and handlers for user to specifiy the amount they wish to charge and the QR code to be rendered.
We use the sdk call inside useEffect and initialize it with 123.00from chargeAmount and use the word Order to describe the reason for payment. The final currency for this would be determined by your XcooBee project setup. You can make changes to it in your XcooBee GUI/console.
We will also re-render when user taps on Generate button.
const [chargeAmount, setNumber] = useState<number>(123.00);
const [qr, setQr] = useState<string>();
useEffect(() => {
sdk.createPayQr({ amount: chargeAmount, reference: "Order" }, 300).then(base64 => setQr(base64));
}, []);
The rendering
For this please remove all tags between the return ( ) and replace with this layout for your Ionic page.
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Contactless Payment</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="myphoto">
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Contactless Payment</IonTitle>
</IonToolbar>
</IonHeader>
<IonRow >
<IonCol className="ion-text-center">
How much would you like to charge?
<IonItem>
<IonInput type="number" value={chargeAmount} placeholder="Enter Amount" onIonChange={e => setNumber(parseInt(e.detail.value!, 10))}></IonInput>
</IonItem>
<IonButton color="primary" onClick={e => {sdk.createPayQr({ amount: chargeAmount, reference: "Order" }, 300).then(base64 => setQr(base64));
}}>Generate</IonButton>
</IonCol>
</IonRow>
{/* qr image space */}
<div className="vertical-center">
<div className="center">
<IonImg src={qr} className="ion-align-self-end" />
</div>
</div>
</IonContent>
<IonFooter>
<b>https://www.xcoobee.com</b>
</IonFooter>
</IonPage>
Most of this is boilerplate generated. Adding a header and footer and a button. With this line we render the QR : <IonImg src={qr} />
You can use a XcooBee QR anywhere where you would use an image. It is that simple.
We also added an onClick event to the <IonButton> to re-render base on updated information the user has entered.
Final Formatting
You notice that the QR code is taking up the whole bottom part of the screen. It is scaled up to fit container. Let’s add some CSS formatting magic by changing the Home.css file in the same folder. This will prevent scaling and and center the image. Add this
Home.css:
.vertical-center {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
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 Home.tsx
You can also clone this to your local machine like so:
git clone https://github.com/XcooBee/example-payment-sdk-ionic.git
example-payment-sdk-ionic.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.
More Assistance
Please contact XcooBee if you need to explore adding contactless payments and e-commerce activation of PDFs for your environment.