Firebase Stripe Extension WALKTHROUGH | How to use Firebase Stripe Subscription Extension

In this episode, we walk you through every step of integrating the new Firebase Stripe Subscription extension. It's the easiest way to get started with stripe subscriptions as this extension sets up the complete backend code for you. All that's left if some minor configuring in your Stripe Dashboard and adding a little bit of client code.
Github Repo for this project is here:
github.com/smallbatchdevs/sbd...
Check out our website for more great tutorials and content!
smallbatchdevs.com
Check out our Podcast!
open.spotify.com/show/36eNV2m...
KEEP UP with @smallbatchdevs on SOCIAL MEDIA!
Twitter: / smallbatchdevs
Instagram: / smallbatchdevs
Facebook: / small-batch-devs-11290...
Twitch: / smallbatchdevs
Check out all our Github Repositories for these episodes:
github.com/smallbatchdevs
00:00 Intro
00:53 What is the Firebase Stripe Extension
01:54 Why Use it?
02:18 How Does It Work?
03:01 Firebase Blaze Plan
03:12 Firebase Stripe Extension Overview
04:11 Stripe Intro / Stripe Overview
04:52 Configure the Firebase Stripe Extension
07:20 Get a Stripe Access Key
08:40 Don't share your secret Stripe key
09:40 More Extension Configuration
10:05 Getting Started with the Integrated Extension
10:32 Update Firebase Security Rules
11:05 Setup a Stripe Webhook
11:55 Rebuild the Firebase Stripe Extension
12:17 Setup a Stripe Product and a Stripe Subscription
13:20 Setup Stripe Customer Portal
14:51 Setup Stripe Branding
15:46 Add Stripe Functionality to Client Code
17:17 Sending a User to a Stripe Checkout Session
19:25 Sending a User to a Stripe Customer Portal
20:08 Reconfiguring the Extension
20:48 Demo!
20:55 Buy a Stripe Subscription
22:22 Manage Account with Stripe Customer Portal
22:48 Thanks for Watching!
#firebase #stripe #firebaseextension

[@MrLigugu]

This video has helped be integrate Stripe with two apps so far and always use it as a reference guide. Incredibly helpful and unique!

[@expeditionbasset]

I wish all tutorials were this good! Just got mine up and working in React ;). Thanks so much for posting this guys great work!

[@DavidBragg]

Absolute beasts, thanks for the video guys!

[@nimbupaani6335]

Wow perfectly explained each and every step.

[@gmacv3777]

Amazing content. Would love to see how the subscription data is stored before and after the subscription in the Cloud Firestore.

[@vinfragwarrior]

Couldn't have done it without you guys!!! PS. to see the cancellations updated in firestore while testing you need to have the portal settings to cancel immediately, took me ages to realise why it wasn't updating

[@SmallBatchDevs]

Nice job!! Thanks for sharing that tip! 🧠 And thanks for watching!

[@techjandro]

Very useful and I love the way you guys explained everything! :-)

[@SmallBatchDevs]

We're so glad you enjoyed it! 😊 Thanks for watching!

[@valterceijunior]

Perfect guys!!! Thank you. This video help me a lot.

[@grahamnemuir3801]

I'm not one for commenting on youtube video's but must say this tutorial was clear and insightful and has really helped me solve a massive headache with regards to managing user subscriptions thanks so much

[@SmallBatchDevs]

Thank you for watching!

[@suneelfreimuth396]

Super useful, thanks for making this

[@SmallBatchDevs]

Of course! Thanks for watching!

[@ChristianGenco]

I like how in the thumbnail dude on the left is holding two dollar bills folded up together to possibly look like it might be $4 and dude on the right is casually holding two $50 bills. It's me vs. the guy she tells me not to worry about.

[@varandpezeshkian6299]

Very thorough and neat, thank you

[@SmallBatchDevs]

We appreciate the feedback! Thank you for watching!

[@BlackCode7]

Thank you so much guys!

[@SmallBatchDevs]

Thank you for watching!

[@JacksonWelch]

This was super useful. Thank you

[@SmallBatchDevs]

You're welcome! 😁 Thanks for watching!

[@jakubtomas9154]

Hey guys, thank you very much, you saved me a lot of coding and lot of headache! very good job!

[@SmallBatchDevs]

That's awesome! We're so glad we could help out!! 😄

[@akashsrivastava4467]

Great Tutorial!! I would love to see the cancellation or pausing a subscription part in future

