Component-composed plan, payment, paginated invoice, cancellation, outcome, and mobile billing states.
Plans, card replacement, paginated invoice records, cancellation safeguards, outcomes, and pressure states.
Long workspace, email, payment, and impact copy pressure a narrow billing summary.
| 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.
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