Components
Installation
Install individual registry items or the common component set.
The registry is served from your neonFin deployment. If you use the hosted
instance, commands start with https://pay.vantezzen.io/r/.... If you self-host,
replace the domain with your own.
If you are following the beginner flow, create your neonFin project and publishable key first. See Set up neonFin and Stripe.
Common install
npx shadcn@latest add https://pay.vantezzen.io/r/neonfin-provider.json
npx shadcn@latest add https://pay.vantezzen.io/r/neonfin-credits.json
npx shadcn@latest add https://pay.vantezzen.io/r/neonfin-purchase.json
npx shadcn@latest add https://pay.vantezzen.io/r/neonfin-gate.jsonOptional wallet dialog
npx shadcn@latest add https://pay.vantezzen.io/r/neonfin-wallet.jsonRaw client only
If you are building your own UI, install only the client:
npx shadcn@latest add https://pay.vantezzen.io/r/neonfin-client.jsonServer-side (external auth)
If your app has its own user accounts, install the secret-key server client instead of the browser components. See createNeonfinServer client.
npx shadcn@latest add https://pay.vantezzen.io/r/neonfin-server.jsonWhere files are installed
| Item | Target file |
|---|---|
neonfin-client | lib/neonfin/index.ts |
neonfin-server | lib/neonfin/server.ts |
neonfin-provider | components/neonfin/provider.tsx |
neonfin-credits | components/neonfin/remaining-credits.tsx |
neonfin-gate | components/neonfin/credit-gate.tsx |
neonfin-purchase | components/neonfin/purchase-dialog.tsx |
neonfin-wallet | components/neonfin/wallet-button.tsx and related wallet files |
Each component page shows the imports it expects after installation.