【インタビューAI】Stripe決済の実装：GCPとMongoDBを使ったテスト環境から月額課金導入まで

- name: Build frontend
  run: npm run build
  working-directory: ./frontend
  env:
    REACT_APP_BACKEND_URL: ${{ secrets.REACT_APP_BACKEND_URL }}
    REACT_APP_FIREBASE_API_KEY: ${{ secrets.REACT_APP_FIREBASE_API_KEY }}
    REACT_APP_STRIPE_PUBLISHABLE_KEY: ${{ secrets.REACT_APP_STRIPE_PUBLISHABLE_KEY }}
    # 他の環境変数もここに追加

// 環境変数からStripeの公開可能キーを取得
const stripePromise = loadStripe(
  process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY || ""
);

STRIPE_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXX

// backend/controllers/subscriptionController.js
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

echo -n "<your_stripe_secret_key>" | gcloud secrets create STRIPE_SECRET_KEY --data-file=-

gcloud secrets versions list STRIPE_SECRET_KEY

gcloud run deploy YOUR_SERVICE_NAME 
    --image gcr.io/YOUR_PROJECT_NUMBER/YOUR_IMAGE_NAME 
    --update-secrets STRIPE_SECRET_KEY=projects/YOUR_PROJECT_NUMBER/secrets/STRIPE_SECRET_KEY:latest 
    --platform managed 
    --region YOUR_REGION 
    --allow-unauthenticated

gcloud builds submit --tag gcr.io/interview-ai-20241006/backend .

// src/components/SubscriptionForm.tsx

import {
  CardElement,
  Elements,
  useElements,
  useStripe,
} from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import axios from "axios";
import React, { useState } from "react";
import { Alert, Button, Col, Container, Form, Row } from "react-bootstrap";

// 環境変数からStripeの公開可能キーを取得
const stripePromise = loadStripe(
  process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY || ""
);

// 商品IDを環境変数から取得
const STANDARD_PLAN_PRICE_ID =
  process.env.REACT_APP_STANDARD_PLAN_PRICE_ID || "";
const PREMIUM_PLAN_PRICE_ID = process.env.REACT_APP_PREMIUM_PLAN_PRICE_ID || "";

interface SubscriptionFormProps {
  userId: string;
}

const SubscriptionForm: React.FC<SubscriptionFormProps> = ({ userId }) => {
  const [selectedPlan, setSelectedPlan] = useState<string>("free");
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(false);

  return (
    <Elements stripe={stripePromise}>
      <Container className="mt-4">
        <Row className="justify-content-center">
          <Col md={6}>
            <CheckoutForm
              userId={userId}
              selectedPlan={selectedPlan}
              setSelectedPlan={setSelectedPlan}
              setError={setError}
              setSuccess={setSuccess}
              loading={loading}
              setLoading={setLoading}
            />
            {error && (
              <Alert variant="danger" className="mt-3">
                {error}
              </Alert>
            )}
            {success && (
              <Alert variant="success" className="mt-3">
                {success}
              </Alert>
            )}
          </Col>
        </Row>
      </Container>
    </Elements>
  );
};

interface CheckoutFormProps {
  userId: string;
  selectedPlan: string;
  setSelectedPlan: React.Dispatch<React.SetStateAction<string>>;
  setError: React.Dispatch<React.SetStateAction<string | null>>;
  setSuccess: React.Dispatch<React.SetStateAction<string | null>>;
  loading: boolean;
  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
}

