Stripe & Firebase Tutorial • Add Payments To Your NextJS App

Want to collect monthly payments from your app or online business?
In this project, we will implement a monthly subscription payment system for our NextJS web app. We'll be using Stripe as our payment processor, and integrate it with Google Firebase for user authentication.
🛠️ GitHub/Code: github.com/pixegami/stripe-fi...
👉 Tech Stack
🔗 Firebase: firebase.google.com/
🔗 Stripe: stripe.com/
🔗 NextJS: nextjs.org/
🎬 Chapters
00:00 Introduction
01:52 Project Architecture
04:04 Authentication With Firebase
12:27 Setting Up Stripe For Payments
21:51 Adding a Checkout Session
29:17 How To Check Subscription Status
32:18 Adding Stripe Account Management
34:47 Wrapping Up

[@momakinde4817]

My bro, I'll definitely dance at your wedding.....You saved me from insanity, been working on my Firestore / database auth and subscriptions for almost 3 days no sleep.. Thanks a lot.. You're the MAN OF THE PEOPLE......

[@pixegami]

Thank you :) I could definitely use a wedding dancer 😂

[@realcodeninja]

lol 😂

[@kanishkkamalvanshi5264]

Oh my god, i spent ~12 hours/day the past 3 days trying to setup stripe payments with my webapp. The sdks are so annoying. This video is a god send. You're the GOAT man!! 🙏🙏🙏

[@pixegami]

Glad it helped!

[@davistong]

Your video let me monetize my project in just 5 days. Thanks a bunch. Genuinely one of the best coding videos I have ever seen (and I've seen a lot)

[@pixegami]

Good work! Thanks, I'm glad it helped.

[@EFTOBEATZ]

the info about the outdated sdk saved my project for my resume, thank you !

[@thomasf941]

Hi pixegami! Thank you for this video, it has been incredibly helpful for my project! Just one thing, the 'Run Payments with Stripe' extension by Stripe uses Node.js 14 which is deprecated and won't work after the 30th of January (Not accepted anymore by Google). From my understanding Stripe doesn't maintain the extension anymore. This exact same extension is now maintained by Invertase, so the right extension to install would be 'Run Payments with Stripe' by Invertase which uses Node.js 18. It is configurable the exact same way as the one created by Stripe. Thank you again for this video.

[@duckblast]

Hi Thomas, Thanks for the heads up. I'm actually trying to follow this tutorial right now -- is the only difference essentially the Node version, and in terms of functionality the two extensions are the same (same functions, same setup, etc.?). Thanks -- complete noob just trying to get things up and running 🤣.

[@FerdiSancak]

I spent the day researching how to integrate Stripe safely and bumped into the extension. For me, it does not work, nor does the package seem to be maintained on a level I feel comfortable using in a production environment. Too many old critical issues that are not being solved. I would recommend to study how the extension integrates Stripe with Firebase and then do it yourself with Cloud Functions. It's more work, but will be more reliable.

[@pixegami]

Great call out. I really feel Stripe should have continued to maintain that version of the extension, so it's really kind of a drag to have to use a different provide or implement it ourselves. In any case, thank you for calling this out for anyone trying to follow this tutorial. The issue with highly integrated tech tutorials is that the world changes so fast underneath, it's inevitable these things go stale from time to time :(

[@benediktgirz]

Great job with the tutorial! You have the gift to really show, tell and explain. I am very grateful for your effort, it helped me loads.

[@pixegami]

Thank you! I appreciate your kind words :)

[@user-mz7sh6mu3t]

Nice one buddy 👍 It's definitely one of those videos where one KZbin like is just not enough 😁

[@pixegami]

Glad you enjoyed it :)

[@garylai5174]

Thank you this is super helpful! Couldn't have built my app without you

[@pixegami]

Glad to hear that :)

[@garylai5174]

@@pixegami I have a question. I saw that the Firebase security rules that were set up is something like ```rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /customers/{uid} { allow read: if request.auth.uid == uid; match /checkout_sessions/{id} { allow read, write: if request.auth.uid == uid; } match /subscriptions/{id} { allow read: if request.auth.uid == uid; } match /payments/{id} { allow read: if request.auth.uid == uid; } } match /products/{id} { allow read: if true; match /prices/{id} { allow read: if true; } match /tax_rates/{id} { allow read: if true; } } } }``` Can't an authenticated user send a Firebase request from the browser and deliberately alter their own data in /checkout_sessions or /subscriptions or /payments in Firebase so that they show up as paid even though they haven't?

