Skip to content

Preview step

Preview screen{ width="320" }

Purpose

Provide a final order summary before collecting payment.

What’s shown

  • Order Summary header
  • Customer identity block:
  • Initials avatar (e.g., JD)
  • Name (e.g., Jane Doe)
  • Contact (phone shown)
  • Package summary:
  • Package name (example: Test Package)
  • Price
  • Line item breakdown
  • Plan summary:
  • Plan name (example: test-plan-0-quota)
  • Price
  • Total Amount (top-right summary card)

A status line indicates readiness (e.g., Ready to collect payment).

Actions

  • Collect Payment proceeds to Payment
  • Back returns to Plan

Suggested validations

  • Total should equal package price + plan price (or whatever business logic applies).
  • If any required step is incomplete, prevent moving forward and show a clear message.