shadcn.io is not affiliated with official shadcn/ui
Saved Cards Checkout Block for Radix UI
Paying with a card on file: three saved cards as radios, one the default, one expired and skipped, Make default and Remove on each row with an in-place Undo, and a CVC check on the chosen card.
Installation
Overview
Let people pay with a card they already saved, and tidy their cards while they do, with this saved cards checkout for React with Radix UI. A compact header from Larchwood, a garden seed shop, sits over a narrow hairline frame with a plus mark on each corner. The order is three lines and a total. Under it the cards on file are native radios in one group, each with a two-letter brand tile, "Visa ending 4242" and its expiry: one is marked Default, one expired in May 2026 and is skipped with its reason, and every row has Make default and Remove buttons that name their card. A removed row stays in place as "Removed in this demo" with Undo, so nothing shifts, and removing the default hands the badge to the next usable card. The chosen card's CVC is asked again and checked for its length. Pay is the only Shine Button: it names what is wrong and moves focus there, and a clean press confirms with the last four digits and gives Undo. It's built from Badge, Button, Field, Input, Shine Button and Guides, with a CSS entrance only. For shops with returning buyers and any checkout that offers saved cards.
FAQ
Are these real card numbers?
No. The brands and the last four digits are typed sample data, and the demo never asks for or keeps a card number. Only the CVC is typed, and it is cleared the moment Pay uses it. A real page reads saved cards from your payment provider as tokens with a brand, last four digits and expiry, and collects the CVC in the provider's hosted field.
What does Make default do?
It moves the Default badge to that card and says so in the status line. The badge and the button share one slot in the row, so switching never moves the layout. Choosing a card to pay with is separate: you can pay with a card that is not the default.
What happens when I remove a card?
Its row turns into a dashed "Removed in this demo" cell with an Undo button, and focus moves to Undo. If it was the default, the badge passes to the first usable card; if it was the chosen card, nothing is chosen until you pick another, and Pay says so. Undo puts the card back and returns focus to its Remove button.
Why can I not choose the third card?
It expired in May 2026, checked against a typed date of October 2026, so its radio is disabled, the arrow keys skip it and its row says "Expired 05/26". It can still be removed.
What does the CVC check do?
It checks the number of digits for the card's brand (three here), shows a problem in a reserved line after you leave the field or press Pay, and stops Pay with focus on the field. It cannot tell whether the code is right; your provider does that.
What stays local, and how do I connect it for real?
Everything: the cards, the order and the result are typed or held in state, and nothing is charged. To connect it, list the buyer's saved payment methods from your provider, call its API for Make default and Remove, and confirm the payment on the server with the chosen method and the provider's hosted CVC field.