[@teflonhav]

thank you so much for this video. you saved me a ton a time and frustration. you have a knack for this. keep going!

[@pixegami]

Glad to hear it helped :)

[@user-uo6pc8jn2f]

Thank you for adding the payment system. 👍

[@pixegami]

You're welcome :) Hope it helps.

[@Alankid2016]

This is what I am looking for thank you!

[@user-ov4vo5ws4p]

Thank you and very well done! You saved me a ton of time! Cheers! 🤙🏽

[@pixegami]

Glad it helped!

[@cooldark123]

Friendly note to developers: -Testing local development requires you to keep changing the secret keys, there’s no way to declare Test Secret keys, and Live keys -Extension advises to have two Firebase projects one for testing & one for Production,

[@pixegami]

Thanks for sharing this!

[@HKRazieL]

This is the only video that is up to date... learning from here that the damn documentation is outdated is soul crushing... there go many hours wasted trying to figure out how to do this bullshit but somehow youtube doesn't recommend this video when you search for it...

[@pixegami]

Glad it helped :)

[@deletrious]

Good job man!

[@reactionchamber]

Thanks man!! Helped me a ton.

[@pixegami]

Glad to hear it!

[@mateusmachry4889]

awesome tutorial. thank you

[@pixegami]

Glad you liked it! Thanks :)

[@matthewpopov5175]

Definitely helped make this process a lot easier. For anyone else who has this problem, the first time I clicked the install extension button I received an error indicating that I did not have the correct IAM roles in google cloud. I hit the retry install button and it installed correctly.

[@pixegami]

Thanks for sharing the error and solution :)

[@MeezaSquad]

Saved my Day!

[@RatherBeCancelledThanHandled]

Awesome thanks for sharing !

[@pixegami]

Thanks for watching!

[@mikem-zz4ui]

So helpful I tipped this dude!🎉

[@mikem-zz4ui]

hey so my 'what's next' question is why is firebase cli giving me all kinds of unsolvable errors when i try to deploy this test project? Is the assumption that we don't usre firestore or that we use github? can this work on a static server?

[@pixegami]

What errors are you getting? This example is using a static NextJS website, so it should work with a static site, which will talk to your Firebase/Stripe backend.

[@TrevorWestin]

It would be nice to see an updated video using the new invertase/stripe-firebase-extensions extension

[@nitinkaushik5144]

Good work

[@pixegami]

Thank you!

[@suresranathunga]

Thank u

[@eriksonmurrugarra7715]

Thank you man!! Amazing video. Something that happened to me is that the customers collection was not created, so I had to enable "Sync" for customers between firebase and Stripe.

[@pixegami]

Thanks! As for the customer collection not being created - do you think it could just be a "lazy initialization" on the first call? Or I wonder if I just forgot to mention the "Sync" part in the video.

[@MustafaAli-xj6lq]

I am facing the same problem, where do you sync that?

[@MustafaAli-xj6lq]

Never Mind, found it, to whoever facing the same issue, reconfigure the extension and change sync new user from "Do not Sync" to "Sync"

[@matkomilic8382]

If anybody doesnt see customers in firestore u must enable sync for customers in extesion settings.

[@sam00305]

Hi, just wondering what i would do for the outdated SDK since i only need a one time purchase. Thanks.

[@AliceWest-gb7mj]

Thanks so much for this video extremely helpful and informative. I am having a slight issue with receiving the payment and subscription collection in Firestore. I believe I have the webhook configured correctly, I even enabled all just in case this was an issue, but I still seem to only be receiving checkout_sessions in my user's collection. Thanks.

[@pixegami]

Hmm, sorry to hear that - it's been a while since I made this video so I'm not quite sure how to debug this, but I do remember a few other comments mentioning something similar (and I think there were solutions in some of them). I think it could be that the extension or API had changed since the video was made.

[@JacksonRossi]

Awesome job man! Do you think I can use this video to integrate in a react native app using firebase?

[@pixegami]

I haven't used React Native myself yet, but I think it should be possible. However I think that native mobile apps will usually have their own payment flow (e.g. via Apple).

[@lucas_george_]

