Checkout

A checkout screen that keeps payment, billing, totals, trust cues, and the final purchase action clear without adding unnecessary friction.

Checkout
Use this template in Figr

Template facts

Screen

Checkout

Primary action

Complete a purchase

Pattern

Form with order summary

State

Default

Design system

Halo Consumer

What this screen helps users do

Buyers need to confirm what they are buying, enter only the required payment details, understand the total, and know what happens after they pay.

Key elements

  • Order summary
  • Payment method
  • Billing details
  • Taxes, discounts, and total
  • Clear final action and trust cues

States worth designing

  • Card declined
  • 3DS challenge
  • Coupon invalid
  • Payment processing
  • Purchase complete

Where this screen sits in the flow

Cart / Plan → Checkout → Payment Processing → Success / Receipt

Patterns used

Form, order summary, payment selector, validation, success state

Why these choices work

Keep the final total visible before the user pays. Validate fields close to where errors happen, and preserve entered data when payment fails.

Start from this in Figr

Create a high-fidelity checkout flow for a software or ecommerce product. Include order summary, payment method, billing details, taxes, discounts, validation, processing, failure, and success states.

Open Figr