feat: Stripe Payment added

Author: CestMerNeil

kommande-access-backend/products.db

@@ -0,0 +1,54 @@
+import { NextResponse } from "next/server";
+
+const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
+
+export async function GET(request) {
+    try {
+        const { searchParams } = new URL(request.url);
+        const sessionId = searchParams.get("session_id");
+
+        if (!sessionId) {
+            return NextResponse.json(
+                { error: "Missing session_id parameter" },
+                { status: 400 }
+            );
+        }
+
+        // 从Stripe获取会话详情
+        const session = await stripe.checkout.sessions.retrieve(sessionId, {
+            expand: ["line_items", "payment_intent"],
+        });
+
+        if (!session) {
+            return NextResponse.json(
+                { error: "Session not found" },
+                { status: 404 }
+            );
+        }
+
+        // 格式化响应数据
+        const orderData = {
+            id: session.id,
+            customer_email: session.customer_details?.email,
+            amount_total: session.amount_total / 100, // 转换为美元
+            currency: session.currency,
+            payment_status: session.payment_status,
+            created_at: new Date(session.created * 1000).toISOString(),
+            items: session.line_items?.data.map(item => ({
+                name: item.description,
+                quantity: item.quantity,
+                price: item.amount_total / 100 / item.quantity, // 单价
+                total: item.amount_total / 100,
+            })) || [],
+            metadata: session.metadata,
+        };
+
+        return NextResponse.json(orderData);
+    } catch (error) {
+        console.error("Error retrieving order:", error);
+        return NextResponse.json(
+            { error: error.message || "Failed to retrieve order details" },
+            { status: error.statusCode || 500 }
+        );
+    }
+} 

kommande-access-backend/products.db-shm