[@SmallBatchDevs]

That's a great idea! We'll look into that and possibly cover that in a future video. Thanks for watching 🙂

[@alejandrocoronado1131]

@@SmallBatchDevs please! great tutorial btw

[@gilbertwalker9862]

@@SmallBatchDevs +1 for that. That would be amazing!

[@sanesanyo]

Cancellation as well pausing subscription is already implemented in customer portal part so need to implement the logic. The extension will take care of everything.

[@ryannovakovic5046]

Wow. You such little subscribers but such good quality content. Great work

[@SmallBatchDevs]

Thanks! Yeah, we're getting there! Just glad we can help fellow programmers ☺️ Share our content if you think it'd help others

[@mycloudvip]

Great Video, my site however uses regular vanilla JS ... do you have any code sample for that? thanks! Great Content guys!

[@someone11233]

GREAT BRO ! you earned by subscribe just on 1st video

[@shannoncole6425]

Great video. I was hoping to see how to do the portal using node/next. Any suggestions. Newbie here.

[@alejandrocoronado1131]

you guys are awesome

[@gabo254-_-9]

You have very good content, don't stop plis 👌

[@SmallBatchDevs]

Thanks! We won’t :)

[@pheaktrakim1212]

That money can go into our visa account right sir ?

[@SmallBatchDevs]

Yes! You have to connect your bank account to Stripe and then you can transfer money between them.

[@pheaktrakim1212]

But your payment Id is different from me .

[@pheaktrakim1212]

So you can’t get some money from my bank account .

[@pingster]

nice video, would love to see this in redwoodjs or nextjs or vue.. a react implementation would go a long way

[@SmallBatchDevs]

We'll consider it! Would be interesting to compare frameworks. Thanks for watching!

[@meirgoldenberg5638]

@@SmallBatchDevs What would need to change in a react.js implementation?

[@ahtesamulhaque7507]

Great video! How about if you wanted to do one-time payments like on an e-commerce website?

[@hesamalavi9]

Thanks very much for the video. Have you had any issues going to the customer portal? I've found an issue, not sure if it is the same for you, but the customer portal is only available after the purchase, and once the customer signs out of the app, and then signs back in, I get "Unhandled Runtime Error Error: Missing required param: customer."

[@El_ii]

Love the Video, Keep up the good work you do!! Can I also use it only for checkout or do I need to create a subscription product?

[@SmallBatchDevs]

Hi Elisabeth! Thanks for the kind words! So this video is specific to subscriptions but we do cover the stripe invoice extension as well in another video. We do also have a video which teaches you how to use Stripe as more of a checkout tool but it isn’t a firebase extension! Hope that helps!

[@El_ii]

@@SmallBatchDevs Great, thanks and have a nice day.

[@MrCalacianu]

Hey guys, nice video. Do you know if you can create multiple subscription with this extension? I know you can create with Stripe's API

[@davidmimay]

is nice to see the documentation on video follow along! good work! btw timestamps on timeline are not working, i think change 00:00 to 0:00 should work.

[@SmallBatchDevs]

Hey! We're glad you enjoyed it! I think we've fixed the timestamps, thanks for the heads up!

[@mbaljeetsingh]

Hi Nice video. I have a query, If I need to create multiple plans (yearly/monthly). Do I have to create multiple products in stripe or create just one product with all the payment options. I'm planning to show as a pricing table (plan1, plan2, plan3) based on monthly as well as yearly.

[@TheRenaissanceTechnologist]

You'd create a product in the Stripe dashboard and then you can add multiple prices according to what you describe.

[@socialapp3231]

is it possible for you guys to explain14:45 - I have a react native app built using expo so I do not have a Default redirect URL. What should I enter for this?

[@vjhibrix]

Hello and thanks for the video. I don't fully understand what's the sense of cluttering the Firestore database with the "checkout_sessions" collection objects, because as far as I can see (also from the source code of the extension) all this data is never deleted so it will remain forever and progressively cluttering the database. What's the need of having this extra "checkout_sessions" collection? We only need to generate a checkout link for a particular puchase and that's it. I don't get the sense of all this logic and I found it not very convenient (also considering that all this transaction data is already accessible in the Stripe dashboard) but I'm maybe missing something from here.

[@luisharomtz]

Great video guys! Do you know if this extension will work with a Flutter web app? Like, if I use the Stripe checkout, would it still sync purchases either recurring or one time with my Firestore database?

