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:
/ jarrodwattsdev
jarrodwatts.com
github.com/jarrodwatts
blog.jarrodwatts.com
www.buymeacoffee.com/jarrodwatts

[@gilbertwalker9862]

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

[@JarrodWatts]

Hey Gilbert! This is unfortunately using v8 code :( Hopefully most of the process is the same, but there will be a number of code differences on the Firebase side of things. Thanks for pointing it out - I'll pin your comment too.

[@gilbertwalker9862]

@@JarrodWatts ah no worries... yea unfortunately a lot of resources atm are using the old code ... so hard for a n00b like me to figure out how to transform into v9... love the vid though

[@muhammedrashid1244]

Any updates, I have a problem with it, when sessions document is created, I can't getting back the same doc. I tired giving Id for the doc, and when I get it back the session is is not there,

[@shannoncole6425]

I would love to see the updated code for this too! I'm a noob too and had to force in the same versions of firebase and hooks in order to continue with the video. I'm planning on, hopefully, doing a full membership site that provides access to another service and this firebase/stripe tutorial seems right up my ally on what I need to do.

[@nowaccki]

@@JarrodWatts seconding this, would also love to see a new video with v9 :)

[@Myerzman]

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

[@hesamalavi9]

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

[@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!

[@JarrodWatts]

Thanks a lot Josh! Really appreciate it. Hopefully more coming like this in the near future!

[@migom6]

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

[@JarrodWatts]

That is the best compliment I can get! Thanks Madhurjya 😍

[@matthewstibbard8068]

This is a fantastic guide, thank you!

[@JarrodWatts]

Thanks again Matthew! Appreciate your support mate! 🇦🇺

[@waifufx]

Well done Sir, No Cap The video is great you are the future fireship around here, lol

[@hansajalisan6643]

Great video Jarrod!! If You know would love to see this same Subscription payment with stripe and firebase setup in Flutter also.

[@minashawkylvlup]

About time, I was just setting it up yesterday 🙌

[@JarrodWatts]

Haha perfect timing then!

[@afrosoul4eva]

Great content

[@vineetharvind7718]

Thanks, it helped me speed up a lot of development effort

[@nettion]

Amazing tutorial mate. Keep it up

[@JarrodWatts]

Thanks Marcos! Really appreciate that

[@anandbhandari]

Good video, thanks

[@onerandomscene]

Good Job and Thank you

[@foreach1]

Amazing!

[@azizanbouri4101]

i really need the v9 firebase version, your content is fabulous

[@JamesQQuick]

Love this!!

[@JarrodWatts]

Wow thank you James! I am a big fan of your content so that means a lot 😍

[@vanshshah7781]

Thank you.

[@kvetoslavnovak423]

This is amazing and very helpful video. The best Firebase & Stripe tutorial. Would you be so kind to explain how to set up Stripe SaaS per-seat (per-user) subscriptions ? When the app is used by organizations with admins who create their other basic users?

[@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

[@BadMike47]

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

[@vasubansal3468]

Perfect timing

[@JarrodWatts]

Haha awesome to hear Vasu! What are you working on yourself?

[@vasubansal3468]

@@JarrodWatts I was working on a SAAS project (not gonna reveal the name of it just yet)

[@shannoncole4379]

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

[@flash_gif]

Was wondering if you'd make a video on stripe and amplify? Anyway awesome video. Thanks!

[@JarrodWatts]

Hopefully at some point in the future I will be able to! I've personally not done it in the past but would be keen to try it out. Thanks for the awesome suggestion and feedback!

[@shannoncole6425]

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

[@AdamSmaka]

an instant subscribe button press after watching video like this!

[@JarrodWatts]

Thanks so much Adam!

[@hiphopheaven]

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

[@iankitverma]

Can you please do it with firebase 9, would there be any major changes

[@Smartercow]

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

[@ElbinBinil]

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

[@Guru-zi8hr]

thanks for the video! this one was really point to point... Quick question - what do you use to edit/ make your videos? Quick suggestion - it would be awesome if you can make a video on how to fetch details from a form and save it to a user's document. There are very less quality videos on user management with firebase.

[@JarrodWatts]

Thank you, appreciate it! I use OBS to record the footage and Adobe Premiere Pro to put my videos together. Thanks for the suggestion 🙏 hopefully more Firebase videos on the way soon.

[@CodeNight-dm2hv]

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

[@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...

[@noobCoder26]

great

[@teetanrobotics5363]

Amazing tutorial !! However, I would request you to slow down a bit for the newbies

[@michael_ibeh]

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

[@slashbrackets3397]

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?

[@jayanthl7000]

Wow! Such a quality video! How much time does it take to make a video of this quality ?

[@JarrodWatts]

Thank you! Typically it takes around 1 week to put something like this together!

[@LowrollerWTF]

Very interesting video. BTW I've heard the stripe functions can take forever to be invoked because of the cold start but the demo project you put together seems to go fairly fast: Was it edited or this is the actual speed of your app?

[@JarrodWatts]

Sometimes they are a little slow, I edited the loading time out of this video like you said! In the real world we'd probably need a loading state to show while it opens up

[@LowrollerWTF]

@@JarrodWatts thanks for the answer

[@UsfCodes]

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

[@ferruchododdoli3300]

Awesome video. Why did you save the user's checkout sessions in firestore?

[@azizanbouri4101]

to make the userpremium hook

[@AMigosJJM]

Hey man, good video. Thanks for uploading! Just wondering where you've disapeared to, you all good?

[@JarrodWatts]

Hey mate, thanks! Yeah, all good - just working on a few important things outside of this content at the moment! Hopefully I'll be able to do more weekly videos in September, but thanks for checking in, appreciate it!

[@AMigosJJM]

@@JarrodWatts that’s all good man, you been working on that saas project? I love the idea of it so so much, I’m working on my own “saas” website too. It’s not explicitly saas but nevertheless it’s a lot of fun haha. But yea your videos are super helpful, if you have a discord idm connecting/ sharing ideas etc :)

[@shannoncole6425]

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!

[@amorenva]

hey Shannon, did u managed to solve this? thanks! same situation here.

[@CodeNight-dm2hv]

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

[@thecurious926]

is there any examples for one-time payment through the extension?

[@Mr.chandan]

Did u get it ? Pls share it it will be helpful

[@ideaai]

the same tutorial updated would be soooo great ! but at the same time its easy to follow and adapt the new code, so many thanks for this

[@ideaai]

it wasn't easy at all to adapt to the new code, but totally worth it!

[@maxshapovalov7010]

@@ideaai were you able to make the code work? I got everything figured out except for loading the cookie if the user is premium

[@ideaai]

@@maxshapovalov7010 yes, was hard but everything is working, if the checkout session is working for you and you can makw the fake payment then the user premium would be easy, be sure that when u make the price u write in the metadata firebaseRole and premium and then console.log the premium hook

[@TheAppliancePlug]

@@ideaai is there anyway I can see your code? I am currently trying to figure this out as well

[@ideaai]

i'm creating a Saas so my code is private, but if you want something explained in this video version v9 you tell me which file and i can help you :)

[@hesamalavi9]

A question, how would you create a customer portal using the implementations in your video?

[@JarrodWatts]

Hey Hesam - currently I'm working on doing the same thing in my project - hopefully I will be able to get back to you with how I implemented it soon!

[@hesamalavi9]

@@JarrodWatts That would be amazing. Right now I have implemented it, but the customer portal link is only accessible when the user first signs up and makes a purchase, and in session. As soon as they Log out, then sign back in again, I get an error saying customer param missing.

[@JarrodWatts]

@@hesamalavi9 Hey Hesam! Sorry it took me a while, I've just implemented this myself. I didn't encounter the problem that you're describing - I used Lee Robinsons documentation about implementing the customer portal found here, docs.react2025.com/payments/customer-portal let me know if that helps you out at all.

[@hesamalavi9]

@@JarrodWatts Thanks for letting me know, very much appreciate it. I used his as well, however I have also used others along the way, so something is not right, too many chefs as they say, haha. I decided to go with a one off payment for now which works. I had to create custom claims for it to work as the extension does not add StripeRole for the one off payments.

[@ZaarmTech]

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

[@zinx6809]

It will work as long as you make some settings in next js folder or something which is complicated. So using it this was is easier.

[@rahulkishan1934]

paypal is more promising for clients

[@user-vf5bm6vr8e]

What is the point of using `@stripe/stripe-js` ? When we add a document in user's checkout_sessions collection, the Stripe API returns a `url`. Can't we just use `window.location.href` with this url information ?

[@HKRazieL]

this all fine and dandy, thanks for the tutorial but it doesn't work with the newest version of firebase... might have added that somewhere just to save the trouble of researching that this is outdated...

[@zachrussell6791]

With very little adjustments it works. Is there any particular issue you're having?