shadcn.io is not affiliated with official shadcn/ui
Payment Method Billing Block for Ark UI
Payment methods in app settings: the card on file with an expiry warning, a backup bank account, a button that sets the default, and a dialog that checks and updates the card.
Installation
Overview
Let customers keep their payment details current, with this payment method section for React with Ark UI. A hairline frame with a plus mark on each corner lists what's on file in rows ruled by Guides. The card row says its last four digits and expiry, carries a Default outline Badge and an "Expires soon" one with a warning-colored dot, and has a Shine Button that opens a Dialog, the only colored control. The dialog is a form of four Fields (name, number, expiry and security code) that checks each one when you save, names what's wrong beside it, in the text color with a red icon, and takes you to the first problem; saving updates the row and drops the warning. The backup bank account has a "Make default" button that moves the Default badge. A last band states the next charge and which method pays it. It's built from Dialog, Field, Input, Badge, Button, Shine Button and Guides, with a CSS entrance only. For billing settings, account pages and subscription apps.
FAQ
How do I fill it from my billing provider?
The card row starts from the START constant: its last four digits, its expiry as MM/YYYY and whether it's expiring. Set those from your provider's payment method object, show the warning when the expiry falls within the next couple of billing periods, and edit the bank account and NEXT_CHARGE lines to match. The values are the only data it uses; nothing is fetched.
Does it store the card number?
No. It checks that the fields have the right shape (the name has at least two characters, the number 13 to 19 digits, the expiry a MM/YY that hasn't passed, the security code 3 or 4 digits), and then keeps only the last four digits and the expiry to update the row. Before you ship, replace the number, expiry and security code fields with your payment provider's hosted fields so card numbers never reach your page or your server; the dialog, its title and its buttons stay as they are.
How are mistakes reported?
Saving with a bad or empty field marks each one invalid, writes the error under it, ties it to the field so a screen reader reads it with the label, and moves focus to the first one. Typing in a field clears its error. An expiry in the past says the card has expired.
How does the dialog behave?
It opens with focus inside, traps it while it's open, closes on Escape, the close button or Cancel, and returns focus to the "Update card" button. Its title and description name what it does and which card it replaces. On a phone it opens as a sheet from the bottom of the screen.