shadcn.io is not affiliated with official shadcn/ui
Card Brand Selection Billing Block for Vue
A co-badged debit card that works on Visa and Debito: each network's fee on a 49.00 charge and its usual decision time, an Always use the lower fee switch, and the yearly difference worked out.
Installation
Overview
Let a customer choose which network a co-badged card runs on, with this card network picker for Vue with Ark UI. It belongs to Chalkfold, a gym booking app, whose debit card ending 4242 works on two networks: Visa and Debito, an invented local debit scheme. A hairline frame with a plus mark on each corner lists the two networks as radio rows, each naming the network beside a two-letter tile, the fee passed on for a 49.00 membership charge and how long the network usually takes to decide. A Switch reads "Always use the lower fee": on, the rows lock to the cheaper network and say it is the rule's choice. Below, the year is worked out from the fees and twelve monthly charges, so the choice shows its cost in words. The Shine Button is the only colored control and names the network it will use. It's built from native radios, Switch, Badge, Shine Button and Guides, with a CSS entrance only. For payment settings, card-on-file pages and any app that passes on processing fees.
FAQ
How do I change the networks and fees?
Edit NETWORKS at the top of the file. Each entry has an id, a name, a two-letter mark, a fee in cents and a speed phrase. CHARGE is the charge the fee is shown on and CHARGES_A_YEAR how many a year, and the year line, the "Lower fee" badge and the rule's choice are all derived from those numbers.
Is Debito a real network?
No. It stands for a local debit scheme in a market where a card can carry two. The brands are named in text with a two-letter tile and no logo or color. Replace the names, the marks and the fees with the networks your provider reports for the card.
What does the lower fee rule do?
While it is on, the chosen network is always the cheapest one and the radio rows are locked, with a dashed dot, so the screen never disagrees with the rule. Turning it off gives the choice back to the network you had picked by hand. Saving stores both the network and the rule.
What stays local, and how do I wire it up?
The saved choice lives in the tab, and the status line says "Saved in this demo". In your app set the preferred network on the payment method with your provider (card networks expose this as a preference on the card) and let it route each charge; keep the rule on your side and apply it when you create the charge.