payments screen

Author: MaximBudnik

packages/dashboard/package.json

@@ -14,6 +14,8 @@
     "@hookform/resolvers": "^3.10.0",
     "@keyv/redis": "^4.3.2",
     "@monaco-editor/react": "^4.7.0",
+    "@paddle/paddle-js": "^1.4.1",
+    "@paddle/paddle-node-sdk": "^2.7.1",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.6",
     "@radix-ui/react-avatar": "^1.1.3",

packages/dashboard/pnpm-lock.yaml

@@ -4,37 +4,42 @@ import {useState} from "react";
 import {Button} from "@/components/ui/button";
 import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card";
 import {CheckCircle, XCircle} from "lucide-react";
+import {usePaddle} from "@/hooks/usePaddle";
+import {createClient} from "@/utils/supabase/server";
+
+const pro_monthly_id = "pri_01jv5ewwzjg4ab4dzzgm5xc1d5"
+const pro_yearly_id = "pri_01jv5ey9ahq6xb8es0v14z741p"
+
+type Props = {
+    initialSubscription: any
+    customerData: {
+        email: string
+    }
+}
+
+export default async function PlansComparison({initialSubscription, customerData}:Props) {
 
-export default function PlansComparison({initialSubscription}) {
     const [subscription, setSubscription] = useState(initialSubscription);
     const [billingCycle, setBillingCycle] = useState(initialSubscription.billingCycle);
+    const {paddle, error, openCheckout} = usePaddle();
 
     // Handle upgrade
-    const handleUpgrade = async () => {
+    const handleUpgrade = async (priceId: string) => {
         try {
-            // In a real app, you would call an API endpoint
-            // await fetch('/api/subscription/upgrade', {
-            //   method: 'POST',
-            //   body: JSON.stringify({ plan: 'pro', billingCycle })
-            // });
-
-            setSubscription({
-                ...subscription,
-                type: "pro",
-                requests: {
-                    used: subscription.requests.used,
-                    total: 10000
-                },
-                billingCycle: billingCycle,
-                renewalDate: billingCycle === "monthly" ? "June 14, 2025" : "May 14, 2026"
-            });
+            openCheckout({
+                customer: customerData,
+                items: [{
+                    quantity:1,
+                    priceId
+                }]
+            })
         } catch (error) {
             console.error("Error upgrading subscription:", error);
         }
     };
 
     // Toggle billing cycle
-    const changeBillingCycle = (cycle) => {
+    const changeBillingCycle = (cycle: any) => {
         setBillingCycle(cycle);
     };
 
@@ -133,7 +138,7 @@ export default function PlansComparison({initialSubscription}) {
                         {subscription.type === "pro" ? (
                             <Button disabled variant="outline" className="w-full">Current Plan</Button>
                         ) : (
-                            <Button onClick={handleUpgrade} className="w-full">Upgrade Now</Button>
+                            <Button onClick={()=>handleUpgrade(billingCycle === "yearly" ? pro_yearly_id: pro_monthly_id)} className="w-full">Upgrade Now</Button>
                         )}
                     </CardFooter>
                 </Card>

packages/dashboard/src/app/(layout)/subscription/components/PlansComparison.tsx

@@ -1,8 +1,11 @@
 import { Separator } from "@/components/ui/separator";
 import SubscriptionCard from "./components/SubscriptionCard";
 import PlansComparison from "./components/PlansComparison";
+import {createClient} from "@/utils/supabase/server";
 
 export default async function SubscriptionPage() {
+    const supabase = await createClient()
+    const {data: {user}} = await supabase.auth.getUser()
     // In a real app, you would fetch this data server-side
     const userData = {
         subscription: {
@@ -34,7 +37,9 @@ export default async function SubscriptionPage() {
                 {/* Plans Comparison Section */}
                 <div>
                     <h2 className="text-xl font-semibold mb-4">Plans Comparison</h2>
-                    <PlansComparison initialSubscription={userData.subscription} />
+                    <PlansComparison initialSubscription={userData.subscription} customerData={{
+                        email: user?.email!,
+                    }} />
                 </div>
             </div>
         </div>

packages/dashboard/src/app/(layout)/subscription/page.tsx

@@ -0,0 +1,31 @@
+import { NextRequest } from 'next/server';
+import { ProcessWebhook } from '@/utils/paddle/process-webhook';
+import { getPaddleInstance } from '@/utils/paddle/get-paddle-instance';
+import { env } from 'next-runtime-env';
+
+const webhookProcessor = new ProcessWebhook();
+
+export async function POST(request: NextRequest) {
+    const signature = request.headers.get('paddle-signature') || '';
+    const rawRequestBody = await request.text();
+    const privateKey = env('PADDLE_NOTIFICATION_WEBHOOK_SECRET') || '';
+
+    try {
+        if (!signature || !rawRequestBody) {
+            return Response.json({ error: 'Missing signature from header' }, { status: 400 });
+        }
+
+        const paddle = getPaddleInstance();
+        const eventData = await paddle.webhooks.unmarshal(rawRequestBody, privateKey, signature);
+        const eventName = eventData?.eventType ?? 'Unknown event';
+
+        if (eventData) {
+            await webhookProcessor.processEvent(eventData);
+        }
+
+        return Response.json({ status: 200, eventName });
+    } catch (e) {
+        console.log(e);
+        return Response.json({ error: 'Internal server error' }, { status: 500 });
+    }
+}

packages/dashboard/src/app/api/subscription/route.ts

@@ -0,0 +1,46 @@
+import { env } from "next-runtime-env";
+import {useCallback, useEffect, useState } from "react";
+import {initializePaddle, Paddle} from "@paddle/paddle-js";
+
+
+const environment = env('NEXT_PUBLIC_PADDLE_ENV') as "sandbox";
+const token = env('NEXT_PUBLIC_PADDLE_CLIENT_TOKEN')!;
+
+export function usePaddle() {
+    const [paddle, setPaddle] = useState<Paddle | null>(null);
+    const [error, setError] = useState<Error | null>(null);
+
+    useEffect(() => {
+        let isMounted = true;
+
+        initializePaddle({ environment, token })
+            .then((instance) => {
+                if (isMounted && instance) {
+                    setPaddle(instance);
+                }
+            })
+            .catch((err) => {
+                if (isMounted) {
+                    setError(err as Error);
+                    console.error('Failed to initialize Paddle:', err);
+                }
+            });
+
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+
+    const openCheckout = useCallback(
+        (options: Parameters<Paddle['Checkout']['open']>[0]) => {
+            if (!paddle) {
+                console.warn('Paddle not initialized yet');
+                return;
+            }
+            paddle.Checkout.open(options);
+        },
+        [paddle]
+    );
+
+    return { paddle, openCheckout, error } as const;
+}

packages/dashboard/src/hooks/usePaddle.ts

@@ -0,0 +1,15 @@
+import { Environment, LogLevel, Paddle, PaddleOptions } from '@paddle/paddle-node-sdk';
+import {env} from "next-runtime-env";
+
+export function getPaddleInstance() {
+  const paddleOptions: PaddleOptions = {
+    environment: (env('NEXT_PUBLIC_PADDLE_ENV') as Environment) ?? Environment.sandbox,
+    logLevel: LogLevel.error,
+  };
+
+  if (!process.env.PADDLE_API_KEY) {
+    console.error('Paddle API key is missing');
+  }
+
+  return new Paddle(process.env.PADDLE_API_KEY!, paddleOptions);
+}

packages/dashboard/src/utils/paddle/get-paddle-instance.ts

@@ -0,0 +1,54 @@
+import {
+  CustomerCreatedEvent,
+  CustomerUpdatedEvent,
+  EventEntity,
+  EventName,
+  SubscriptionCreatedEvent,
+  SubscriptionUpdatedEvent,
+} from '@paddle/paddle-node-sdk';
+import { createClient } from '../supabase/server';
+
+export class ProcessWebhook {
+  async processEvent(eventData: EventEntity) {
+    switch (eventData.eventType) {
+      case EventName.SubscriptionCreated:
+      case EventName.SubscriptionUpdated:
+        await this.updateSubscriptionData(eventData);
+        break;
+      case EventName.CustomerCreated:
+      case EventName.CustomerUpdated:
+        await this.updateCustomerData(eventData);
+        break;
+    }
+  }
+
+  private async updateSubscriptionData(eventData: SubscriptionCreatedEvent | SubscriptionUpdatedEvent) {
+    const supabase = await createClient();
+    const { error } = await supabase
+      .from('subscriptions')
+      .upsert({
+        subscription_id: eventData.data.id,
+        subscription_status: eventData.data.status,
+        price_id: eventData.data.items[0].price?.id ?? '',
+        product_id: eventData.data.items[0].price?.productId ?? '',
+        scheduled_change: eventData.data.scheduledChange?.effectiveAt,
+        customer_id: eventData.data.customerId,
+      })
+      .select();
+
+    if (error) throw error;
+  }
+
+  private async updateCustomerData(eventData: CustomerCreatedEvent | CustomerUpdatedEvent) {
+    const supabase = await createClient();
+    const { error } = await supabase
+      .from('customers')
+      .upsert({
+        customer_id: eventData.data.id,
+        email: eventData.data.email,
+      })
+      .select();
+
+    if (error) throw error;
+  }
+}