shadcn.io is not affiliated with official shadcn/ui
Payment Method Form Block for Vue
A payment form where the method decides the fields: card, bank transfer with an IBAN grouped as you type and checked for length and mod-97, or a wallet, in one grid cell so nothing moves.
Installation
Overview
Choose how to pay with this payment method form for Vue with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner. Three method cells on a shared hairline (Card, Bank transfer, Wallet) are real radio buttons, and the fields under them swap in one grid cell, so the panel never changes height and the hidden panes are inert. Card is a joined control built from Input Group, with the number grouped as you type, the brand from the first digits, the Luhn sum and an expiry checked against a fixed month. Bank is an account holder and an IBAN grouped in fours as you type, checked for its country's length from a typed table and for its mod-97 checksum: the block says it cannot know the account exists. Wallet is the wallet's account email and a line saying you approve it in the wallet's own window. A fee line changes with the method and so does the total on the button. Pay checks the open pane only, names what is wrong and focuses it. For rent, subscription and invoice payments in front of a provider's hosted fields.
FAQ
Can I use this to take real payments?
No. Card digits and bank numbers are checked in this tab's memory only, so the pattern is visible. A real page uses the fields your payment provider hosts and never lets those numbers reach its own code. Pay keeps only "Visa ending 4242", the last four of a bank account or a masked wallet email, wipes everything else and charges nothing.
What does the IBAN check, and what does it not?
It checks that the number starts with two letters, that the country is one of ten in a typed table and the length is right for it, and that the mod-97 checksum comes out at 1: the letters are read as 10 to 35 and the first four characters moved to the end. It cannot know that the account exists or whose it is. The test IBAN GB82 WEST 1234 5698 7654 32 passes; the "Use the test IBAN" button fills it.
How do the three panes swap without moving anything?
All four panes (card, bank, wallet and the result) sit in one grid cell, and every one that is not shown is invisible and inert, so it takes no focus and no reader finds it. The cell is as tall as the tallest, which is the bank pane. Each pane has its own fields, ids and checks, and choosing another method drops any problem shown for the last.
How does it work from the keyboard?
The method cells are one radio group: arrows move between them and change the method, so the fields follow. In the card pane a complete number moves focus to the expiry and a complete expiry to the CVC, and Backspace in an empty part goes back. The IBAN keeps the caret with its characters as it is regrouped, and Backspace over a space removes the character before it.
What stays local, and how do I connect it for real?
Nothing is charged or sent: Pay says "Not charged: this demo never takes payment." and the pane becomes the result, "Visa ending 4242", with a Pay another way button. To connect it for real, mount your provider's hosted fields in the card and bank panes, open the wallet's own window from Pay, and send the provider's token, never the digits, to your server.