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

components/PricingSection.tsx

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

components/settings/OrganizationSettings.tsx

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