This article is part of React PWA series:
- Create QR code scanner using React PWA
- Generate QR code Price Tag using React
- Simulate e-Wallet payment using React PWA
PWA or Native App ?
Both native app and PWA have their strengths and drawbacks. When choosing between them, you should consider the aspects each option excels in, and how they fit in with your vision of your app.
Advantage of PWA:
- Building a progressive web app is cheaper than developing a native app.
- A progressive web app is faster to build and update.
PWA as Mobile App Mockups
A mobile app mockup is an in-between stage between a wireframe and a working prototype. Mobile app mockups allow you to showcase your app design before starting development. They provide insight into what the final designs will look like and enable your team to gather valuable client or user feedback before progressing the project further.
Let’s simulate e-Wallet
Assume that a client want to build e-Wallet in their mobile app. They want to get some Look and Feel (UI) and user Experience (UX) of the e-Wallet mobile app.
The e-Wallet has the following functionalities:
- scan and pay
- top up balance
- payment transaction history
- top up history
Scan & Pay
When user pressed the ‘Scan & Pay’ button, a modal will slide in and QR reader will be activated immediately. After QR reader completed the scanning process, the modal will slide out and return to main screen. Payment will be deducted from the available balance. Toast message will be displayed for few seconds to indicate the status of payment.
I choose html5-qrcode as QR reader in this app because html5-qrcode comes with start() and stop() scanning APIs.
Merchant QR code price tag has the following format:
https://www.example.com/buy?product={piano}&price={250}You can generate the QR price tag for testing from https://random-graph-pwa.vercel.app/pricetag
Top up Balance
When user pressed the ‘Top Up’ button, a modal will slide in and user can key in the top up amount and submit. The modal will slide out and return to main screen. Top up amount will be added to the balance. Toast message will be displayed for few seconds to indicate the status of top up.
Payment Transaction History
By default or when user pressed ‘Transaction’ button, the payment transaction history will be displayed at History screen and sorted by by latest transaction on top.
Top Up History
When user pressed ‘Top Up’ button, the top up history will be displayed at History screen and sorted by by latest transaction on top.
React Component for e-Wallet
The e-Wallet is a single page application with modal. Source code consist of EWallet.module.css, index.js and Message.js (for toast message).
I built a website with PWA features, Random Graph PWA is a collection of React Components with source code. https://random-graph-pwa.vercel.app/
I have included the e-Wallet in this web app, can be accessed from the menu at top right or URL https://random-graph-pwa.vercel.app/ewallet. The source code is available by clicking ‘Source Code’ button at bottom right.