@@ -0,0 +1,49 @@
+import { NextResponse } from "next/server";
+
+const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
+
+export async function POST(request) {
+    try {
+        const body = await request.json();
+        const { lineItems } = body;
+
+        if (!lineItems || !Array.isArray(lineItems) || lineItems.length === 0) {
+            return NextResponse.json(
+                { error: "Invalid request: lineItems is required and must be a non-empty array" },
+                { status: 400 }
+            );
+        }
+
+        const session = await stripe.checkout.sessions.create({
+            payment_method_types: ["card"],
+            line_items: lineItems,
+            mode: "payment",
+            success_url: `${request.headers.get("origin")}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
+            cancel_url: `${request.headers.get("origin")}/checkout/canceled`,
+            metadata: {
+                order_id: `order_${Date.now()}` // 可以添加更多元数据
+            }
+        });
+
+        return NextResponse.json({ url: session.url });
+    } catch (error) {
+        console.error("Stripe checkout error:", error);
+        return NextResponse.json(
+            { error: error.message || "An error occurred during checkout" },
+            { status: error.statusCode || 500 }
+        );
+    }
+}
+
+// 处理其他HTTP方法
+export async function GET() {
+    return NextResponse.json({ error: "Method not allowed" }, { status: 405 });
+}
+
+export async function PUT() {
+    return NextResponse.json({ error: "Method not allowed" }, { status: 405 });
+}
+
+export async function DELETE() {
+    return NextResponse.json({ error: "Method not allowed" }, { status: 405 });
+} 

kommande-access-backend/products.db-wal

@@ -0,0 +1,40 @@
+'use client';
+
+import { XCircle, ArrowLeft, ShoppingBag } from 'lucide-react';
+
+export default function CanceledPage() {
+    return (
+        <div className="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 flex items-center justify-center">
+            <div className="max-w-2xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
+                <div className="p-8">
+                    <div className="flex flex-col items-center justify-center space-y-4 mb-8">
+                        <XCircle className="w-24 h-24 text-red-500" />
+                        <h1 className="text-3xl font-bold text-center dark:text-white">
+                            Payment Canceled
+                        </h1>
+                        <p className="text-gray-600 dark:text-gray-300 text-center">
+                            Your payment was canceled and no charges were made.
+                        </p>
+                    </div>
+
+                    <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
+                        <a href="/users/Cart" className="btn btn-primary flex items-center gap-2">
+                            <ShoppingBag className="w-5 h-5" />
+                            Return to Cart
+                        </a>
+                        <a href="/" className="btn btn-outline flex items-center gap-2">
+                            <ArrowLeft className="w-5 h-5" />
+                            Continue Shopping
+                        </a>
+                    </div>
+
+                    <div className="mt-8 text-center">
+                        <p className="text-gray-500 dark:text-gray-400">
+                            If you encountered any issues during checkout, please contact our customer support.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+} 

kommande-access-gui/src/app/api/stripe/checkout.js

@@ -0,0 +1,128 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import { CheckCircle, ShoppingBag, Home, User } from 'lucide-react';
+import Link from 'next/link';
+import { useCart } from '@/components/CartContext';
+
+export default function SuccessPage() {
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const { clearCart } = useCart();
+    const [orderDetails, setOrderDetails] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const fetchedRef = useRef(false); // 用于跟踪是否已经获取过订单信息
+
+    // 从URL获取会话ID
+    const sessionId = searchParams.get('session_id');
+
+    useEffect(() => {
+        // 如果没有session_id，重定向到首页
+        if (!sessionId) {
+            router.push('/');
+            return;
+        }
+
+        // 清空购物车（只执行一次）
+        clearCart();
+
+        // 如果已经获取过订单信息，则不再重复获取
+        if (fetchedRef.current) return;
+
+        // 标记为已经获取过
+        fetchedRef.current = true;
+
+        // 获取订单详情
+        const fetchOrderDetails = async () => {
+            try {
+                const response = await fetch(`/api/stripe/order?session_id=${sessionId}`);
+                if (response.ok) {
+                    const data = await response.json();
+                    setOrderDetails(data);
+                }
+            } catch (error) {
+                console.error('Error fetching order details:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchOrderDetails();
+    }, [sessionId, router]); // 移除clearCart依赖项
+
+    // 处理手动重新加载页面的函数
+    const handleRefresh = () => {
+        if (!fetchedRef.current) return;
+
+        setLoading(true);
+        fetchedRef.current = false; // 重置标记以允许再次获取
+
+        const fetchOrderDetails = async () => {
+            try {
+                const response = await fetch(`/api/stripe/order?session_id=${sessionId}`);
+                if (response.ok) {
+                    const data = await response.json();
+                    setOrderDetails(data);
+                }
+            } catch (error) {
+                console.error('Error re-fetching order details:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchOrderDetails();
+    };
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+                <div className="loading loading-spinner loading-lg"></div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+            <div className="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
+                <div className="p-8">
+                    <div className="flex flex-col items-center justify-center space-y-4 mb-8">
+                        <CheckCircle className="w-24 h-24 text-green-500" />
+                        <h1 className="text-3xl font-bold text-center dark:text-white">
+                            Thank you for your order!
+                        </h1>
+                        <p className="text-gray-600 dark:text-gray-300 text-center">
+                            Your payment was processed successfully. A confirmation email has been sent to your email address.
+                        </p>
+                    </div>
+
+                    <div className="border-t border-gray-200 dark:border-gray-700 pt-8 mt-8">
+                        <h2 className="text-xl font-semibold mb-4 dark:text-white">Order Information</h2>
+                        <p className="text-gray-600 dark:text-gray-300 mb-2">
+                            Order ID: <span className="font-medium">{sessionId?.substring(0, 12)}...</span>
+                        </p>
+                        <p className="text-gray-600 dark:text-gray-300 mb-2">
+                            Date: <span className="font-medium">{new Date().toLocaleDateString()}</span>
+                        </p>
+                    </div>
+
+                    <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
+                        <a href="/users/Cart" className="btn btn-primary flex items-center gap-2">
+                            <ShoppingBag className="w-5 h-5" />
+                            Return to Cart
+                        </a>
+                        <a href="/" className="btn btn-outline flex items-center gap-2">
+                            <Home className="w-5 h-5" />
+                            Continue Shopping
+                        </a>
+                        <a href="/users/Dashboard" className="btn btn-outline flex items-center gap-2">
+                            <User className="w-5 h-5" />
+                            My Account
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}