# Checkout and payment screens

> Checkout, cart and payment screens from a Figma UI kit for iOS and Android apps: a food order, a stay and a money transfer, each ending on one button.

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.

Page: https://www.appetiteui.com/screens/patterns/checkout.

## Screens

| App | Screen | What it shows | Page |
| --- | --- | --- | --- |
| Food delivery app | Cart | Items with steppers, a price breakdown and a Go to checkout bar | https://www.appetiteui.com/screens/food-delivery/cart |
| Food delivery app | Checkout | Address, time, payment, tip and the total | https://www.appetiteui.com/screens/food-delivery/checkout |
| Booking app | Review and pay | The stay, a price breakdown, the card and the cancellation terms | https://www.appetiteui.com/screens/booking/checkout |
| Finance app | Pay | A sheet that sends money to a person or shows a QR code | https://www.appetiteui.com/screens/finance/payment |

## Rules

- Show the total before the button. The 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 does. Place order, Confirm and pay, Go to checkout. Never Continue on the screen that takes the money.
- Every choice is a row. Address, time, card and tip are List rows with a chevron, so a change opens its own screen and the summary stays one screen long.

## iOS and Material

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Sheet corner | 12 pt | 28 dp | `platform/sheet/corner` |
| List row, minimum height | 44 pt | 56 dp | `platform/list-row/min-height` |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Sheet | iOS / Sheet - Full Screen | M3 / Bottom sheet 412 wide and Side Sheet 320 wide | Material adds a side sheet for large screens |
| List | iOS / List with a 44 minimum row | M3 / List Item, 56, 72 or 88 high by Lines | Material sets the row height by lines of text, iOS sets only a minimum |

## Questions

### What should a checkout screen show before the pay button?

The total, broken into its parts, directly above the button that takes the money, and every choice (address, time, card, tip) as a row that opens its own screen. The button names the act: Place order, Confirm and pay.

### What is the difference between a cart and a checkout screen?

A cart builds the order: items, quantities, a promo code. Checkout takes the money: address, delivery time, card and the total. Appetite UI’s food delivery app keeps them on two screens with Go to checkout between them.

## Sources

1. [Apple Human Interface Guidelines: Sheets](https://developer.apple.com/design/human-interface-guidelines/sheets)
2. [Material Design 3: Bottom sheets](https://m3.material.io/components/bottom-sheets/overview)

## Related

- Finance app: [Finance app payment screen](https://www.appetiteui.com/screens/finance/payment)
- Booking app: [Booking app checkout](https://www.appetiteui.com/screens/booking/checkout)
- Food delivery app: [Food delivery app cart](https://www.appetiteui.com/screens/food-delivery/cart)
- Food delivery app: [Food delivery app checkout](https://www.appetiteui.com/screens/food-delivery/checkout)
- Docs: [List](https://www.appetiteui.com/docs/list)
- Docs: [Input](https://www.appetiteui.com/docs/input)
- Docs: [Modal](https://www.appetiteui.com/docs/modal)
- Glossary: [Bottom sheet](https://www.appetiteui.com/academy/glossary/bottom-sheet)
- Glossary: [List row](https://www.appetiteui.com/academy/glossary#list-row)
- Article: [Touch target size on iOS and Android: 44 pt, 48 dp and the WCAG minimum](https://www.appetiteui.com/blog/touch-target-size-ios-android)