feat: integrate Stripe for embedded checkout; update billing API to return client_secret and adjust checkout flow in components

app/checkout/page.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+/**
+ * Embedded Stripe Checkout page.
+ * Requires plan_id, interval, limit in URL (e.g. /checkout?plan_id=solo&interval=year&limit=100000).
+ * Falls back to pulse_pending_checkout from localStorage (after OAuth).
+ */
+
+import { useCallback, useEffect, useMemo, Suspense } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { loadStripe } from '@stripe/stripe-js'
+import { EmbeddedCheckoutProvider, EmbeddedCheckout } from '@stripe/react-stripe-js'
+import { useAuth } from '@/lib/auth/context'
+import { createCheckoutSession } from '@/lib/api/billing'
+import { LoadingOverlay } from '@ciphera-net/ui'
+import Link from 'next/link'
+
+const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || '')
+
+function CheckoutContent() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { user } = useAuth()
+
+  const planId = searchParams.get('plan_id')
+  const interval = searchParams.get('interval')
+  const limitParam = searchParams.get('limit')
+  const limit = limitParam ? parseInt(limitParam, 10) : null
+
+  const paramsValid = planId && interval && limit != null && !Number.isNaN(limit) && limit > 0
+
+  const fetchClientSecret = useCallback(async () => {
+    let pid = planId
+    let int = interval
+    let lim = limit
+
+    if (!paramsValid) {
+      const pending = typeof window !== 'undefined' ? localStorage.getItem('pulse_pending_checkout') : null
+      if (pending) {
+        try {
+          const intent = JSON.parse(pending)
+          pid = intent.planId || pid
+          int = intent.interval || int
+          lim = intent.limit ?? lim
+        } catch {
+          // ignore
+        }
+      }
+    }
+
+    if (!pid || !int || lim == null || lim <= 0) {
+      throw new Error('Missing checkout params. Go to Pricing to subscribe.')
+    }
+
+    const { client_secret } = await createCheckoutSession({
+      plan_id: pid,
+      interval: int,
+      limit: lim,
+    })
+    return client_secret
+  }, [planId, interval, limit, paramsValid])
+
+  const options = useMemo(() => ({ fetchClientSecret }), [fetchClientSecret])
+
+  useEffect(() => {
+    if (!user) {
+      const intent = paramsValid
+        ? { planId, interval, limit, fromCheckout: true }
+        : typeof window !== 'undefined' ? localStorage.getItem('pulse_pending_checkout') : null
+      if (intent && typeof intent === 'string') {
+        try {
+          const parsed = JSON.parse(intent)
+          localStorage.setItem('pulse_pending_checkout', JSON.stringify({ ...parsed, fromCheckout: true }))
+        } catch {
+          // ignore
+        }
+      } else if (paramsValid && typeof window !== 'undefined') {
+        localStorage.setItem('pulse_pending_checkout', JSON.stringify({ planId, interval, limit, fromCheckout: true }))
+      }
+      router.replace('/login')
+      return
+    }
+
+    if (!paramsValid) {
+      const pending = typeof window !== 'undefined' ? localStorage.getItem('pulse_pending_checkout') : null
+      if (!pending) {
+        router.replace('/pricing')
+        return
+      }
+    }
+  }, [user, paramsValid, planId, interval, limit, router])
+
+  if (!user) {
+    return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Redirecting to login…" />
+  }
+
+  if (!paramsValid) {
+    const pending = typeof window !== 'undefined' ? localStorage.getItem('pulse_pending_checkout') : null
+    if (!pending) {
+      return (
+        <div className="min-h-screen pt-24 px-4 flex flex-col items-center justify-center gap-4">
+          <p className="text-neutral-600 dark:text-neutral-400">Missing checkout parameters.</p>
+          <Link href="/pricing" className="text-brand-orange hover:underline font-medium">
+            Go to Pricing
+          </Link>
+        </div>
+      )
+    }
+  }
+
+  if (!process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY) {
+    return (
+      <div className="min-h-screen pt-24 px-4 flex flex-col items-center justify-center gap-4">
+        <p className="text-neutral-600 dark:text-neutral-400">Checkout is not configured.</p>
+        <Link href="/pricing" className="text-brand-orange hover:underline font-medium">
+          Back to Pricing
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen pt-24 px-4 pb-12 max-w-2xl mx-auto">
+      <EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
+        <EmbeddedCheckout />
+      </EmbeddedCheckoutProvider>
+    </div>
+  )
+}
+
+export default function CheckoutPage() {
+  return (
+    <Suspense fallback={<LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Loading checkout…" />}>
+      <CheckoutContent />
+    </Suspense>
+  )
+}