shadcn.io is not affiliated with official shadcn/ui
Express Checkout Storefront Block for Vue
A Buy now bar for one pair of sneakers: delivery and card chips that each open a popover of two choices, a total that follows the delivery choice, and a slide-to-confirm bar that places a sample order and resets.
Installation
Overview
Let a returning shopper buy in one gesture, with this express checkout for Vue with Ark UI. A header names the shop, Ravel & Rye, and says what the block is. A hairline frame with a plus mark on each corner holds the product line (a drawn low sneaker with its size and price), two chips that say where it goes and how it is paid for, "Deliver to Home, arrives Fri 16 Oct" and "Visa ending 4242" with a two-letter tile, each the real trigger of a non-modal Popover with two choices: standard or express delivery, and Visa or Mastercard. The total is worked out in whole cents from the product and the delivery choice. The one primary is a Slide To Confirm Button drawn in the foreground colour: drag the handle past the threshold, or press Enter or Space on it, to confirm; the foot then says the order was placed in this demo, and Reset puts the bar back. It's built from Popover, Slide To Confirm Button, Button and Guides, with a CSS entrance only. For a returning customer's Buy now, a reorder page or any one-product purchase.
FAQ
How do I fill it with my own product and choices?
Edit the constants at the top: PRICE in whole cents, PRODUCT and VARIANT, DELIVERIES (each with an id, a label, a charge in cents and an ISO arrives date) and CARDS (an id, the two-letter mark, the name and the last four digits). The total, the chips and the status line are all derived from the choices.
How does the slide to confirm work?
Drag the handle across the bar and let go past the threshold to confirm; let go short of it and the handle eases back. Keyboard and screen reader users focus the bar and press Enter or Space, which confirms without a drag. A click on the track does nothing. After confirming, the bar rests at the end and returns, and Reset in the foot clears the "Order placed" state.
Does it take a card number?
No. "Visa ending 4242" is a typed sample, never entered or stored. In your app, take the card in your payment provider's hosted fields once and show only the brand and the last four digits here, from the provider's saved payment method.
What stays local, and how do I wire it to a real order?
Nothing is charged or shipped. Replace confirm with a call that creates the order from the chosen delivery and payment method, then show your confirmation. Keep the guard that ignores a second confirm while the first is in flight.
Is it accessible?
The chips are buttons that open a labelled popover, the choices are native radios in a named group, the slider is a real button with a label that changes after the order, and a polite status line announces every choice and the result. The primary's colours are the foreground and the background, so its contrast follows the theme.