React SDK example

neonFin

Your balance

These are the drop-in neonFin components - balance display, metered spending, a purchase flow, feature gating, and wallet recovery. Everything updates live against your wallet. Checkout runs in Stripe test mode, so pay with 4242 4242 4242 4242, any future expiry, any CVC.

Remaining credits

Show the live balance anywhere.

<RemainingCredits />

Spend credits

Meter usage; the balance updates in real time.

useCredits().deduct(n)

Gate a feature

Show an action only when the wallet can afford it - otherwise a purchase prompt.

<CreditGate cost={50}>

Buy credits

Lists your prices and redirects to provider checkout. On return the wallet tops up automatically.

<PurchaseButton />

Gate a feature

Unlock content with a subscription or one-time purchase - no credits consumed. Access follows the subscription automatically.

<FeatureGate feature="analytics">

Your wallet

Open the wallet dialog to copy the code, switch wallets, or transfer it with a QR code.

<WalletButton />