Chrome拡張機能で「クレジットカード登録後3日間無料」有料サブスクリプションを実装する手

npm install -g firebase-tools
firebase login

mkdir my-extension-backend
cd my-extension-backend
firebase init functions

cd functions
npm install stripe

// functions/index.js

const functions = require("firebase-functions");
const admin = require("firebase-admin");
const Stripe = require("stripe");

// Firebase初期化
admin.initializeApp();

// 環境変数からStripeのシークレットキーを読み込む
// (デプロイ時に firebase functions:config:set で設定)
const stripe = new Stripe(functions.config().stripe.secret_key);

// Checkoutセッション作成API (Callable Functions)
exports.createStripeCheckout = functions.https.onCall(async (data, context) => {
  // ログインしていない場合はエラー
  if (!context.auth) {
    throw new functions.https.HttpsError("unauthenticated", "ログインが必要です");
  }

  // Stripe Checkout セッションを作成
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    mode: "subscription",
    line_items: [
      {
        price: data.priceId, // Stripeダッシュボードで作成した定期課金用のPrice ID
        quantity: 1,
      },
    ],
    success_url: data.successUrl,
    cancel_url: data.cancelUrl,
    customer_email: data.email, // Authのメールアドレスを利用
  });

  // セッションIDを返す
  return { sessionId: session.id };
});

// Stripe Webhookで支払いイベントを受け取る
exports.stripeWebhook = functions.https.onRequest(async (req, res) => {
  let event;
  const endpointSecret = functions.config().stripe.webhook_secret;

  try {
    const sig = req.headers["stripe-signature"];
    event = stripe.webhooks.constructEvent(req.rawBody, sig, endpointSecret);
  } catch (err) {
    console.error("Webhook signature verification failed.", err);
    return res.sendStatus(400);
  }

  switch (event.type) {
    case "checkout.session.completed": {
      // 3日無料トライアルを含むサブスク開始
      const session = event.data.object;
      const customerEmail = session.customer_email;

      // Firestoreでユーザーを探し、activeSubscriptionをtrueに更新
      const userSnapshot = await admin.firestore()
        .collection("users")
        .where("email", "==", customerEmail)
        .limit(1)
        .get();

      if (!userSnapshot.empty) {
        const userDoc = userSnapshot.docs[0];
        await userDoc.ref.update({
          activeSubscription: true,
          subscriptionStart: new Date()
        });
      }

      break;
    }

    case "invoice.payment_failed": {
      // トライアル後の引き落とし失敗など
      const invoice = event.data.object;
      // customerIdを使ってFirestore上の該当ユーザーを探して処理
      break;
    }

    case "customer.subscription.deleted": {
      // サブスク解約
      const subscription = event.data.object;
      // customerIdからFirestoreユーザーを探して activeSubscription = false にする等
      break;
    }

    default:
      console.log(`Unhandled event type ${event.type}`);
  }

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

// 環境変数にStripeのシークレットキーやWebhook Secretを設定
firebase functions:config:set stripe.secret_key="YOUR_STRIPE_SECRET_KEY" \
stripe.webhook_secret="YOUR_STRIPE_WEBHOOK_SECRET"

// デプロイ
firebase deploy --only functions

{
  "name": "My Paid Extension",
  "version": "1.0.0",
  "manifest_version": 3,
  "description": "最初の3日間が無料の有料サブスクリプション拡張機能",
  "permissions": ["storage", "identity"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

// popup.js
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-app.js";
import {
  getAuth,
  signInWithPopup,
  GoogleAuthProvider,
  onAuthStateChanged
} from "https://www.gstatic.com/firebasejs/9.17.2/firebase-auth.js";

import { getFunctions, httpsCallable } from "https://www.gstatic.com/firebasejs/9.17.2/firebase-functions.js";

// 1. Firebase 初期化 (プロジェクトの設定情報を入力)
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_APP.firebaseapp.com",
  projectId: "YOUR_APP",
  storageBucket: "YOUR_APP.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const functions = getFunctions(app);

// DOM取得
const loginBtn = document.getElementById("login-btn");
const subscriptionSection = document.getElementById("subscription-section");
const subscriptionStatus = document.getElementById("subscription-status");
const subscribeBtn = document.getElementById("subscribe-btn");

// Googleログイン
loginBtn.addEventListener("click", async () => {
  const provider = new GoogleAuthProvider();
  try {
    await signInWithPopup(auth, provider);
  } catch (error) {
    console.error(error);
    alert("ログインに失敗しました");
  }
});

// ログイン状態監視
onAuthStateChanged(auth, (user) => {
  if (user) {
    // ログイン済み → サブスク登録画面を表示
    document.getElementById("login-section").style.display = "none";
    subscriptionSection.style.display = "block";

    // FirestoreやFunctions経由でサブスク状態を確認して表示
    checkSubscriptionStatus(user).then(isActive => {
      subscriptionStatus.innerText = isActive
        ? "サブスク有効です"
        : "サブスク未加入です";
    });
  } else {
    // 未ログイン → ログインボタン表示
    document.getElementById("login-section").style.display = "block";
    subscriptionSection.style.display = "none";
  }
});

// サブスク登録ボタン
subscribeBtn.addEventListener("click", async () => {
  const createStripeCheckout = httpsCallable(functions, "createStripeCheckout");
  try {
    // 事前にStripeダッシュボードで作成したPrice IDを設定
    const priceId = "price_xxx";
    const successUrl = "https://example.com/success"; // 決済完了後のリダイレクト先
    const cancelUrl = "https://example.com/cancel";   // キャンセル時の戻り先

    const result = await createStripeCheckout({
      priceId,
      successUrl,
      cancelUrl,
      email: auth.currentUser.email
    });

    // 受け取った sessionId を使い、Stripe Checkoutへリダイレクト
    if (result.data && result.data.sessionId) {
      const stripePublicKey = "YOUR_STRIPE_PUBLISHABLE_KEY";
      const stripe = Stripe(stripePublicKey); // 事前に  が必要
      await stripe.redirectToCheckout({ sessionId: result.data.sessionId });
    }
  } catch (error) {
    console.error(error);
    alert("サブスク登録ページの作成に失敗しました");
  }
});

// サブスク状態をチェックする仮関数 (FirestoreやカスタムClaimsを用いて実装)
async function checkSubscriptionStatus(user) {
  // カスタムClaimsを利用する場合の例
  const tokenResult = await user.getIdTokenResult(true);
  return tokenResult.claims.activeSubscription === true;
}