9:41
Checkout
Delivery Address
Change
🏠
Home — 123 Main Road, Sandton, 2196
Delivery Slot
Change
📅
Today, 2:00 - 3:00 PM
FREE
Delivery Notes
Add delivery instructions...
Driver Tip
Change
No tip
R 10
R 20
R 30
Custom
4 items
🍎
🥛
🍞
🥩
Promo Code
Apply
Payment Summary
Subtotal
R 175.45
Delivery fee
R 29.99
FREE
Service fee
R 9.99
Driver tip
R 20.00
Discount
-R 0.00
Total
R 205.44
Payment Method
Change
💳
•••• 4532 Visa
Place Order — R 205.44
CON-070 | Checkout Summary
Screen Overview
Type:
Scrollable page with sticky CTA (no bottom navigation)
Purpose:
Single-page checkout summary where users review all order details before placing the order
Navigation:
Back to
CON-050
(Cart); forward to
CON-076
(Payment Processing)
Section Breakdown
Delivery Address:
Shows saved address with home label. "Change" links to address search (CON-021)
Delivery Slot:
Shows selected time window with FREE badge. "Change" links to timeslot selection (CON-071)
Delivery Notes:
Expandable section with textarea. Collapsed by default with placeholder text
Driver Tip:
Chip-style options (No tip, R 10, R 20, R 30, Custom). R 20 pre-selected
Order Items:
Collapsed summary showing item count + mini emoji thumbnails. Expand to see full list
Promo Code:
Inline input + Apply button. Links to CON-079 for browse
Payment Summary:
Itemised breakdown with strikethrough on delivery fee (FREE promotion). Bold total
Payment Method:
Shows last 4 digits + card brand. "Change" links to CON-074
Component Specs
Cards:
White background, 12px border-radius, 16px padding, subtle shadow
Tip chips:
20px border-radius, 1.5px border, selected state uses primary green fill
FREE badge:
Green background
#DEF7EC
, dark green text, 6px border-radius
Place Order button:
54px height, lime accent
#C9F06B
, 12px border-radius, sticky at bottom
Total:
Alexandria 18px Bold, separated by 2px top border
Behavior Notes
Delivery notes section expands/collapses on tap
Tip chips are mutually exclusive; tapping "Custom" opens CON-073
Order items section expands to show full item list with quantities
"Place Order" button triggers payment processing (CON-076)
Total updates dynamically when tip or promo code changes
Accessibility
Back button has
aria-label="Go back"
Expandable sections use
aria-expanded
attribute
Tip chips should be implemented as radio buttons for screen readers
All "Change" links clearly describe their target section