Stripe 支付

概述

NuxtBase 支持 Stripe 作为支付解决方案，Stripe 是全球领先的支付服务商，支持多币种、订阅支付等高级功能。如果你的产品面向国际用户，Stripe 是一个理想的选择。

Stripe

Stripe 的优势:

  • 全球化支付：支持 135+ 种货币
  • 完整的订阅系统：支持周期性收费、试用期、升级降级等
  • 强大的开发者工具：完善的 API 和开发者文档
  • 合规性：符合 PCI DSS 等国际支付标准
  • 丰富的支付方式：信用卡、Apple Pay、Google Pay、微信支付、支付宝 等

接入流程

1. 注册 Stripe 账户

首先需要在 Stripe 官网 注册账户。注册后，你可以在开发者面板获取到必要的 API 密钥。

2. 配置 stripe 为支付 Provider

在/config/checkout/index.ts中配置 Stripe 应用为支付 Provider，把provider设置为stripe：

export default {
  provider: "stripe", // 支付提供商: zpay | yipay | stripe

  // ...
};

3. 配置 Webhook

为了接收支付状态的实时更新，需要配置 Stripe Webhook：

  1. 在 Stripe 开发者面板中找到 Webhooks 设置
  2. 添加 Endpoint，URL 设置为：
    • 生产环境：https://你的域名/api/checkout/providers/stripe/webhook
    • 开发环境：使用 Stripe CLI 进行本地测试
  3. 监听对应的事件名称，NuxtBase 目前默认支持以下事件的监听用于实现支付逻辑，当然你也可以选择你自己的希望监听并增加对应的逻辑：
"checkout.session.completed",
"customer.subscription.created",
"customer.subscription.updated",
"customer.subscription.deleted",
"invoice.paid",
  1. 获取到你的Webhook Secret，在下一步中我们需要配置STRIPE_WEBHOOK_SECRET

4. 配置环境变量

在项目的 .env 文件中配置以下环境变量：

# Stripe 配置
STRIPE_SECRET_KEY=sk_test_xxxxx        # Stripe Secret Key
STRIPE_WEBHOOK_SECRET=whsec_xxxxx      # Webhook Secret

注意：在开发环境中使用 test 模式的密钥，在生产环境中使用 live 模式的密钥。

5. 产品信息配置

你需要在 Stripe 后台创建产品，以获取对应的price_id，然后在/config/products/index.ts中配置产品信息。

Stripe 产品创建

打开/config/products/index.ts，我配置产品信息。这边是一个产品的配置对象，记住填入stripe_price_id和stripe_mode。并核对这两个是否和 Stripe 后台创建的产品一致。

{
  id: PRODUCTS_IDS.TEST_BASIC_MONTHLY,
  name: "Basic Plan", // 产品名称
  description: "满足基本需求，适合个人和小型团队起步使用", // 产品描述
  price: 0.1, // 价格
  price_currency: "CNY", // 价格货币
  price_symbol: "¥", // 价格符号
  interval_unit: "月", // 价格周期
  mode: "subscription", // 订阅模式
  subscription_duration: 30, // 订阅时长
  stripe_mode: "subscription", // 订阅模式(订阅： subscription， 单次购买： payment)
  stripe_price_id: "price_1QMNBQGr5KSHFASDF", // 产品价格ID
  features: ["基础技术支持", "核心功能访问", "每月1,000 tokens"], // 产品特性
  token_limit: 1000, // 充值的token
}

6. 重启项目

配置完成后，重启项目即可使用 Stripe 支付功能。

7. 测试支付

你可以使用本地 Stripe CLI 进行支付测试，也可以部署到开发或者测试环境实现测试。Stripe 提供了测试卡号，你可以使用测试卡号进行支付测试。

Stripe 测试卡号

常见问题

测试支付失败？

  • 确认使用的是测试模式的 API 密钥
  • 检查测试卡号是否正确
  • 确认 webhook 是否正确配置

Webhook 未收到回调？

  • 检查 webhook secret 是否正确配置
  • 确认 Stripe CLI 是否正常运行
  • 查看 Stripe 开发者面板中的 webhook 日志