Payment Methods

Manage cards and bank accounts used for subscription charges, including default method, expiry, verification, and billing contacts. This example brings Methods and Billing contact together so account administrators can find the next task without losing context.

It includes representative records such as Visa ending 4242 · default and Mastercard ending 1189. Use the screenshot to study the layout, then adapt its components and product states to your own design system.

Payment Methods
Use this template in Figr

Template facts

Screen

Settings

Primary action

Add method

Pattern

Settings

State

Default, loading, empty, error, permission, success

Design system

Configurable product UI theme

What this screen helps users do

Finance and operations teams need to add method while keeping methods, default and exceptions visible. The interface should show what changed and who should act next.

Key elements

  • Main workspace: Methods gives users an obvious place to start.
  • Supporting view: Billing contact keeps the related context close.
  • Primary action: Add method stays visible when people need it.
  • First signal: Methods shows a useful value (3).
  • Second signal: Default gives additional context (Visa 4242).
  • Sample record: Visa ending 4242 · default.
  • Next record: Mastercard ending 1189.

States worth designing

  • Default preferences: say what changed, protect progress, and offer a clear next step.
  • Unsaved changes: say what changed, protect progress, and offer a clear next step.
  • Policy blocks edit: say what changed, protect progress, and offer a clear next step.
  • Changes applied: say what changed, protect progress, and offer a clear next step.
  • Restricted settings: say what changed, protect progress, and offer a clear next step.
  • Connectivity interrupted: say what changed, protect progress, and offer a clear next step.

Where this screen sits in the flow

Methods → Billing contact → Add method → Review outcome

Patterns used

Settings, Methods, Billing contact, contextual actions, error recovery

Why these choices work

Separate safe everyday choices from risky changes, show who can edit them, and confirm irreversible actions.

Pay attention to methods and billing contact. People need to distinguish Visa ending 4242 · default from Mastercard ending 1189. Keep methods visible, especially when a record changes owner or status.

Before this screen reaches handoff, verify keyboard focus, empty and permission states, and what happens after someone chooses “Add method”. Make error recovery as clear as the happy path.

Related screen examples to explore next: Plan Upgrade, Usage Metering, Billing History.

Start from this in Figr

Design a payment methods screen inside our existing product. Use our current components, tokens and content language. Include Methods and Billing contact views, credible records like Visa ending 4242 · default, and a clear “Add method” action. Use our product permissions and show loading, empty, error and success states. Keep the output editable in Figma.

Open Figr