Video Summary — Add Subscription Payments with NextJS + Firebase + Stripe 🚀

Overview

• Goal: Build a web app where users can sign in, subscribe to a $10/month premium plan, and manage/cancel subscriptions.
• Tech stack:
  • Front-end: NextJS
  • Auth & backend orchestration: Firebase (Auth, Firestore, Cloud Functions, Extensions)
  • Payments: Stripe (via Firebase Stripe Extension)
• Deliverable: Users can log in (Google), purchase subscription, see premium status, and open Stripe’s customer portal to manage/cancel subscription.

Quick Start (project setup)

• Clone the GitHub repo (starting-skeleton UI only).
• Install dependencies:
  • yarn: yarn install then yarn dev
  • npm: npm install then npm run dev
• Visit local dev URL to see the skeleton app.

Authentication (Firebase)

• Create Firebase project (console.firebase.google.com) → register web app.
• Enable Authentication → enable Google provider (add support email if prompted).
• In NextJS project:
  • Install SDKs: yarn add firebase react-firebase-hooks (or npm install)
  • Add Firebase client (e.g., src/firebase.ts) with the web config from Firebase console.
  • Wrap init in an initFirebase() getter for a singleton.
  • Use firebase/auth:
    • getAuth(app), GoogleAuthProvider(), signInWithPopup(auth, provider)
    • Implement sign-in and sign-out (auth.signOut()) on homepage/account pages.
  • Optional: use an AuthRouter to guard routes (repo includes an example).

Stripe Setup (Dashboard)

• Create Stripe account → enable Test mode (use test cards).
• Note: Stripe customer IDs differ from Firebase UIDs → need mapping/integration.
• Obtain API keys (prefer creating a restricted secret key with required permissions).

Integrating Stripe with Firebase (Recommended: Firebase Extension)

• In Firebase console → Extensions → install Run Payments With Stripe (by Stripe).
  • Add billing to Firebase project (credit card required but usually within free tier).
  • Configure deployment region (e.g., us-central1) and paste Stripe secret key (or restricted key).
• After install, enable Firestore (create DB) and apply extension-specified security rules to Firestore.
• Create a Stripe webhook endpoint:
  • In Stripe Dashboard → Developers → Webhooks → Add endpoint with the Firebase extension URL.
  • Add the list of required events (add specific events recommended, not "select all").
  • Copy the webhook signing secret → reconfigure the Firebase extension and save.

Creating Product & Price in Stripe

• In Stripe Dashboard → Products → Add Product:
  • Example: “stripe test product”, Price = $10 monthly recurring
  • Copy the Price ID (used in checkout).

Using Firebase Extension APIs from NextJS

• Extension exposes Cloud Functions / Firestore synchronization:
  • Customers, products, subscriptions are mirrored to Firestore.
  • You can call cloud functions (checkout session creation, portal link) via callable functions or the provided client SDK.
• Note: Official client SDK in docs may be outdated; author re-implemented calls to Cloud Functions using modern Firebase APIs.

Key functions to implement in project (examples):

• getCheckoutUrl(app, priceId)
  • Creates a checkout session via Firebase Cloud Function / Firestore path and returns the Stripe checkout URL.
• getPremiumStatus(app)
  • Reads Firestore for the current user’s subscriptions collection and returns whether there is an active/trialing subscription.
• getPortalUrl(app)
  • Calls the extension function (e.g., extension-firestore-createPortalLink) to create a Stripe customer portal URL for subscription management.

(Author provides these implementations in the repo; copying them is recommended because they’re fiddly.)

Front-end Integration (Account Page)

• Add Upgrade button → call getCheckoutUrl(app, priceId) → redirect user to Stripe Checkout.
• Use Stripe test card numbers (stripe.com/docs -> “test card”) to simulate successful/failed/auth-required payments.
• After successful checkout, extension syncs subscription data to Firestore.
• Use getPremiumStatus to display premium vs standard state (hook + useEffect to refetch on user change).
• When premium user clicks Manage Subscription → call getPortalUrl(app) → redirect to Stripe Customer Portal (cancel/update payment methods).

Testing & Observability

• Use Stripe Test Mode and test cards to simulate scenarios.
• Verify:
  • Stripe dashboard shows customers, subscriptions, checkout sessions.
  • Firestore collections (created by extension) show customers, products, subscriptions, sessions.
  • App UI updates premium status from Firestore.

Security & Notes

• Keep Stripe secret keys private (do NOT commit to public repos).
• Use restricted API keys for least privilege if possible.
• The Firebase Stripe Extension creates Cloud Functions and resources—be mindful of billing and region configuration.
• If the extension SDK is out-of-date, call the cloud functions directly via Firebase Functions (httpCallable/getFunctions) as shown in the repo.

Repo & Resources

• All code is available in the author’s GitHub (repo: stripe-firebase-app) — copy the helper functions (stripePayment utilities, getPremiumStatus) if needed.
• Useful docs:
  • Firebase: firebase.google.com
  • Stripe Docs: stripe.com/docs (test cards, JS SDK docs)
  • Firebase Stripe Extension docs in Firebase console (installation/config steps)

Recap (What you built) ✅

• Static NextJS frontend that:
  • Authenticates users via Firebase Google sign-in.
  • Lets users purchase a monthly subscription ($10) via Stripe Checkout.
  • Shows premium status by reading Firestore synced by the Firebase Stripe extension.
  • Lets premium users open Stripe Customer Portal to manage/cancel subscriptions.

Thanks for watching — see the repo for full code and implementation details! 🙌