Zone Payment Network
ZonePay PWA
One installable Next.js PWA for both sides of a payment: customers pay merchants from linked bank accounts, and merchants watch each payment land in real time over WebSockets.
- Company
- Zone Payment Network
- Role
- Senior Software Engineer · built it end to end
- Period
- 2026
- Navigation
- sub-second
- Platforms
- iOS · Android · Web
- Stack
- Next.js
- TypeScript
- Tailwind CSS
- React Query
- WebSockets
- Firebase
- Cloudflare Workers
- Links
- link.zonepay.net
Production screens aren't shown — they're under NDA. What you see here is from public pages, demo builds and rebuilds that run on made-up data, and my own diagrams.
Context
ZonePay is one progressive web app, built with Next.js, for both sides of a payment. Customers link their bank accounts and pay a merchant from them. Merchants and their terminals install the same app to generate payment QR codes and watch each payment land in real time. It installs on iOS, Android and the web without a native build per platform. It's live at link.zonepay.net — "biometric payments at merchant locations" — and opens straight onto a biometric sign-in. The cover shows three views from a demo build that runs on made-up data: reviewing a payment, the home screen with linked accounts and recent transactions, and the receipt once it's paid. No real customer, merchant or account appears in them.
Constraints
- Runs on payment terminals in the field, so it has to install, load fast and survive poor connectivity.
- Device onboarding has to be secure: a terminal is a trusted endpoint into the network.
- Real-time by nature — a merchant is waiting to see a payment land.
Outcomes
- Secure OTP-based device onboarding, FCM push notifications, PDF receipt generation and hardened authentication with token rotation.
- Sub-second navigation and a responsive UI via React Query caching.
- Real-time payment tracking and QR generation over WebSockets.