@magnet-cms/plugin-stripe 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,139 @@
+import { EnvVarRequirement, PluginMagnetProvider } from '@magnet-cms/common';
+
+/**
+ * Configuration for the Stripe plugin.
+ *
+ * Passed via `PluginModule.forRoot({ plugins: [{ plugin: StripePlugin, options: { ... } }] })`
+ * and injected in services via `@InjectPluginOptions('stripe')`.
+ */
+interface StripePluginConfig {
+    /** Stripe secret API key (sk_live_... or sk_test_...). Auto-resolved from STRIPE_SECRET_KEY env var. */
+    secretKey?: string;
+    /** Stripe webhook signing secret (whsec_...). Auto-resolved from STRIPE_WEBHOOK_SECRET env var. */
+    webhookSecret?: string;
+    /** Stripe publishable key (pk_live_... or pk_test_...) — exposed to frontend. Auto-resolved from STRIPE_PUBLISHABLE_KEY env var. */
+    publishableKey?: string;
+    /** Whether to sync products/prices from Stripe via webhooks (default: true) */
+    syncProducts?: boolean;
+    /** Whether to enable Customer Portal session creation (default: true) */
+    portalEnabled?: boolean;
+    /** Default currency for checkout sessions (default: 'usd') */
+    currency?: string;
+    /**
+     * Feature flags per plan name.
+     * Map of product/plan name to list of feature identifiers.
+     *
+     * @example
+     * ```ts
+     * {
+     *   'pro': ['unlimited-servers', 'priority-support'],
+     *   'basic': ['5-servers'],
+     * }
+     * ```
+     */
+    features?: Record<string, string[]>;
+}
+/**
+ * Response from the subscription access endpoint.
+ */
+interface SubscriptionAccessResponse {
+    /** Whether the user has an active subscription */
+    hasActiveSubscription: boolean;
+    /** Plan/product name (null if no subscription) */
+    plan: string | null;
+    /** When the current period ends (null if no subscription) */
+    expiresAt: Date | null;
+    /** Feature flags for the user's plan */
+    features: string[];
+}
+/**
+ * Request body for creating a checkout session.
+ */
+interface CreateCheckoutDto {
+    /** Stripe Price ID to create checkout for */
+    priceId: string;
+    /** URL to redirect to on success */
+    successUrl: string;
+    /** URL to redirect to on cancel */
+    cancelUrl: string;
+    /** Optional Magnet user ID to associate with the customer */
+    userId?: string;
+    /** Optional metadata to attach to the checkout session */
+    metadata?: Record<string, string>;
+}
+/**
+ * Request body for creating a customer portal session.
+ */
+interface CreatePortalDto {
+    /** Stripe Customer ID */
+    customerId?: string;
+    /** Magnet user ID (used to look up customer if customerId not provided) */
+    userId?: string;
+    /** URL to redirect to when the user is done */
+    returnUrl?: string;
+}
+/**
+ * Response from creating a checkout or portal session.
+ */
+interface SessionResponse {
+    /** Session ID */
+    sessionId: string;
+    /** URL to redirect the user to */
+    url: string;
+}
+/**
+ * Admin metrics response from the dashboard endpoint.
+ */
+interface StripeMetricsResponse {
+    /** Monthly Recurring Revenue in cents */
+    mrr: number;
+    /** Total revenue this month in cents */
+    revenueThisMonth: number;
+    /** Number of active subscriptions */
+    activeSubscriptions: number;
+    /** Churn rate as a percentage (0-100) */
+    churnRate: number;
+    /** Revenue data for the last 12 months */
+    revenueByMonth: Array<{
+        month: string;
+        revenue: number;
+    }>;
+    /** Recent payments */
+    recentPayments: Array<{
+        id: string;
+        amount: number;
+        currency: string;
+        status: string;
+        customerEmail: string;
+        createdAt: string;
+    }>;
+}
+
+/**
+ * Stripe Plugin
+ *
+ * Provides Stripe payment integration for Magnet CMS:
+ * - Product, price, subscription, and customer management
+ * - Webhook processing with idempotency
+ * - Checkout and Customer Portal sessions
+ * - Admin dashboard with revenue metrics
+ * - User subscription access and feature flags
+ */
+declare class StripePlugin {
+    /** Environment variables used by this plugin */
+    static readonly envVars: EnvVarRequirement[];
+    /**
+     * Create a configured plugin provider for MagnetModule.forRoot().
+     * Auto-resolves secret values from environment variables if not provided.
+     *
+     * @example
+     * ```typescript
+     * MagnetModule.forRoot([
+     *   StripePlugin.forRoot({ currency: 'usd' }),
+     * ])
+     * ```
+     */
+    static forRoot(config?: Partial<StripePluginConfig>): PluginMagnetProvider;
+}
+
+export { type CreateCheckoutDto, type CreatePortalDto, type SessionResponse, type StripeMetricsResponse, StripePlugin, type StripePluginConfig, type SubscriptionAccessResponse };

