neonFin
Getting started

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

  1. Set up neonFin and Stripe.
  2. Install the SDK and components.
  3. Gate your first feature.
  4. 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-started

Swap pay.vantezzen.io for your own domain if you self-host.