Set Up Subscription Payments with Stripe, Next.JS & Firebase! 🔥

In this video, we'll set up subscription payments using Next.JS, Firebase, and Stripe. Using Firebase's "Run Subscription Payments with Stripe" Firebase extension to easily integrate all the tools together.

With this extensive guide, we'll set up the following:
- Create a new Next.JS project
- Set up Authentication in Firebase
- Created a Firestore Database in Firebase
- Created a Stripe Account, and a subscription product to go with it.
- Synchronise products with Stripe and our Firestore Database
- Set up a way of accepting subscription payments with Stripe
- Synchronised customer and subscription data between Stripe and Firebase
- Added custom claims to Firebase users to determine whether they are free or premium customers.
- Exclusively shown premium content to paying customers

Timestamps:
0:00 - Introduction
1:23 - Create Next.JS Project
1:40 - Adding TypeScript
2:22 - Creating Firebase Project
2:45 - Firebase Authentication
3:45 - Firebase Web Application Setup
4:21 - Cloud Firestore Setup
4:35 - Firebase Client Code
5:12 - Authentication Frontend
6:13 - Firestore Users Collection
7:00 - Stripe Firebase Extension
12:54 - Stripe Frontend Code
15:28 - usePremiumStatus Hook
16:04 - Displaying Premium Content
16:50 - Testing Stripe Transactions

Check out my other content:

[gilbertwalker]

is this using the old firebase v8 code? I would absolutely love to see this with the new v9 code

[shannoncole]

After a few days I have 99% of the script updated to support v9 but I'm struggling on changing the Firebase.User to a v9 compatible format in the userPremiumStatus file. Any suggestions? Also I am interested in offering 4 tiers of access (free-metered, tier 1 price $x.xx, tier 2 price $x.xx, and tier 3 price $x.xx). Any thoughts on changing the code to support multiple pricing plans? Thanks!

[JoshuaTMagee]

Fantastic video, Jarrod! Would love to see more long-form video series from you on building complex web apps that leverage Next.js, Firebase and Stripe. Awesome content!

[Smartercow]

Man!!! We need an updated version with Firebase V9. There's only one video like this that exist on Youtube and it uses Firebase

[migom]

your content is so perfect, it's a hybrid between fireship and traversy

[BadMike]

Does this work with one time payment products? i tried this but the stripeRole field isnt getting added to my user after he completes payment

[ZaarmTech]

Will it work if .env file is not prefixed with NEXT_PUBLIC?

[shannoncole]

How do you add email/password and google logins to this after finishing this tutorial? Great video by the way. Everything worked wonderfully.

[UsfCodes]

"Error creating checkout session: FirebaseError: Missing or insufficient permissions." i get that when i use createChekoutSession

[PaoloTshiyole]

I discover this video today and it's amazing, good video

I've just a question

It's possible to make the same video but with flutter web? A firebase subscription extension with flutter web and stripe

[slashbrackets]

Everything works, I get payment information attached to the user in firestore. The only thing i'm missing is Stripe doesn't create the products collection in Firestore. Not sure what i'm missing, everything else works. What am I missing?

[hesamalavi]

I have been going nuts to find a resource like this, just as I thought I should give up this video showed up, you are in my good books for ever :D

[CodeNight-dmhv]

Hi. I'm having some trouble making the createCheckoutSession.js is giving me a error on this:

const checkoutSessionRef = await setDoc(collection(db, "users", uid, "checkout_sessions"), docData);

The error is:

Unhandled Runtime Error
FirebaseError: Expected type 'mc', but it was: a custom yc object

[FragmentAudio]

Do you think is possible to create an account ONLY once a succesful charge or users should be logged-in first before doing the purchase?
I saw there is a way to do this (without using this extension) but I don't want to run Next JS using SSR as I would have to give up using serverless functions etc...

[michael_ibeh]

can stripe be replaced with paystack?, please if it can't can you do REACT, FIREBASE AND PAYSTACK 🙏

[Myerzman]

Super fast but worked like a charm! THANK YOU. Fantastic walkthrough

[hiphopheaven]

I have multiple products created before I installed the extension.Is there a way to import all those products to firestore?

[ElbinBinil]

Hey how are you making the graphics for your video
By the way I like your videos

[CodeNight-dmhv]

Great video. But I'm having a lot of trouble migrating to v9.

[shannoncole]

How do you setup the the customer portal with this code? I’ve been struggling to find out how to get this working. Thanks