Subscription billing
Component-composed plan, payment, paginated invoice, cancellation, outcome, and mobile billing states.
Subscription billing
Plans, card replacement, paginated invoice records, cancellation safeguards, outcomes, and pressure states.
Payment validation
Invalid card, expiry, email, and address values connect errors to their controls.
Replace payment method
Update the card and receipt destination used for future Team plan charges.
Payment method was not saved
Cardholder name can't be blank, Card number must be 16 digits, Expiry must use MM/YY, Billing email is invalid, and Postal code can't be blank
Current card
Visa ending in 4242 · expires 08/26 · next charge August 1, 2026
Viewport
Ruby
test/dummy/app/components/gallery/compositions/billing_page.rbdiv(
data: {
gallery: "composition-surface",
gallery_composition: "billing",
gallery_mobile: state == "mobile" ? "true" : nil
}.compact
) do
render NitroKit::Container.new(size: :xl, id: "gallery-billing-container") do
render NitroKit::Flex.new(dir: :col, gap: 6, align: :stretch, id: "gallery-billing-stack") do
turbo_frame_tag("gallery-billing-frame") { render_screen }
end
end
end