shadcn.io is not affiliated with official shadcn/ui
One-Click Buy Checkout Block for Vue
A buy-now panel for a saved address and card: two rows with a Change that explains itself, a two-line total in cents, a short simulated order and an outline Cancel order that undoes it until a typed time.
Installation
Overview
Let a returning customer buy in one press, with this one-click checkout for Vue with Ark UI. A compact header from Nesthollow, a coffee roaster, sits over a hairline frame with a plus mark on each corner. The first band lists what the buyer saved earlier: an address and "Visa ending 4242", each in a row with an icon tile and a ghost Change that says changing isn't part of the demo. Below it a two-line summary adds two bags of coffee and shipping with tax in whole cents, with the total large at the end. Buy now: $64.00 is the only Shine Button. A press waits a moment (the button keeps its size), then the summary turns into the result in the same box, "Order placed", with focus on it and the time the order can be cancelled until, while an outline Cancel order appears in a slot that was always laid out. Cancel puts the summary and the button back and returns focus to Buy now. It's built from Button, Shine Button and Guides, with a CSS entrance only. For repeat purchases, subscriptions and any shop that already knows who is buying.
FAQ
What stays local, and how do I connect it for real?
Everything. The address and card are typed constants, the wait is a 700 ms timer and "15:12 UTC" is a typed string, so the page never reads a clock. To connect it, load the buyer's saved address and card brand and last four from your account API, have Buy now create the order on your server with the saved payment method's token (never digits), and take the cancel deadline from the order the server returns. Cancel should call your cancel endpoint and show its answer in the same status line.
How does the cancel window work?
After a press the order is placed in the tab's state and Cancel order becomes available. It has no countdown: the deadline is a sentence ("You can cancel until 15:12 UTC"), because a ticking number would add motion and a moving target for a screen reader. Cancel returns the page to its state before the press and says "Order cancelled. Nothing was charged." For a real deadline, compare the server's time with the deadline when the buyer presses.
Where does focus go?
After Buy now, focus moves to the "Order placed" line, which is focusable but not in the tab order, because the pressed button is busy and loses focus. After Cancel order it returns to Buy now. The status line is the page's one polite live region and repeats each result.
Why do the Change buttons not open anything?
One-click buying is only safe when the buyer can see what will be used, so the rows show it, but editing an address or a card is a different step with its own form. Each Change is named for its row ("Change: ship to Dana Reyes, 14 Bellwether Lane") and answers in the status line. Link them to your address book and payment method pages when you wire it up.