Checkout

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