package/dist/index.d.ts

@@ -0,0 +1,139 @@
+import { EnvVarRequirement, PluginMagnetProvider } from '@magnet-cms/common';
+
+/**
+ * Configuration for the Stripe plugin.
+ *
+ * Passed via `PluginModule.forRoot({ plugins: [{ plugin: StripePlugin, options: { ... } }] })`
+ * and injected in services via `@InjectPluginOptions('stripe')`.
+ */
+interface StripePluginConfig {
+    /** Stripe secret API key (sk_live_... or sk_test_...). Auto-resolved from STRIPE_SECRET_KEY env var. */
+    secretKey?: string;
+    /** Stripe webhook signing secret (whsec_...). Auto-resolved from STRIPE_WEBHOOK_SECRET env var. */
+    webhookSecret?: string;
+    /** Stripe publishable key (pk_live_... or pk_test_...) — exposed to frontend. Auto-resolved from STRIPE_PUBLISHABLE_KEY env var. */
+    publishableKey?: string;
+    /** Whether to sync products/prices from Stripe via webhooks (default: true) */
+    syncProducts?: boolean;
+    /** Whether to enable Customer Portal session creation (default: true) */
+    portalEnabled?: boolean;
+    /** Default currency for checkout sessions (default: 'usd') */
+    currency?: string;
+    /**
+     * Feature flags per plan name.
+     * Map of product/plan name to list of feature identifiers.
+     *
+     * @example
+     * ```ts
+     * {
+     *   'pro': ['unlimited-servers', 'priority-support'],
+     *   'basic': ['5-servers'],
+     * }
+     * ```
+     */
+    features?: Record<string, string[]>;
+}
+/**
+ * Response from the subscription access endpoint.
+ */
+interface SubscriptionAccessResponse {
+    /** Whether the user has an active subscription */
+    hasActiveSubscription: boolean;
+    /** Plan/product name (null if no subscription) */
+    plan: string | null;
+    /** When the current period ends (null if no subscription) */
+    expiresAt: Date | null;
+    /** Feature flags for the user's plan */
+    features: string[];
+}
+/**
+ * Request body for creating a checkout session.
+ */
+interface CreateCheckoutDto {
+    /** Stripe Price ID to create checkout for */
+    priceId: string;
+    /** URL to redirect to on success */
+    successUrl: string;
+    /** URL to redirect to on cancel */
+    cancelUrl: string;
+    /** Optional Magnet user ID to associate with the customer */
+    userId?: string;
+    /** Optional metadata to attach to the checkout session */
+    metadata?: Record<string, string>;
+}
+/**
+ * Request body for creating a customer portal session.
+ */
+interface CreatePortalDto {
+    /** Stripe Customer ID */
+    customerId?: string;
+    /** Magnet user ID (used to look up customer if customerId not provided) */
+    userId?: string;
+    /** URL to redirect to when the user is done */
+    returnUrl?: string;
+}
+/**
+ * Response from creating a checkout or portal session.
+ */
+interface SessionResponse {
+    /** Session ID */
+    sessionId: string;
+    /** URL to redirect the user to */
+    url: string;
+}
+/**
+ * Admin metrics response from the dashboard endpoint.
+ */
+interface StripeMetricsResponse {
+    /** Monthly Recurring Revenue in cents */
+    mrr: number;
+    /** Total revenue this month in cents */
+    revenueThisMonth: number;
+    /** Number of active subscriptions */
+    activeSubscriptions: number;
+    /** Churn rate as a percentage (0-100) */
+    churnRate: number;
+    /** Revenue data for the last 12 months */
+    revenueByMonth: Array<{
+        month: string;
+        revenue: number;
+    }>;
+    /** Recent payments */
+    recentPayments: Array<{
+        id: string;
+        amount: number;
+        currency: string;
+        status: string;
+        customerEmail: string;
+        createdAt: string;
+    }>;
+}
+
+/**
+ * Stripe Plugin
+ *
+ * Provides Stripe payment integration for Magnet CMS:
+ * - Product, price, subscription, and customer management
+ * - Webhook processing with idempotency
+ * - Checkout and Customer Portal sessions
+ * - Admin dashboard with revenue metrics
+ * - User subscription access and feature flags
+ */
+declare class StripePlugin {
+    /** Environment variables used by this plugin */
+    static readonly envVars: EnvVarRequirement[];
+    /**
+     * Create a configured plugin provider for MagnetModule.forRoot().
+     * Auto-resolves secret values from environment variables if not provided.
+     *
+     * @example
+     * ```typescript
+     * MagnetModule.forRoot([
+     *   StripePlugin.forRoot({ currency: 'usd' }),
+     * ])
+     * ```
+     */
+    static forRoot(config?: Partial<StripePluginConfig>): PluginMagnetProvider;
+}
+
+export { type CreateCheckoutDto, type CreatePortalDto, type SessionResponse, type StripeMetricsResponse, StripePlugin, type StripePluginConfig, type SubscriptionAccessResponse };

