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
Choose a plan
Select a plan before entering payment details.
No plan selected
Choose a plan before entering payment details.
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