Building a payment system from scratch

During my employment at CheckPay Technologies, I have taken part in designing and developing a digital payment system from scratch. I was involved mainly in research, UI development, testing and app store deployment. I have also taken part in design reviews and communication of technical issues to legal team.

Technologies used were HTML, CSS, LESS, JavaScript ES6, React and Cordova.

picture of checkPay system

Project Goal

Create a payment system similar to AliPay and WeChat Pay and distribute it around stores in Greater Vancouver Area.

CheckPay's vision was to create a system to handle transactions between the shopper and retail clerk without the need for credit/debit cards. The shopper would pay the retail clerk by using a mobile app. This can enable lower transaction fees for the shopper, and at the same time introduce an opportunity for the retail store onwner to create multiple tipping and discount options.

Initial Research

Canadian banking regulations were thoroughly researched. A decision was made to launch the business which was within the legal framework of Money Service Business.

Initial requirements ( )

The payment system needed to have separate terminals for shopper and retailer.

Due to extreme time constraint of the project, the team has copied parts of AliPay and WeChat Pay features. The first version of the app was launched straight into production. It was built as a hybrid app with React and WeUI library, where I have collaborated with the team on implementing the first features within that app.

First version was tested in August of 2017. It ran on Android platform.

Design and Development

Design was loosely based on contemporary payment apps. A dark theme was used because the team agreed that it would be easier for the users to read payment information on a dark screen.

The shopper app was launched on iOS and Android stores.

design sketches
design sketches

Functionality

After extensive testing and more development, the app had the following functions :

Enable shopper to pay in store
Enable retail owner to collect money from shopper
Enable basic tipping, refund and discount functions

The retailer app was launched in January 2018. It processed payments from AliPay and WeChat Pay users only. It used extensive amount of components which were purchased under license from third party developers. The app runs on SunMi device, which is an Android phone that has additional NFC reader and receipt printer.

checkPay merchant terminal
checkPay personal terminal

Project Outcome

The personal shopper app is available on the app stores . However, one has to consult with the business owners of CheckPay Technologies Ltd. in order to install the whole payment system.