Billing flow

Subscription billing

Block-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

ViewportFull width

WidthPreset

Rubytest/dummy/app/components/gallery/flows/billing_page.rb

div(
  data: {
    gallery: "flow-surface",
    gallery_flow: "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