shadcn.io is not affiliated with official shadcn/ui
Payment Methods Billing Block for Svelte
Pick which of three payment methods is the default and see at once which of the next six renewal dates it would miss, with the reason for each and the method that closes the gap.
Installation
Overview
Show a customer whether the card they chose will actually pay, with this payment methods section for Svelte with Ark UI. It opens with the account of Emberquay, a podcast hosting service. A hairline frame with a plus mark on each corner holds three Radio Group cards, a Visa that expires in November, a Mastercard and a bank account that never expires, with a neutral two-letter tile beside each name and a Default badge on the saved one. Under them a strip of the next six renewal dates, from Nov 12 to Apr 12, says Covered or Not covered for the method you picked, each with the reason ("Visa expires 11/26"), worked out from the last valid day of the card's expiry month. One line names the first gap and a method that covers all six. Picking another card re-derives every cell and the line; the Shine Button saves it as the default, the only colored control. On a phone the six dates sit in two rows of three and the button rides a bar fixed to the foot of the panel. It's built from Radio Group, Badge, Shine Button and Guides, with a CSS entrance only. For billing settings, account pages and any subscription app.
FAQ
How do I fill it with my customer's methods?
Edit METHODS: each has an id, a brand, the last4, a two-letter mark for the tile and an expires month such as 2026-11 (an empty string for a method that never expires, like a bank account). The renewal dates are RENEWALS, ISO dates written in UTC so they read the same on the server and in every visitor's time zone. In your app build both lists from your billing provider: the methods on file and the next invoices it has scheduled.
How is Covered worked out?
A method covers a renewal when the renewal date is on or before the last day of the month the method expires, so a card that expires 11/26 still pays on Nov 12 but not on Dec 12. A method with no expiry covers every date. The strip, the count in its heading and the line under it are all derived from that one rule, so changing a date or an expiry in the data changes all three. Nothing is typed twice.
What does Save default do, and what stays local?
It changes the default in the page and says "Default saved. Nothing was charged." in a polite status message. No method is added, removed or charged. In your app send the chosen id to your server, change the customer's default payment method there, and refresh the schedule from the result, since a provider may also check the new default before accepting it.
Why are there no card numbers or logos?
A saved method is shown the way a provider reports it: the brand in text, "ending" and the last four, and its expiry. The tile holds two typed letters and is hidden from assistive technology, because the name beside it already says the brand. No logo, brand color or wordmark is used. Never show or collect a full number in a page like this; the fields that take a number are your payment provider's hosted ones.
Is it accessible?
The three cards are a labelled radio group you move through with the arrow keys. Covered and Not covered are words with a glyph, never only a tone, and the line under the strip is written out in full. Save default stays focusable when there is nothing to save and answers with "No changes to save." Each radio is labelled by the card around it.