Auth and sign-in
Mobile15 components83 variants4 recreations
Mobile sign-in screens and parts, from social buttons and passkeys to codes, two-factor and locked accounts.
$9, or included with Pro
Checkout and payments (Mobile)
Mobile packFlows
Mobile checkout from basket to receipt: addresses, delivery slots, cards, wallets, promo codes, tips and orders.
- components
- 14
- variants
- 43
- recreations
- 4
- themes
- 5
Also for desktop: Checkout and payments
What’s inside
14 checkout patterns for phone apps, from the basket and price breakdown through address, delivery slot, payment methods, add card, express checkout, promo code and tip, to confirmation, order history, order detail and receipt. Wallet buttons follow Google and Apple rules. Each page has a documentation frame and every state in light and dark, comfortable and compact.
- Google Pay and Apple Pay marks used as their owners require
- Sticky place-order bar with blocking reasons
- 4 recreations of food delivery, shopping and stays checkouts
Basket
3 variants
- Default
- Updating
- Item unavailable
Price breakdown
Free sample4 variants
- Expanded
- Collapsed
- Default
- Updating
Address selection
3 variants
- Saved
- Add new
- Error
Delivery slot
3 variants
- Now
- Scheduled
- Unavailable
Payment methods
3 variants
- Default
- Expired card
- Loading
Add card
5 variants
- Empty
- Focus
- Filled
- Error
- Saving
Express checkout
3 variants
- All
- Device and card
- Card only
Promo code
4 variants
- Collapsed
- Entering
- Applied
- Invalid
Tip selector
3 variants
- Not now
- Percentage
- Custom
Checkout screen
3 variants
- Default
- Missing address
- Placing order
Order confirmation
3 variants
- Placed
- Preparing
- On its way
Order history
2 variants
- Default
- Loading
Order detail
2 variants
- Delivered
- Refunded
Receipt
2 variants
- Receipt
- Loading
- Figma file
- SuperDuper Pack: Checkout and payments (Mobile)
- Themes
- Light, Dark, Light high contrast, Dark high contrast and Wireframe
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 1 UI element and 6 screen patterns
- Price summary, Cart, Checkout, Payment method, Order confirmation, Order history and Order detail
How Uber Eats, Shop and Airbnb do it
Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.
Food delivery checkout
Recreated from Uber Eats
Courier tip
Recreated from Uber Eats
Review and pay
Recreated from Shop
Stays payment
Recreated from Airbnb
Not affiliated with, endorsed or sponsored by Uber Eats, Shop and Airbnb. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the price breakdown full size, free
The order summary module, expanded and collapsed, in its default and updating states. All 4 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More flows packs
Onboarding and walkthroughs
Mobile20 components128 variants4 recreations
Mobile onboarding screens from splash to celebration, with questions, goals, permissions and tutorials.
$9, or included with Pro
Paywalls and pricing
Mobile14 components80 variants6 recreations
Mobile paywalls, plan cards, trial timelines, upsell sheets and offers, built around honest pricing.
$9, or included with Pro
Questions about the checkout and payments pack
One Figma file: SuperDuper Pack: Checkout and payments (Mobile). It has 14 components with 43 variants, 4 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.