shadcn.io is not affiliated with official shadcn/ui
Installments Checkout Block for Vue
Paying for an e-bike in 2, 4 or 6 equal payments two weeks apart, with a strip of dated cells in whole cents, a failure-rules disclosure and a consent checkbox that gates the one primary.
Installation
Overview
Let people split a price at pay time and see every date before they agree, with this installments checkout for Vue with Ark UI. A compact header from Halgarth Cycles, an e-bike shop, sits over a narrow hairline frame with a plus mark on each corner. The first band names the bike and its price, $1,899.99. Under it three radios choose how many payments to split it into (2, 4 or 6), each showing the size of a part. A strip of dated cells, two weeks apart from today, shows every payment in whole cents; the odd cents sit on the first part so the parts always add up to the price. A line names the card on file and says there is no interest. "If a payment fails" opens in place (Collapsible) to the retry day and the late fee. One Checkbox, "Charge my card on these dates", gates the only Shine Button: pressed unticked, it names the problem and moves focus to the box. Starting the plan marks the first cell paid and gives Undo. It's built from Checkbox, Collapsible, Label, Button, Shine Button and Guides, with a CSS entrance only. For big-ticket shops, courses, repairs and anything paid in parts.
FAQ
How are the parts worked out?
The price in cents is divided by the number of payments and rounded down, and the remainder goes on the first payment. $1,899.99 in 4 is a first payment of $475.02 and three of $474.99; the parts always add up to the price exactly. Every amount is integer cents, formatted in one place.
Where do the dates come from?
From one typed "today" and a fourteen-day gap, with plain date arithmetic, so the strip is the same for every visitor and never changes with the clock. The first cell says "Today". In your app, take the schedule from your payment provider's installment plan.
Why is the button gated by a checkbox?
Agreeing to be charged on future dates is a separate decision from paying today. The button stays pressable so it can answer: pressed unticked it says "Tick the box to agree to the dates" in a reserved line under the box and in the polite status line, and moves focus to the checkbox. Once ticked, it starts the plan.
What does the failure disclosure say?
That the card is tried again 3 days later with a warning first, that a second failure adds a $5.00 late fee to that part and pauses the plan, and that the bike ships when the first payment clears. The words are typed in the file; change the retry day and the fee in the constants and the disclosure follows. It opens and closes in place, and its closed content is not reachable by keyboard.
How does the strip fit a phone?
Each cell keeps a minimum width, so with 4 or 6 payments the strip scrolls sideways inside its band. The scroll region is a tab stop so a keyboard can reach it.
What stays local, and how do I connect it for real?
Everything: the card line, the schedule and the result are typed or held in state, and nothing is scheduled or charged. To connect it, create the installment plan on your server with your payment provider, use its hosted fields for the card, and have the consent box record the agreement your provider needs before the first charge.