shadcn.io is not affiliated with official shadcn/ui
Split Payment Checkout Block for React Aria
An order paid with two cards: a table of lines, a Me or Company switch on each, two card totals that always add up to the order total, VAT on the company part and a limit the split cannot pass.
Installation
Overview
Let one order be paid from two places, with this split-payment checkout for React with React Aria. A compact header from Finchley Yard, a lighting and furniture shop, sits over a hairline panel. The first band is a native table of the order's five lines (a lamp, a shelf, a stool, a pendant and the delivery), each with a drawn thumbnail, its price with VAT included and a Me or Company Segment Group naming who pays for it. Moving a line moves its money. Under the table two cells show what each card will pay: Visa ending 4242 for you, Visa ending 0019 for the company, each with its amount, its line count and the facts that matter to it. The company cell shows the VAT inside its part, which you can reclaim, and the company card's limit of £400.00 per purchase; push the split past it and the cell says by how much. A line under the cells writes the sum out, "£192.00 + £262.00 = £454.00", and Shine Button names what it will do, "Pay £454.00 with two cards", or with the one card that is left. It's built from Segment Group, Button, Shine Button and Guides, with a native table and a CSS entrance only. For shops that sell to people who also buy for work, and for any order too big for one card.
FAQ
How do I know the two amounts add up?
They cannot disagree: both card amounts are worked out from the same five lines in whole pence, and the order total is the sum of the lines. The total band under the cards writes the equation out in the same figures, and the Pay button repeats the total. Moving a line only changes which card it is counted on.
How is the VAT worked out?
Prices include 20% VAT, so the VAT inside an amount is a sixth of it (the amount times 20 over 120), rounded to the penny. The company cell shows that figure as reclaimable; your own card cell says VAT is not itemised for you. The rate is one constant, so other rates or exempt lines are a data change.
What happens past the company card's limit?
The company cell says "Over the £400.00 limit by" the exact excess and tells you to move a line, and the Pay button stays pressable but refuses: the status line says the company card is over its limit and focus goes to the first company line's switch. Nothing is blocked silently, and moving a line back under the limit clears it at once.
How does the table behave on a phone?
Each line becomes a small card: the thumbnail and name at the start, the price at the end and the Me or Company switch full width under them. The table is one set of elements, so reading order and keyboard order are the same on every screen. The Pay button is pinned to the bottom of the screen.
What does a press on Pay do?
It waits 700 milliseconds with the button showing a spinner at its normal size, then says "Paid in this demo. Nothing charged." The switches lock, the button reads "Paid in this demo", and Change the split unlocks them again with focus on the first line. Reset split puts the lines back as they started.
What stays local, and how do I connect it for real?
Everything: the lines, the limit and the two cards are typed in the file, and no card number is asked for or kept. To connect it, create one payment per card with your provider for the amount shown, capture them together so a failed second card voids the first, and take the company card and its limit from the signed-in account instead of constants.