shadcn.io is not affiliated with official shadcn/ui
API Credits Billing Block for Ark UI
Test credits and live credits for a speech-to-text API behind one Test and Live switch: the balance, expiry, refund and billing rules of each mode, the keys that draw from each, and a primary that resets the free test grant or buys a live pack.
Installation
Overview
Show developers which credits a key can spend, with this API credits section for React with Ark UI. The header holds a Segment Group with Test and Live. Under it a hairline frame with a plus mark on each corner shows the chosen mode's balance in large figures, a ruled list of its rules (test credits never expire, can't be refunded and are never billed; live credits bill at $0.80 per 1,000 and expire 12 months after purchase, with the next expiry date worked out from the packs) and a bar of how much of the month's starting balance has been used. A side cell lists four API keys by their prefix, each saying whether it draws from test or live credits, with a Badge on the keys that belong to the mode on screen. The Shine Button at the foot follows the mode: it resets the test grant to 1,000, or buys a 25,000-credit pack for $20. Both modes sit in one grid cell, so switching never moves the panel. It's built from Segment Group, Badge, Shine Button and Guides, with a CSS entrance only. For API dashboards, developer consoles and any metered product with a sandbox.
FAQ
How do I fill it with my credits and keys?
Edit the constants at the top: TEST_GRANT and TEST_START for the free grant, LIVE_PACKS for the live packs (the credits still unspent in each and the ISO date it was bought), BUY for the pack the primary sells, USED for each mode's spend this month and KEYS for the keys. The balances, the next expiry date, the days left and the used share are all worked out from those, so adding a pack or a key needs no other change.
What stays local, and how do I make it real?
Everything. Reset sets the test balance back to 1,000 in this page's state and says so in the status line; buying adds a 25,000-credit pack to the list with today's date. Nothing is charged and no key is touched. In your app, call your billing API from the click, add the pack from its response, and let your server refuse a live key that tries to spend test credits: the page only shows which credits a key draws from.
How is the live expiry worked out?
Each pack expires on the same day, 12 months after it was bought, and the block shows the earliest one with the credits still left in it and the days from a fixed date. When you buy a new pack the earliest expiry doesn't change, because the oldest pack still expires first. Test credits have no date at all.
Can a live key spend test credits?
No, and the list says why: a key's prefix (sk_test_ or sk_live_) fixes the credits it draws from, shown under its name as "Draws from Test credits" or "Draws from Live credits". The keys are shapes only, ending in a short tail, so no secret is on the page.
Is the switch accessible?
The Segment Group is named "Credit mode" and works with the arrow keys. The mode that is not shown is unseen and inert, so a screen reader reads one balance, and the status line says what the primary just did. Numbers keep their order in a right-to-left page and the used bar stays left to right because it is a scale.