figma guide
Designing payment methods UI in Figma: cards, wallets, BNPL, and handoff
Design credit card forms, saved payment methods, digital wallets, and BNPL options in Figma with PCI-safe patterns, validation states, and Dev Mode specs for checkout.
- Published
- Updated
- Jun 22, 2026
- Read time
- 8 min
- Level
- Beginner
Quick answer
Payment UI is a checkout step, not a generic form—separate saved-method pickers, new card entry, wallet express buttons, and BNPL tiles into distinct components with explicit security copy. Build PaymentMethodCard (radio list for saved cards), CardEntryForm with brand detection and field-level validation, WalletButtonRow for Apple Pay / Google Pay / PayPal, and BNPLOptionTile with installment breakdown. Never design raw card numbers in high-fidelity mocks engineers will screenshot—use tokenized field placeholders and note “Stripe/Payment Element slot.” Pair with checkout, gift cards, and forms. Start from the Figma guides hub.
Who this is for
- Product designers shipping DTC checkout, marketplaces, and B2B invoicing with multiple payment rails.
- Design system teams standardizing payment display across web, mobile web, and embedded checkout.
- Engineers integrating payment processors, tokenization iframes, 3-D Secure modals, and saved instrument APIs.
Payment surfaces
| Surface | Goal | Key components |
|---|---|---|
| Checkout payment step | Collect or select payment | PaymentMethodPicker, CardEntryForm |
| Saved methods (account) | Manage cards on file | PaymentMethodCard list, Add new |
| Express checkout | Skip steps with wallet | WalletButtonRow above stepper |
| BNPL selection | Installment choice | BNPLOptionTile, schedule breakdown |
| Order confirmation | Receipt payment line | PaymentMethodSummary read-only |
| Failed payment retry | Recover from decline | PaymentErrorBanner, retry CTA |
Verdict: one PaymentMethodCard reused in checkout radio list and account wallet—same last-four, brand icon, and expiry layout everywhere.
PaymentMethodCard anatomy
| Part | Purpose | Spec tip |
|---|---|---|
| Radio / select | Choose at checkout | Single-select only on payment step |
| Brand icon | Visa, MC, Amex, etc. | 32×20px SVG set; unknown = generic card |
| Masked number | Last four digits | ”•••• 4242” never full PAN |
| Expiry | Card validity | ”Exp 08/27” localized format |
| Default badge | Primary on file | Badge “Default” |
| Edit / Remove | Account context | Remove opens confirm modal |
PaymentMethodCard
├── Variant: context=checkout | account | readonly
├── Variant: type=card | wallet | bnpl | gift_card
├── Variant: state=default | selected | expired | disabled
├── Property: brand (visa | mastercard | amex | unknown)
├── Property: lastFour (string)
├── Property: isDefault (boolean)
└── Layers:
├── SelectIndicator (radio)
├── BrandIcon
├── MaskedDetails (number + expiry)
├── DefaultBadge (optional)
└── ActionRow (Edit | Remove)Expired cards show inline alert on card: “This card expired—update or choose another method.”
CardEntryForm fields
| Field | Label | Validation states |
|---|---|---|
| Card number | Card number | empty, focus, valid brand detected, invalid Luhn, unsupported brand |
| Expiry | MM / YY | empty, invalid date, expired |
| CVC | Security code | empty, invalid length (3 vs 4 for Amex) |
| Name on card | Name on card | empty, invalid characters |
| Billing ZIP (US) | ZIP code | optional if collected elsewhere; AVS note for eng |
Design rule: show a dashed placeholder box labeled “Payment Element — card fields rendered by processor” when your team uses Stripe Elements or similar—designers specify spacing, label copy, and error placement; engineers drop the iframe inside your frame bounds.
| State | Border | Helper text |
|---|---|---|
| Default | neutral | ”All transactions are secure and encrypted” |
| Focus | brand accent | — |
| Error | red | ”Card number is invalid” under field |
| Success | green check on brand icon | Auto-advance to next field optional |
Use segmented layout only if you offer “Credit card” vs “PayPal” as top-level tabs—otherwise wallets sit above the card form as express options.
Digital wallet express checkout
| Wallet | Button spec | Placement |
|---|---|---|
| Apple Pay | Black pill, Apple logo + “Pay” | Top of payment step; full width mobile |
| Google Pay | White/dark per theme | Same row as Apple Pay on supported browsers |
| PayPal | Gold branded button | Often alternate path—may skip address if account has it |
| Shop Pay | Purple branded | Shopify ecosystems |
WalletButtonRow
├── Layout: vertical stack mobile | horizontal row desktop max 2-up
├── Spacing: 12px between buttons
├── Divider: "— or pay with card —" text between express and form
└── States: default | loading | unavailable (hidden)When to hide wallets: if cart contains subscription + one-time mix incompatible with wallet, show tooltip on disabled wallet: “Apple Pay unavailable for this order.”
Prototype wallet buttons as interactive components with pressed state only—actual wallet sheets are OS-native.
BNPL (buy now, pay later)
| Element | Content | Notes |
|---|---|---|
| Tile | Klarna / Affirm / Afterpay logo + “Pay in 4” | Radio select like payment method |
| Schedule breakdown | 4 × $24.99 dates | Show after tile selected |
| Legal microcopy | ”Subject to approval” | Link to provider terms |
| OrderSummary row | No change until selected | BNPL replaces card charge semantics |
Model BNPLOptionTile with expanded variant showing installment table—collapsed on mobile, expandable accordion for schedule detail.
Verdict: BNPL is a payment method, not a promo discount—do not show negative discount rows when BNPL selected.
Checkout payment step layout
CheckoutPaymentStep
├── CheckoutStepper (Shipping ✓ | Payment | Review)
├── WalletButtonRow (optional express)
├── Divider
├── PaymentMethodPicker (saved cards radio list)
├── Link: "+ Add new card" → expands CardEntryForm inline
├── CardEntryForm (when adding new OR no saved methods)
├── Checkbox: "Save card for future purchases"
├── BNPLOptionSection (optional)
├── GiftCardSection → link [gift card guide](/designing-gift-cards-and-vouchers-ui-in-figma/)
├── OrderSummary (sticky desktop)
└── Primary CTA: "Pay $XX.XX" | "Continue to review"On mobile, stack OrderSummary collapsed accordion above pay button so total is visible before charge.
Security and trust patterns
| Pattern | Copy example | Placement |
|---|---|---|
| Lock icon + SSL | ”Secure checkout” | Near pay button |
| Processor badges | Visa Secure, Mastercard ID Check | Footer of payment step |
| No storage disclaimer | ”We don’t store your full card number” | Under save-card checkbox |
| 3DS note for eng | ”SCA modal — out of scope for Figma; link Figma frame for loading overlay” | Dev Mode comment |
Avoid designing fake card numbers that look real (e.g., valid-looking test PANs in marketing screenshots)—use obviously fake “4111 1111 1111 1111” with watermark “Sample.”
Error and retry flows
| Error | UI | Recovery |
|---|---|---|
| Card declined | Toast + inline on card field | ”Try another card” |
| Insufficient funds | Same | Suggest BNPL if available |
| 3DS failed | Modal skeleton frame | Return to payment step |
| Processor timeout | Empty-state style alert | Retry button, preserve form |
| AVS mismatch | Warning not hard error | ”Billing ZIP doesn’t match—confirm or update” |
Show PaymentErrorBanner below stepper with order ID reference for support on persistent failures.
Dev Mode handoff checklist
| Spec | Value to document |
|---|---|
| Component names | PaymentMethodCard, CardEntryForm, WalletButtonRow |
| Tokenized field bounds | Width, height, label-to-field gap for iframe |
| Brand icon set | Link SVG export or icon plugin roundup |
| Error copy strings | All validation messages as text styles |
| Analytics events | payment_method_selected, wallet_clicked, bnpl_expanded |
| A11y | Radio group label “Payment method”; wallet buttons need accessible names |
Link Dev Mode checklist for inspect workflow with engineers.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Full card number in mockups | PCI confusion, screenshot leaks | Masked last-four only |
| Separate drawer vs page card UI | Inconsistent saved methods | One PaymentMethodCard |
| BNPL shown as discount row | Wrong ledger logic | Separate payment method tile |
| No expired card state | Failed renewals | state=expired variant |
| Wallet + card form same hierarchy | Cluttered payment step | Express on top, divider, then card |
| Missing “save card” default | Unexpected vault behavior | Explicit opt-in checkbox |
Recommended workflow
- Confirm processor (Stripe, Adyen, Braintree) and whether Payment Element or custom fields.
- Build
PaymentMethodCardwith brand icons and masked display. - Design
CardEntryFormwith all validation states and placeholder for tokenized iframe. - Add
WalletButtonRowand divider pattern for express checkout. - Layer BNPL tiles if product supports installments—expanded schedule variant.
- Wire checkout payment step with saved list, add new, gift card slot, sticky summary.
- Design account payment methods page reusing same card component.
- Prototype decline error, expired card, and wallet-unavailable paths.
FAQ
Should billing address live on payment step or shipping?
Usually shipping step—payment step shows “Billing same as shipping” toggle with expandable billing address form when off.
Design Apple Pay sheet in Figma?
No—note “Native OS sheet” in Dev Mode; design only the trigger button and post-success confirmation redirect.
Multiple gift cards + credit card split?
Show gift card balance rows in OrderSummary first; CardEntryForm charges remaining amount due only—label CTA “Pay remaining $XX.XX.”
Corporate PO / invoice payment?
Add PaymentMethodCard variant type=invoice with PO number field—B2B checkout extension, not consumer card form.
Subscription vs one-time card?
Saved methods on subscription need default for renewals badge separate from checkout default—two boolean properties on same card component.
Next steps
- Design shopping cart and checkout UI in Figma — checkout steps and OrderSummary
- Design gift cards and vouchers UI in Figma — balance applied before card charge
- Design saved addresses UI in Figma — billing same as shipping
- Design forms in Figma — field validation patterns
- Figma Dev Mode handoff checklist — specs engineers need
§ Keep reading