# Food delivery app checkout

> A food delivery checkout for Figma: address, delivery time, card and tip as rows, a price breakdown that totals the order and a Place order bar.

The order, ready to pay, in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: rows for the address Prinsengracht 512, As soon as possible 19:20 to 19:35, Visa ending 4242 and Add a tip, a breakdown that totals $34.39, and Place order.

Page: https://www.appetiteui.com/screens/food-delivery/checkout. Every screen of the app: https://www.appetiteui.com/docs/screens-foodie.

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Checkout | Address, time, payment, tip and the total | Top Bar, List, Price Row, Button |

- Checkout, light: 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 bar
  Picture: https://www.appetiteui.com/images/au_foodie_checkout_light.webp (dark: https://www.appetiteui.com/images/au_foodie_checkout_dark.webp)

## How the screen follows the checkout pattern

| Rule | On this screen |
| --- | --- |
| Show the total before the button | The Price Rows end on $34.39 right above Place order, the same total the cart showed, so nothing changes between the two screens. |
| The button says what it does | Place order names the act; it is the only button on the screen. |
| Every choice is a row | Address, time, card and tip are four List rows, one choice each, so checkout stays one screen. |

## Built from

| Component | Screens |
| --- | --- |
| Top Bar | Checkout |
| List | Checkout |
| Price Row | Checkout |
| Button | Checkout |

## iOS and Material

The frames are drawn in the ios-md Platform mode; an android frame reads the Material values.

| 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 |

## Related

- Food delivery app: [Food delivery app home](https://www.appetiteui.com/screens/food-delivery/home)
- Food delivery app: [Food delivery app restaurant menu](https://www.appetiteui.com/screens/food-delivery/restaurant-menu)
- Food delivery app: [Food delivery app cart](https://www.appetiteui.com/screens/food-delivery/cart)
- Food delivery app: [Food delivery app order tracking](https://www.appetiteui.com/screens/food-delivery/order-tracking)
- Docs: [Foodie app screens, every screen and token](https://www.appetiteui.com/docs/screens-foodie)
- Pattern: [Checkout and payment screens](https://www.appetiteui.com/screens/patterns/checkout)
- 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)
- 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)