ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

refactor: remove embedded checkout components and update billing API integration for streamlined checkout flow

Browse Source
This commit is contained in:
Usman Baig
2026-02-20 03:51:20 +01:00
parent 96b3919e52
commit 17106517d9
7 changed files with 27 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
app/checkout/page.tsx
View File

@@ -1,137 +0,0 @@
'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>
)
}

101
app/checkout/return/page.tsx
View File

@@ -1,101 +0,0 @@
'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 { Suspense, 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'
function CheckoutReturnContent() {
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>
)
}
export default function CheckoutReturnPage() {
return (
<Suspense fallback={<LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Loading…" />}>
<CheckoutReturnContent />
</Suspense>
)
}

13
app/welcome/page.tsx
View File

@@ -16,6 +16,7 @@ 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'
@@ -217,14 +218,18 @@ function WelcomeContent() {
try {
trackWelcomePlanContinue()
const intent = JSON.parse(raw)
const params = new URLSearchParams({
const { url } = await createCheckoutSession({
plan_id: intent.planId,
interval: intent.interval || 'month',
limit: String(intent.limit ?? 100000),
limit: intent.limit ?? 100000,
})
localStorage.removeItem('pulse_pending_checkout')
setRedirectingCheckout(true)
router.push(`/checkout?${params.toString()}`)
if (url) {
setRedirectingCheckout(true)
window.location.href = url
return
}
throw new Error('No checkout URL returned')
} catch (err: unknown) {
setPlanError(getAuthErrorMessage(err) || (err as Error)?.message || 'Failed to start checkout')
localStorage.removeItem('pulse_pending_checkout')