feat: add new subscription tier and update credit configurations

- Introduced a new "max" subscription tier with associated monthly credits and top-up limits. - Updated existing subscription tiers' monthly credits and top-up limits for "starter", "pro", and "business". - Enhanced credit display and overview components to reflect the new tier and its attributes. - Integrated Polar authentication features for improved subscription management and credit handling.
2026-03-27 09:47:44 +01:00
parent 0bc4785850
commit cf3a338b9f
16 changed files with 694 additions and 22 deletions
--- a/app/(app)/settings/billing/page.tsx
+++ b/app/(app)/settings/billing/page.tsx
@@ -0,0 +1,29 @@
+import { ManageSubscription } from "@/components/billing/manage-subscription";
+import { PricingCards } from "@/components/billing/pricing-cards";
+import { TopupPanel } from "@/components/billing/topup-panel";
+
+export default function BillingPage() {
+  return (
+    <div className="mx-auto max-w-5xl space-y-10 p-6">
+      <div>
+        <h1 className="text-2xl font-semibold">Billing</h1>
+        <p className="mt-1 text-muted-foreground">Manage your plan and credits</p>
+      </div>
+
+      <section className="space-y-4">
+        <h2 className="text-lg font-medium">Current plan</h2>
+        <ManageSubscription />
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-lg font-medium">Change plan</h2>
+        <PricingCards />
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-lg font-medium">Buy credits</h2>
+        <TopupPanel />
+      </section>
+    </div>
+  );
+}
--- a/components/billing/manage-subscription.tsx
+++ b/components/billing/manage-subscription.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { useQuery } from "convex/react";
+import { ExternalLink } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { api } from "@/convex/_generated/api";
+import { authClient } from "@/lib/auth-client";
+import { normalizeTier, TIER_MONTHLY_CREDITS } from "@/lib/polar-products";
+
+const TIER_LABELS: Record<keyof typeof TIER_MONTHLY_CREDITS, string> = {
+  free: "Free",
+  starter: "Starter",
+  pro: "Pro",
+  max: "Max",
+};
+
+export function ManageSubscription() {
+  const subscription = useQuery(api.credits.getSubscription);
+  const tier = normalizeTier(subscription?.tier);
+
+  return (
+    <div className="flex items-center justify-between rounded-xl border bg-card p-6">
+      <div>
+        <p className="text-sm text-muted-foreground">Current plan</p>
+        <div className="mt-1 flex items-center gap-2">
+          <span className="text-lg font-medium">{TIER_LABELS[tier]}</span>
+          <Badge variant={subscription?.status === "active" ? "default" : "secondary"}>
+            {subscription?.status ?? "active"}
+          </Badge>
+        </div>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {TIER_MONTHLY_CREDITS[tier].toLocaleString("de-DE")} Credits / month
+          {subscription?.currentPeriodEnd ? (
+            <> · renews {new Date(subscription.currentPeriodEnd).toLocaleDateString("de-DE")}</>
+          ) : null}
+        </p>
+      </div>
+
+      {tier !== "free" && (
+        <Button variant="outline" onClick={() => authClient.customer.portal()}>
+          <ExternalLink className="mr-2 h-4 w-4" />
+          Manage
+        </Button>
+      )}
+    </div>
+  );
+}
--- a/components/billing/pricing-cards.tsx
+++ b/components/billing/pricing-cards.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { useQuery } from "convex/react";
+import { Check } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { api } from "@/convex/_generated/api";
+import { authClient } from "@/lib/auth-client";
+import {
+  normalizeTier,
+  SUBSCRIPTION_PRODUCTS,
+  TIER_MONTHLY_CREDITS,
+} from "@/lib/polar-products";
+
+const TIER_ORDER = ["free", "starter", "pro", "max"] as const;
+
+export function PricingCards() {
+  const subscription = useQuery(api.credits.getSubscription);
+  const currentTier = normalizeTier(subscription?.tier);
+
+  async function handleCheckout(polarProductId: string) {
+    await authClient.checkout({ products: [polarProductId] });
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div className="flex flex-col gap-4 rounded-xl border bg-card p-6">
+        <div>
+          <div className="mb-1 flex items-center justify-between">
+            <span className="font-medium">Free</span>
+            {currentTier === "free" && <Badge variant="secondary">Current</Badge>}
+          </div>
+          <p className="text-3xl font-semibold tabular-nums">EUR 0</p>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {TIER_MONTHLY_CREDITS.free} Credits / month
+          </p>
+        </div>
+        <ul className="flex-1 space-y-1 text-sm text-muted-foreground">
+          <li className="flex items-center gap-2">
+            <Check className="h-4 w-4 text-green-500" /> Budget models only
+          </li>
+          <li className="flex items-center gap-2">
+            <Check className="h-4 w-4 text-green-500" /> 10 generations / day
+          </li>
+          <li className="flex items-center gap-2">
+            <Check className="h-4 w-4 text-green-500" /> 1 concurrent generation
+          </li>
+        </ul>
+        <Button variant="outline" disabled>
+          Free plan
+        </Button>
+      </div>
+
+      {(["starter", "pro", "max"] as const).map((tier) => {
+        const product = SUBSCRIPTION_PRODUCTS[tier];
+        const isCurrent = currentTier === tier;
+        const isUpgrade =
+          TIER_ORDER.indexOf(tier) > TIER_ORDER.indexOf(currentTier);
+
+        return (
+          <div
+            key={tier}
+            className={`flex flex-col gap-4 rounded-xl border bg-card p-6 ${tier === "pro" ? "ring-2 ring-primary" : ""}`}
+          >
+            <div>
+              <div className="mb-1 flex items-center justify-between">
+                <span className="font-medium">{product.label}</span>
+                {isCurrent && <Badge variant="secondary">Current</Badge>}
+                {tier === "pro" && !isCurrent && <Badge>Popular</Badge>}
+              </div>
+              <p className="text-3xl font-semibold tabular-nums">EUR {product.price}</p>
+              <p className="mt-1 text-sm text-muted-foreground">
+                {product.credits.toLocaleString("de-DE")} Credits / month
+              </p>
+            </div>
+            <ul className="flex-1 space-y-1 text-sm text-muted-foreground">
+              <li className="flex items-center gap-2">
+                <Check className="h-4 w-4 text-green-500" /> All models
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-4 w-4 text-green-500" /> {tier === "starter" ? "50" : tier === "pro" ? "200" : "500"} generations / day
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-4 w-4 text-green-500" /> 2 concurrent generations
+              </li>
+            </ul>
+            <Button
+              variant={tier === "pro" ? "default" : "outline"}
+              disabled={isCurrent}
+              onClick={() => handleCheckout(product.polarProductId)}
+            >
+              {isCurrent
+                ? "Current plan"
+                : isUpgrade
+                  ? `Upgrade to ${product.label}`
+                  : `Switch to ${product.label}`}
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
--- a/components/billing/topup-panel.tsx
+++ b/components/billing/topup-panel.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useState } from "react";
+import { CreditCard, Zap } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import { authClient } from "@/lib/auth-client";
+import { TOPUP_PRODUCTS } from "@/lib/polar-products";
+import { calculateCustomTopup } from "@/lib/topup-calculator";
+
+const CUSTOM_TOPUP_PRODUCT_ID = "POLAR_PRODUCT_ID_TOPUP_CUSTOM";
+
+export function TopupPanel() {
+  const [customAmount, setCustomAmount] = useState(20);
+  const { credits, bonusRate } = calculateCustomTopup(customAmount);
+
+  async function handleTopup(polarProductId: string) {
+    await authClient.checkout({ products: [polarProductId] });
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="mb-3 text-sm font-medium">Quick top-up</h3>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          {TOPUP_PRODUCTS.map((product) => (
+            <button
+              key={product.polarProductId}
+              onClick={() => handleTopup(product.polarProductId)}
+              className="rounded-lg border bg-card p-4 text-left transition-colors hover:border-primary"
+              type="button"
+            >
+              <p className="text-lg font-semibold tabular-nums">EUR {product.price}</p>
+              <p className="text-sm text-muted-foreground">
+                {product.credits.toLocaleString("de-DE")} Cr
+              </p>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4 rounded-xl border bg-card p-6">
+        <h3 className="text-sm font-medium">Custom amount</h3>
+        <div className="flex items-center justify-between">
+          <span className="text-3xl font-semibold tabular-nums">EUR {customAmount}</span>
+          <div className="text-right">
+            <p className="text-2xl font-semibold tabular-nums text-primary">
+              {credits.toLocaleString("de-DE")} Cr
+            </p>
+            {bonusRate > 0 && (
+              <p className="flex items-center justify-end gap-1 text-xs text-green-600">
+                <Zap className="h-3 w-3" />
+                +{Math.round(bonusRate * 100)}% bonus
+              </p>
+            )}
+          </div>
+        </div>
+
+        <Slider
+          min={5}
+          max={200}
+          step={1}
+          value={[customAmount]}
+          onValueChange={([value]) => setCustomAmount(value)}
+        />
+
+        <div className="flex justify-between text-xs text-muted-foreground">
+          <span>EUR 5</span>
+          <span>EUR 200</span>
+        </div>
+
+        <Button
+          className="w-full"
+          onClick={() => handleTopup(CUSTOM_TOPUP_PRODUCT_ID)}
+        >
+          <CreditCard className="mr-2 h-4 w-4" />
+          Buy {credits.toLocaleString("de-DE")} Credits for EUR {customAmount}
+        </Button>
+
+        <p className="text-center text-xs text-muted-foreground">
+          Larger amounts include a bonus. Top-ups are always available, even on free plan.
+        </p>
+      </div>
+    </div>
+  );
+}
--- a/components/canvas/credit-display.tsx
+++ b/components/canvas/credit-display.tsx
@@ -9,6 +9,7 @@ const TIER_LABELS: Record<string, string> = {
  free: "Free",
  starter: "Starter",
  pro: "Pro",
+  max: "Max",
  business: "Business",
 };

@@ -16,6 +17,7 @@ const TIER_COLORS: Record<string, string> = {
  free: "text-muted-foreground",
  starter: "text-blue-500",
  pro: "text-purple-500",
+  max: "text-amber-500",
  business: "text-amber-500",
 };

--- a/components/dashboard/credit-overview.tsx
+++ b/components/dashboard/credit-overview.tsx
@@ -2,6 +2,7 @@

 import { useQuery } from "convex/react";
 import { CreditCard } from "lucide-react";
+import Link from "next/link";

 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -16,15 +17,17 @@ import { cn } from "@/lib/utils";

 const TIER_MONTHLY_CREDITS: Record<string, number> = {
  free: 50,
-  starter: 630,
-  pro: 3602,
-  business: 7623,
+  starter: 400,
+  pro: 3300,
+  max: 6700,
+  business: 6700,
 };

 const TIER_BADGE_STYLES: Record<string, string> = {
  free: "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400",
  starter: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400",
  pro: "bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400",
+  max: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400",
  business: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400",
 };

@@ -124,14 +127,11 @@ export function CreditOverview() {

        {/* ── Block C: Aufladen ───────────────────────────────────────── */}
        <div className="flex items-end">
-          <Button
-            variant="outline"
-            className="w-full gap-2"
-            disabled
-            title="Demnächst verfügbar – Top-Up via Polar.sh"
-          >
+          <Button variant="outline" className="w-full gap-2" asChild>
+            <Link href="/settings/billing">
              <CreditCard className="size-4" />
              Credits aufladen
+            </Link>
          </Button>
        </div>
      </div>
--- a/components/ui/slider.tsx
+++ b/components/ui/slider.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Slider({ className, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="relative h-2 w-full grow overflow-hidden rounded-full bg-muted"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="absolute h-full bg-primary"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: props.value?.length ?? props.defaultValue?.length ?? 1 }).map((_, index) => (
+        <SliderPrimitive.Thumb
+          key={index}
+          data-slot="slider-thumb"
+          className="block size-4 rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider };
--- a/convex/_generated/api.d.ts
+++ b/convex/_generated/api.d.ts
@@ -18,6 +18,7 @@ import type * as helpers from "../helpers.js";
 import type * as http from "../http.js";
 import type * as nodes from "../nodes.js";
 import type * as openrouter from "../openrouter.js";
+import type * as polar from "../polar.js";
 import type * as storage from "../storage.js";

 import type {
@@ -37,6 +38,7 @@ declare const fullApi: ApiFromModules<{
  http: typeof http;
  nodes: typeof nodes;
  openrouter: typeof openrouter;
+  polar: typeof polar;
  storage: typeof storage;
 }>;

--- a/convex/auth.ts
+++ b/convex/auth.ts
@@ -1,6 +1,10 @@
 import { createClient, type GenericCtx } from "@convex-dev/better-auth";
 import { convex } from "@convex-dev/better-auth/plugins";
+import { requireRunMutationCtx } from "@convex-dev/better-auth/utils";
+import { checkout, polar, portal, webhooks } from "@polar-sh/better-auth";
+import { Polar } from "@polar-sh/sdk";
 import { components } from "./_generated/api";
+import { internal } from "./_generated/api";
 import { DataModel } from "./_generated/dataModel";
 import { query } from "./_generated/server";
 import { betterAuth } from "better-auth/minimal";
@@ -10,6 +14,11 @@ import authConfig from "./auth.config";
 const siteUrl = process.env.SITE_URL!;
 const appUrl = process.env.APP_URL;

+const polarClient = new Polar({
+  accessToken: process.env.POLAR_ACCESS_TOKEN!,
+  server: "production",
+});
+
 // Component Client — stellt Adapter, Helper und Auth-Methoden bereit
 export const authComponent = createClient<DataModel>(components.betterAuth);

@@ -68,6 +77,92 @@ export const createAuth = (ctx: GenericCtx<DataModel>) => {
    },
    plugins: [
      convex({ authConfig }),
+      polar({
+        client: polarClient,
+        createCustomerOnSignUp: true,
+        use: [
+          checkout({
+            successUrl: `${siteUrl}/dashboard?checkout=success`,
+            authenticatedUsersOnly: true,
+          }),
+          portal(),
+          webhooks({
+            secret: process.env.POLAR_WEBHOOK_SECRET!,
+            onCustomerStateChanged: async (payload) => {
+              const runMutationCtx = requireRunMutationCtx(ctx);
+              const customerState = payload.data;
+              const userId = customerState.externalId;
+
+              if (!userId) {
+                console.error("Polar customer.state_changed payload without externalId", {
+                  customerId: customerState.id,
+                });
+                return;
+              }
+
+              const subscription = customerState.activeSubscriptions?.[0];
+
+              if (!subscription) {
+                await runMutationCtx.runMutation(internal.polar.handleSubscriptionRevoked, {
+                  userId,
+                });
+                return;
+              }
+
+              const tierMetadata = subscription.metadata.tier;
+              const creditsMetadata = subscription.metadata.credits;
+              const tier = tierMetadata === "starter" || tierMetadata === "pro" || tierMetadata === "max"
+                ? tierMetadata
+                : undefined;
+              const monthlyCredits = Number(creditsMetadata);
+
+              if (!tier || !Number.isFinite(monthlyCredits) || monthlyCredits <= 0) {
+                console.error("Missing or invalid Polar subscription metadata", {
+                  subscriptionId: subscription.id,
+                  tier: tierMetadata,
+                  credits: creditsMetadata,
+                });
+                return;
+              }
+
+              await runMutationCtx.runMutation(internal.polar.handleSubscriptionActivated, {
+                userId,
+                tier,
+                polarSubscriptionId: subscription.id,
+                currentPeriodStart: subscription.currentPeriodStart.getTime(),
+                currentPeriodEnd: subscription.currentPeriodEnd.getTime(),
+                monthlyCredits,
+              });
+            },
+            onOrderPaid: async (payload) => {
+              const runMutationCtx = requireRunMutationCtx(ctx);
+              const order = payload.data;
+              const metadata = order.product?.metadata;
+              const type = metadata?.type;
+              const credits = Number(metadata?.credits);
+
+              if (type !== "topup" || !Number.isFinite(credits) || credits <= 0) {
+                return;
+              }
+
+              const userId = order.customer.externalId;
+              if (!userId) {
+                console.error("Polar order.paid payload without externalId", {
+                  orderId: order.id,
+                });
+                return;
+              }
+
+              await runMutationCtx.runMutation(internal.polar.handleTopUpPaid, {
+                userId,
+                credits,
+                polarOrderId: order.id,
+                amountPaidEuroCents: order.totalAmount,
+              });
+            },
+          }),
+        ],
+      }),
    ],
  });
 };
--- a/convex/credits.ts
+++ b/convex/credits.ts
@@ -8,28 +8,35 @@ import { requireAuth } from "./helpers";

 export const TIER_CONFIG = {
  free: {
-    monthlyCredits: 50,           // €0,50 in Cent
+    monthlyCredits: 50,
    dailyGenerationCap: 10,
    concurrencyLimit: 1,
    premiumModels: false,
-    topUpLimit: 0,                // Kein Top-Up für Free
+    topUpLimit: 50000,
  },
  starter: {
-    monthlyCredits: 630,          // €6,30 in Cent
+    monthlyCredits: 400,
    dailyGenerationCap: 50,
    concurrencyLimit: 2,
    premiumModels: true,
    topUpLimit: 2000,             // €20 pro Monat
  },
  pro: {
-    monthlyCredits: 3602,         // €36,02 in Cent (+5% Bonus)
+    monthlyCredits: 3300,
    dailyGenerationCap: 200,
    concurrencyLimit: 2,
    premiumModels: true,
    topUpLimit: 10000,            // €100 pro Monat
  },
+  max: {
+    monthlyCredits: 6700,
+    dailyGenerationCap: 500,
+    concurrencyLimit: 2,
+    premiumModels: true,
+    topUpLimit: 50000,
+  },
  business: {
-    monthlyCredits: 7623,         // €76,23 in Cent (+10% Bonus)
+    monthlyCredits: 6700,
    dailyGenerationCap: 500,
    concurrencyLimit: 2,
    premiumModels: true,
@@ -516,6 +523,7 @@ export const activateSubscription = internalMutation({
      v.literal("free"),
      v.literal("starter"),
      v.literal("pro"),
+      v.literal("max"),
      v.literal("business")
    ),
    lemonSqueezySubscriptionId: v.string(),
@@ -601,10 +609,6 @@ export const topUp = mutation({
    const tier = (subscription?.tier ?? "free") as Tier;
    const config = TIER_CONFIG[tier];

-    if (config.topUpLimit === 0) {
-      throw new Error("Top-up not available for Free tier");
-    }
-
    // Monatliches Top-Up-Limit prüfen
    const monthStart = new Date();
    monthStart.setDate(1);
--- a/convex/polar.ts
+++ b/convex/polar.ts
@@ -0,0 +1,183 @@
+import { v } from "convex/values";
+
+import { internalMutation, type MutationCtx } from "./_generated/server";
+
+type DbCtx = Pick<MutationCtx, "db">;
+
+type ActivatedArgs = {
+  userId: string;
+  tier: "starter" | "pro" | "max";
+  polarSubscriptionId: string;
+  currentPeriodStart: number;
+  currentPeriodEnd: number;
+  monthlyCredits: number;
+};
+
+type RevokedArgs = {
+  userId: string;
+  polarSubscriptionId?: string;
+};
+
+type TopUpArgs = {
+  userId: string;
+  credits: number;
+  polarOrderId: string;
+  amountPaidEuroCents: number;
+};
+
+export async function applySubscriptionActivated(ctx: DbCtx, args: ActivatedArgs) {
+  const existing = await ctx.db
+    .query("subscriptions")
+    .withIndex("by_user", (q) => q.eq("userId", args.userId))
+    .order("desc")
+    .first();
+
+  if (existing) {
+    await ctx.db.patch(existing._id, {
+      tier: args.tier,
+      status: "active",
+      currentPeriodStart: args.currentPeriodStart,
+      currentPeriodEnd: args.currentPeriodEnd,
+      polarSubscriptionId: args.polarSubscriptionId,
+    });
+  } else {
+    await ctx.db.insert("subscriptions", {
+      userId: args.userId,
+      tier: args.tier,
+      status: "active",
+      currentPeriodStart: args.currentPeriodStart,
+      currentPeriodEnd: args.currentPeriodEnd,
+      polarSubscriptionId: args.polarSubscriptionId,
+    });
+  }
+
+  const balance = await ctx.db
+    .query("creditBalances")
+    .withIndex("by_user", (q) => q.eq("userId", args.userId))
+    .unique();
+
+  if (balance) {
+    await ctx.db.patch(balance._id, {
+      balance: balance.balance + args.monthlyCredits,
+      monthlyAllocation: args.monthlyCredits,
+      updatedAt: Date.now(),
+    });
+  } else {
+    await ctx.db.insert("creditBalances", {
+      userId: args.userId,
+      balance: args.monthlyCredits,
+      reserved: 0,
+      monthlyAllocation: args.monthlyCredits,
+      updatedAt: Date.now(),
+    });
+  }
+
+  await ctx.db.insert("creditTransactions", {
+    userId: args.userId,
+    amount: args.monthlyCredits,
+    type: "subscription",
+    status: "committed",
+    description: `${args.tier} plan - ${args.monthlyCredits} credits allocated`,
+  });
+}
+
+export async function applySubscriptionRevoked(ctx: DbCtx, args: RevokedArgs) {
+  const sub = await ctx.db
+    .query("subscriptions")
+    .withIndex("by_user", (q) => q.eq("userId", args.userId))
+    .order("desc")
+    .first();
+
+  if (sub) {
+    await ctx.db.patch(sub._id, {
+      tier: "free",
+      status: "cancelled",
+    });
+  }
+
+  const balance = await ctx.db
+    .query("creditBalances")
+    .withIndex("by_user", (q) => q.eq("userId", args.userId))
+    .unique();
+
+  if (balance) {
+    await ctx.db.patch(balance._id, {
+      monthlyAllocation: 50,
+      updatedAt: Date.now(),
+    });
+  }
+
+  await ctx.db.insert("creditTransactions", {
+    userId: args.userId,
+    amount: 0,
+    type: "subscription",
+    status: "committed",
+    description: args.polarSubscriptionId
+      ? `Subscription ${args.polarSubscriptionId} cancelled - downgraded to Free`
+      : "Subscription cancelled - downgraded to Free",
+  });
+}
+
+export async function applyTopUpPaid(ctx: DbCtx, args: TopUpArgs) {
+  const duplicate = await ctx.db
+    .query("creditTransactions")
+    .withIndex("by_user", (q) => q.eq("userId", args.userId))
+    .filter((q) => q.eq(q.field("description"), `Top-up order ${args.polarOrderId}`))
+    .first();
+
+  if (duplicate) {
+    return;
+  }
+
+  const balance = await ctx.db
+    .query("creditBalances")
+    .withIndex("by_user", (q) => q.eq("userId", args.userId))
+    .unique();
+
+  if (!balance) {
+    return;
+  }
+
+  await ctx.db.patch(balance._id, {
+    balance: balance.balance + args.credits,
+    updatedAt: Date.now(),
+  });
+
+  await ctx.db.insert("creditTransactions", {
+    userId: args.userId,
+    amount: args.credits,
+    type: "topup",
+    status: "committed",
+    description: `Top-up order ${args.polarOrderId} - ${args.credits} credits (EUR ${(args.amountPaidEuroCents / 100).toFixed(2)})`,
+  });
+}
+
+export const handleSubscriptionActivated = internalMutation({
+  args: {
+    userId: v.string(),
+    tier: v.union(v.literal("starter"), v.literal("pro"), v.literal("max")),
+    polarSubscriptionId: v.string(),
+    currentPeriodStart: v.number(),
+    currentPeriodEnd: v.number(),
+    monthlyCredits: v.number(),
+  },
+  handler: applySubscriptionActivated,
+});
+
+export const handleSubscriptionRevoked = internalMutation({
+  args: {
+    userId: v.string(),
+    polarSubscriptionId: v.optional(v.string()),
+  },
+  handler: applySubscriptionRevoked,
+});
+
+export const handleTopUpPaid = internalMutation({
+  args: {
+    userId: v.string(),
+    credits: v.number(),
+    polarOrderId: v.string(),
+    amountPaidEuroCents: v.number(),
+  },
+  handler: applyTopUpPaid,
+});
--- a/convex/schema.ts
+++ b/convex/schema.ts
@@ -258,6 +258,7 @@ export default defineSchema({
      v.literal("free"),
      v.literal("starter"),
      v.literal("pro"),
+      v.literal("max"),
      v.literal("business")
    ),
    status: v.union(
@@ -268,11 +269,13 @@ export default defineSchema({
    ),
    currentPeriodStart: v.number(),                // Timestamp (ms)
    currentPeriodEnd: v.number(),                  // Timestamp (ms)
+    polarSubscriptionId: v.optional(v.string()),
    lemonSqueezySubscriptionId: v.optional(v.string()),
    lemonSqueezyCustomerId: v.optional(v.string()),
    cancelAtPeriodEnd: v.optional(v.boolean()),    // Kündigung zum Periodenende
  })
    .index("by_user", ["userId"])
+    .index("by_polar", ["polarSubscriptionId"])
    .index("by_lemon_squeezy", ["lemonSqueezySubscriptionId"]),

  // ==========================================================================
--- a/lib/ai-models.ts
+++ b/lib/ai-models.ts
@@ -9,7 +9,7 @@ export interface AiModel {
  estimatedCost: string; // human-readable, e.g. "~€0.04"
  /** Credits pro Generierung — gleiche Einheit wie Convex reserve/commit (Euro-Cent). */
  creditCost: number;
-  minTier: "free" | "starter" | "pro" | "business"; // minimum subscription tier
+  minTier: "free" | "starter" | "pro" | "max" | "business"; // minimum subscription tier
 }

 export const IMAGE_MODELS: AiModel[] = [
--- a/lib/auth-client.ts
+++ b/lib/auth-client.ts
@@ -1,7 +1,8 @@
 import { createAuthClient } from "better-auth/react";
 import { convexClient } from "@convex-dev/better-auth/client/plugins";
+import { polarClient } from "@polar-sh/better-auth/client";

 // Next.js: kein crossDomainClient nötig (same-origin via API Route Proxy)
 export const authClient = createAuthClient({
-  plugins: [convexClient()],
+  plugins: [convexClient(), polarClient()],
 });
--- a/lib/polar-products.ts
+++ b/lib/polar-products.ts
@@ -0,0 +1,61 @@
+export const SUBSCRIPTION_PRODUCTS = {
+  starter: {
+    polarProductId: "81b6de07-cd41-430f-bd54-f0e7072deec6",
+    price: 8,
+    credits: 400,
+    label: "Starter",
+  },
+  pro: {
+    polarProductId: "efb5cdb6-2cd6-4861-9073-7b43e29bc9f5",
+    price: 59,
+    credits: 3300,
+    label: "Pro",
+  },
+  max: {
+    polarProductId: "40b850a9-0a07-4284-a749-c410ef532e80",
+    price: 119,
+    credits: 6700,
+    label: "Max",
+  },
+} as const;
+
+export const TOPUP_PRODUCTS = [
+  {
+    label: "Klein",
+    price: 5,
+    credits: 250,
+    polarProductId: "539a18b1-375c-4d70-ae84-66c53cb365f8",
+  },
+  {
+    label: "Mittel",
+    price: 10,
+    credits: 500,
+    polarProductId: "d62970e4-fb5a-4f72-b4af-1bb92a575fa8",
+  },
+  {
+    label: "Groß",
+    price: 20,
+    credits: 1000,
+    polarProductId: "ed4f0c05-7d77-4087-bcf7-cf60174e1316",
+  },
+  {
+    label: "XL",
+    price: 50,
+    credits: 3000,
+    polarProductId: "79a27a33-e8bf-4205-b37b-b9431593310b",
+  },
+] as const;
+
+export const TIER_MONTHLY_CREDITS = {
+  free: 50,
+  starter: 400,
+  pro: 3300,
+  max: 6700,
+} as const;
+
+export function normalizeTier(tier: string | undefined | null): keyof typeof TIER_MONTHLY_CREDITS {
+  if (!tier || tier === "free") return "free";
+  if (tier === "starter" || tier === "pro" || tier === "max") return tier;
+  if (tier === "business") return "max";
+  return "free";
+}
--- a/lib/topup-calculator.ts
+++ b/lib/topup-calculator.ts
@@ -0,0 +1,14 @@
+export function calculateCustomTopup(euroAmount: number): {
+  credits: number;
+  bonusRate: number;
+} {
+  const bonusRate =
+    euroAmount >= 100 ? 0.13 :
+    euroAmount >= 50 ? 0.10 :
+    euroAmount >= 20 ? 0.06 :
+    euroAmount >= 10 ? 0.03 : 0;
+
+  const netAmount = euroAmount / 1.19;
+  const credits = Math.floor((netAmount * 0.70 * (1 + bonusRate)) / 0.01);
+  return { credits, bonusRate };
+}