const CheckoutForm: React.FC<CheckoutFormProps> = ({
  userId,
  selectedPlan,
  setSelectedPlan,
  setError,
  setSuccess,
  loading,
  setLoading,
}) => {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setError(null);
    setSuccess(null);

    if (!stripe || !elements) {
      return;
    }

    const cardElement = elements.getElement(CardElement);

    if (!cardElement) {
      setError("カード情報が取得できませんでした。");
      return;
    }

    setLoading(true);

    try {
      // 支払い方法の作成
      const { error: paymentMethodError, paymentMethod } =
        await stripe.createPaymentMethod({
          type: "card",
          card: cardElement,
        });

      if (paymentMethodError) {
        setError(
          paymentMethodError.message || "支払い方法の作成に失敗しました。"
        );
        setLoading(false);
        return;
      }

      // バックエンドにサブスクリプション作成リクエストを送信
      const response = await axios.post(
        `${process.env.REACT_APP_BACKEND_URL}/api/create-subscription`,
        {
          userId,
          paymentMethodId: paymentMethod.id,
          priceId:
            selectedPlan === "standard"
              ? STANDARD_PLAN_PRICE_ID // 環境変数からスタンダードプランの価格IDを取得
              : selectedPlan === "premium"
              ? PREMIUM_PLAN_PRICE_ID // 環境変数からプレミアムプランの価格IDを取得
              : null,
        }
      );

      if (!response.data.clientSecret) {
        throw new Error("クライアントシークレットが取得できませんでした。");
      }

      const { clientSecret } = response.data;

      // Stripeの支払い確認
      const result = await stripe.confirmCardPayment(clientSecret);

      if (result.error) {
        setError(result.error.message || "支払いに失敗しました。");
      } else {
        if (result.paymentIntent?.status === "succeeded") {
          setSuccess("サブスクリプションが正常に作成されました。");
        }
      }
    } catch (err: any) {
      setError(err.response?.data?.error || "予期せぬエラーが発生しました。");
    } finally {
      setLoading(false);
    }
  };

  return (
    <Form onSubmit={handleSubmit} className="p-4 border rounded bg-light">
      <Form.Group controlId="planSelect" className="mb-3">
        <Form.Label>プランを選択</Form.Label>
        <Form.Control
          as="select"
          value={selectedPlan}
          onChange={(e) => setSelectedPlan(e.target.value)}
          disabled={loading}
        >
          <option value="free">無料プラン</option>
          <option value="standard">スタンダードプラン (1,980円/月)</option>
          <option value="premium">プレミアムプラン (3,980円/月)</option>
        </Form.Control>
      </Form.Group>

      <Form.Group controlId="cardElement" className="mb-3">
        <Form.Label>カード情報</Form.Label>
        <div className="border p-2 rounded">
          <CardElement
            options={{
              style: {
                base: {
                  color: "#000",
                  fontSize: "16px",
                  "::placeholder": {
                    color: "#aab7c4",
                  },
                  backgroundColor: "#fff",
                  padding: "10px",
                },
                invalid: {
                  color: "#fa755a",
                },
              },
            }}
          />
        </div>
      </Form.Group>

      <Button
        variant="primary"
        type="submit"
        disabled={!stripe || loading}
        className="w-100"
      >
        {loading ? "処理中..." : "プランを変更"}
      </Button>
    </Form>
  );
};

export default SubscriptionForm;

// backend/routes/subscriptionRoutes.js

const express = require("express");
const router = express.Router();
const subscriptionController = require("../controllers/subscriptionController");

// サブスクリプション作成エンドポイント
router.post("/create-subscription", subscriptionController.createSubscription);

// サブスクリプション更新エンドポイント
router.post("/update-subscription", subscriptionController.updateSubscription);

module.exports = router;

// backend/controllers/subscriptionController.js

const Stripe = require("stripe");
const dotenv = require("dotenv");
const User = require("../models/userModel");

dotenv.config();

const stripe = Stripe(process.env.STRIPE_SECRET_KEY);

/**
 * サブスクリプション作成エンドポイント
 */
