Checkout and payment flow

Checkout and payment

Block-composed order review, payment entry, provider outcomes, cancellation, refunds, and pressure states.

Checkout and payment outcomes

Order review, card entry, provider outcomes, cancellation, refunds, content pressure, and narrow layouts.

Refunded

Refund amount, destination, reference, and settlement expectation are visible.

ViewportFull width
Rubytest/dummy/app/components/gallery/flows/checkout_page.rb
workspace_surface do
  render_header

  case state
  when "review" then render_review
  when "payment", "validation", "processing" then render_payment
  when "succeeded" then render_result(:success, "Payment complete", "Team plan access is active and receipt CHK-2048 was emailed.")
  when "failed" then render_failed
  when "requires-action" then render_requires_action
  when "cancelled" then render_result(:warning, "Checkout cancelled", "No charge was created and the current Starter plan remains active.")
  when "refunded" then render_result(:success, "Payment refunded", "$49.00 was returned to Visa ending in 4242. Bank settlement can take five business days.")
  when "empty-cart" then render_empty_cart
  when "long" then render_long
  when "mobile" then render_mobile
  end
end