Getting started
Start your first neonFin integration with Stripe, credit codes, and one product.
This guide follows the easiest setup:
- Stripe as the payment provider.
- Credit codes instead of user accounts.
- One product.
- One price.
- One paid feature in your app.
That is the path most side projects should try first. Polar and existing-auth setups are supported too, but they are easier to understand after this flow.
Before you start
You need:
- A neonFin instance, either hosted or self-hosted.
- A Stripe account in test mode.
- A React app using Tailwind and shadcn.
If your app is not using shadcn yet, run npx shadcn@latest init in that app
before installing neonFin components.
The path
- Set up neonFin and Stripe.
- Install the SDK and components.
- Gate your first feature.
- Check the go-live list.
By the end, your app will have working anonymous credit wallets. Users do not need to create an account unless your app already has authentication and you choose external auth mode.
Setting up with an AI agent?
If a coding agent (Claude Code, Cursor, Copilot, …) is doing the integration, paste it this prompt after you have a publishable key:
Integrate neonFin credits into this app.
1. Install the components:
npx shadcn@latest add https://pay.vantezzen.io/r/neonfin-provider.json https://pay.vantezzen.io/r/neonfin-credits.json https://pay.vantezzen.io/r/neonfin-purchase.json https://pay.vantezzen.io/r/neonfin-gate.json
2. Add NEXT_PUBLIC_NEONFIN_URL and NEXT_PUBLIC_NEONFIN_KEY to the env, then
wrap the app in <NeonfinProvider baseUrl publishableKey>.
3. Gate the paid feature with <CreditGate cost={N}> and charge with
useCredits().deduct(N, { idempotencyKey }) when the work starts.
Docs: https://pay.vantezzen.io/docs/getting-startedSwap pay.vantezzen.io for your own domain if you self-host.