[@SmallBatchDevs]

Great question! Using firebase extensions should work with any javascript project if you're using the Javascript Firebase SDK.

[@luisharomtz]

@@SmallBatchDevs I was able to get it working, but unable to use the callable function (incompatible libraries). Anyway, do you have any suggestion for one time donations? I know you can send an invoice with another extension, but it would be nicer to be able to send people to checkout for that invoice instead of mailing it. Best.

[@leonardopillay4200]

Hey, there great in-depth video, just want to find out how you're authentication observable and your observable to check the stripe subscription work. In short, I've been having auth guard problems🤣

[@SmallBatchDevs]

Hi Leonardo. Sorry for the delayed reply. So currently, we do not block access to anything based on if you are subscribed through Stripe or not. We only use auth guards to block administrative related pages for users that aren't a admin user. What you will probably need to do, is use the subscription details that should be saved in Firebase (per user) when a user subscribes to determine if they have access to view whatever it is you are trying to guard. This functionality is included in the cloud functions when the extension is installed. As far as a basic authentication observable you can take a look at one of our example repos like github.com/smallbatchdevs/27_stripe_checkout/blob/master/src/app/shared/services/authentication/auth.service.ts. Hopefully that helps!

[@leonardopillay4200]

@@SmallBatchDevs Hi there thank you for getting back to me. keep up the good work

[@SmallBatchDevs]

Thanks for the encouragement! ☺️ Keep us updated on your development progress!

[@danielwatson6529]

does anyone know how to just get the price. if ur doing a one time purchase for eg a tshirt, i have to go into a sub collection of prices??

[@ricndrs]

Thanks! How can we use the Stripe Customer Portal integrated in Webflow? I’m really stuck

[@SmallBatchDevs]

Hey thanks for watching! We're not familiar with webflow but we found these docs, maybe they'll help you! stripe.com/partners/webflow

[@sanesanyo]

I have a question regarding the cancellation part. So when I look at the your code, you are looking for ["trailing", "active"] in "status" field of subscription collection to set the subscription level of the user. Now my question is that when the user cancels their account in the customer portal, does "trailing" keyword is set automatically in the subscription collection in case the period the user has paid for has yet to expire. When I try it, I do not see any change in value, it still shows active. As we do not control the customer portal, it is difficult for me to set any click events to set these values. Any help would be appreciated. I want to avoid a situation where user has already cancelled but the status still shows "active". Thanks a lot in advance.

[@sanesanyo]

I got my answer from the extension developers.

[@azaeldrm]

Could you guys refer me to an implementation of this using React Native?

[@sulmana]

This video is great. Can you guys make a video in future with the following requirements. Right now i will be developing these requirements but i want to compare my solution with others later on Payment subscription for different user roles (5$ for simple user, 10$ for manager role, 15$ for company) recurring payment with payment settings using firebase GCP and react js with redux etc i know your video covers a lot of it but i just want to know for sure that what i will develop be the preferred solution or not

[@SmallBatchDevs]

Thanks for watching! We'll definitely consider making a design or architecture video in the future! For now your plan sounds good, our advice is to just get started and you'll figure it out on the way! No matter which direction you choose I guarantee you'll refactor and redesign at some point, that's just part of the process! ☺️

[@sulmana]

@@SmallBatchDevs indeed it is. I will try to post my solution on github so if you do make a video you can get some help or give some suggestions. Anyway peace out keep up the good work. Wish you get a lot of subs :)

[@SmallBatchDevs]

Thanks so much for the kind words!

[@sulmana]

um can you please take a look at this if easy for you, i am stuck on this. i am coding this in react but the basic stuff should be same i.imgur.com/CTFwlm4.png

[@sulmana]

Nevermind it was typo of checkout-session to checkout_session and i ran into another error of CORS when running the portal function and i fixed it like this i.imgur.com/B5Fp1zr.png

[@mnc12004]

Great Video Guys. Can I use the extension for a single, non recurring product and still get the stripe session and payment info in Firestore?

[@SmallBatchDevs]

Thanks Michael. Thats a good question! Unfortunately this extension is built for subscriptions so I don't think so unless you do something kind of hacky. There is also an extension for Invoices which would probably be more useful for what you are trying to accomplish. We have not looked too much into the Invoices extension yet but we do plan to in the near future. We also have this video kzbin.info/www/bejne/iX-8mY1_i8t0nMk which walks you through setting up stripe in your Firebase app but it does not use any extension to do so. That video is also for a single non-recurring product. Thanks again for watching and hopefully this helped!

