102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
'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>
|
|
)
|
|
}
|