mcpField
S
stripe-subscription

stripe-subscription

github.com/rebyteai-template開発1768 回インストール19 週間前に更新
リポジトリ

stripe-subscription について

サブスクリプション決済を追加する開発者向けの Stripe 統合テンプレートです。Express.js を使い、Stripe Checkout と Customer Portal を提供します。Webhook の設定は不要で、ローカル起動と Vercel、Netlify へのデプロイ手順も含みます。

主な機能

  1. 01Stripe Checkout によるサブスクリプション作成
  2. 02Customer Portal の統合
  3. 03Webhook 設定不要
  4. 04Express.js による構築
  5. 05Vercel と Netlify のデプロイ手順

活用シーン

  1. 01アプリへの継続課金の追加
  2. 02顧客による決済方法の管理や解約
  3. 03サブスクリプションサービスの Vercel または Netlify へのデプロイ

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rebyteai-template/rebyte-skills --skill stripe-subscription

インストール後、Claude Code で/stripe-subscriptionを入力して読み込まれたか確認します。

詳細

Stripe サブスクリプション

Customer Portal を利用した、継続課金サブスクリプション向けの Stripe Checkout 統合です。Webhook の設定は不要です。

技術スタック

  • バックエンド: Express.js
  • 決済: Stripe Checkout + Customer Portal
  • 言語: JavaScript
  • パッケージマネージャー: npm
  • ポート: 4242

セットアップ

1. テンプレートをクローンする
git clone --depth 1 https://github.com/Eng0AI/stripe-subscription.git .

ディレクトリが空でない場合：

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. Git 履歴を削除する（任意）
rm -rf .git
git init
3. 依存関係をインストールする
npm install
4. 環境変数を設定する
cp .env.example .env

必須：

  • STRIPE_SECRET_KEY - Stripe のシークレットキー（sk_test_xxx）
  • STRIPE_PUBLISHABLE_KEY - Stripe の公開可能キー（pk_test_xxx）

任意（未設定の場合は自動作成）：

  • BASIC_PRICE - Starter プランの価格 ID（デフォルトは月額 $12）
  • PRO_PRICE - Professional プランの価格 ID（デフォルトは月額 $18）
5. サーバーを起動する
npm start

サーバーは http://localhost:4242 で起動します。価格 ID が設定されていない場合は、サブスクリプションプランが自動作成されます。

Vercel へのデプロイ

ステップ 1：サーバーレス API ラッパーを作成する

Stripe サブスクリプションのロジックを含む api/index.js を作成します（デプロイガイドの全文を参照）。

ステップ 2：Vercel の設定を作成する

vercel.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" }
  ]
}
ステップ 3：環境変数を設定する
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
ステップ 4：デプロイする
vercel --prod -t $VERCEL_TOKEN --yes

Netlify へのデプロイ

同様の設定で netlify/functions/api.js と netlify.toml を作成してから、次を実行します。

netlify deploy --prod

テスト

テスト用カード番号を使用します。

  • 成功：4242 4242 4242 4242
  • 拒否：4000 0000 0000 0002

Customer Portal の設定

本番稼働前に、Stripe Dashboard > Settings > Billing > Customer Portal で設定します。

  • 有効にする項目：支払い方法の更新、サブスクリプションのキャンセル、プランの切り替え

本番稼働

  1. テストキーをライブキー（sk_live_/pk_live_）に置き換えます
  2. Stripe Dashboard の Live モードでサブスクリプション商品を作成します
  3. Stripe アカウントの本人確認（KYC）を完了します
  4. Live モード用に Customer Portal を設定します
  5. 実際のサブスクリプションでテストします

コメント

Markdown 対応