exports.createSubscription = async (req, res) => {
  const { userId, paymentMethodId, priceId } = req.body;

  try {
    // Firebase UIDを使用してユーザーをデータベースから取得
    const user = await User.findOne({ uid: userId });
    if (!user) {
      return res.status(404).json({ error: "ユーザーが見つかりません" });
    }

    // Stripeの顧客を作成または取得
    if (!user.stripeCustomerId) {
      const customer = await stripe.customers.create({
        email: user.email,
        payment_method: paymentMethodId,
        invoice_settings: {
          default_payment_method: paymentMethodId,
        },
      });
      user.stripeCustomerId = customer.id;
      await user.save();
    }

    // 支払い方法を顧客にアタッチ
    await stripe.paymentMethods.attach(paymentMethodId, {
      customer: user.stripeCustomerId,
    });

    // 顧客のデフォルトの支払い方法を設定
    await stripe.customers.update(user.stripeCustomerId, {
      invoice_settings: {
        default_payment_method: paymentMethodId,
      },
    });

    // サブスクリプションを作成
    const subscription = await stripe.subscriptions.create({
      customer: user.stripeCustomerId,
      items: [{ price: priceId }],
      default_payment_method: paymentMethodId,
      expand: ["latest_invoice.payment_intent"],
      payment_behavior: "default_incomplete",
    });

    // 最新の請求書と支払い意図を確認
    if (
      !subscription.latest_invoice ||
      !subscription.latest_invoice.payment_intent ||
      !subscription.latest_invoice.payment_intent.client_secret
    ) {
      console.error(
        "支払い意図が取得できませんでした。サブスクリプション情報:",
        subscription
      );
      return res
        .status(500)
        .json({ error: "サブスクリプションの作成に失敗しました。" });
    }

    console.log("ユーザー情報:", {
      uid: user.uid,
      email: user.email,
      plan: user.plan,
      subscriptionStatus: user.subscriptionStatus,
    });
    console.log("送信された価格ID:", priceId);

    // ユーザーのサブスクリプション情報を更新
    user.subscriptionId = subscription.id;
    user.subscriptionStatus = "incomplete";
    user.plan =
      priceId === process.env.STRIPE_STANDARD_PRICE_ID
        ? "standard"
        : "premium";
    user.subscriptionStart = new Date();
    await user.save();

    res.status(200).json({
      subscriptionId: subscription.id,
      clientSecret: subscription.latest_invoice.payment_intent.client_secret,
    });
  } catch (error) {
    console.error("サブスクリプション作成エラー:", error);
    res.status(500).json({ error: error.message });
  }
};

/**
 * サブスクリプション更新エンドポイント（プランの切り替え）
 */
exports.updateSubscription = async (req, res) => {
  const { userId, newPriceId } = req.body;

  try {
    // ユーザーを取得
    const user = await User.findOne({ uid: userId });
    if (!user || !user.subscriptionId) {
      return res
        .status(404)
        .json({ error: "サブスクリプションが見つかりません" });
    }

    // サブスクリプションを取得
    const subscription = await stripe.subscriptions.retrieve(
      user.subscriptionId
    );

    // サブスクリプションのアイテムを更新
    const updatedSubscription = await stripe.subscriptions.update(
      user.subscriptionId,
      {
        cancel_at_period_end: false, // 現在の期間終了時にキャンセルしない
        items: [
          {
            id: subscription.items.data[0].id,
            price: newPriceId,
          },
        ],
        proration_behavior: "create_prorations", // プロレーションを作成
      }
    );

    // 最新の請求書と支払い意図を確認
    if (
      !updatedSubscription.latest_invoice ||
      !updatedSubscription.latest_invoice.payment_intent ||
      !updatedSubscription.latest_invoice.payment_intent.client_secret
    ) {
      console.error(
        "支払い意図が取得できませんでした。サブスクリプション情報:",
        updatedSubscription
      );
      return res
        .status(500)
        .json({ error: "サブスクリプションの更新に失敗しました。" });
    }

    // ユーザーのプランを更新
    user.plan =
      newPriceId === process.env.STRIPE_STANDARD_PRICE_ID
        ? "standard"
        : "premium";
    user.subscriptionStatus = "active"; // 更新後のステータスに応じて変更
    await user.save();

    res.status(200).json({
      subscriptionId: updatedSubscription.id,
      clientSecret:
        updatedSubscription.latest_invoice.payment_intent.client_secret,
    });
  } catch (error) {
    console.error("サブスクリプション更新エラー:", error);
    res.status(500).json({ error: error.message });
  }
};

