shadcn.io is not affiliated with official shadcn/ui
Payment Methods Checkout Block for Ark UI
Four ways to pay, each stating what it does to the ship date, the fee and the total, with card fields that appear only for Card and a primary whose label follows the choice.
Installation
Overview
Let the way to pay change the order, with these payment methods for React with Ark UI. A compact header from Ashbourne Gear, a camera bag maker, sits over one hairline panel. The first band is a Radio Group of four rows: a card, a digital wallet, a bank transfer and pay on delivery, each with a two-letter tile and a sentence about its consequence that comes from a typed table. Card and wallet ship the next working day; a bank transfer ships after the payment clears, about four days on; pay on delivery adds a $3.00 fee and asks you to have the exact amount ready. Under the choice, a strip of three cells shows the ship date, the method fee and the total for the checked row. The card details are one joined control built from Input Group, with a brand tile, a number grouped as you type, and a Luhn check; they appear only for Card, in the same space the other methods use for their note, so choosing never moves the foot. The primary Shine Button follows the choice: "Pay $126.00", or "Place order" when nothing is paid now. It's built from Radio Group, Field, Input Group, Button, Shine Button and Guides, with a CSS entrance only. For shops where the way of paying changes the date, the fee or the risk.
FAQ
What does each method change?
Card and wallet: the order ships the next working day from the sample date (Monday 19 October) and there is no fee. Bank transfer: it ships after the payment clears, shown in words as "about Thursday 22 October", with sample account details and a reference you would replace. Pay on delivery: it ships the next working day, adds $3.00 to the total, and the row says to have the exact amount ready. The strip under the choice repeats the date, fee and total for the checked row so the effect is on one line.
Why does the button's label change?
Because the action changes. Card and wallet charge now, so it reads "Pay" and the total; a bank transfer and pay on delivery only place the order, so it reads "Place order" and the strip carries the total. The label comes from one helper, so a different rule is a one-line change.
How is the card checked, and can I use it for real payments?
Not for real payments. The card is checked in the tab's memory (brand from the first digits, the Luhn sum, the expiry against a fixed month) so you can see the pattern; a real page never lets card digits reach its own code and uses the fields your payment provider hosts. Autocomplete is off so a browser never offers a saved card to a demo. The test card is 4242 4242 4242 4242 with any future expiry, and Use the test card fills it.
Does the panel jump when I pick another method?
No. The card fields and the note for the other methods share one grid cell, and the inactive one is invisible and inert, so the cell is always as tall as the card fields. The radio rows, the strip and the foot keep their positions, and the status line announces the new method politely.
What happens when I press Pay?
A card with a wrong part is refused: the status line says to fix the marked fields and focus goes to the first wrong one. Otherwise the button waits 700 milliseconds at its normal size, then the order is "placed in this demo", the card digits are cleared (only the brand and last four are kept in the message), the methods lock and the second button becomes Change method.
What stays local, and how do I connect it for real?
All of it. The methods, fees, offsets and the sample date are typed in the file. To connect it, load the methods your account offers, price the fee and the ship date on your server, mount your provider's hosted card fields in the card cell, and have the primary create the payment or the order with that method.