Executes full-stack tasks in s…

# Vue3 + Express 接入 Stripe 订阅付款（测试环境 $49.99）

一、前置准备

• 注册 Stripe 账号，开启 Test Mode（测试密钥以 sk_test_ / pk_test_ 开头）
• 在 Stripe Dashboard → Products 创建一个订阅产品，设置价格 $49.99（USD，按月 recurring）
• 记下 price_id（以 price_ 开头）

二、后端（Express）改造

• 安装依赖：npm install stripe dotenv
• 用 sk_test_ 密钥初始化：const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY)
• 核心接口：

1. 创建 Checkout Session

```js

const session = await stripe.checkout.sessions.create({

mode: 'subscription',

line_items: [{ price: PRICE_ID, quantity: 1 }],

success_url: 'https://yourdomain.com/success?session_id={CHECKOUT_SESSION_ID}',

cancel_url: 'https://yourdomain.com/cancel',

});

res.json({ url: session.url });

```

2. Webhook 回调（必须）

• 用 stripe.webhooks.constructEvent 验证签名（需 STRIPE_WEBHOOK_SECRET）
• 本地测试用 Stripe CLI：stripe listen --forward-to localhost:3000/webhook
• 重点处理事件：checkout.session.completed、invoice.paid、customer.subscription.deleted，据此更新订单/订阅状态

三、前端（Vue3）改造

• 方案 A（推荐，最简单）：点击「订阅」→ 请求后端拿到 session.url → window.location.href 跳转 Stripe 托管支付页
• 方案 B：安装 @stripe/stripe-js + @stripe/element-plus 相关组件做嵌入式支付（Checkout Embedded 模式）

四、测试流程

1. 前端发起订阅 → 跳转 Stripe 测试支付页

2. 使用官方测试卡号：4242 4242 4242 4242，有效期任意未来日期，CVC 任意三位数

3. 支付成功 → 回跳 success 页 → 后端收到 webhook → 数据库写入订阅记录

4. 在 Stripe Dashboard → Payments / Subscriptions 中确认该 $49.99 测试订阅状态为 active

五、注意点

• Webhook 需做幂等处理（Stripe 可能重发事件），建议按 event.id 去重
• 订阅状态不要只信前端回调，以 webhook 为准
• 密钥走 .env，切勿提交到仓库
• 上线前切 Live Mode，并把 webhook endpoint 注册到正式域名