Checkout and payment
Component-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.
Complete screen
Review order
Confirm your plan, billing contact, renewal date, and total before continuing.
- Plan
- Team
- 20 members · unlimited projects · email support
- Due today
- $49.00
- Renews August 13, 2026 unless cancelled
No charge yet
Viewport
Ruby
test/dummy/app/components/gallery/compositions/checkout_page.rbworkspace_surface do
render_header
case state
when "review" then render_review
when "payment", "validation", "processing" then render_payment
when "succeeded" then render_result(:success, "Team plan activated", "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, "No charge created", "No charge was created and the current Starter plan remains active.")
when "refunded" then render_result(:success, "Refund sent", "$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