shadcn.io is not affiliated with official shadcn/ui
Gift Card Checkout Block for Solid
A step for paying with gift cards: a grouped 16-digit number and PIN, a balance check against three typed cards, Apply taking the lesser of the balance and what is due, an applied list with Remove, and the amount left to pay by card.
Installation
Overview
Let people pay some or all of an order with gift cards, with this gift card checkout for Solid with Ark UI. A compact header from Marigold Court, a cafe and gift shop, sits over a hairline frame with a plus mark on each corner, split into two cells. The first holds the form: a card number Input that groups its digits as you type (7000 1234 5678 9012), a masked PIN, a Check balance button that answers from three typed cards ("Balance $50.00"), and Apply, which takes the lesser of the card's balance and what is still due. The second cell lists the applied cards in order, each with its last four digits, what it paid, what it keeps and a named Remove, then adds up the order ($84.97), the gift cards and "Due by card", which is what the next step charges. Several cards drain in order, a card can be applied once, and a wrong number or PIN gets one answer that does not say which. The foot has the only Shine Button, labelled with the amount due, or "Place order" when the cards cover everything. For cafes, shops and any store that sells its own cards.
FAQ
Which cards does the demo accept?
Three, typed in CARDS: 7000 1234 5678 9012 with PIN 4321 holds $50.00, 7000 2222 3333 4444 with 1111 holds $20.00, and 7000 9999 0000 1111 with 0000 holds nothing (to show that answer). Any other combination gets "No card matches that number and PIN", which does not say whether the number or the PIN was wrong, as a real card service would not.
How does Apply work out how much to take?
It takes the lesser of the card's balance and what is still due after the cards already applied, so one card of $50.00 on a $84.97 order uses $50.00 and leaves $34.97 due, and a second card of $20.00 then uses $20.00 and leaves $14.97 due. When the cards cover the order, the last one takes only what is needed and the button changes to Place order. Everything is in whole cents.
What happens when I remove a card?
The card leaves the list, its money returns to what is due by card, the polite status line says so, and focus goes back to the card number field so you can add another. The panel keeps the list's height for two cards, so nothing below it moves in either direction.
Why is the PIN masked and autocomplete off?
A gift card number and PIN are secrets like a password, so the PIN field is masked and the browser is told not to offer saved values. The number is grouped in fours as you type and holds digits only, and the digits are LTR in a right-to-left page.
How do I use it with a keyboard?
The form is a real form: Enter in the PIN field applies the card, and Check balance is a separate button. The applied cards are a list with one named Remove each ("Remove the card ending 9012"), and every message goes to one polite status line.
What stays local in the demo, and how do I wire it up?
Everything: the cards are three typed objects, nothing is looked up, redeemed or charged, and the status line says so. In your app send the number and PIN to your gift card service over your server, hold (reserve) the amount when the card is applied, capture it when the order is placed, release it on Remove, and never keep the full number in the browser after the answer comes back.