在5 分鐘內使用Cursor ai + Stripe 讓你的應用盈利

我們將使用Next.js + Stripe + Cursor ai快速構建一個可在線收款的應用。

第一步：使用Cursor ai 創建Next.js 項目

1. 打開Cursor ai （如果沒有，先安裝）

2. 創建一個新項目

   npx create-next-app@latest stripe-app
   cd stripe-app

3. 安裝Stripe SDK

    npm install stripe @stripe/react-stripe-js @stripe/stripe-js

第二步：在Stripe 創建API 密鑰

1. 註冊Stripe 賬戶

2. 進入開發者儀表板

3. 複製測試模式API 密鑰：

• Publishable Key （前端用）

• Secret Key （後端用）

4. 在項目根目錄創建.env.local文件：

    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_你的發布密鑰STRIPE_SECRET_KEY=sk_test_你的私有密鑰

第三步：用Cursor ai 生成Stripe 支付API

1. 在pages/api/checkout.js中粘貼：

    import Stripe from 'stripe';
   
   const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
   
   export default async function handler(req, res) {
     if (req.method === 'POST') {
       try {
         const session = await stripe.checkout.sessions.create({
           payment_method_types: ['card'],
           line_items: [
             {
               price_data: {
                 currency: 'usd',
                 product_data: { name: 'Virtual Lemonade' },
                 unit_amount: 100, // 1 美元            },
               quantity: 1,
             },
           ],
           mode: 'payment',
           success_url: `${req.headers.origin}/success`,
           cancel_url: `${req.headers.origin}/cancel`,
         });
   
         res.status(200).json({ id: session.id });
       } catch (err) {
         res.status(500).json({ error: err.message });
       }
     } else {
       res.setHeader('Allow', ['POST']);
       res.status(405).end(`Method ${req.method} Not Allowed`);
     }
   }

2. 在Cursor 運行代碼，確保無錯誤

第四步：創建支付按鈕

1. 在pages/index.js中粘貼：

    import { loadStripe } from "@stripe/stripe-js";
   
   const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
   
   export default function Home() {
     const handleCheckout = async () => {
       const res = await fetch('/api/checkout', { method: 'POST' });
       const data = await res.json();
       const stripe = await stripePromise;
       await stripe.redirectToCheckout({ sessionId: data.id });
     };
   
     return (
       <div>
         <h1>? 檸檬水攤</h1>
         <p>鮮榨檸檬水，僅售 $1！ </p>
         <button onClick={handleCheckout}>立即購買</button>
       </div>
     );
   }

2. 運行項目：

    npm run dev

第五步：測試支付

1. 訪問http://localhost:3000

2. 點擊“立即購買”

3. 輸入測試卡號4242 4242 4242 4242

4. 支付成功！ ?

第六步：上線& 收款

• 切換到Stripe 生產模式

• 更新.env.local為真實API 密鑰

• 部署Next.js 到Vercel

• 開始收款！

這樣，你用Cursor ai + Stripe 在5 分鐘內讓你的應用變現了！