Mobile Application for Scanning and Purchasing Certificates
Аbout the project
Golden Key is a service for access to business lounges of a new format from an official partner of the railway network. It is enough for the client to purchase an electronic certificate, after which they get full access for 3 hours and everything necessary for comfortable work or a relaxing holiday.
As part of cooperation with the company, we have developed a whole ecosystem of products:
- Landing page of the company with a map of business lounges;
- Mobile application Scan&Pay for verification of or payment for certificates by users;
- Buyer’s personal account for online purchase of a certificate;
- Application for the administrator of the business lounge;
- Design of plates and signboards of the administrator.
This time we will talk about the Scan&Pay mobile application, which was created for the Android platform using the React Native framework.
At the entrance to the business hall, visitors are met by the administrator at the counter. Before guests can go inside, the administrator needs to verify the authenticity of the certificate and activate it. To implement this procedure as quickly and simply as possible was our number 1 task.
However, not all guests plan their vacation in advance. Some of them make a decision spontaneously, being tired and looking for a comfortable place to wait. But in this case, an unexpected obstacle arises: the administrator of the business lounge does not have the right to accept money from the client, so it will not be possible to pay for access on the spot. A certificate, loyalty card or high class ticket is required. Therefore, our task number 2 was to resolve the issue of payment.
The idea of developing a mobile application did not arise immediately. We came up with it after several brainstorming sessions and a couple of dozen correctly asked questions. Here is the main background from which we proceeded:
- What is the fastest way to check and activate a certificate? With the help of a QR code, the scanning of which will help to avoid manual entry and long checks.
- How to separate the payment process from the lounge manager who can’t accept cash or cards? With the help of an online purchase of a certificate, which can be made without leaving the counter.
- What device allows you to scan a QR code and make an online purchase at the same time? Any smartphone or tablet.
Thus, it was decided to install tablets that would act as self-service terminals. And for them we started to develop the corresponding software.
Development of an application for purchasing and scanning certificates
The peculiarity of React Native is that it allows you to create applications for both Android and iOS. In our case, the Scan&Pay application is adapted for users of Android smartphones and tablets.
Also in the development process the following mobile technologies were involved:
- QR-scanner — allows you to instantly read QR codes.
- Redux — responsible for the stable state of the application.
- React Native Camera is an integrated camera component in React Native that allows you to recognize not only QR codes, but also photos, videos, text, and people’s faces.
Application design and structure
The application is implemented as minimalistically as possible: all functionality is hidden behind two buttons. One of them is responsible for scanning an existing certificate, the second is for buying a new one. Hence the name of the application — «Scan&Pay».
The design of the application was developed in the likeness of a landing site, previously created in the creative laboratory of our company. The letter logo, a restrained range of colors with an emphasis on gold, a modern Manrope font, a minimum of distracting elements – all these make the interface design stylish, minimalistic and easy to use. Large clickable buttons make it easy to navigate through the sections of the application (and therefore serve customers without a hitch).
Scanning the certificate in the app
This process is implemented very simply and consists of literally one step (you won’t believe it) — scanning. The guest just needs to select the appropriate item on the main screen and place the QR code of the certificate in front of the tablet’s camera. If for some reason it is impossible to read the QR code, the certificate code can be entered manually.
If the certificate was successfully activated, the system will notify the guest on the tablet screen and the administrator on the computer screen. The timer will also start automatically for 3 hours.
In case, for some reason, the payment was not successful, we provided error screens explaining the reason for the failure, providing for all possible options. We not only explain to the user why an error occurred, but also suggest how it can be corrected.
Purchasing a certificate in the app
The purchase function works on the principle of payment on the Golden Key website using integration with YooKassa, which allows you to pay for the certificate in any convenient way: from Google and Sber Pay to YooMoney wallet or bank card.
At the same time, the payment scenario is simplified as much as possible and consists of only 3 steps (and one of them is not required):
- Choosing a bank for payment;
- Entering an e-mail to send a check (optional);
- Scanning a QR code through the bank application.
Ready! Payment instantly passes through the SBP (fast payment system), and the administrator receives an automatic confirmation of the purchase on his computer. The certificate is activated automatically, which starts a timer for 3 hours. Now the administrator can invite the guest to go to the business lounge.
In case the payment failed for some reason, we have provided error screens explaining the reason for the failure.
All work on the creation of the application took 2 weeks. The application was developed from scratch, and by that time branded design elements had previously been implemented in the design of the company’s landing page. In addition, this is far from the first project of our company implemented on React Native, so there were no particular difficulties in the process of work. The application was not published in the public access for download, as it is aimed at Golden Key administrators — this is the company’s policy. However, in theory, a mobile application is also suitable for passengers’ self-service.
As a result, we managed to successfully solve both tasks by developing a high-quality mobile application for Android. It looks simple and clear, which will allow even inexperienced users to easily cope with the purchase or activation process. Some time after the launch, all errors were found and fixed, now the application works almost flawlessly.