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.

Mobile

Long workspace, email, payment, and impact copy pressure a narrow billing summary.

Team plan for Analytical Engines — Research and Production

Active

Next invoice: $49.00 USD on August 1, 2026
Receipt destination: accounts-payable+international-research-and-production@example.test
Payment method: Corporate Visa ending in 4242, expiring August 2026

Changing or cancelling the plan affects 18 active members, two pending invitations, automated audit exports, and seven connected deployment environments.

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