A payment design system built for speed
Amazon Business doesn't have one payment flow, it has dozens: cards, bank accounts, wallets, buy-now-pay-later, benefits cards and local schemes, across markets and account types. Before Pay Studio, each one was designed from scratch, so the same sheet got redrawn a little differently every time.
Pay Studio turned that into an atomic system. Components build templates, templates build use cases, and designers assemble a new flow instead of starting from a blank frame.
I built it in 2023, when shared component libraries were still new at Amazon. It was one of the first of its kind at the company and the first in Amazon Business Payments.
Explore the full system in Figma →
Three layers, component to journey
Each layer is built from the one below. Components are the parts, templates are complete task screens, and use cases wire templates into a journey a customer finishes.
From the Figma file
From the Figma file
From the Figma fileForty-seven components
The library holds 47 components, Accordion to Toast, each specced for mobile and desktop. The payment ones share an anatomy. Here's Primary payment method, the row every wallet is built from.
- 1Asset slot. Filled by Art, so every method takes the same footprint.
- 2Primary label. Method name and masked number.
- 3Secondary label. Cardholder and expiry, or why it's ineligible.
- 4Feature slot. Takes any Feature component.
- 5Trailing control. A Switch here. The row picks the control, not the template.
- 6Selection state. One treatment for every method type.
The feature slot is the clever part. Rewards, installments, an expired card or a currency change all drop into the same slot, so a new payment feature is a new component, not a new wallet. Try one:
A few more from the library:
Browse the components in the Figma file →
Pick it, tweak it, drop it in
Pay Studio came with a builder. Designers could browse every component, set its props, preview its states and copy the code, instead of hunting through a Figma file. Here's a small version: drag components into the sheet, then tap one to customize it.
One base sheet, every task
Templates are complete screens for one task. Instead of designing each one separately, every template starts from one base sheet with a fixed skeleton, and only its body slot changes. Consistency becomes something the file can't break.
- 1Sheet chrome. Back, brand mark, dismiss. Never changes.
- 2Title block. Heading and optional subcopy.
- 3Body slot. The only part a template changes.
- 4Primary action. One per sheet, always in the same spot.
- 5Security note. Wherever credentials are entered.
See the templates grouped by task in Figma →
A payment method, end to end
A use case wires templates into a journey. The real test is an awkward method, so here's BANCOMAT Pay, which registers with a phone number and hands off to the customer's bank app. It used to justify a custom flow. Here it's four existing templates.
What it didn't need: a new sheet, a new selection state or a new success screen. Just one list row, one body slot and one line of copy.
See more use case pathways in Figma →
Adding a new payment method
Click through the flow, or step it with your arrow keys.
What it changed
Pay Studio moved payment design from drawing to assembly. Designers across Amazon Business built from the same parts, which sped up production, cut errors and reached 80% adoption in eight months.
The same structure carried into the Amazon Business Credit Card experience the next year, and it's still how I work on Windows Design Systems.