package/dist/index.js

@@ -0,0 +1 @@
+export { StripePlugin } from './chunk-IPPZL6QM.js';

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@magnet-cms/plugin-stripe",
+  "version": "0.1.0",
+  "description": "Stripe payments plugin for Magnet CMS — products, subscriptions, webhooks, and admin dashboard",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./backend": {
+      "import": {
+        "types": "./dist/backend/index.d.ts",
+        "default": "./dist/backend/index.js"
+      },
+      "require": {
+        "types": "./dist/backend/index.d.cts",
+        "default": "./dist/backend/index.cjs"
+      }
+    },
+    "./frontend": {
+      "import": "./src/admin/index.ts",
+      "types": "./src/admin/index.ts"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/admin"
+  ],
+  "scripts": {
+    "build:dev": "tsup --watch",
+    "build": "tsup && bun run build:frontend",
+    "build:frontend": "vite build",
+    "build:frontend:watch": "vite build --watch"
+  },
+  "devDependencies": {
+    "@magnet-cms/admin": "workspace:*",
+    "@magnet-cms/common": "workspace:*",
+    "@magnet-cms/core": "workspace:*",
+    "@magnet-cms/ui": "workspace:*",
+    "@magnet-cms/utils": "workspace:*",
+    "@nestjs/common": "^11.1.12",
+    "@repo/biome": "workspace:*",
+    "@repo/tsup": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@types/react": "^19.0.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "lucide-react": "^0.468.0",
+    "react": "^19.0.0",
+    "react-router-dom": "^7.1.1",
+    "recharts": "^2.15.0",
+    "reflect-metadata": "0.2.2",
+    "stripe": "^17.0.0",
+    "vite": "^6.0.7"
+  },
+  "peerDependencies": {
+    "@magnet-cms/admin": "^0.1.2",
+    "@magnet-cms/common": "^0.1.0",
+    "@magnet-cms/core": "^1.0.3",
+    "@magnet-cms/ui": "^0.1.0",
+    "@magnet-cms/utils": "^0.1.0",
+    "@nestjs/common": "^11.1.12",
+    "lucide-react": ">=0.400.0",
+    "react": ">=18.0.0",
+    "react-router-dom": ">=6.0.0",
+    "reflect-metadata": "0.2.2",
+    "stripe": "^17.0.0"
+  },
+  "magnet": {
+    "type": "plugin",
+    "backend": true,
+    "frontend": true
+  }
+}

package/src/admin/components/recent-payments.tsx

@@ -0,0 +1,106 @@
+import {
+	Badge,
+	DataTable,
+	type DataTableColumn,
+} from '@magnet-cms/ui/components'
+
+const contentManagerStyles = `
+  .table-row-hover:hover td {
+    background-color: #F9FAFB;
+  }
+  .table-row-hover.group:hover td {
+    background-color: #F9FAFB;
+  }
+`
+
+interface Payment {
+	id: string
+	amount: number
+	currency: string
+	status: string
+	customerEmail: string
+	createdAt: string
+}
+
+interface RecentPaymentsProps {
+	payments: Payment[]
+}
+
+function formatCurrency(cents: number, currency: string): string {
+	return `${currency.toUpperCase()} ${(cents / 100).toFixed(2)}`
+}
+
+function getStatusVariant(
+	status: string,
+): 'default' | 'secondary' | 'destructive' | 'outline' {
+	switch (status) {
+		case 'succeeded':
+			return 'default'
+		case 'failed':
+			return 'destructive'
+		case 'refunded':
+			return 'secondary'
+		default:
+			return 'outline'
+	}
+}
+
+export function RecentPayments({ payments }: RecentPaymentsProps) {
+	const columns: DataTableColumn<Payment>[] = [
+		{
+			type: 'custom',
+			header: 'Amount',
+			cell: (row) => (
+				<span className="font-medium">
+					{formatCurrency(row.original.amount, row.original.currency)}
+				</span>
+			),
+		},
+		{
+			type: 'custom',
+			header: 'Status',
+			cell: (row) => (
+				<Badge variant={getStatusVariant(row.original.status)}>
+					{row.original.status}
+				</Badge>
+			),
+		},
+		{
+			type: 'text',
+			header: 'Customer',
+			accessorKey: 'customerEmail',
+			format: (value) => (
+				<span className="text-muted-foreground">{value as string}</span>
+			),
+		},
+		{
+			type: 'text',
+			header: 'Date',
+			accessorKey: 'createdAt',
+			format: (value) => (
+				<span className="text-muted-foreground">
+					{new Date(value as string).toLocaleDateString()}
+				</span>
+			),
+		},
+	]
+
+	return (
+		<>
+			<style>{contentManagerStyles}</style>
+			<DataTable
+				data={payments}
+				columns={columns}
+				getRowId={(row) => row.id}
+				enablePagination={false}
+				showCount={false}
+				variant="content-manager"
+				renderEmpty={() => (
+					<div className="p-6 text-center">
+						<p className="text-sm text-muted-foreground">No payments yet.</p>
+					</div>
+				)}
+			/>
+		</>
+	)
+}