/**
 * Webhookエンドポイント
 */
exports.handleWebhook = async (req, res) => {
  const sig = req.headers["stripe-signature"];
  let event;

  try {
    event = stripe.webhooks.constructEvent(
      req.body, // 生のボディ
      sig,
      process.env.STRIPE_WEBHOOK_SECRET
    );
  } catch (err) {
    console.error("Webhookエラー:", err.message);
    return res.status(400).send(`Webhook Error: ${err.message}`);
  }

  // イベントタイプに基づいて処理を分岐
  switch (event.type) {
    case "invoice.payment_succeeded":
      await handlePaymentSucceeded(event.data.object);
      break;

    case "invoice.payment_failed":
      await handlePaymentFailed(event.data.object);
      break;

    case "customer.subscription.deleted":
      await handleSubscriptionDeleted(event.data.object);
      break;

    case "customer.subscription.updated":
      await handleSubscriptionUpdated(event.data.object);
      break;

    default:
      console.warn(`未処理のイベントタイプ: ${event.type}`);
  }

  res.status(200).json({ received: true });
};

// Helper関数: サブスクリプションのプランを判別
function getPlanFromPriceId(priceId) {
  // Stripeの価格IDとプランをマッピング
  const priceToPlan = {
    [process.env.STRIPE_STANDARD_PRICE_ID]: "standard",
    [process.env.STRIPE_PREMIUM_PRICE_ID]: "premium",
  };
  return priceToPlan[priceId] || "free";
}

// Webhookハンドラー関数
async function handlePaymentSucceeded(invoice) {
  const customerId = invoice.customer;
  const subscriptionId = invoice.subscription;

  // Stripeからサブスクリプションを取得
  const subscription = await stripe.subscriptions.retrieve(subscriptionId);
  const priceId = subscription.items.data[0].price.id;
  const plan = getPlanFromPriceId(priceId);

  // データベースでユーザーを更新
  const user = await User.findOne({ stripeCustomerId: customerId });
  if (user) {
    user.subscriptionStatus = "active";
    user.plan = plan;
    user.subscriptionStart = new Date(subscription.start_date * 1000); // UNIXタイムスタンプをDateに変換
    await user.save();
  }
}

async function handlePaymentFailed(invoice) {
  const customerId = invoice.customer;

  // データベースでユーザーを更新
  const user = await User.findOne({ stripeCustomerId: customerId });
  if (user) {
    user.subscriptionStatus = "past_due";
    await user.save();
  }
}

async function handleSubscriptionDeleted(subscription) {
  const customerId = subscription.customer;

  // データベースでユーザーを更新
  const user = await User.findOne({ stripeCustomerId: customerId });
  if (user) {
    user.subscriptionStatus = "canceled";
    user.plan = "free";
    user.subscriptionId = null;
    user.subscriptionStart = null;
    await user.save();
  }
}

// サブスクリプションが更新された際に呼び出されるハンドラー
async function handleSubscriptionUpdated(subscription) {
  const customerId = subscription.customer;
  const priceId = subscription.items.data[0].price.id;

  // Stripeの価格IDとプランをマッピングする関数
  const plan = getPlanFromPriceId(priceId);

  // データベースでユーザーを更新
  const user = await User.findOne({ stripeCustomerId: customerId });
  if (user && plan) {
    user.plan = plan;
    user.subscriptionStatus = subscription.status; // 例えばactive, past_due, canceledなど
    user.subscriptionStart = new Date(subscription.start_date * 1000); // UNIXタイムスタンプをDateに変換
    await user.save();
  }
}