Profile and settings
Desktop27 components135 variants4 recreations
Desktop settings screens: shell, profile, team members, roles, API keys, notifications, theme, security and danger zone.
$9, or included with Pro
Checkout and payments (Desktop)
Desktop packFlows
Desktop checkout pages, card and address forms, order summaries, invoices and payment results, ready to compose.
- components
- 12
- variants
- 48
- recreations
- 4
- themes
- 5
Also for mobile: Checkout and payments
What’s inside
Twelve desktop checkout patterns: a one-page checkout with express wallets, a two-column layout with order summary, card element, address form, shipping options, promo code, invoice, saved cards, subscription checkout, and payment success and failure. Sets include error, loading and processing states. Every page has documentation and a live grid in light and dark.
- Official Google Pay button artwork, used as supplied
- Four payment failure reasons, each with its own message
- Recreations of Stripe, Shopify, Gumroad and Airbnb checkouts
One-page checkout
3 variants
- Default
- Errors
- Processing
Order summary
Free sample4 variants
- Expanded
- Collapsed
- Default
- Updating
Two-column checkout
2 variants
- Desktop
- Tablet
Card element
5 variants
- Empty
- Focus
- Filled
- Error
- Disabled
Address form
6 variants
- UK
- US
- Default
- Lookup
- Error
Shipping options
4 variants
- Default
- Changed
- Loading
- Unavailable
Promo code
5 variants
- Collapsed
- Open
- Applying
- Applied
- Invalid
Invoice
3 variants
- Paid
- Due
- Overdue
Payment success
4 variants
- Order
- Subscription
- Processing
- Success
Payment failed
4 variants
- Declined
- Insufficient funds
- Authentication
- Connection
Saved cards
4 variants
- Default
- Add new
- Expired
- Empty
Subscription checkout
4 variants
- Monthly
- Yearly
- None
- Free trial
- Figma file
- SuperDuper Pack: Checkout and payments (Desktop)
- 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 Stripe Checkout, Shopify and Gumroad and others 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.
Hosted payment page
Recreated from Stripe Checkout
Store checkout
Recreated from Shopify
Creator checkout
Recreated from Gumroad
Reservation card
Recreated from Airbnb
Not affiliated with, endorsed or sponsored by Stripe Checkout, Shopify, Gumroad and Airbnb. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the order summary full size, free
An order summary, 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
Auth and sign-in
Desktop13 components47 variants4 recreations
Desktop sign-in, sign-up, SSO, passkey, two-factor, magic link, password reset and invite screens with every state.
$9, or included with Pro
Paywalls and pricing
Desktop11 components39 variants4 recreations
Desktop pricing pages, upgrade modals, billing, trials and cancel flows, with a guide to honest pricing.
$9, or included with Pro
Questions about the checkout and payments pack
One Figma file: SuperDuper Pack: Checkout and payments (Desktop). It has 12 components with 48 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.