# Booking app checkout

> A booking review and pay screen for Figma: the stay and dates, a price breakdown, the card, the cancellation policy and a Confirm and pay button.

The last screen before a stay is booked, drawn in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: the Lakeside cabin for 12 to 17 February, a breakdown of $900, $45 and $68 that totals $1,013, a Visa ending 4242, the cancellation policy and Confirm and pay.

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

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Review and pay | The stay, a price breakdown, the card and the cancellation terms | Top Bar, Price Row, List, Button |

- Review and pay, light: 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 button
  Picture: https://www.appetiteui.com/images/au_booking_review_and_pay_light.webp (dark: https://www.appetiteui.com/images/au_booking_review_and_pay_dark.webp)

## How the screen follows the checkout pattern

| Rule | On this screen |
| --- | --- |
| Show the total before the button | The breakdown ends on the total in Price Rows right above the button, so $1,013 is the last figure read before paying it. |
| The button says what it does | The button reads Confirm and pay, the two things it does, on the one screen that takes the money. |
| Every choice is a row | The card, Visa ending 4242, is a List row of its own and the cancellation terms sit as text under it, apart from the price. |

## Built from

| Component | Screens |
| --- | --- |
| Top Bar | Review and pay |
| Price Row | Review and pay |
| List | Review and pay |
| Button | Review and pay |

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

- Booking app: [Booking app search and filters](https://www.appetiteui.com/screens/booking/search-and-filters)
- Booking app: [Booking app confirmation](https://www.appetiteui.com/screens/booking/confirmation)
- Docs: [Booking app screens, every screen and token](https://www.appetiteui.com/docs/screens-booking)
- 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)
- 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)