shadcn.io is not affiliated with official shadcn/ui
Checkout Summary Billing Block for Vue
One order read three ways: a lens for due today, every month and the first 12 months re-derives each line, the tax and the total, and a switch shows prices with or without tax.
Installation
Overview
Show what an order costs now and later, with this checkout summary for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a native table of the order's lines (a Studio plan for eight seats, Priority support, a one-time setup fee, a referral credit). A Toggle Group in the header is the lens: Due today, Every month or First 12 months. Each line is billed one of three ways, prorated for the days to the renewal, the full month, or once, and the lens re-derives every amount, the tax line and the total from that, with the way each line is billed written under its name. A Switch shows the prices with the 10% tax inside them or before it, and the total is the same either way. The Shine Button, the only colored control, pays today's total with a card shown only as "ending 4242". It's built from Toggle Group, Switch, Shine Button and Guides, with a CSS entrance only. For checkouts, plan changes and any product that charges part of a period up front.
FAQ
How do I change the order?
Edit LINES at the top of the file. Each has an id, a name, a detail, a billing of monthly or once and the cents for a full month or the one-time charge (negative for a credit). DAYS_TO_RENEWAL, PERIOD_DAYS and FULL_MONTHS set the proration and the first-year count, and TAX_PERCENT the tax. Keep amounts in multiples of 10 cents with a 10% tax so the with-tax prices stay exact.
How does each lens work out its amounts?
Due today charges monthly lines for the days to the renewal and one-time lines in full. Every month charges the full monthly lines and shows a dash for one-time lines. First 12 months adds the prorated first period to eleven full months for monthly lines, and counts one-time lines once. The tax and the total follow from the lines the lens shows, and the table's caption says which lens and tax setting it is showing.
What does Show prices with tax do?
It moves the tax into the lines: every amount is multiplied by 1.10, and the tax row reads "Tax included" instead of adding to the total. The total is the same either way. The 10% is a typed sample rate; calculate real tax from the billing address on your server.
What stays local, and how do I wire it for real?
Pay marks the order as paid in the page and says that nothing was charged. The card is a label, and the block never takes a card number: use your payment provider's hosted fields and charge the due-today amount on your server, then show the receipt. Treat the figures here as a preview of what your server will charge.
How does it work with a keyboard and a screen reader?
The lens is a named group of three toggles you can move through with the arrow keys, the switch has a label, and the table has a caption, column headers and row headers. A polite status line says which lens or tax setting is showing, and the button's name always includes today's total.