feat: Next generation Stripe billing integration

src/Exceptionless.Core/Exceptionless.Core.csproj

@@ -31,7 +31,7 @@
     <PackageReference Include="Microsoft.Extensions.Configuration.Binder" Version="10.0.6" />
     <PackageReference Include="Microsoft.Extensions.Diagnostics.HealthChecks" Version="10.0.6" />
     <PackageReference Include="Microsoft.Extensions.Logging" Version="10.0.6" />
-    <PackageReference Include="Stripe.net" Version="47.4.0" />
+    <PackageReference Include="Stripe.net" Version="50.4.1" />
     <PackageReference Include="System.DirectoryServices" Version="10.0.6" />
     <PackageReference Include="UAParser" Version="3.1.47" />
     <PackageReference Include="Foundatio.Repositories.Elasticsearch" Version="7.18.0-beta6" Condition="'$(ReferenceFoundatioRepositoriesSource)' == '' OR '$(ReferenceFoundatioRepositoriesSource)' == 'false'" />

src/Exceptionless.Web/ClientApp/package.json

@@ -71,6 +71,7 @@
         "@exceptionless/fetchclient": "^0.44.0",
         "@internationalized/date": "^3.12.0",
         "@lucide/svelte": "^0.577.0",
+        "@stripe/stripe-js": "^8.10.0",
         "@tanstack/svelte-form": "^1.29.0",
         "@tanstack/svelte-query": "^6.1.16",
         "@tanstack/svelte-query-devtools": "^6.1.16",
@@ -90,6 +91,7 @@
         "shiki": "^4.0.2",
         "svelte-intercom": "^0.0.35",
         "svelte-sonner": "^1.1.0",
+        "svelte-stripe": "^2.0.0",
         "svelte-time": "^2.1.0",
         "tailwind-merge": "^3.5.0",
         "tailwind-variants": "^3.2.2",