package/src/admin/components/revenue-chart.tsx

@@ -0,0 +1,56 @@
+import {
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@magnet-cms/ui/components'
+import type { ChartConfig } from '@magnet-cms/ui/components'
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+interface RevenueChartProps {
+	data: Array<{ month: string; revenue: number }>
+}
+
+const chartConfig: ChartConfig = {
+	revenue: {
+		label: 'Revenue',
+		color: 'hsl(var(--chart-1))',
+	},
+}
+
+function formatCurrency(cents: number): string {
+	return `$${(cents / 100).toFixed(0)}`
+}
+
+export function RevenueChart({ data }: RevenueChartProps) {
+	return (
+		<ChartContainer config={chartConfig} className="h-[300px] w-full">
+			<BarChart data={data}>
+				<CartesianGrid strokeDasharray="3 3" vertical={false} />
+				<XAxis
+					dataKey="month"
+					tickLine={false}
+					axisLine={false}
+					fontSize={12}
+				/>
+				<YAxis
+					tickLine={false}
+					axisLine={false}
+					fontSize={12}
+					tickFormatter={formatCurrency}
+				/>
+				<ChartTooltip
+					content={
+						<ChartTooltipContent
+							formatter={(value) => formatCurrency(Number(value))}
+						/>
+					}
+				/>
+				<Bar
+					dataKey="revenue"
+					fill="var(--color-revenue)"
+					radius={[4, 4, 0, 0]}
+				/>
+			</BarChart>
+		</ChartContainer>
+	)
+}

package/src/admin/components/subscription-metrics.tsx

@@ -0,0 +1,65 @@
+import { Card } from '@magnet-cms/ui/components'
+import { CreditCard, DollarSign, TrendingDown, Users } from 'lucide-react'
+
+interface MetricCardProps {
+	title: string
+	value: string
+	icon: React.ReactNode
+}
+
+function MetricCard({ title, value, icon }: MetricCardProps) {
+	return (
+		<Card className="p-6">
+			<div className="flex items-center justify-between">
+				<div>
+					<p className="text-sm font-medium text-muted-foreground">{title}</p>
+					<p className="text-2xl font-bold mt-1">{value}</p>
+				</div>
+				<div className="text-muted-foreground">{icon}</div>
+			</div>
+		</Card>
+	)
+}
+
+interface SubscriptionMetricsProps {
+	mrr: number
+	revenueThisMonth: number
+	activeSubscriptions: number
+	churnRate: number
+}
+
+function formatCurrency(cents: number): string {
+	return `$${(cents / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}`
+}
+
+export function SubscriptionMetrics({
+	mrr,
+	revenueThisMonth,
+	activeSubscriptions,
+	churnRate,
+}: SubscriptionMetricsProps) {
+	return (
+		<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+			<MetricCard
+				title="Monthly Recurring Revenue"
+				value={formatCurrency(mrr)}
+				icon={<DollarSign className="h-5 w-5" />}
+			/>
+			<MetricCard
+				title="Revenue This Month"
+				value={formatCurrency(revenueThisMonth)}
+				icon={<CreditCard className="h-5 w-5" />}
+			/>
+			<MetricCard
+				title="Active Subscriptions"
+				value={String(activeSubscriptions)}
+				icon={<Users className="h-5 w-5" />}
+			/>
+			<MetricCard
+				title="Churn Rate"
+				value={`${churnRate}%`}
+				icon={<TrendingDown className="h-5 w-5" />}
+			/>
+		</div>
+	)
+}