Hey Man very good video ! I just have a question, when you have multiple subscription products, how do you manage the update operation ? Is there a built in method to cancel the previous subscription ? Or to balance the payment amount ? Because right now it just create another checkout session and accumulate the subscriptions. (Btw I love Sydney (I'm French))

[@pixegami]

Bon Jour! I didn't get too deep into how Stripe works so I can't answer that question. But I'm sure there's a way to manage it. But before you narrow in on the specifics of the problem (e.g. balance the payment amount) you need to think about how you want to model your subscriptions. Are they separate products? Are they separate tiers of subscription of the same product? I'm sure Stripe will have something that works for you, then it's just a matter of integrating it with your backend. Good luck!

[@itsbrianstever]

I'm trying to solve this problem right now too - any luck with finding a solution? (Great video by the way!)

[@lucas_george_]

​@@itsbrianstever Yes, what I've done is that the first time a client pays for a plan, I redirect them to the checkout session. After that, I never use the checkout session again. Whenever the client wants to change or purchase a new plan, I direct them to the customer portal. There, they can make changes, cancel, or switch plans, all managed by Stripe (refunds, prorated charges, difference calculations, etc.). Ideally, it would be best to use the customer portal at all times, but for some reason, the available products don't appear on the portal until after the client has made their first purchase.

[@itsbrianstever]

@@lucas_george_ thanks, this is great! Were you able to query the firestore db to determine which plan the user has. I'm struggling to find a way to query the data to determine what type of user is logged in so I can display different content pending that status. (hopefully this makes sense😅)

[@Pan_Policjant]

You have everything in colors: functions, brackets... What is called this colorfull extension in vs code?

[@pixegami]

In VSCode, I use the "Monokai Pro" theme for my colors.

[@wlcft]

I have a problem. When I run the getPortalUrl function and for example cancel my subscription, in stripe the changes are applied but not in firebase. Then my application is not able to realize that this subscription has been cancelled.

[@pixegami]

Hmm, if I remember correctly, cancelling a sub will still need the sub active until the current period/month expires (but it just won't renew). Is that not the case?

[@user-rx7sy8ou1q]

Congrats for your video but i have a problem. How can i put the rules fron the extension in the rules tab of cloud firestore if my project is almost finished. I mean there are rules that i can't delete and when i try to put both two there is an error. Please can you help me with this? Thanks

[@pixegami]

Hmm, it doesn't let you replace the existing rule? What does the error say?

[@7Budyn7]

Hi, I'm looking for solution with one-time payment to make a hold on card. I want to be sure before going to next step in my app that custorem have sufficient funds. Can You help?

[@pixegami]

Sorry, I haven't looked into how to do something like that yet :( I'm sure there's a use-case for it in Stripe's doc somewhere though. And thanks for suggesting this as a topic.

[@jcjenkins6417]

Can you show how to do this in flutterflow??

[@AMakYu]

It seems that this isn't working anymore. I think something may have changed with the extension. I was following along just fine until I clicked "upgrade to premium". It ended up giving this error: "Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received" I did some troubleshooting and console.log(url) to see what was happening, and it came up undefined. I even cloned the final project from the repo, replaced everything with my own credentials, and the same thing happened. Is the extension just out of date or do I perhaps have something wrong in my firebase or stripe configs? I triple check everything, and it looked fine to me. :(

[@pixegami]

Hmm, that's sad :( I think the APIs or the client libraries must have changed and become out of sync (I think the Firebase API, Stripe API and the extension aren't really being kept up to date). I'll just have to re-do this project again in the future with the updated APIs...

[@AMakYu]

@@pixegami Unfortunate. Cause you did a really good job with the video! If you do redo it, I'll look forward to checking that out. 👍

[@faizansohail5855]

Hello can you tell how to update package price and 2 things init 1) it should only apply for new users and old users will still get old price 2) prices should apply from next month for current user how to achieve that

[@pixegami]

My skills with Stripe are still pretty basic so I can't answer that in detail yet. I'd probably recommend asking ChatGPT, or looking through Stripe docs as a starting point: stripe.com/docs

[@AndreKordasti]

Great video! Followed through all the steps. Couldnt get it to work really. No firestore data and empty in webhook. Is there anyone who have done this without React? I am using HTML, CSS, Vanilla JS & Node.js. I am using the that Stripe themself creates for you in their product.

[@pixegami]

I've heard the client SDKs can be a bit outdated, so it might be an issue with the extension :(

[@AndreKordasti]

Is there any way I can have your time for an hour or 2? Ive been stuck for more than a month as you notice, still cant get it to work...@@pixegami

[@SAgbutable]

how to use one time pay?

[@danhamilton6169]

How do you listen for the web hooks?? Thanks!

[@pixegami]

I think in this case, the extension manages all of that for you. But you can always use the official Stripe Javascript SDK/client directly if you want more control.

