Skip to content

Updated

Copy page

Checkout and payment screens

The screens where money moves, drawn four ways in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system. Each one ends on a single button that names what happens when it is tapped.

Copy page

Updated

On this page
  1. Screens
  2. Live components
  3. The rules
  4. iOS and Material
  5. Related
  6. Get the file

Screens

Every screen of the Appetite UI Figma file that shows the pattern, light and dark. The theme switch shows the dark frames.

Checkout and payment screens393 x 852 each, Light and Dark
Foodie app Cart screen: Your order from Ramen Kitchen arriving 19:20 to 19:35, Shoyu ramen and Sushi set items with quantity steppers, a subtotal of $32.90 and a service fee of $1.49, Add a promo code and Add cutlery rows, and a Go to checkout bar with $34.39Foodie app Cart screen in dark mode: Your order from Ramen Kitchen arriving 19:20 to 19:35, Shoyu ramen and Sushi set items with quantity steppers, a subtotal of $32.90 and a service fee of $1.49, Add a promo code and Add cutlery rows, and a Go to checkout bar with $34.39
Food delivery app, Cart
Foodie app Checkout screen: rows for the address Prinsengracht 512, Amsterdam, As soon as possible 19:20 to 19:35, Visa ending 4242 and Add a tip, a price breakdown that totals $34.39, and a Place order barFoodie app Checkout screen in dark mode: rows for the address Prinsengracht 512, Amsterdam, As soon as possible 19:20 to 19:35, Visa ending 4242 and Add a tip, a price breakdown that totals $34.39, and a Place order bar
Food delivery app, Checkout
Booking app Review and pay screen: the Lakeside cabin stay for 12 to 17 February, a price breakdown of $900, $45 and $68 that totals $1,013, a Visa ending 4242 row, the cancellation policy, and a Confirm and pay buttonBooking app Review and pay screen in dark mode: the Lakeside cabin stay for 12 to 17 February, a price breakdown of $900, $45 and $68 that totals $1,013, a Visa ending 4242 row, the cancellation policy, and a Confirm and pay button
Booking app, Review and pay
Finance app Pay sheet: Send money to Amara Diallo with a Pay and Receive switch, an amount of $450.80, a QR code and Share and Save QR buttonsFinance app Pay sheet in dark mode: Send money to Amara Diallo with a Pay and Receive switch, an amount of $450.80, a QR code and Share and Save QR buttons
Finance app, Pay
Screens, app, screen, what it shows, page
AppScreenWhat it showsPage
Food delivery appCartItems with steppers, a price breakdown and a Go to checkout barFood delivery app cart
Food delivery appCheckoutAddress, time, payment, tip and the totalFood delivery app checkout
Booking appReview and payThe stay, a price breakdown, the card and the cancellation termsBooking app checkout
Finance appPayA sheet that sends money to a person or shows a QR codeFinance app payment screen

Which components carry the checkout pattern?

Drawn live from the kit's tokens, at the kit's geometry. Tap them: they behave as the Figma prototype does.

Checkout, live componentsKit geometry, light and dark

List, Price Row

Subtotal$32.90Service fee$1.49Total$34.39

Stepper

2

Button, Fill, large

What does every checkout screen do?

The rules the screens above share. Each app's page says how its screen applies them.

Rules, rule, why
RuleWhy
Show the total before the buttonThe price breakdown sits directly above the button that pays it, so the number someone agrees to is the last thing they read.
The button says what it doesPlace order, Confirm and pay, Go to checkout. Never Continue on the screen that takes the money.
Every choice is a rowAddress, time, card and tip are List rows with a chevron, so a change opens its own screen and the summary stays one screen long.

What changes between iOS and Material?

The frames are drawn in the ios-md Platform mode. Switch a frame to android and these variables take the Material values.

Platform variables, variable, iOS, Android
VariableiOS (ios-md)Android
platform/sheet/corner1228
platform/list-row/min-height4456
platform/min-touch-target4448
Counterparts, component, iOS, Material 3, what differs
ComponentiOSMaterial 3What differs
SheetiOS / Sheet - Full ScreenM3 / Bottom sheet 412 wide and Side Sheet 320 wideMaterial adds a side sheet for large screens
ListiOS / List with a 44 minimum rowM3 / List Item, 56, 72 or 88 high by LinesMaterial sets the row height by lines of text, iOS sets only a minimum

Start from these screens.

Every frame on this page is part of the Appetite UI file, drawn from its components and bound to its variables, so one brand edit moves every screen in light and dark.

The file holds 589 variables in 6 collections and exports its token values to SwiftUI, Jetpack Compose, Flutter and CSS. Solo covers one designer and Team up to ten people. You pay once and keep lifetime updates. Price goes up Nov 1

The read-only Figma preview opens the whole file, every screen and every variable, before you buy.

Get lifetime accessOpen the Figma previewSee the plans