Quick Payments App UI
Last Updated on August 20, 2026 by Editorial Team
Quick Payments App UI designed and shared by Max Josino. As the author says, the idea of this app is to make the sending/requesting payments easier and faster.
Look closely at the screens and you can see this payment app UI kit was built around one idea: strip a money transfer down to as few taps as possible.
The onboarding screen sets the tone with a photo of a man checking his phone on the street, paired with the line about making and requesting payments around the world.
That single image does more work than any paragraph of copy could, showing a real person in a real moment rather than an abstract icon.
The confirmation screen with “Your payment has been approved!” in green, the dollar amount in oversized type, and a simple “Okay! Thanks.” button is a good study in how to close a transaction flow without making the user think twice.
The card and checkout screen is the visual centerpiece of the set, with a QR code up top, a seller and price breakdown in the middle, and a deep indigo Visa card mockup with the masked digits sitting above a rounded “Confirm and Pay” button.
That indigo blue reappears throughout the kit as the anchor color, carried through gradients on the transaction history screen and the circular Pay and Request buttons at the bottom of the activity feed.
The transaction list screen is worth studying on its own, since it solves a real interface problem: how to show money moving in both directions without confusing the user.
Red negative amounts, green positive ones, small circular avatars, and city labels under each name give every row enough context to be read at a glance.
It is the kind of pattern you would reuse directly in a peer-to-peer payment app, a splitting-the-bill feature, or any fintech product where users need to scan a feed of recent activity fast.
Where This UI Kit Fits Best
This is a natural starting point for anyone designing a mobile payment app, digital wallet, or peer-to-peer money transfer product.
The QR code screens make it especially useful for in-person checkout flows, like a cafe or restaurant scenario where a customer pays by scanning a code, similar to what’s shown on the Corner Bakery Cafe screen.
Beyond fintech, the underlying patterns (confirmation states, card selection carousels, activity feeds, request/pay actions) translate well to marketplace apps, invoicing tools, or any product that needs to show a clear money-in, money-out relationship.
If you’re prototyping a checkout experience, building a case study around financial UX, or just need believable payment screens to drop into a portfolio mockup, this kit gives you a realistic base rather than generic placeholder boxes.
Adapting the Screens to Your Own Brand
Swapping in your own brand color is the fastest way to make this kit feel original.
Since the indigo blue is used consistently across buttons, gradients, and the card itself, replacing that one hue across every screen will shift the whole kit’s personality without touching the layout.
Replace the sample names, avatars, and transaction amounts on the activity screen with your own data or realistic placeholders so the flow feels tailored to your product rather than left as a demo.
The card screen’s carousel dots suggest there’s room to design a second or third card state, so consider duplicating that artboard to show multiple saved cards or payment methods.
Keep the confirmation screen’s structure, the big number, short status line, and single action button, since that hierarchy is what makes it easy to scan and act on in a real product.
