@digilogiclabs/create-saas-app 2.11.0 → 2.12.0

package/dist/templates/web/ui-auth-payments-ai/template/src/app/billing/page.tsx

@@ -1,332 +1,82 @@
 'use client';
 
-import React, { useState } from 'react';
-import { usePayments } from '@digilogiclabs/app-sdk';
-import { formatCurrency, formatDate } from '@/lib/utils';
-import {
-  Button,
-  Card,
-  Input,
-  Label,
-  Modal
-} from '@digilogiclabs/saas-factory-ui';
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@digilogiclabs/saas-factory-ui';
+import { CreditCard, ExternalLink, Receipt } from 'lucide-react';
+import Link from 'next/link';
 
 export default function BillingPage() {
-  const { loading } = usePayments();
-  const [showPaymentMethodModal, setShowPaymentMethodModal] = useState(false);
-  const [showPlanChangeModal, setShowPlanChangeModal] = useState(false);
-  const [editingPaymentMethod, setEditingPaymentMethod] = useState<string | null>(null);
-  const [selectedPlan, setSelectedPlan] = useState('pro');
-
-  const handleSubscriptionChange = () => {
-    setShowPlanChangeModal(true);
-  };
-
-  const handlePaymentMethodUpdate = (methodId?: string) => {
-    setEditingPaymentMethod(methodId || null);
-    setShowPaymentMethodModal(true);
-  };
-
-  const handleInvoiceDownload = (invoiceId: string) => {
-    console.log('Download invoice:', invoiceId);
+  const handleManageBilling = async () => {
+    const res = await fetch('/api/billing/portal', { method: 'POST' });
+    const data = await res.json();
+    if (data.url) {
+      window.location.href = data.url;
+    }
   };
 
-  const handlePaymentMethodSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const formData = new FormData(e.target as HTMLFormElement);
-    console.log('Payment method data:', Object.fromEntries(formData));
-    setShowPaymentMethodModal(false);
-    setEditingPaymentMethod(null);
-  };
-
-  const handlePlanChangeSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const formData = new FormData(e.target as HTMLFormElement);
-    console.log('Plan change data:', Object.fromEntries(formData));
-    setShowPlanChangeModal(false);
-  };
-
-  // Mock data
-  const currentSubscription = {
-    plan: 'Pro Plan',
-    price: 1999,
-    interval: 'month',
-    status: 'active',
-    nextBilling: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000)
-  };
-
-  const paymentMethods = [
-    { id: 'pm_123', type: 'card', last4: '4242', brand: 'visa', expiryMonth: 12, expiryYear: 2025, isDefault: true },
-    { id: 'pm_456', type: 'card', last4: '0005', brand: 'mastercard', expiryMonth: 8, expiryYear: 2026, isDefault: false }
-  ];
-
-  const invoices = [
-    { id: 'inv_123', amount: 1999, currency: 'usd', status: 'paid', date: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), description: 'Pro Plan - Monthly' },
-    { id: 'inv_456', amount: 1999, currency: 'usd', status: 'paid', date: new Date(Date.now() - 60 * 24 * 60 * 60 * 1000), description: 'Pro Plan - Monthly' },
-    { id: 'inv_789', amount: 999, currency: 'usd', status: 'paid', date: new Date(Date.now() - 90 * 24 * 60 * 60 * 1000), description: 'Basic Plan - Monthly' }
-  ];
-
-  const plans = [
-    { value: 'basic', label: 'Basic Plan', price: '$9/month', description: 'Perfect for individuals getting started', features: ['1,000 AI requests/month', 'Basic AI models', 'Email support', '5GB storage'] },
-    { value: 'pro', label: 'Pro Plan', price: '$29/month', description: 'Best for growing teams and businesses', features: ['10,000 AI requests/month', 'Advanced AI models', 'Priority support', '50GB storage', 'Team collaboration'], recommended: true },
-    { value: 'enterprise', label: 'Enterprise Plan', price: 'Custom pricing', description: 'For large organizations', features: ['Unlimited AI requests', 'All AI models', 'Dedicated support', 'Unlimited storage', 'Advanced security'] }
-  ];
-
   return (
-    <div className="min-h-screen bg-gray-100 py-8">
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="mb-8">
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">Billing &amp; Subscription</h1>
-          <p className="text-xl text-gray-600">Manage your subscription and billing information</p>
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
-          {/* Current Subscription */}
-          <Card className="p-6">
-            <h2 className="text-2xl font-bold mb-6">Current Subscription</h2>
-            <div className="space-y-4">
-              <div>
-                <h3 className="font-semibold">{currentSubscription.plan}</h3>
-                <p className="text-2xl font-bold">
-                  {formatCurrency(currentSubscription.price)}
-                  <span className="text-sm font-normal">/{currentSubscription.interval}</span>
-                </p>
-              </div>
-              <div>
-                <p className="text-sm text-gray-600">Status</p>
-                <span className="inline-block px-2 py-1 bg-green-100 text-green-800 rounded text-sm">
-                  {currentSubscription.status}
-                </span>
-              </div>
+    <div className="mx-auto max-w-4xl px-4 py-8">
+      <h1 className="text-3xl font-bold text-foreground mb-2">Billing</h1>
+      <p className="text-muted-foreground mb-8">Manage your subscription and payment methods.</p>
+
+      <div className="grid gap-6 md:grid-cols-2 mb-8">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Current Plan</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-gray-600">Next billing date</p>
-                <p>{formatDate(currentSubscription.nextBilling)}</p>
+                <p className="text-2xl font-bold text-foreground">Free</p>
+                <p className="text-sm text-muted-foreground">Basic features included</p>
               </div>
-              <Button
-                onClick={handleSubscriptionChange}
-                disabled={loading}
-                variant="outline"
-                className="w-full"
-              >
-                Change Plan
-              </Button>
+              <Link href="/checkout" className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+                Upgrade
+              </Link>
             </div>
-          </Card>
-
-          {/* Payment Methods */}
-          <Card className="p-6">
-            <h2 className="text-2xl font-bold mb-6">Payment Methods</h2>
-            <div className="space-y-4">
-              {paymentMethods.map((method) => (
-                <div key={method.id} className="flex items-center justify-between p-3 border rounded-lg">
-                  <div className="flex items-center">
-                    <div className="w-8 h-8 bg-blue-100 rounded flex items-center justify-center mr-3">
-                      <span role="img" aria-label="credit card">&#128179;</span>
-                    </div>
-                    <div>
-                      <p className="font-medium">
-                        {method.brand.toUpperCase()} &bull;&bull;&bull;&bull; {method.last4}
-                      </p>
-                      <p className="text-sm text-gray-600">
-                        Expires {method.expiryMonth}/{method.expiryYear}
-                        {method.isDefault && <span className="ml-2 text-blue-600">(Default)</span>}
-                      </p>
-                    </div>
-                  </div>
-                  <Button
-                    onClick={() => handlePaymentMethodUpdate(method.id)}
-                    disabled={loading}
-                    variant="outline"
-                    size="sm"
-                  >
-                    Edit
-                  </Button>
-                </div>
-              ))}
-              <Button
-                onClick={() => handlePaymentMethodUpdate()}
-                disabled={loading}
-                variant="outline"
-                className="w-full"
-              >
-                Add Payment Method
-              </Button>
-            </div>
-          </Card>
-        </div>
-
-        {/* Billing History */}
-        <Card className="p-6">
-          <h2 className="text-2xl font-bold mb-6">Billing History</h2>
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b">
-                  <th className="text-left py-2">Date</th>
-                  <th className="text-left py-2">Description</th>
-                  <th className="text-left py-2">Amount</th>
-                  <th className="text-left py-2">Status</th>
-                  <th className="text-left py-2">Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                {invoices.map((invoice) => (
-                  <tr key={invoice.id} className="border-b">
-                    <td className="py-3">{formatDate(invoice.date)}</td>
-                    <td className="py-3">{invoice.description}</td>
-                    <td className="py-3">{formatCurrency(invoice.amount)}</td>
-                    <td className="py-3">
-                      <span className="inline-block px-2 py-1 bg-green-100 text-green-800 rounded text-sm">
-                        {invoice.status}
-                      </span>
-                    </td>
-                    <td className="py-3">
-                      <Button
-                        onClick={() => handleInvoiceDownload(invoice.id)}
-                        variant="outline"
-                        size="sm"
-                      >
-                        Download
-                      </Button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+          </CardContent>
         </Card>
 
-        {/* Payment Method Modal */}
-        <Modal
-          isOpen={showPaymentMethodModal}
-          onClose={() => { setShowPaymentMethodModal(false); setEditingPaymentMethod(null); }}
-          title={editingPaymentMethod ? "Edit Payment Method" : "Add Payment Method"}
-        >
-          <form onSubmit={handlePaymentMethodSubmit} className="space-y-4">
-            <div>
-              <h3 className="font-semibold mb-3">Card Information</h3>
-              <div className="space-y-3">
-                <div>
-                  <Label htmlFor="cardNumber">Card Number</Label>
-                  <Input id="cardNumber" name="cardNumber" placeholder="1234 5678 9012 3456" required disabled={loading} />
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <Label htmlFor="expiryDate">Expiry Date</Label>
-                    <Input id="expiryDate" name="expiryDate" placeholder="MM/YY" required disabled={loading} />
-                  </div>
-                  <div>
-                    <Label htmlFor="cvc">CVC</Label>
-                    <Input id="cvc" name="cvc" placeholder="123" required disabled={loading} />
-                  </div>
-                </div>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Payment Method</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
+                <CreditCard className="h-5 w-5 text-muted-foreground" />
               </div>
-            </div>
-            <div>
-              <h3 className="font-semibold mb-3">Billing Information</h3>
-              <div className="space-y-3">
-                <div>
-                  <Label htmlFor="cardholderName">Cardholder Name</Label>
-                  <Input id="cardholderName" name="cardholderName" placeholder="Full name as it appears on card" required disabled={loading} />
-                </div>
-                <div>
-                  <Label htmlFor="billingAddress">Street Address</Label>
-                  <Input id="billingAddress" name="billingAddress" placeholder="Street address" required disabled={loading} />
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <Label htmlFor="city">City</Label>
-                    <Input id="city" name="city" placeholder="City" required disabled={loading} />
-                  </div>
-                  <div>
-                    <Label htmlFor="postalCode">ZIP/Postal Code</Label>
-                    <Input id="postalCode" name="postalCode" placeholder="ZIP/Postal code" required disabled={loading} />
-                  </div>
-                </div>
-                <label className="flex items-center gap-2">
-                  <input type="checkbox" name="makeDefault" className="rounded" />
-                  <span className="text-sm">Make this my default payment method</span>
-                </label>
+              <div>
+                <p className="text-sm font-medium text-foreground">No payment method</p>
+                <p className="text-xs text-muted-foreground">Add one to upgrade your plan</p>
               </div>
             </div>
-            <Button type="submit" className="w-full" disabled={loading}>
-              {editingPaymentMethod ? "Update Payment Method" : "Add Payment Method"}
-            </Button>
-          </form>
-        </Modal>
+          </CardContent>
+        </Card>
+      </div>
 
-        {/* Plan Change Modal */}
-        <Modal
-          isOpen={showPlanChangeModal}
-          onClose={() => setShowPlanChangeModal(false)}
-          title="Change Subscription Plan"
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-lg">
+            <Receipt className="h-5 w-5" />
+            Invoices
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            No invoices yet. Invoices will appear here after your first payment.
+          </p>
+        </CardContent>
+      </Card>
+
+      <div className="mt-6 flex justify-end">
+        <button
+          onClick={handleManageBilling}
+          className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent transition-colors"
         >
-          <form onSubmit={handlePlanChangeSubmit} className="space-y-6">
-            <div>
-              <h3 className="font-semibold mb-3">Select New Plan</h3>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                {plans.map(plan => (
-                  <label
-                    key={plan.value}
-                    className={`relative block p-4 border-2 rounded-xl cursor-pointer hover:border-primary transition-colors ${selectedPlan === plan.value ? 'border-primary bg-primary/5' : 'border-gray-200 dark:border-gray-700'}`}
-                  >
-                    <input
-                      type="radio"
-                      name="newPlan"
-                      value={plan.value}
-                      checked={selectedPlan === plan.value}
-                      onChange={(e) => setSelectedPlan(e.target.value)}
-                      className="sr-only"
-                      required
-                    />
-                    {plan.recommended && (
-                      <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground text-xs px-2 py-1 rounded-full">Recommended</span>
-                    )}
-                    <h4 className="font-semibold">{plan.label}</h4>
-                    <p className="text-2xl font-bold my-2">{plan.price}</p>
-                    <p className="text-sm text-gray-600 mb-2">{plan.description}</p>
-                    <ul className="text-sm space-y-1">
-                      {plan.features.map(f => <li key={f}>&#10003; {f}</li>)}
-                    </ul>
-                  </label>
-                ))}
-              </div>
-            </div>
-
-            <div>
-              <h3 className="font-semibold mb-3">Billing Frequency</h3>
-              <div className="space-y-2">
-                <label className="flex items-center gap-2">
-                  <input type="radio" name="billingInterval" value="monthly" defaultChecked required />
-                  <span className="text-sm">Monthly billing</span>
-                </label>
-                <label className="flex items-center gap-2">
-                  <input type="radio" name="billingInterval" value="yearly" />
-                  <span className="text-sm">Yearly billing (save 20%)</span>
-                </label>
-              </div>
-            </div>
-
-            <label className="flex items-center gap-2">
-              <input type="checkbox" name="prorationPolicy" required className="rounded" />
-              <span className="text-sm">I understand that charges will be prorated for the current billing period</span>
-            </label>
-
-            <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
-              <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">Plan Change Summary</h4>
-              <div className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
-                <div>Current plan: Pro Plan ($29/month)</div>
-                <div>New plan: Will be calculated based on selection</div>
-                <div>Effective date: Immediate</div>
-                <div>Next billing date: {formatDate(new Date(Date.now() + 15 * 24 * 60 * 60 * 1000))}</div>
-              </div>
-            </div>
-
-            <Button type="submit" className="w-full" disabled={loading}>
-              Change Plan
-            </Button>
-          </form>
-        </Modal>
+          <ExternalLink className="mr-2 h-4 w-4" />
+          Manage in Stripe
+        </button>
       </div>
     </div>
   );

package/dist/templates/web/ui-auth-payments-ai/template/src/app/checkout/page.tsx

@@ -1,143 +1,127 @@
 'use client';
 
-import React from 'react';
-import { usePayments } from '@digilogiclabs/app-sdk';
-import { formatCurrency } from '@/lib/utils';
-import { Button, Card } from '@digilogiclabs/saas-factory-ui';
+import React, { useState } from 'react';
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@digilogiclabs/saas-factory-ui';
+import { CreditCard, Check, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
 
-export default function CheckoutPage() {
-  const { loading } = usePayments();
-
-  const handlePlanSelect = (planId: string) => {
-    console.log('Plan selected:', planId);
-    // Handle plan selection - redirect to payment processing
-  };
+const PLANS = [
+  {
+    id: 'starter',
+    name: 'Starter',
+    price: '$9',
+    period: '/month',
+    features: ['Up to 1,000 users', 'Basic analytics', 'Email support', 'API access'],
+    featured: false,
+  },
+  {
+    id: 'pro',
+    name: 'Pro',
+    price: '$29',
+    period: '/month',
+    features: ['Unlimited users', 'Advanced analytics', 'Priority support', 'Custom domains', 'Team management'],
+    featured: true,
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    price: '$99',
+    period: '/month',
+    features: ['Everything in Pro', 'SSO/SAML', 'Dedicated support', 'SLA guarantee', 'Custom integrations'],
+    featured: false,
+  },
+];
 
-  const handlePayment = () => {
-    console.log('Processing payment...');
-    // Handle payment processing
-  };
+export default function CheckoutPage() {
+  const [selectedPlan, setSelectedPlan] = useState('pro');
+  const [loading, setLoading] = useState(false);
 
-  // Example pricing plans - in real app these would come from your backend/Stripe
-  const plans = [
-    {
-      id: 'basic',
-      name: 'Basic Plan',
-      price: 999, // in cents
-      interval: 'month',
-      features: ['Feature 1', 'Feature 2', 'Feature 3'],
-      stripePriceId: 'price_basic_monthly'
-    },
-    {
-      id: 'pro',
-      name: 'Pro Plan', 
-      price: 1999, // in cents
-      interval: 'month',
-      features: ['All Basic features', 'Feature 4', 'Feature 5', 'Priority support'],
-      popular: true,
-      stripePriceId: 'price_pro_monthly'
-    },
-    {
-      id: 'enterprise',
-      name: 'Enterprise Plan',
-      price: 4999, // in cents
-      interval: 'month',
-      features: ['All Pro features', 'Custom integrations', 'Dedicated support', 'SLA guarantee'],
-      stripePriceId: 'price_enterprise_monthly'
+  const onCheckout = async () => {
+    setLoading(true);
+    try {
+      // TODO: Create Stripe checkout session
+      const res = await fetch('/api/checkout', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ planId: selectedPlan }),
+      });
+      const data = await res.json();
+      if (data.url) {
+        window.location.href = data.url;
+      }
+    } finally {
+      setLoading(false);
     }
-  ];
+  };
 
   return (
-    <div className="min-h-screen bg-gray-100 py-8">
-      <div className="max-w-6xl mx-auto px-4">
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">Choose Your Plan</h1>
-          <p className="text-xl text-gray-600">Select the perfect plan for your needs</p>
+    <div className="min-h-screen bg-background py-12">
+      <div className="mx-auto max-w-5xl px-4">
+        <div className="mb-8">
+          <Link
+            href="/dashboard"
+            className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
+          >
+            <ArrowLeft className="h-3 w-3" />
+            Back to Dashboard
+          </Link>
+          <h1 className="text-3xl font-bold text-foreground">Choose Your Plan</h1>
+          <p className="text-muted-foreground mt-1">
+            Select the plan that best fits your needs.
+          </p>
         </div>
-        
-        {/* Subscription Plans */}
-        <div className="grid md:grid-cols-3 gap-6 mb-8">
-          {plans.map((plan) => (
-            <Card key={plan.id} className={`p-6 relative ${plan.popular ? 'ring-2 ring-blue-500' : ''}`}>
-              {plan.popular && (
-                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
-                  <span className="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium">
-                    Most Popular
-                  </span>
+
+        <div className="grid gap-6 md:grid-cols-3 mb-8">
+          {PLANS.map((plan) => (
+            <Card
+              key={plan.id}
+              className={`cursor-pointer transition-all ${
+                selectedPlan === plan.id
+                  ? 'ring-2 ring-primary border-primary'
+                  : 'hover:border-primary/50'
+              } ${plan.featured ? 'shadow-lg' : ''}`}
+              onClick={() => setSelectedPlan(plan.id)}
+            >
+              <CardHeader>
+                <CardTitle className="flex items-center justify-between">
+                  {plan.name}
+                  {plan.featured && (
+                    <span className="text-xs font-medium bg-primary text-primary-foreground px-2 py-0.5 rounded-full">
+                      Popular
+                    </span>
+                  )}
+                </CardTitle>
+                <div>
+                  <span className="text-3xl font-bold text-foreground">{plan.price}</span>
+                  <span className="text-muted-foreground">{plan.period}</span>
                 </div>
-              )}
-              <h3 className="text-xl font-bold mb-2">{plan.name}</h3>
-              <div className="text-3xl font-bold mb-4">
-                {formatCurrency(plan.price)} 
-                <span className="text-sm font-normal">/{plan.interval}</span>
-              </div>
-              <ul className="mb-6 space-y-2">
-                {plan.features.map((feature, index) => (
-                  <li key={index} className="flex items-center">
-                    <span className="text-green-500 mr-2">✓</span>
-                    {feature}
-                  </li>
-                ))}
-              </ul>
-              <Button 
-                onClick={() => handlePlanSelect(plan.id)}
-                disabled={loading}
-                className="w-full"
-                variant={plan.popular ? "default" : "outline"}
-              >
-                {loading ? 'Processing...' : 'Select Plan'}
-              </Button>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-2">
+                  {plan.features.map((feat) => (
+                    <li key={feat} className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Check className="h-4 w-4 text-primary shrink-0" />
+                      {feat}
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
             </Card>
           ))}
         </div>
 
-        {/* Payment Form */}
-        <Card className="p-6 max-w-md mx-auto">
-          <h2 className="text-2xl font-bold mb-6">Payment Details</h2>
-          <div className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium mb-2">Card Number</label>
-              <input 
-                type="text" 
-                placeholder="1234 5678 9012 3456"
-                className="w-full p-3 border rounded-lg"
-                disabled
-              />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium mb-2">Expiry Date</label>
-                <input 
-                  type="text" 
-                  placeholder="MM/YY"
-                  className="w-full p-3 border rounded-lg"
-                  disabled
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium mb-2">CVC</label>
-                <input 
-                  type="text" 
-                  placeholder="123"
-                  className="w-full p-3 border rounded-lg"
-                  disabled
-                />
-              </div>
-            </div>
-            <Button 
-              onClick={handlePayment}
-              disabled={loading}
-              className="w-full"
-            >
-              {loading ? 'Processing...' : 'Complete Payment'}
-            </Button>
-            <p className="text-sm text-gray-600 text-center">
-              This is a demo. Payment processing requires Stripe integration.
-            </p>
-          </div>
-        </Card>
+        <div className="flex justify-center">
+          <Button
+            onClick={onCheckout}
+            size="lg"
+            disabled={loading}
+            className="min-w-[200px]"
+          >
+            <CreditCard className="mr-2 h-4 w-4" />
+            {loading ? 'Processing...' : 'Continue to Payment'}
+          </Button>
+        </div>
       </div>
     </div>
   );
 }
-