MarketplaceUI Snapshots
Multi-Vendor Checkout UI Blueprint
UI layout architecture for partitioned sub-orders, shipping line calculation, and Paystack integration.
Multi-Vendor Checkout UI Blueprint
The multi-vendor checkout interface groups cart items by vendor location while keeping payment unified.
Product Selection & Cart Entry
Multi-Vendor Checkout Page Blueprint
+-----------------------------------------------------------------------------------+
| CHECKOUT & PAYMENT |
+---------------------------------------------------+-------------------------------+
| 1. SHIPPING ADDRESS | ORDER SUMMARY |
| John Doe | |
| 12 Lekki Phase 1, Victoria Island, Lagos | Sub-Order 1 (Lagos Warehouse) |
| [Edit Address] | - 4x 550W Panel ₦ 520,000 |
| | - Shipping Fee ₦ 15,000 |
| 2. DELIVERY & FREIGHT | |
| Sub-Order 1 (Vendor: Felicity Solar Lagos) | Sub-Order 2 (PH Warehouse) |
| [x] Standard Truck Freight (2-3 Days) | - 1x 5kVA Inverter ₦ 680,000 |
| | - Shipping Fee ₦ 22,000 |
| Sub-Order 2 (Vendor: Apex Energy PH) | |
| [x] Express Heavy Freight (1-2 Days) | ----------------------------- |
| | Total Equipment: ₦ 1,200,000 |
| 3. PAYMENT METHOD | Total Shipping: ₦ 37,000 |
| (o) Paystack (Card, Transfer, USSD) | VAT (7.5%): ₦ 92,775 |
| ( ) Solar BNPL Installment Plan | GRAND TOTAL: ₦ 1,329,775 |
| | |
| [ PAY NOW WITH PAYSTACK ] | [x] I agree to warranty terms |
+---------------------------------------------------+-------------------------------+Order Code Verification: Upon successful payment, the checkout UI routes to /checkout/callback?code=CS-XXXXX for verification and displays your receipt.