src/Exceptionless.Web/ClientApp/src/lib/features/billing/components/stripe-provider.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    import type { Stripe, StripeElements, StripeElementsOptions } from '@stripe/stripe-js';
+    import type { Snippet } from 'svelte';
+
+    import ErrorMessage from '$comp/error-message.svelte';
+    import { Skeleton } from '$comp/ui/skeleton';
+    import { loadStripeOnce, setStripeContext } from '$features/billing/stripe.svelte';
+    import { onMount } from 'svelte';
+    import { Elements } from 'svelte-stripe';
+
+    interface Props {
+        /** Optional appearance theme for Stripe Elements */
+        appearance?: StripeElementsOptions['appearance'];
+        /** Content to render inside Elements */
+        children: Snippet;
+        /** Optional client secret for PaymentIntent/SetupIntent mode */
+        clientSecret?: string;
+        /** Callback when Stripe Elements state changes */
+        onElementsChange?: (elements: StripeElements | undefined) => void;
+        /** Callback when Stripe finishes loading */
+        onload?: (stripe: Stripe) => void;
+    }
+
+    let { appearance, children, clientSecret, onElementsChange, onload }: Props = $props();
+
+    let stripe = $state<null | Stripe>(null);
+    let elements = $state<StripeElements | undefined>(undefined);
+    let isLoading = $state(true);
+    let error = $state<null | string>(null);
+
+    // Set up context for child components using useStripe()
+    setStripeContext({
+        get elements() {
+            return elements ?? null;
+        },
+        get error() {
+            return error;
+        },
+        get isLoading() {
+            return isLoading;
+        },
+        get stripe() {
+            return stripe;
+        }
+    });
+
+    onMount(async () => {
+        try {
+            stripe = await loadStripeOnce();
+            if (!stripe) {
+                error = 'Stripe is not configured. Please contact support.';
+            } else {
+                onload?.(stripe);
+            }
+        } catch (ex) {
+            error = ex instanceof Error ? ex.message : 'Failed to load payment system';
+        } finally {
+            isLoading = false;
+        }
+    });
+
+    $effect(() => {
+        onElementsChange?.(elements);
+    });
+</script>
+
+{#if isLoading}
+    <Skeleton class="h-32 w-full" />
+{:else if error}
+    <ErrorMessage message={error} />
+{:else if stripe}
+    <Elements {stripe} {clientSecret} {appearance} bind:elements>
+        {@render children()}
+    </Elements>
+{/if}

src/Exceptionless.Web/ClientApp/src/lib/features/billing/constants.ts

@@ -0,0 +1 @@
+export const FREE_PLAN_ID = 'EX_FREE';

src/Exceptionless.Web/ClientApp/src/lib/features/billing/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Billing feature module - Stripe integration for plan management.
+ */
+
+// Components
+export { default as ChangePlanDialog } from './components/change-plan-dialog.svelte';
+
+export { default as StripeProvider } from './components/stripe-provider.svelte';
+
+// Constants
+export { FREE_PLAN_ID } from './constants';
+
+// Models
+export type { BillingPlan, CardMode, ChangePlanFormState, ChangePlanParams, ChangePlanResult } from './models';
+// Context and hooks
+export { getStripePublishableKey, isStripeEnabled, loadStripeOnce, setStripeContext, type StripeContext, tryUseStripe, useStripe } from './stripe.svelte';

src/Exceptionless.Web/ClientApp/src/lib/features/billing/models.ts

@@ -0,0 +1,33 @@
+/**
+ * Billing models - re-exports from generated types plus billing-specific types.
+ */
+
+export type { BillingPlan, ChangePlanResult } from '$lib/generated/api';
+
+/**
+ * Card mode for the payment form.
+ */
+export type CardMode = 'existing' | 'new';
+
+/**
+ * State for the change plan form.
+ */
+export interface ChangePlanFormState {
+    cardMode: CardMode;
+    couponId: string;
+    selectedPlanId: null | string;
+}
+
+/**
+ * Parameters for the change-plan API call.
+ */
+export interface ChangePlanParams {
+    /** Optional coupon code to apply */
+    couponId?: string;
+    /** Last 4 digits of the card (for display purposes) */
+    last4?: string;
+    /** The plan ID to change to */
+    planId: string;
+    /** Stripe PaymentMethod ID or legacy token */
+    stripeToken?: string;
+}

src/Exceptionless.Web/ClientApp/src/lib/features/billing/schemas.ts

@@ -0,0 +1,9 @@
+import { type infer as Infer, object, string, enum as zodEnum } from 'zod';
+
+export const ChangePlanSchema = object({
+    cardMode: zodEnum(['existing', 'new']),
+    couponId: string(),
+    selectedPlanId: string().min(1, 'Please select a plan.')
+});
+
+export type ChangePlanFormData = Infer<typeof ChangePlanSchema>;

src/Exceptionless.Web/ClientApp/src/lib/features/billing/stripe.svelte.ts

@@ -0,0 +1,86 @@
+/**
+ * Stripe context and hooks for billing integration.
+ *
+ * Provides lazy-loaded Stripe instance with context-based access following
+ * the svelte-intercom provider pattern.
+ */
+
+import type { Stripe, StripeElements } from '@stripe/stripe-js';
+
+import { env } from '$env/dynamic/public';
+import { loadStripe } from '@stripe/stripe-js';
+import { getContext, setContext } from 'svelte';
+
+const STRIPE_CONTEXT_KEY = Symbol('stripe-context');
+
+export interface StripeContext {
+    readonly elements: null | StripeElements;
+    readonly error: null | string;
+    readonly isLoading: boolean;
+    readonly stripe: null | Stripe;
+}
+
+/**
+ * Get the Stripe publishable key from environment.
+ */
+export function getStripePublishableKey(): string | undefined {
+    return env.PUBLIC_STRIPE_PUBLISHABLE_KEY;
+}
+
+/**
+ * Check if Stripe is enabled via environment configuration.
+ */
+export function isStripeEnabled(): boolean {
+    return !!env.PUBLIC_STRIPE_PUBLISHABLE_KEY;
+}
+
+// Singleton to prevent multiple Stripe loads
+let _stripePromise: null | Promise<null | Stripe> = null;
+let _stripeInstance: null | Stripe = null;
+
+/**
+ * Load Stripe instance lazily. Returns cached instance if already loaded.
+ */
+export async function loadStripeOnce(): Promise<null | Stripe> {
+    if (_stripeInstance) {
+        return _stripeInstance;
+    }
+
+    if (!isStripeEnabled()) {
+        return null;
+    }
+
+    if (!_stripePromise) {
+        _stripePromise = loadStripe(env.PUBLIC_STRIPE_PUBLISHABLE_KEY!);
+    }
+
+    _stripeInstance = await _stripePromise;
+    return _stripeInstance;
+}
+
+/**
+ * Set the Stripe context. Called by StripeProvider.
+ */
+export function setStripeContext(ctx: StripeContext): void {
+    setContext(STRIPE_CONTEXT_KEY, ctx);
+}
+
+/**
+ * Try to get the Stripe context without throwing.
+ * Returns null if not within a StripeProvider.
+ */
+export function tryUseStripe(): null | StripeContext {
+    return getContext<StripeContext | undefined>(STRIPE_CONTEXT_KEY) ?? null;
+}
+
+/**
+ * Get the Stripe context. Must be called within a StripeProvider.
+ * @throws Error if called outside of StripeProvider
+ */
+export function useStripe(): StripeContext {
+    const ctx = getContext<StripeContext | undefined>(STRIPE_CONTEXT_KEY);
+    if (!ctx) {
+        throw new Error('useStripe() must be called within a StripeProvider component');
+    }
+    return ctx;
+}