[@mnc12004]

I've got your subscription code up and running in a live environment and it works OK. I added a couple of steps specific to the site I'm working on. Users might complain about the subscription bit and if I get too much push back I will change up to the invoice extension (although not ideal). I will go through your video on adding stripe for one off payments, but I would have to incorporate authentication so the user can see their transactions and the other things I'm adding into firestore. Thanks again for some top notch videos!

[@SmallBatchDevs]

Glad is working for you! Good luck! And please keep us updated! 😃

[@mnc12004]

@@SmallBatchDevs adding the invoice extension was relatively easy. I kept most of your code and created an add Invoice function. With the extension you can only use the Uid or email address of the logged in user. I chose the Uid because I use it is a reference throughout collections. Once the user clicks the pay now button, an invoice is emailed to the user and they action it that way. I only needed a few lines of code to get it done. Events I used were invoice.created, paid, paymentSuccessful, payment.unsuccesful, although I wasn't sure which ones to really use. All in all, I'm happy with the result and will now just add some content explaining the process before making it live.

[@SmallBatchDevs]

That’s awesome to hear! Keep up the good work :)

[@j-Dor]

I like your content on angular and firebase hopping for a full project on angular and firebase functions. I have a small doubt is it ok to push firebase ids and keys to Github and how can we protect firebase keys.I have a firebase angular project with GitHub actions enabled but I don't want to push my keys but still want my actions to work. is it possible?

[@SmallBatchDevs]

Hi! Check out our video on github actions to see how to keep your firebase ci token a secret kzbin.info/www/bejne/oWWuoJ6ke8qtZsU As far as other firebase api keys, you can store them in the firebase config on your server side. Keep in mind this is just for cloud functions using secret api keys. You shouldn't have to use any secret keys in your client code. Check out these docs firebase.google.com/docs/functions/config-env

[@j-Dor]

@@SmallBatchDevs actually my CI is working as expected but i don't want to expose my firebase keys which is in app.module.ts so i have added that file in git ignore that's why i am getting a build issue. what is the ideal way not to expose the firebase key but still I can use that file in the CI build process

[@SmallBatchDevs]

Ah I see what the issue is. Unfortunately I don't think there is a way to 100% hide these keys, but you may not need to. These links suggest that it's safe for those keys to be public, BUT this requires you to use the security rules for your databases and storage. firebase.google.com/docs/projects/learn-more#config-files-objects stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public support.google.com/firebase/answer/6400741 Check those links out and let us know if they helped!

[@j-Dor]

@@SmallBatchDevs Thank You

[@SmallBatchDevs]

You're welcome! Please let us know how it works out for you and what you decide to do!

[@florianmuhlbacher8594]

thank you guys, one question. Is it possible to pass data when the customer is created in the firestore? i need to pass some data to customer like tax_rates etc.? :-)

[@SmallBatchDevs]

That is a really good question! We will look into it

[@florianmuhlbacher8594]

@@SmallBatchDevs after reviewing the code from the extension i found a way to solve my issue. I do everything the same way like you except creating the customer. i create the customer over a fire function. IMPORTANT: the customer object must contain a field called "stripeId" otherwise the extension will overwrite the customer. And boom, thats it. :-)

[@amulyadubey3637]

Can we fire a function once the payment is completed? And how?

[@SmallBatchDevs]

Great Question! To fire a function once payment is completed, you'll need a webhook on the function you want to fire and then provide that webhook to Stripe in the same way we do in this video. When setting up that webhook you'll need to select the appropriate events for successful payment. I believe it's the "payment_intent.succeeded" event. Currently, you can't use this extension to set that up, so you'll have to set it up manually. You can find more info here: stripe.com/docs/payments/handling-payment-events Thanks for watching!

[@2608155002222]

Great

[@SmallBatchDevs]

Thank you and thanks for watching!

[@FreeMarketSwine]

Is the product supposed to show up automatically at 13:05? It didn't for me. I set the extension up to sync initially but did not have an existing products collection in Firestore.

[@FreeMarketSwine]

Adding the Firestore collections before setting up the webhook seems to do the trick.

[@truncat]

@@FreeMarketSwine Hey, I know this has been a year ago, but could you elaborate on how you fixed this? I am seeing the same thing, after setting this up, products aren't showing automatically.

[@FreeMarketSwine]

