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

1
CONTRIBUTING.md
View File

@@ -21,7 +21,6 @@ Thank you for your interest in contributing to Pulse! We welcome contributions f
NEXT_PUBLIC_AUTH_URL=http://localhost:3000
NEXT_PUBLIC_AUTH_API_URL=http://localhost:8081
NEXT_PUBLIC_APP_URL=http://localhost:3003
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_... # For embedded checkout (optional if billing not used)
```
5. **Run the development server**:
```bash

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')

18
components/PricingSection.tsx
View File

@@ -1,12 +1,13 @@
'use client'
import { useState, useEffect } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { useSearchParams } from 'next/navigation'
import { motion } from 'framer-motion'
import { Button, CheckCircleIcon } from '@ciphera-net/ui'
import { useAuth } from '@/lib/auth/context'
import { initiateOAuthFlow } from '@/lib/api/oauth'
import { toast } from '@ciphera-net/ui'
import { createCheckoutSession } from '@/lib/api/billing'
// 1. Define Plans with IDs and Site Limits
const PLANS = [
@@ -101,7 +102,6 @@ const TRAFFIC_TIERS = [
]
export default function PricingSection() {
const router = useRouter()
const searchParams = useSearchParams()
const [isYearly, setIsYearly] = useState(false)
const [sliderIndex, setSliderIndex] = useState(2) // Default to 100k (index 2)
@@ -186,16 +186,22 @@ export default function PricingSection() {
return
}
// 2. Navigate to embedded checkout page
// 2. Call backend to create checkout session
const interval = options?.interval || (isYearly ? 'year' : 'month')
const limit = options?.limit || currentTraffic.value
const params = new URLSearchParams({
const { url } = await createCheckoutSession({
plan_id: planId,
interval,
limit: String(limit),
limit,
})
router.push(`/checkout?${params.toString()}`)
// 3. Redirect to Stripe Checkout
if (url) {
window.location.href = url
} else {
throw new Error('No checkout URL returned')
}
} catch (error: any) {
console.error('Checkout error:', error)

11
components/settings/OrganizationSettings.tsx
View File

@@ -16,7 +16,7 @@ import {
OrganizationInvitation,
Organization
} from '@/lib/api/organization'
import { getSubscription, createPortalSession, getInvoices, cancelSubscription, changePlan, SubscriptionDetails, Invoice } from '@/lib/api/billing'
import { getSubscription, createPortalSession, getInvoices, cancelSubscription, changePlan, createCheckoutSession, SubscriptionDetails, Invoice } from '@/lib/api/billing'
import { TRAFFIC_TIERS, PLAN_ID_SOLO, getTierIndexForLimit, getLimitForTierIndex, getSitesLimitForPlan } from '@/lib/plans'
import { getAuditLog, AuditLogEntry, GetAuditLogParams } from '@/lib/api/audit'
import { getNotificationSettings, updateNotificationSettings } from '@/lib/api/notification-settings'
@@ -351,12 +351,9 @@ export default function OrganizationSettings() {
setShowChangePlanModal(false)
loadSubscription()
} else {
const params = new URLSearchParams({
plan_id: PLAN_ID_SOLO,
interval,
limit: String(limit),
})
router.push(`/checkout?${params.toString()}`)
const { url } = await createCheckoutSession({ plan_id: PLAN_ID_SOLO, interval, limit })
if (url) window.location.href = url
else throw new Error('No checkout URL')
}
} catch (error: any) {
toast.error(getAuthErrorMessage(error) || error.message || 'Something went wrong.')

15
lib/api/billing.ts
View File

@@ -85,24 +85,13 @@ export interface CreateCheckoutParams {
limit: number
}
export async function createCheckoutSession(params: CreateCheckoutParams): Promise<{ client_secret: string }> {
return await billingFetch<{ client_secret: string }>('/api/billing/checkout', {
export async function createCheckoutSession(params: CreateCheckoutParams): Promise<{ url: string }> {
return await billingFetch<{ url: string }>('/api/billing/checkout', {
method: 'POST',
body: JSON.stringify(params),
})
}
export interface CheckoutSessionStatus {
status: string
customer_email: string
}
export async function getCheckoutSessionStatus(sessionId: string): Promise<CheckoutSessionStatus> {
return await billingFetch<CheckoutSessionStatus>(`/api/billing/checkout/session-status?session_id=${encodeURIComponent(sessionId)}`, {
method: 'GET',
})
}
export interface Invoice {
id: string
amount_paid: number