DailyUI 002 - Credit Card Checkout

by muhammad mannan

A mobile checkout screen designed to make the final step of a purchase feel clear and calm. Design decisions: • The total sits at the top in large type, so users always know exactly what they're paying before they commit • A card preview reflects the payment details, giving visual confirmation before submitting • Form lives in a bottom sheet, keeping the card and total visible while typing • Expiry and CVV share a row to shorten the form and match how they appear on a physical card • High-contrast "Pay Now" button makes the primary action unmistakable Part of my 100 Days of Daily UI challenge. Feedback welcome!