feat: integrate Stripe for embedded checkout; update billing API to return client_secret and adjust checkout flow in components
This commit is contained in:
Usman Baig
137
app/checkout/page.tsx
Normal file
137
app/checkout/page.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
93
app/checkout/return/page.tsx
Normal file
93
app/checkout/return/page.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
'use client'
|
||||
|
||||
/**
|
||||
* Return page after Embedded Checkout.
|
||||
* Stripe redirects here with ?session_id={CHECKOUT_SESSION_ID}.
|
||||
* Fetches session status and redirects to dashboard on success.
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import { getCheckoutSessionStatus } from '@/lib/api/billing'
|
||||
import { LoadingOverlay } from '@ciphera-net/ui'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function CheckoutReturnPage() {
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const sessionId = searchParams.get('session_id')
|
||||
const [status, setStatus] = useState<'loading' | 'complete' | 'open' | 'error'>('loading')
|
||||
const [errorMessage, setErrorMessage] = useState<string>('')
|
||||
|
||||
useEffect(() => {
|
||||
if (!sessionId) {
|
||||
setStatus('error')
|
||||
setErrorMessage('Missing session ID')
|
||||
return
|
||||
}
|
||||
|
||||
let cancelled = false
|
||||
|
||||
async function check() {
|
||||
try {
|
||||
const data = await getCheckoutSessionStatus(sessionId!)
|
||||
if (cancelled) return
|
||||
|
||||
if (data.status === 'complete') {
|
||||
setStatus('complete')
|
||||
router.replace('/')
|
||||
return
|
||||
}
|
||||
|
||||
if (data.status === 'open') {
|
||||
setStatus('open')
|
||||
setErrorMessage('Payment was not completed. You can try again.')
|
||||
return
|
||||
}
|
||||
|
||||
setStatus('error')
|
||||
setErrorMessage('Unexpected session status. Please contact support if you were charged.')
|
||||
} catch (err) {
|
||||
if (cancelled) return
|
||||
setStatus('error')
|
||||
setErrorMessage((err as Error)?.message || 'Failed to verify payment')
|
||||
}
|
||||
}
|
||||
|
||||
check()
|
||||
return () => { cancelled = true }
|
||||
}, [sessionId, router])
|
||||
|
||||
if (status === 'loading') {
|
||||
return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Verifying your payment…" />
|
||||
}
|
||||
|
||||
if (status === 'complete') {
|
||||
return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Redirecting to dashboard…" />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pt-24 px-4 flex flex-col items-center justify-center gap-6">
|
||||
<h1 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{status === 'open' ? 'Payment not completed' : 'Something went wrong'}
|
||||
</h1>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 text-center max-w-md">
|
||||
{errorMessage}
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<Link
|
||||
href="/pricing"
|
||||
className="px-4 py-2 rounded-lg bg-brand-orange text-white hover:opacity-90 font-medium"
|
||||
>
|
||||
Back to pricing
|
||||
</Link>
|
||||
<Link
|
||||
href="/"
|
||||
className="px-4 py-2 rounded-lg border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 font-medium"
|
||||
>
|
||||
Go to dashboard
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -16,7 +16,6 @@ import {
|
||||
type Organization,
|
||||
type OrganizationMember,
|
||||
} from '@/lib/api/organization'
|
||||
import { createCheckoutSession } from '@/lib/api/billing'
|
||||
import { createSite, type Site } from '@/lib/api/sites'
|
||||
import { setSessionAction } from '@/app/actions/auth'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
@@ -218,18 +217,14 @@ function WelcomeContent() {
|
||||
try {
|
||||
trackWelcomePlanContinue()
|
||||
const intent = JSON.parse(raw)
|
||||
const { url } = await createCheckoutSession({
|
||||
const params = new URLSearchParams({
|
||||
plan_id: intent.planId,
|
||||
interval: intent.interval || 'month',
|
||||
limit: intent.limit ?? 100000,
|
||||
limit: String(intent.limit ?? 100000),
|
||||
})
|
||||
localStorage.removeItem('pulse_pending_checkout')
|
||||
if (url) {
|
||||
setRedirectingCheckout(true)
|
||||
window.location.href = url
|
||||
return
|
||||
}
|
||||
throw new Error('No checkout URL returned')
|
||||
setRedirectingCheckout(true)
|
||||
router.push(`/checkout?${params.toString()}`)
|
||||
} catch (err: unknown) {
|
||||
setPlanError(getAuthErrorMessage(err) || (err as Error)?.message || 'Failed to start checkout')
|
||||
localStorage.removeItem('pulse_pending_checkout')
|
||||
|
||||
Reference in New Issue
Block a user