shadcn.io is not affiliated with official shadcn/ui
Express Checkout Block for Svelte
Three wallet buttons with lettermark tiles over an or-pay-with-card rule and a compact card line with brand tile, Luhn check and expiry check; a wallet press says nothing opens and moves focus to the card.
Installation
Overview
Offer the quick ways to pay first, with this express checkout for Svelte with Ark UI. A compact header from Coppice and Cloth, a fabric and haberdashery shop, sits over a hairline frame with a plus mark on each corner. A short order (linen, thread and buttons) adds up in whole cents. Under it three outline Buttons name Apple Pay, Google Pay and PayPal, each with a two-letter lettermark tile and never a logo, over an "or pay with card" rule and a compact card line built from Input Group: number, expiry and CVC in one bordered group with one focus ring, a brand tile, the number grouped as you type, a Luhn check and a complete part moving focus to the next. A wallet press opens nothing: the status line says so and focus moves to the card number. A press on Pay with a wrong part names it and focuses it; a clean press waits a moment and replaces the card line with the result, "Visa ending 4242", in the same box. Pay $64.00 is the only Shine Button. For shops that want wallets first and a card as the fallback.
FAQ
Do the wallet buttons work?
No, and they say so. A real wallet button opens the wallet's own sheet through your payment provider and returns a token, which can't happen in a static demo. Each button here is a plain Button with a lettermark tile and the wallet's name in text; pressing it writes "Apple Pay does not open in this demo. Use the card below." to the status line and moves focus to the card number. Replace the handler with your provider's wallet button, which brings its own mark and rules.
Can I use this to take real card payments?
No, and the code says so. The card line checks a number in the tab's memory (brand by the first digits, the Luhn sum, the expiry against a fixed month) to show the pattern. A real page never lets card digits reach its own code: mount the fields your payment provider hosts in the group's place, keep the layout, labels and error wording, and set their cc-number, cc-exp and cc-csc autocomplete tokens. Autocomplete is off here so a browser never offers a real saved card to a demo.
Which cards work in the demo?
4242 4242 4242 4242 with any future expiry (checked against October 2026) and any three digits passes; Use the test card fills it. A number that fails the Luhn sum, a month above 12, an expiry in the past or a CVC of the wrong length says so under the group and marks that part invalid.
What does a successful payment keep?
Only the brand and the last four digits ("Visa ending 4242"). The number, expiry and CVC are cleared from state when the demo answers, and the result replaces the card line in the same box, so the panel never changes height. Focus moves to the result and a Pay again button puts the card line back.
How do auto-advance and Backspace work?
When the number reaches its brand's length and passes the Luhn sum, focus moves to the expiry, and when the expiry is a valid future month, to the CVC. Only typing at the end advances, so editing in the middle never jumps. The caret stays with its digits while the number is regrouped, and pasting works because spaces and slashes are ignored.
What stays local, and how do I connect it for real?
Everything: the wait is a 700 ms timer and the answer depends only on what you typed. To connect it, keep the wallet row and the order, have each wallet button start your provider's payment request, mount hosted card fields in the group's place, and have Pay confirm the payment on your server with the provider's token. Show the provider's error in the same slot the card problems use.