9:41

Driver Tip

Show appreciation for your driver

Your tip is a direct way to say thanks

R 10

R 20

R 30

R 50

No tip That's okay too

Custom amount

R

💚 100% of your tip goes directly to the driver

CON-073 | Driver Tip

Screen Overview

Type: Full page with tip selection (no bottom navigation)
Purpose: Allow users to select or enter a custom tip amount for their delivery driver
Navigation: Back to CON-070 (Checkout Summary); confirm returns to CON-070 with tip applied

Component Specs

Illustration: 100px circle, off-white background, delivery person emoji (48px)
Tip cards: 3-column grid (row 1), 2-column grid (row 2), 16px border-radius, 2px border
Selected state: Green border + outline, light green tint background
Custom input: Prefixed with "R", 48px height, 12px border-radius
Disclaimer: Off-white background, 10px border-radius, green heart icon

Behavior Notes

R 20 is pre-selected as default (most common tip amount)
Tip cards are mutually exclusive; selecting one deselects others
Entering a custom amount deselects all predefined cards
"No tip" is a valid selection and treated respectfully ("That's okay too")
Confirm updates the checkout total with the selected tip amount
Tip amount is saved for future orders as a preference

Accessibility

Tip cards should be implemented as role="radiogroup" with individual role="radio"
Custom input has type="number" with min=0 constraint
Illustration is decorative with aria-hidden="true"
Back button has aria-label="Go back"