@@truncat I ended up abandoning the project I was working on probably not long after I made this comment, but did you try hitting "Start collection" under Firestore Database? Then you can add a products collection. If that's not it, then I'm not really sure.

[@MrJohAA]

Hello, is there a video to the "manage account" part ?

[@SmallBatchDevs]

Hi! As of right now, we don't have one. We may do one in the future. Thanks for watching! :)

[@MrJohAA]

​@@SmallBatchDevs It was helpfull thanks

[@hosstaba]

Hi guys, can you provide a link to the UI code? You never mentioned which module all that code should go into. Many thanks

[@SmallBatchDevs]

UI code? For which UI are you referring to?

[@hosstaba]

@@SmallBatchDevs The piece of code you wrote to tie everything together, to show Subscribe or Manage Subscription button. Does that go into a brand new Component? Many thanks

[@hosstaba]

@@SmallBatchDevs Also, what is the definitions for doesNothaveSubs$ boolean? How do you determine that? Apologies if the questions are stupid, but I'm relatively new to Angular, & know next to nothing about Stripe! Many many thanks for your help

[@hosstaba]

@@SmallBatchDevs And please provide the definition for currentUser$, again many many thanks

[@connallykendrick9350]

Hey guys.. a bit confused here. I just had an extension built and want to monetize it. Of course, Google no longer supports that or Auth. I'm having trouble finding info on how to do it. Is this a good solution? and if so, can I migrate/convert my extension to Firebase somehow? I've been searching with no success.

[@SmallBatchDevs]

Hi! If I understand correctly, you build a google chrome browser extension and want to monitize it. Unfortunately firebase extensions are different than chrome browser extensions. Firebase extensions are solely used in an application's codebase and not directly used by one of your app users. Whereas a chrome browser extension is a full user facing web application. So I don't think you'll be able to achieve what I assume you want to achieve with Firebase's extensions. If you do find a solution please let us know about it here!

[@connallykendrick9350]

@@SmallBatchDevs Thank you for the reply! I sure will

[@SmallBatchDevs]

You're welcome! And good luck! 😁

[@thomasventura6412]

Help! I changed out my keys for the live mode and now firebase isnt connecting the subscriptions, did anyone else have this problem?

[@RatherBeCancelledThanHandled]

Make sure you change your stripe api key and stripe web hook secret to the live mode keys . When in the stripe dashboard click the live toggle to get out of test and use those keys.

[@sarimsarimsarim]

is there a way for stripe to prevent a user from accidentally subscribing twice to the same product? or do i have to handle it client side by hiding the subscribe button? thanks!

[@SmallBatchDevs]

Great question! You'll have to handle that client side by hiding the subscribe button. Thanks for watching! 😊

[@sarimsarimsarim]

@@SmallBatchDevs great, thanks for the response!

[@sarimsarimsarim]

@@SmallBatchDevs Just another quick question, do you have any recommendations for a dev/prod setup with the Stripe extension? Thanks so much!

[@SmallBatchDevs]

Another great question! In Stripe, you can use a test mode for testing you're setup before using real money. We briefly cover in this Stripe video kzbin.info/www/bejne/iX-8mY1_i8t0nMk around 6 minutes in. This is to be used on your server side setup and then any client side actions you take will reflect that test mode due to that test API key. Once you're ready to go live any products or subscriptions and web hooks that you made in your test mode will need to be copied into your love mode and all those product ids updated accordingly in your codebase. More documentation info here: stripe.com/docs/keys

[@sarimsarimsarim]

@@SmallBatchDevs Awesome! Sorry for all the back and forth, but is there an easy way to switch the test and live keys on the Firebase Extension? Currently I finished testing my dev code, so now i need to update the Extension with the live webhook secret and the stripe live key. But there might be new features I want to develop in test mode. Would it be easier for me to set up two separate Firebase projects? Thank you!

[@Selem557]

The sendToCustomerPortal() is returning this error: Uncaught (in promise): Error: internal Error: internal at new HttpsErrorImpl

[@SmallBatchDevs]

Hey! Can you provide more details around that error? I'm not sure what it means from the snippet you provided.

[@Selem557]

@@SmallBatchDevs It was about the region I just had to add functions('europe-west1') to the call and upgrade firebase from 7.22.0 to 7.24 now everything works great, cool video btw guys, and keep on going!!

[@SmallBatchDevs]

Glad to hear you got it working! Nice job!

[@allymccutcheon6525]

This video would be better with two pink shirts