Step 5 — Payment¶
Purpose¶
The Payment step collects payment from the customer when their energy quota does not fully cover the swap cost. Payment is processed and reported to the backend.
Note
This step is skipped if the customer's quota covers the full cost (net amount due = 0).
Payment Methods¶
Scan M-Pesa QR Code (Primary)¶
- The attendant scans the customer's Payment QR code.
- The scan area displays a clear call-to-action (e.g. Tap to Scan).
- Real-time feedback is provided during scanning.
Enter Receipt Manually (Fallback)¶
- The attendant manually enters the M-Pesa receipt/confirmation code.
- Used when QR scanning is not available or the customer provides a receipt verbally.
UI Elements¶
- Amount banner at the top displaying the net amount due
- Tab selector to switch between Scan QR and Enter Receipt
- Scan area with visual guidance for QR placement
- Receipt input field for manual entry
Backend Reporting¶
Once payment is confirmed, the app reports two events to the backend via MQTT:
| Event | Description |
|---|---|
| Payment event | Records the M-Pesa transaction — amount, receipt code, timestamp |
| Service event | Records the battery swap — old battery, new battery, energy difference, customer subscription |
Both events are sent as MQTT messages to ensure the backend has a complete record of the transaction.
Error Handling¶
- Invalid or expired QR code — show an actionable error and allow retry
- Manual receipt rejected — validate the format and prompt re-entry
- MQTT publish failed — the app queues the message and retries when connectivity is restored
Actions¶
- Confirm Payment proceeds to Step 6 — Done
- Back returns to Step 4 — Review