shadcn.io is not affiliated with official shadcn/ui
Invoice Request Checkout Block for Ark UI
A pay-by-invoice request that tests an order against a credit limit: company, VAT number and billing email, Net 30 or Net 60 with derived due dates, and a 30 percent card deposit when the order is over.
Installation
Overview
Let a company pay later, if the order fits its limit, with this invoice-request checkout for React with Ark UI. A compact header from Bellwether Goods, an office-supplies shop, sits over a hairline frame. The first band is the whole order on one line, desk starter packs at $480.00 each with a stepper from 1 to 15 and the total in whole cents. Below it, on the start side, a company name, a VAT number checked for the shape DE and nine digits and a billing email, each in a Field with a reserved line for its problem; on the end side the terms: Net 30 approved up to $5,000 and Net 60 up to $2,000, each a radio row with its due date worked out from a fixed invoice day ("Due Fri 13 Nov"). A term the order is over is disabled and says by how much, and a 30% deposit by card appears as an option whenever any term is over, counting only the invoiced rest against the limit. Request invoice is the only Shine Button. For B2B shops, wholesale and any account sale.
FAQ
How does the credit limit work?
Each term has an approved amount in cents (Net 30 up to $5,000, Net 60 up to $2,000). An order above it disables that term and the row says by how much it is over. Ticking the 30% deposit by card subtracts the deposit and compares the rest to the limit, so a $5,280 order is over Net 30 until the deposit brings the invoiced amount to $3,696. The amounts are integer cents, rounded once.
How are the due dates worked out?
From a fixed invoice day plus the term's days, with UTC date arithmetic and fixed weekday and month tables, never from the clock or a locale. Net 30 from 14 October is Friday 13 November. In your app set the invoice day on the server.
What is checked on the VAT number?
Only its shape: DE and nine digits, forgiving spaces, dots and dashes and lowercase. Whether the number belongs to the company is a lookup your server would do (a VAT validation service); the block shows where its answer goes, the line under the field.
What happens when I press Request invoice with a problem?
The button is never disabled. It names each wrong field, says "Not requested. Fix the marked fields." and moves focus to the first, in reading order. If the chosen term is over the limit it says so and asks for the deposit or other terms.
How are the terms announced?
As a group of radios with a legend; each radio is described by its row's sentence, so the due date or the amount over the limit is read with it, and a disabled term is struck through as well as disabled so it is not only the greying that says so.
What stays local, and how do I connect it for real?
Everything: the limits and the invoice day are typed and nothing is sent or checked with a credit agency. To connect it, load the account's limit and terms from your billing system, post the request with the company details, and let your server issue the invoice and take any deposit through your payment provider.