[@user-zv2jo5rp4k]

L E G E N D

[@pixegami]

T H A N K Y O U ! :)

[@alexlindgren1]

I'm not seeing any subscriptoins recorded in the database, even though the payment was successfull in the test envirnoment...any ideas? Only seeing the checkout_sesisons and payments, and I'm using the general secret key, so shouldn't be any issues to to lack of permissions for the API... LOL. Nevermind. Just scrolling down in the UI in firebase revealed the subscription key.

[@pixegami]

Glad you find it! I actually find the Firebase UI a bit confusing too since I don't use it too often.

[@we360asia2]

Thanks very much for your video, but actually, when you click on the link, go to strip portal, and cancel the plan, it's actually not modifying the data in firestore, so on the webapp, the value of isPremium is still true :( do you know how to fix this ?

[@pixegami]

I think that might be working as intended. Is there another field that indicates when the subscription will end? For example, if your plan is 30 days, and you cancel the subscription after 10 days, you should still have "isPremium" for another 20 days until the plan runs out.

[@pewpeww7233]

For anyone experiencing this issue of canceling your subscription, on the stripe dashboard go to the settings => Billing => Customer Portal. From there you can edit your cancellations to be effective immediately upon canceling. Furthermore, I've seen many comments say that the getPortalUrl function isnt working. From that same Customer Portal page, just press save changes and everything should be working smoothly! Hope this helps

[@we360asia2]

@@pixegami Thanks for your replay, yes it was the case. Now i"ve got another question : My stripe account has been validated (Company process, etc...) so i need to switch to production mode. Is it normal that i need to un install and re install the extension ? I can not modify the extension as i can not change the key on it

[@we360asia2]

My mistake, actually i can not modify it because it was hiden. But twhen i reveal it (on firebase), i can modify it :)

[@DjBillman]

I have a question. I’m also trying to add a way users can login with email and password but no matter what I do I always get an error when I deploy. Any ideas on how to add an email auth login with firebase

[@pixegami]

I haven't really tried using the email/password sign in just because I don't want to manage my own user system. But here's the documentation for it: firebase.google.com/docs/auth/web/password-auth What's the error you are seeing?

[@hookerhillstudios]

will this update the database as inactive sub if they do not pay or cancel?

[@pixegami]

Yes, I believe the Stripe-Firebase integration does that for you automatically.

[@YoYoYo-dq7yx]

hey seems like there is a conflict with the client components and using async await

[@pixegami]

Hmm, are you using the same client version in the video/code? I know they can update/change them time to time, so it might not match.

[@TamNguyen-tj8hc]

How can we save the customer credit card for future usage?

[@pixegami]

I'm not sure, but I feel that'll be something between the user and Stripe.

[@CerebralDad]

How can you get this running with native web apps ie ionic capacitor?

[@pixegami]

I think you'd probably just have to swap out the NextJS and React specific libraries for general Javascript SDKs to call Firebase with. Most of the logic happens server-side, and Firebase as a pure JS library (it's just a little less convenient than the React/NextJS ones): firebase.google.com/docs/reference/js

[@amitay1599]

Setting a trial?

[@Alankid2016]

Can you show us how to add many payments in one single checkout? thank you!!!

[@pixegami]

I'll have to figure that out myself first. But do you mean like buying one-off items (like ecommerce), or buying multiple subscriptions?

[@Alankid2016]

@@pixegami yes e-commerce or multiple subscription items also count! Thank you

[@pixegami]

@@Alankid2016 I don't know the answer, so I asked ChatGPT. Here's the response: Stripe primarily handles payments as individual transactions rather than combining multiple payments into a single checkout. Each payment is typically processed as a separate charge. However, you can achieve the effect of multiple payments in a single checkout by implementing a custom solution.

[@9716664106]

Hey, Thanks for putting up certainly one of the best video. Due to some reason there is no subscription being created at the firebase database but on stripe I can webhook is firing the event fine and receiving status as true. I checked everytime 2-3 times but subscription object is not getting populated. Can you please help me ?

[@aaloktanwar269]

Same problem for me too

[@galaxyrespect9499]

Same for me as well, were you ever able to resolve it?

[@pixegami]

Hmm, this is after you've 'paid' (using a test card) to pay for a subscription? Do you see any error messages in the console or logs?

[@MustafaAli-xj6lq]

Same foe me too

[@MustafaAli-xj6lq]

After much experiment, I found that if you use custom secret key from stripe, then it works just fine