# Finance app payment screen

> A send money and QR payment sheet for a Figma finance app: a Pay and Receive switch, the recipient, the amount and a QR code, from Appetite UI components.

Money to a person, drawn as a sheet in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: a Pay and Receive switch, Send money to Amara Diallo, an amount of $450.80, a QR code and Share and Save QR buttons.

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

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Pay | A sheet that sends money to a person or shows a QR code | Top Bar, Segmented Control, Avatar, Button |

- Pay, light: 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 buttons
  Picture: https://www.appetiteui.com/images/au_finance_pay_light.webp (dark: https://www.appetiteui.com/images/au_finance_pay_dark.webp)

## How the screen follows the checkout pattern

| Rule | On this screen |
| --- | --- |
| Show the total before the button | There is no price breakdown to show, so the amount itself is the total, set large in the middle of the sheet where a checkout would put its sum. |
| The button says what it does | The buttons say Share and Save QR, the two things the sheet does, rather than a generic Done. |
| Every choice is a row | Pay is a sheet without a tab bar: it opens over the app and closes back to it, so the person and the amount are the only choices on it, switched by one Segmented Control. |

## Built from

| Component | Screens |
| --- | --- |
| Top Bar | Pay |
| Segmented Control | Pay |
| Avatar | Pay |
| Button | 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

- Finance app: [Finance app dashboard](https://www.appetiteui.com/screens/finance/dashboard)
- Finance app: [Finance app transaction history](https://www.appetiteui.com/screens/finance/transaction-history)
- Docs: [Finance app screens, every screen and token](https://www.appetiteui.com/docs/screens-finance)
- Pattern: [Checkout and payment screens](https://www.appetiteui.com/screens/patterns/checkout)
- 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)