Back to Details

stripe-subscription

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Stripe Subscription

Stripe 订阅服务

Stripe Checkout integration for recurring subscriptions with Customer Portal. No webhook configuration required.
集成Stripe Checkout实现定期订阅功能，并搭配客户门户。无需配置webhook。

Tech Stack

技术栈

  • Backend: Express.js
  • Payments: Stripe Checkout + Customer Portal
  • Language: JavaScript
  • Package Manager: npm
  • Port: 4242
  • 后端：Express.js
  • 支付：Stripe Checkout + 客户门户
  • 语言：JavaScript
  • 包管理器：npm
  • 端口：4242

Setup

安装步骤

1. Clone the Template

1. 克隆模板

bash
git clone --depth 1 https://github.com/Eng0AI/stripe-subscription.git .
If the directory is not empty:
bash
git clone --depth 1 https://github.com/Eng0AI/stripe-subscription.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template
bash
git clone --depth 1 https://github.com/Eng0AI/stripe-subscription.git .
如果目录非空：
bash
git clone --depth 1 https://github.com/Eng0AI/stripe-subscription.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template

2. Remove Git History (Optional)

2. 移除Git历史记录（可选）

bash
rm -rf .git
git init
bash
rm -rf .git
git init

3. Install Dependencies

3. 安装依赖

bash
npm install
bash
npm install

4. Setup Environment Variables

4. 设置环境变量

bash
cp .env.example .env
Required:
  • STRIPE_SECRET_KEY
    - Your Stripe secret key (sk_test_xxx)
  • STRIPE_PUBLISHABLE_KEY
    - Your Stripe publishable key (pk_test_xxx)
Optional (auto-created if not set):
  • BASIC_PRICE
    - Price ID for Starter plan ($12/month default)
  • PRO_PRICE
    - Price ID for Professional plan ($18/month default)
bash
cp .env.example .env
必填项：
  • STRIPE_SECRET_KEY
    - 你的Stripe密钥（sk_test_xxx）
  • STRIPE_PUBLISHABLE_KEY
    - 你的Stripe可发布密钥（pk_test_xxx）
可选项（若未设置则自动创建）：
  • BASIC_PRICE
    - 基础套餐的价格ID（默认$12/月）
  • PRO_PRICE
    - 专业套餐的价格ID（默认$18/月）

5. Start the Server

5. 启动服务器

bash
npm start
Server runs at http://localhost:4242. If price IDs are not set, it auto-creates subscription plans.
bash
npm start
服务器运行于 http://localhost:4242。若未设置价格ID，系统将自动创建订阅套餐。

Deploy to Vercel

部署到Vercel

Step 1: Create Serverless API Wrapper

步骤1：创建Serverless API包装器

Create 
api/index.js
with the Stripe subscription logic (see full deploy guide).
创建
api/index.js
并写入Stripe订阅逻辑（详见完整部署指南）。

Step 2: Create Vercel Config

步骤2：创建Vercel配置文件

Create 
vercel.json
:
json
{
  "version": 2,
  "buildCommand": "",
  "outputDirectory": "client/html",
  "rewrites": [
    { "source": "/config", "destination": "/api" },
    { "source": "/checkout-session", "destination": "/api" },
    { "source": "/create-checkout-session", "destination": "/api" },
    { "source": "/customer-portal", "destination": "/api" }
  ]
}
创建
vercel.json
：
json
{
  "version": 2,
  "buildCommand": "",
  "outputDirectory": "client/html",
  "rewrites": [
    { "source": "/config", "destination": "/api" },
    { "source": "/checkout-session", "destination": "/api" },
    { "source": "/create-checkout-session", "destination": "/api" },
    { "source": "/customer-portal", "destination": "/api" }
  ]
}

Step 3: Set Environment Variables

步骤3：设置环境变量

bash
printf "YOUR_SECRET_KEY" | vercel env add STRIPE_SECRET_KEY production -t $VERCEL_TOKEN
printf "YOUR_PUBLISHABLE_KEY" | vercel env add STRIPE_PUBLISHABLE_KEY production -t $VERCEL_TOKEN
bash
printf "YOUR_SECRET_KEY" | vercel env add STRIPE_SECRET_KEY production -t $VERCEL_TOKEN
printf "YOUR_PUBLISHABLE_KEY" | vercel env add STRIPE_PUBLISHABLE_KEY production -t $VERCEL_TOKEN

Step 4: Deploy

步骤4：部署

bash
vercel --prod -t $VERCEL_TOKEN --yes
bash
vercel --prod -t $VERCEL_TOKEN --yes

Deploy to Netlify

部署到Netlify

Create 
netlify/functions/api.js
and 
netlify.toml
with similar configuration, then:
bash
netlify deploy --prod
创建
netlify/functions/api.js
和
netlify.toml
并配置类似内容，然后执行：
bash
netlify deploy --prod

Testing

测试

Use test card numbers:
  • Success: 4242 4242 4242 4242
  • Decline: 4000 0000 0000 0002
使用测试卡号：
  • 支付成功：4242 4242 4242 4242
  • 支付失败：4000 0000 0000 0002

Customer Portal Configuration

客户门户配置

Before going live, configure at Stripe Dashboard > Settings > Billing > Customer Portal:
  • Enable: Update payment method, Cancel subscription, Switch plans
上线前，请在Stripe控制台 > 设置 > 账单 > 客户门户进行配置：
  • 启用：更新支付方式、取消订阅、切换套餐

Going Live

正式上线

  1. Replace test keys with live keys (sk_live_/pk_live_)
  2. Create subscription products in Stripe Dashboard Live mode
  3. Complete Stripe account verification (KYC)
  4. Configure Customer Portal for live mode
  5. Test with a real subscription
  1. 将测试密钥替换为正式密钥（sk_live_/pk_live_）
  2. 在Stripe控制台正式环境中创建订阅产品
  3. 完成Stripe账户验证（KYC）
  4. 配置正式环境的客户门户
  5. 使用真实订阅进行测试