Billing
Usage-based billing and subscriptions, built in
Metered auto-topup or prepaid credits, monthly and annual subscription plans for your own users, team and per-app spending limits, and a wallet UI that opens itself when a request runs out of funds.
import { useWallet } from "@hyperyai/sdk" export function Billing() { const { wallet, addFunds, addPaymentMethod } = useWallet() if (!wallet) return null return wallet.paymentMethod.exists ? <button onClick={() => addFunds(50)}>add $50</button> : <button onClick={addPaymentMethod}>add a card</button>} How it works
Every way to pay, one wallet
Pick metered for hands-off billing, prepaid for a fixed budget, or a subscription that includes monthly credit. Either way, credits and limits are enforced before a provider is ever called.
Metered auto-topup
The default — keep a small balance and the card is auto-charged when it dips.
Prepaid credits
Buy credits up front for a fixed, no-surprises budget.
Credits at 100 per $1
A simple display unit — $10 shows as 1,000 credits.
Team spending limits
A pooled balance with a hard cap for the whole team.
Per-app spending limits
Cap each authorized app independently of the rest.
Monthly and annual plans
Sell subscriptions to your users with credit grants every month.
Auto modals on 402 / 429
The funds modal opens on out-of-funds or limit-hit responses.
React SDK
Wallet UI without the plumbing
useWallet reads the balance and payment method and hands you addFunds and addPaymentMethod — no Stripe wiring in your app.
- useWallet() returns { wallet, addFunds, addPaymentMethod }
- wallet.paymentMethod.exists tells you whether a card is on file
- addFunds(amount) and addPaymentMethod() open the hosted flows
import { useWallet } from "@hyperyai/sdk" export function Billing() { const { wallet, addFunds, addPaymentMethod } = useWallet() if (!wallet) return null return wallet.paymentMethod.exists ? <button onClick={() => addFunds(50)}>add $50</button> : <button onClick={addPaymentMethod}>add a card</button>} Restrictions
Modals that open themselves
Mount <HyperyModals /> once and Hypery handles the interrupt path — a 402 opens the add-funds flow, a 401 re-authenticates the user.
- <HyperyModals /> and <RestrictionModal /> ship with the SDK
- The funds modal opens on a 402 (out of funds)
- Re-auth opens on a 401, and 429 surfaces limit-hit prompts
import { HyperyProvider, HyperyModals } from "@hyperyai/sdk" <HyperyProvider config={config}> <HyperyModals /> {/* opens the funds modal on a 402, re-auth on a 401 */} {children}</HyperyProvider> Subscriptions
Sell monthly and annual plans
Charge your users a recurring price and give them AI credit they can only spend in your app. You're the merchant of record, and users pay with the card they already have on Hypery.
- A monthly price plus an optional annual price, with savings shown
- Credit grants every month, even on annual plans
- Grants expire, never roll over, and stay inside your app
- Switch monthly ↔ annual, cancel, and resume from the SDK
import { SubscribeButton } from "@hyperyai/sdk" // $10/mo or $100/yr — both include $5 of ai credit every month<SubscribeButton planId="plan_pro" interval="year" /> FAQ
Questions
- How are credits priced?
- Credits display at 100 per $1, so a $10 balance shows as 1,000 credits. Usage draws down the balance as requests hit providers.
- What is metered auto-topup?
- The default, Vercel-style mode: keep a small credit balance and Hypery auto-charges the card on file whenever it dips. Prepaid — buy credits up front — is also supported.
- Can users cap spend per app?
- Yes. Teams get a pooled balance with per-app spending limits, so an authorized app can be hard-capped independently of the rest of your usage.
- Can I charge my users a subscription?
- Yes. Create a plan with a monthly price and an optional annual price, and choose the credit grants each subscriber receives every month. Payments go to your Stripe account, and grants can only be spent inside your app.
- How do annual plans work?
- Annual subscribers pay once a year and still receive their credit grants every month, so credits never land all at once. Users can switch between monthly and annual at any time: upgrading is prorated immediately, downgrading takes effect at renewal.
- What happens when funds run out?
- A 402 (out of funds) or 429 (limit hit) response triggers the built-in modals — <HyperyModals /> opens the add-funds flow so the user can top up without leaving your app.
Get started
Stop building a billing stack
Wire useWallet and HyperyModals and let Hypery meter usage, charge cards, and enforce limits for you.
npm install @hyperyai/sdk