update: moved to razorpay

iamsmruti · iamsmruti · commit 1e5a2b07ab74 · 2026-03-09T21:23:12.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "devian-web",
-    "version": "0.2.2",
+    "version": "1.0.0",
     "private": true,
     "scripts": {
         "dev": "next dev",
@@ -18,10 +18,11 @@
         "framer-motion": "^12.34.3",
         "lucide-react": "^0.575.0",
         "next": "16.1.6",
+        "razorpay": "^2.9.6",
         "react": "19.2.3",
         "react-dom": "19.2.3",
+        "react-razorpay": "^3.0.1",
         "resend": "^6.9.3",
-        "stripe": "^20.4.0",
         "tailwind-merge": "^3.5.0"
     },
     "devDependencies": {
diff --git a/src/app/api/license/generate/route.ts b/src/app/api/license/generate/route.ts
@@ -1,26 +1,15 @@
 import { NextResponse } from "next/server";
-import Stripe from "stripe";
 
 export async function GET(req: Request) {
-    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "dummy_key", {
-        apiVersion: "2026-02-25.clover",
-    });
     const { searchParams } = new URL(req.url);
-    const sessionId = searchParams.get("session_id");
+    const orderId = searchParams.get("order_id");
 
-    if (!sessionId) {
-        return new NextResponse("Session ID is required", { status: 400 });
+    if (!orderId) {
+        return new NextResponse("Order ID is required", { status: 400 });
     }
 
     try {
-        // Verify the session against Stripe
-        const session = await stripe.checkout.sessions.retrieve(sessionId);
-
-        if (session.payment_status !== "paid") {
-            return new NextResponse("Payment not complete", { status: 400 });
-        }
-
-        // Search Keygen for the license matching this Stripe Session ID
+        // Search Keygen for the license matching this Razorpay Order ID
         const accountId = process.env.VITE_KEYGEN_ACCOUNT_ID;
         const keygenToken = process.env.KEYGEN_API_TOKEN;
 
@@ -29,7 +18,7 @@ export async function GET(req: Request) {
         }
 
         // Use Keygen's metadata query
-        const response = await fetch(`https://api.keygen.sh/v1/accounts/${accountId}/licenses?metadata[stripe_session_id]=${sessionId}`, {
+        const response = await fetch(`https://api.keygen.sh/v1/accounts/${accountId}/licenses?metadata[razorpay_order_id]=${orderId}`, {
             headers: {
                 'Accept': 'application/vnd.api+json',
                 'Authorization': `Bearer ${keygenToken}`
@@ -54,7 +43,7 @@ export async function GET(req: Request) {
         });
 
     } catch (e: any) {
-        console.error("Failed to resolve session:", e);
+        console.error("Failed to resolve order:", e);
         return new NextResponse("Server Error", { status: 500 });
     }
 }
diff --git a/src/app/api/pricing/route.ts b/src/app/api/pricing/route.ts
@@ -0,0 +1,27 @@
+import { NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(req: Request) {
+    const country = req.headers.get('x-vercel-ip-country') || process.env.TEST_COUNTRY_CODE || 'US';
+
+    let amount = 2000;
+    let currency = 'USD';
+    let symbol = '$';
+    let displayAmount = '20';
+
+    if (country === 'IN') {
+        amount = 120000;
+        currency = 'INR';
+        symbol = '₹';
+        displayAmount = '1,200';
+    }
+
+    return NextResponse.json({
+        amount,
+        currency,
+        symbol,
+        displayAmount,
+        country
+    });
+}
diff --git a/src/app/api/razorpay/order/route.ts b/src/app/api/razorpay/order/route.ts
@@ -0,0 +1,41 @@
+import { NextResponse } from 'next/server';
+import Razorpay from 'razorpay';
+
+export async function POST(req: Request) {
+    try {
+        const razorpay = new Razorpay({
+            key_id: process.env.NEXT_PUBLIC_RAZORPAY_KEY_ID as string,
+            key_secret: process.env.RAZORPAY_KEY_SECRET as string,
+        });
+
+        const country = req.headers.get('x-vercel-ip-country') || process.env.TEST_COUNTRY_CODE || 'US';
+
+        // Pricing logic
+        let amount = 2000; // $20.00 USD (in cents)
+        let currency = 'USD';
+
+        if (country === 'IN') {
+            amount = 120000; // ₹1200.00 INR (in paise)
+            currency = 'INR';
+        }
+
+        const options = {
+            amount,
+            currency,
+            receipt: `receipt_${Date.now()}`,
+            payment_capture: 1 // Auto capture
+        };
+
+        const order = await razorpay.orders.create(options);
+
+        return NextResponse.json({
+            orderId: order.id,
+            amount: order.amount,
+            currency: order.currency
+        });
+
+    } catch (error: any) {
+        console.error("Razorpay Order Creation Error:", error);
+        return new NextResponse(`Error: ${error.message}`, { status: 500 });
+    }
+}
diff --git a/src/app/api/razorpay/webhook/route.ts b/src/app/api/razorpay/webhook/route.ts
@@ -1,62 +1,62 @@
 import { NextResponse } from "next/server";
-import Stripe from "stripe";
+import crypto from "crypto";
 import { Resend } from "resend";
 
-
 export async function POST(req: Request) {
-    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "dummy_key", {
-        apiVersion: "2026-02-25.clover", // Adjust to the version you are using
-    });
+    try {
+        const body = await req.text();
+        const signature = req.headers.get("x-razorpay-signature") as string;
+        const webhookSecret = process.env.RAZORPAY_WEBHOOK_SECRET as string;
 
-    const body = await req.text();
-    const signature = req.headers.get("stripe-signature") as string;
+        if (!signature || !webhookSecret) {
+            console.error("Missing webhook signature or secret");
+            return new NextResponse("Invalid request", { status: 400 });
+        }
 
-    let event: Stripe.Event;
+        // Verify the signature
+        const expectedSignature = crypto
+            .createHmac("sha256", webhookSecret)
+            .update(body)
+            .digest("hex");
 
-    try {
-        event = stripe.webhooks.constructEvent(
-            body,
-            signature,
-            process.env.STRIPE_WEBHOOK_SECRET as string
-        );
-    } catch (error: any) {
-        console.error(`Webhook signature verification failed: ${error.message}`);
-        return new NextResponse(`Webhook Error: ${error.message}`, { status: 400 });
-    }
+        if (expectedSignature !== signature) {
+            console.error("Webhook signature verification failed");
+            return new NextResponse("Invalid signature", { status: 400 });
+        }
 
-    // Handle the checkout session completion
-    if (event.type === "checkout.session.completed") {
-        const session = event.data.object as Stripe.Checkout.Session;
-        const customerEmail = session.customer_details?.email;
-        const paymentIntentId = session.payment_intent as string;
+        // Parse event
+        const event = JSON.parse(body);
 
-        if (!customerEmail) {
-            console.error("No customer email found in session.");
-            return new NextResponse("Invalid Session Data", { status: 400 });
-        }
+        // Handle the order.paid event
+        if (event.event === "order.paid") {
+            const paymentEntity = event.payload.payment.entity;
+            const orderEntity = event.payload.order.entity;
 
-        try {
-            if (session.payment_status === "paid") {
-                // Create a new license in Keygen
-                await createLicenseForKeygen(customerEmail, session.id, paymentIntentId);
+            const customerEmail = paymentEntity.email;
+            const paymentId = paymentEntity.id;
+            const orderId = orderEntity.id;
+
+            if (!customerEmail) {
+                console.error("No customer email found in Razorpay payment data.");
+                return new NextResponse("Invalid Session Data", { status: 400 });
             }
-        } catch (e: any) {
-            console.error("Failed to process order:", e);
-            // Stripe will retry the webhook if we fail. 
-            // In production, we'd log this, potentially to Sentry or PostHog
-            return new NextResponse("Internal Server Error", { status: 500 });
+
+            // Create a new license in Keygen
+            await createLicenseForKeygen(customerEmail, orderId, paymentId);
         }
-    }
 
-    // Return a 200 response to acknowledge receipt of the event
-    return new NextResponse(JSON.stringify({ received: true }), { status: 200 });
+        return new NextResponse(JSON.stringify({ received: true }), { status: 200 });
+    } catch (error: any) {
+        console.error(`Webhook Error: ${error.message}`);
+        return new NextResponse(`Webhook Error: ${error.message}`, { status: 500 });
+    }
 }
 
 // -------------------------------------------------------------
 // Core Business Logic
 // -------------------------------------------------------------
 
-async function createLicenseForKeygen(email: string, sessionId: string, paymentIntentId: string) {
+async function createLicenseForKeygen(email: string, orderId: string, paymentId: string) {
     const accountId = process.env.VITE_KEYGEN_ACCOUNT_ID;
     const policyId = process.env.VITE_KEYGEN_POLICY_ID;
     const keygenToken = process.env.KEYGEN_API_TOKEN;
@@ -79,8 +79,8 @@ async function createLicenseForKeygen(email: string, sessionId: string, paymentI
                 attributes: {
                     name: email,
                     metadata: {
-                        stripe_payment_id: paymentIntentId,
-                        stripe_session_id: sessionId
+                        razorpay_payment_id: paymentId,
+                        razorpay_order_id: orderId
                     }
                 },
                 relationships: {
diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
@@ -1,11 +1,13 @@
-import { CheckCircle2, ShieldAlert, Check, X, ArrowRight, Zap, Crown, Bot, Database, FolderGit2 } from "lucide-react";
+"use client";
+
+import { CheckCircle2, ShieldAlert, Check, X, ArrowRight, Zap, Crown, Bot, Database, FolderGit2, Loader2 } from "lucide-react";
 import Link from "next/link";
 import { Activity } from "lucide-react";
+import { RazorpayButton } from "@/components/PricingSection";
+import { useState, useEffect } from "react";
 
-export const metadata = {
-    title: "Devian | Features & Pricing",
-    description: "Compare Devian Community and Devian Pro plans. Upgrade to unlock powerful local AI capabilities and unrestricted docker management.",
-};
+// Moved metadata to layout.tsx or a separate server component if needed since this is now a client component.
+// Or we can just remove it for now if next.js complains, but usually it must be in a server component.
 
 const FEATURES = [
     {
@@ -55,6 +57,20 @@ const FEATURES = [
 ];
 
 export default function FeaturesPage() {
+    const [priceData, setPriceData] = useState<{ symbol: string; displayAmount: string } | null>(null);
+
+    useEffect(() => {
+        fetch('/api/pricing')
+            .then(res => res.json())
+            .then(data => {
+                setPriceData(data);
+            })
+            .catch(err => {
+                // Fallback to USD on error
+                setPriceData({ symbol: '$', displayAmount: '20' });
+            });
+    }, []);
+
     return (
         <div className="min-h-screen bg-[#121212] text-white selection:bg-primary/30">
             {/* Navigation */}
@@ -69,9 +85,7 @@ export default function FeaturesPage() {
                 </div>
                 <div className="hidden md:flex items-center gap-8 text-sm font-medium text-white/70 tracking-wide">
                     <Link href="/" className="hover:text-white transition-colors">Home</Link>
-                    <a href={process.env.NEXT_PUBLIC_STRIPE_PAYMENT_LINK || "#"} className="bg-primary/10 text-primary border border-primary/20 px-5 py-2 rounded-full hover:bg-primary hover:text-white transition-all shadow-[0_0_10px_rgba(101,140,194,0.1)]">
-                        Buy Devian Pro
-                    </a>
+                    <RazorpayButton className="bg-primary/10 text-primary border border-primary/20 px-5 py-2 rounded-full hover:bg-primary hover:text-white transition-all shadow-[0_0_10px_rgba(101,140,194,0.1)] text-sm" />
                 </div>
             </nav>
 
@@ -89,7 +103,7 @@ export default function FeaturesPage() {
                 <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto mb-24">
                     <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-8 flex flex-col">
                         <h3 className="text-2xl font-bold mb-2">Community</h3>
-                        <div className="text-4xl font-bold mb-6">$0<span className="text-lg text-zinc-500 font-normal">/forever</span></div>
+                        <div className="text-4xl font-bold mb-6">{priceData?.symbol || "$"}0<span className="text-lg text-zinc-500 font-normal">/forever</span></div>
                         <p className="text-zinc-400 mb-8 flex-1">
                             Perfect for students and hobbyists who need a better way to view their local stack.
                         </p>
@@ -109,16 +123,22 @@ export default function FeaturesPage() {
                         <h3 className="text-2xl font-bold mb-2 flex items-center gap-2">
                             Devian Pro <Zap className="w-5 h-5 text-primary" />
                         </h3>
-                        <div className="text-4xl font-bold mb-6">$29<span className="text-lg text-zinc-500 font-normal">/lifetime</span></div>
+                        <div className="text-4xl font-bold mb-6 flex items-baseline gap-2">
+                            {priceData ? (
+                                <>
+                                    {priceData.symbol}{priceData.displayAmount}
+                                    <span className="text-lg text-zinc-500 font-normal">/lifetime</span>
+                                </>
+                            ) : (
+                                <div className="h-10 w-24 bg-zinc-800 rounded animate-pulse" />
+                            )}
+                        </div>
                         <p className="text-zinc-400 mb-8 flex-1 relative z-10">
                             For professional developers who want absolute control, intelligent insights, and AI automation.
                         </p>
-                        <a
-                            href={process.env.NEXT_PUBLIC_STRIPE_PAYMENT_LINK || "#"}
+                        <RazorpayButton
                             className="w-full text-center py-3 bg-primary hover:bg-primary/90 text-white rounded-lg font-medium transition-colors shadow-[0_0_30px_-5px_var(--tw-shadow-color)] shadow-primary/30 relative z-10"
-                        >
-                            Buy Devian Pro
-                        </a>
+                        />
                         <p className="text-center text-xs text-zinc-500 mt-3 relative z-10">Valid for up to 3 personal devices</p>
                     </div>
                 </div>
@@ -171,12 +191,11 @@ export default function FeaturesPage() {
                     <p className="text-zinc-400 mb-8">
                         Join other professional developers building faster with Devian Pro. One-time payment, lifetime updates.
                     </p>
-                    <a
-                        href={process.env.NEXT_PUBLIC_STRIPE_PAYMENT_LINK || "#"}
+                    <RazorpayButton
                         className="inline-flex items-center justify-center px-8 py-4 bg-primary hover:bg-primary/90 text-white rounded-full font-medium transition-all hover:scale-105 shadow-[0_0_40px_-10px_var(--tw-shadow-color)] shadow-primary"
                     >
                         Get Devian Pro Today
-                    </a>
+                    </RazorpayButton>
                 </div>
             </main>
         </div>
diff --git a/src/app/pricing/success/page.tsx b/src/app/pricing/success/page.tsx
diff --git a/src/components/PricingSection.tsx b/src/components/PricingSection.tsx
