shadcn.io is not affiliated with official shadcn/ui
Updated Card Billing Success Block for Solid
A billing panel confirming a new card: the card drawn in greyscale with its real facts, and a switch per subscription that picks which of them it pays for, with the next charges on the card adding up as you flip them.
Installation
Overview
Confirm a new card and let people decide what it pays for, with this card updated panel for Solid with Ark UI. It's a billing panel in the usual shape: a heading and one sentence, then one frame with a plus mark on each corner. The first cell draws the new card in greyscale, with its brand in words, its last four digits and its expiry, never a logo, and says when it was saved and which card it replaces. The second lists three subscriptions, each with its next charge, its date and a Switch named "Charge this card" in the text color, with a line that says where the charge goes: the new card, or the old one if you turn it off. A row sums the next charges on the new card as the switches move. The foot's polite status line reports each change, and the Shine Button takes the person back to billing, the only colored control. It's built from Switch, Badge, Shine Button and Guides, with a CSS entrance only. On a phone the card comes first and the subscriptions follow. For subscription, meal-kit and membership apps.
FAQ
What stays in the page, and how do I wire it for real?
The whole panel: it describes a card that was already saved for a fictional account, so no card was stored or charged, and flipping a switch only changes the page's state and says so in the status line ("Nothing changed in this demo"). The card shows only its brand, its last four digits and its expiry, which is all your payment provider returns, and the page never takes a number: collect the card with your provider's hosted fields, which is a separate step. To wire it, call your billing API from flip to move that subscription's payment method, and update the row from the response.
What does turning a switch off mean?
That subscription keeps charging the old card, so the line under it changes to "Stays on" the old card and the total of the next charges drops by its amount. The panel starts with every switch on, because a new card usually replaces the old one everywhere. Edit PLANS for your subscriptions (an amount in cents, an ISO day, a name, a note) and NEW_CARD and OLD_CARD for the two cards.
Where do the count and the total come from?
From the switches, never typed: "3 of 3 subscriptions" counts the ones that are on and "Next charges on this card" sums their amounts in whole cents, so both follow every flip. Amounts are written with Intl.NumberFormat in a fixed en-US locale, each in a left-to-right span, and dates are fixed ISO strings written in UTC in time elements.
How do the switches work with a keyboard and a screen reader?
Each is named by what it does ("Charge Visa ending 4242 for Weekly box"), toggles with Space and keeps its state when you tab away, and the polite status line speaks the result of each flip. The Switch takes checked and onCheckedChange with the details object. It's drawn in the text color so the foot's button stays the only colored control.