📝 概要

この記事では、Stripe CLI を利用して Stripe Checkout を簡単にセットアップし、以下の決済フローを構築する方法を解説します

サブスクリプション方式（継続課金）
買い切り方式（One-Time Payment）

さらに、Firebase Firestore を連携して、決済後のデータ管理を行う実践例もご紹介します。

🎯 この記事の目標

Stripe CLI を使って簡単に決済フローをセットアップする
サブスク方式と買い切り方式の決済ロジックを理解する
Firebase Firestore を利用した決済後のデータ更新方法を学ぶ

🔧 必要なツールとセットアップ

Stripe CLI のインストール

公式ドキュメントを参考に、Stripe CLI をダウンロードしてセットアップします：
Stripe CLI ダウンロード

セットアップ完了後、以下のコマンドを実行してログインします

stripe login

プロダクトと価格の作成

プロダクトを作成

まず、Stripe CLI を使ってプロダクトを作成します

stripe products create --name="Basic"

価格を作成

プロダクトID（例: prod_RMlR8SYY4Y4Oex）を指定して価格を設定します。
サブスク方式（月額課金）の例

stripe prices create \
  -d "product=prod_RMlR8SYY4Y4Oex" \
  -d "unit_amount=1000" \
  -d "currency=jpy" \
  -d "recurring[interval]=month"

買い切り方式（1回払い）の例

stripe prices create \
  -d "product=prod_RMlR8SYY4Y4Oex" \
  -d "unit_amount=5000" \
  -d "currency=jpy"

作成済みプロダクト一覧を確認

stripe products list

🌐 決済フローの構築

Webhook シークレットキーの設定

Stripe Checkout の Webhook イベントを受け取るために、Webhook シークレットキーを設定します。

Webhook シークレットキーの取得

ローカル環境で次のコマンドを実行

stripe listen --forward-to http://localhost:4242/webhook

実行結果に表示されるキー（例: whsec_xxxxxxx)を環境変数ファイル .envに保存します。
また、以下の画像のように Stripe ダッシュボードから公開可能キー (pk_test_xxxxxxx)とシークレットキー (sk_test_xxxxxxx) を取得します。

サーバー構築

以下は、Node.js と Express を使った基本的なサーバー構成です。
このコードは、GitHubリポジトリから引用しています。

const express = require('express');
const bodyParser = require('body-parser');
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

const app = express();
app.use(bodyParser.json());

// Checkout セッションを作成
app.post('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    mode: 'subscription', // "payment" に変更すると買い切り方式
    line_items: [
      {
        price: 'price_xxxxxxxxxxxx', // Stripe CLI で作成した Price ID を指定
        quantity: 1,
      },
    ],
    success_url: 'http://localhost:4242/success',
    cancel_url: 'http://localhost:4242/cancel',
  });

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

// Webhook ハンドラ
app.post('/webhook', express.raw({ type: 'application/json' }), (req, res) => {
  const sig = req.headers['stripe-signature'];
  let event;

  try {
    event = stripe.webhooks.constructEvent(req.body, sig, process.env.STRIPE_ENDPOINT_SECRET);
  } catch (err) {
    console.error('Webhook Error:', err.message);
    return res.status(400).send(`Webhook Error: ${err.message}`);
  }

  if (event.type === 'checkout.session.completed') {
    const session = event.data.object;
    console.log('Payment successful:', session);
  }

  res.status(200).send('Received');
});

app.listen(4242, () => console.log('Server is running on port 4242'));

📂 Firestore と連携

決済成功後に Firebase Firestore を利用してユーザー情報を更新する例です。
このコードも GitHubリポジトリから引用しています。

const admin = require('firebase-admin');
admin.initializeApp();
const db = admin.firestore();

app.post('/webhook', express.raw({ type: 'application/json' }), async (req, res) => {
  const sig = req.headers['stripe-signature'];
  let event;

  try {
    event = stripe.webhooks.constructEvent(req.body, sig, process.env.STRIPE_ENDPOINT_SECRET);
  } catch (err) {
    console.error('Webhook Error:', err.message);
    return res.status(400).send(`Webhook Error: ${err.message}`);
  }

  if (event.type === 'checkout.session.completed') {
    const session = event.data.object;
    const userId = session.metadata.userId; // 必要ならセッションに userId を渡す

    try {
      const userRef = db.collection('Users').doc(userId);
      await userRef.update({
        activeSubscription: true,
      });
      console.log('User subscription updated');
    } catch (err) {
      console.error('Firestore Error:', err);
    }
  }

  res.status(200).send('Received');
});

💡 Stripe CLI コマンドの活用

以下のコマンドを使いこなすことで、Stripe の開発がさらに効率化します

# プロダクトの作成
stripe products create --name="Basic"

# 価格の作成
stripe prices create \
  -d "product=prod_RMlR8SYY4Y4Oex" \
  -d "unit_amount=1000" \
  -d "currency=jpy" \
  -d "recurring[interval]=month"

# Webhook イベントを受信
stripe listen --forward-to http://localhost:4242/webhook

# プロダクト一覧の確認
stripe products list

🌟 この記事の GitHub リポジトリ

この記事で使用したコードは、以下のリポジトリで公開しています。
セットアップや動作確認にぜひ活用してください！ 🚀

🔗 参考リンク