Subscriptions and feature gates

Create a subscription product

In the neonFin dashboard, create a product with type Subscription. Give it a clear credit unit even if the plan is mostly about feature access.

Attach the product to Stripe or Polar so neonFin can create provider checkout sessions and receive webhooks.

Add one price per tier

Each recurring price is a tier. For example:

Product: Pro tools
- Basic  $9/mo   -> feature: analytics
- Pro    $19/mo  -> features: analytics, export

Attach feature slugs to each tier. Use stable lowercase slugs like analytics, export, or priority-support.

Decide whether the tier includes credits

If the tier includes credits each cycle, set creditsGranted on the price. Then choose the product renewal mode:

• Refresh: top the balance up to the included amount each cycle.
• Add: add the included amount each cycle.

Use Refresh for normal allowances. Use Add only when unused credits should accumulate.

Gate the feature in your app

Use FeatureGate when you want to hide UI until the wallet has access:

import { FeatureGate } from "@/components/neonfin/feature-gate";

export function AnalyticsPanel() {
  return (
    <FeatureGate feature="analytics">
      <AnalyticsDashboard />
    </FeatureGate>
  );
}

Use useFeature() when you need the boolean:

const { enabled, loading } = useFeature("analytics");

Send plan changes to the billing portal

A second checkout should not change an existing subscription. It would create a second subscription at the provider.

The default PurchaseDialog detects an active subscription and shows Manage subscription. That opens the Stripe or Polar portal, where the provider handles plan changes, proration, and cancellation.