WhaPay Wireframes

WhaPay Complete Wireframes & Process Flows

Visual representations of every user journey – from offline registration to payment, dashboards, reports, and admin management. All flows include the 0140933042 offline registration number.

1. Registration Processes

WhatsApp Registration

User opens WhatsApp
Sends REGISTER to +254710346425
Bot asks: "Your full name?"
User replies with name
Bot asks: "Your phone number?"
User replies with phone
✅ Receives Member Code (e.g., DK12345) + QR code link

Time: ~2 minutes. Requires internet.

Offline Voice Registration

User dials 0140933042
Voicemail plays: "Send SMS with REG YourName"
User sends SMS: REG John Doe
System replies with temporary code: TMP5821
User goes online → sends WhatsApp: ACTIVATE TMP5821
✅ Receives permanent Member Code + QR

No internet needed for the call & SMS. Activation requires WhatsApp.

Offline SMS Registration

User sends SMS: REG John Doe to 0140933042
Auto-reply: "Temporary code: TMP5821"
User goes online → sends WhatsApp: ACTIVATE TMP5821
✅ Receives permanent Member Code + QR

No internet for sending SMS. Activation requires WhatsApp.

2. Payment Processes (Online & Offline)

Online Payment Flow

Customer receives WhatsApp link →
Clicks link → opens payment page
Chooses method: M-Pesa STK Push or Card
If M-Pesa: enters phone number, receives prompt, enters PIN
If Card: enters card details on Stripe secure page
✅ Both receive confirmation (WhatsApp/SMS)

Offline Payment Flow (No Internet)

Customer gets merchant's Member Code (e.g., DK12345)
Opens M-Pesa → Lipa na M-PESA → Paybill
Enter Business Number (provided by merchant)
Enter Account Number = Merchant's Member Code
Enter Amount → PIN → Confirm
✅ Both receive SMS confirmation. Dashboard syncs later via SYNC command.

Payment Page Wireframe

🔢 Merchant Code: [__________]
💰 Amount (KES): [__________]
💳 Method: [M-Pesa ▼] or [Card ▼]
📱 Phone (for M-Pesa): [__________]
💳 Pay Now

3. Merchant Dashboard Wireframe

Summary Cards (Sticky)

Total Completed
KES 0
Pending
0
This Week
KES 0
This Month
KES 0

Payment Link Generator

Member Code: [__________]
Amount: [__________]
Create Link
Generated link: https://wa.me/254710346425?text=Pay DK12345 500

Recent Transactions Table

Filter by date: [Start] [End] [Filter] [Reset]
CustomerAmountStatusDate
JohnKES 500Completed2026-04-10
MaryKES 200Pending2026-04-09
Offline payment instructions: Member Code + M-Pesa Paybill

4. Admin Dashboard Wireframe (Full CRUD)

Summary & Charts

Total Paid
KES 0
Pending
0
Merchants
0
Users
0
Weekly Chart [bar chart placeholder]
Monthly Chart [line chart placeholder]

Management Tabs

[Transactions] [Merchants] [Users] [Blogs]
Table with Edit/Delete buttons and Add button
Modal forms for Add/Edit (popup)
+ Add Merchant | + Add User | + Add Blog

5. Reports Dashboard Wireframe

Summary Cards

Total Completed
KES 0
Pending
0
This Week
KES 0
This Month
KES 0
Weekly Payments Chart (Bar)
Monthly Payments Chart (Line)
Payment Method Doughnut (M-Pesa vs Card)
Top Paying Customers (List)

Transactions Table with Filters

Date Range: [Start] [End] [Filter] [Reset]
Export CSV button
Table: #, Customer, Amount, Method, Status, Date
Offline payments appear after SYNC command

6. First-Time Pay Flow (Register & Pay in One Step)

Step-by-Step

User lands on first-time-pay.html
Fills: Full Name, Phone, Amount, Payment Method
Clicks "Complete Registration & Payment"
Pays via M-Pesa or Card (real API)
✅ After success: system generates Member Code + QR
User receives WhatsApp with code & QR
User is redirected to merchant dashboard

Form Wireframe

📛 Full Name: [______________]
📞 Phone: [______________]
💰 Amount (KES): [______________]
💳 Method: [M-Pesa ▼] or [Card ▼]
Complete Registration & Payment
Result screen shows Member Code + QR code

7. Offline Registration Flow Diagram

User dials
0140933042
Voicemail:
"Send SMS with REG YourName"
User sends SMS:
REG John Doe
System replies:
Temporary code (e.g., TMP5821)
User goes online → WhatsApp:
ACTIVATE TMP5821
✅ Receives permanent
Member Code + QR

8. End-to-End User Journey (Merchant & Customer)

Merchant Journey

1. Registers via WhatsApp, voice (0140933042), or SMS
2. Receives Member Code & QR code
3. Displays QR at shop / shares WhatsApp link
4. Customer pays (online or offline)
5. Merchant receives SMS/WhatsApp confirmation
6. Views live dashboard, reports, exports CSV

Customer Journey

1. Receives merchant's QR or Member Code
2. If online: scans QR or clicks WhatsApp link → pays with card/M-Pesa
3. If offline: opens M-Pesa → Paybill → enters merchant's Member Code → pays
4. Receives SMS confirmation
5. Can optionally register as a user via first-time pay

9. Admin CRUD Operations Flow

Merchants

List → Add (auto‑generate code) → Edit → Delete
Modal forms for Add/Edit

Users

List → Add (auto‑generate code) → Edit → Delete
Same modal pattern

Blogs

List → Add (title, slug, HTML content) → Edit → Delete
Rich text allowed

10. Responsive Design Notes