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