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

hey everyone welcome back to small batch devs my name is austin and i'm elliott today we're looking at the firebase stripe subscription extension before we do that just real quick we need to plug that we started a podcast um it's small batch devs and it's probably on your podcast app of your choice so if that's something that interests you we're talking about more like uh personal topics while also drinking whiskey which we said we're gonna do on this youtube channel and we never did but we are doing it on the podcast so um go check us out there if you want some entertainment hopefully um in a podcast form if you find today's video helpful don't forget to leave the video a like and hit the subscribe button but without further ado let's get into it [Music] recently firebase has added some plugins in which we can use a stripe plugin in firebase so that's what we're covering today if you want to kind of take a step back and learn the beginning of stripe in a more traditional way of integrating with stripe you can check out that other video right up here um and there are some steps in that video that you'll need in order to complete the content of today's video so you might want to just check it out anyways as a refresher so moving right along what is this firebase stripe extension well it's the fastest way to get started with handling subscriptions and payments in your firebase web application so since it's a firebase extension firebase will go ahead and set up and manage a lot of the backend for you all you have to do is configure some starting points and the extension does the rest then we'll drop in a little bit of client code to bring it all together so you'll want to use the firebase stripe extension if you want to incorporate and set up subscription payments in your web application but don't want to take all the time to learn stripes api or set up your own cloud functions another great reason to use this extension is that stripe developed it it's already using their best practices and it's maintained by their team as stripe and firebase evolve so how does it work you may be asking yourself well to start off it connects to cloud firestore your firebase authentication and it also sets up a few cloud functions for you this extension is going to use cloud firestore to save customer data like which subscription they have firebase auth is utilized so that if a user signs up it actually can trigger a cloud function to create a customer account through stripe and some of the other cloud functions that are created will handle creating stripe checkout sessions updating subscription data for your customers as well as deleting any of your users if they are deleted from firebase it'll also delete them from your stripe database one thing you do need to keep in mind though is you will need to be on the firebase blaze plan and also strike does take a portion of your subscription payments so today we're going to be using the firebase console to install this extension but you can use the firebase cli to do it as well later in this tutorial you'll need a stripe account and a hosted terms of service and privacy policy before you can finish the stripe customer portal setup but the good news is there's a number of different services that you can use to generate these documents and you can host them on firebase so enough chit chat let's start walking through these configurations so we're here on the firebase extensions page and if we just scroll down to the bottom you can see run subscription payments with stripe that's the one we're going to be installing and if you hit learn more it'll tell you how the extension works as well as some of the resources created and what you'll be charged for if you're charged at all going past the free tier of the blaze plan so before we jump into installing the extension we're just going to take a quick moment to talk about stripe if you're unfamiliar with stripe stripe is a third-party payment service that manages your users credit card information their subscriptions to your services their purchase hitch history and a lot more so just like you have a database in firestore when you go into the stripe dashboard it will also have a database of all your customers your products your invoices and any other payment related data and the reason we mention this is because of the next few steps where we actually install the plugin or extension some of the options are going to be configured in the firebase database as well as the stripe database so we're now going to finally click the install button the first thing you'll need to do is if you have multiple firebase projects you'll have to select which project you want to install the extension on now it's going to tell you about all the things it's going to create and ask for permission to do so so we're just going to hit next this is a billing warning that says if you go past the free tier of firebase that it will charge you because you're on the blaze plan we're going to give stripe access to two of our firebase services which include the authentication and the cloud data store and this is just so that it can communicate between our firebase authentication so that it can create new stripe users as well as store customer and subscription data in our databases and now on to the configuration so under the configure extension portion of this form uh the first thing we have to do is choose a deployment location and you'll typically just want to leave this by the default whatever is already chosen for you the next field is for the products firestore location and this is just where stripe will actually save some information in your database about your different subscription plans the customer firestore location is where stripe will save information on a per customer basis like their specific subscriptions those subscription ids and things like that what's cool here is that if you already have a user collection where you used your firebase off user uids as the keys in that collection you can just give that location to stripe and it will merge in the subscription data and stripe data with your existing user documents the next field is asking us if we want to sync new users to stripe customers and cloud firestore and this is basically asking if we want to create a stripe customer whenever a new user is created in our firestore or if we want to wait until that user actually tries to check check out and make a transaction to then add them as a stripe customer so we're going to suggest to use sync no matter what because if you've got other stripe code in your client such as single purchases or any the other type of payment processing you'll be able to utilize the customer that's created immediately for these situations so we suggest using sync no matter what it provides the most flexibility and now we need our stripe api key with restricted access to our fibus account so let's head over to stripe and do that so as we mentioned earlier in this video um this would be a good point to maybe pause and go watch our other stripe video um because you obviously need to have a stripe account set up we already have one and we kind of walk through how to do that so you might want to go just check that out but if you already have a stripe account set up uh the next step here is to go to the developer api keys so we're going to do that and we're going to create a new restricted key here so we're going to give our key a name we're just going to call it firebase subscription extension key but you can call it whatever you want and we need to give it a few different rights here we're going to give it we're going to give it right access for customer we're going to give it right access for checkout sessions we're going to give it right access for customer portal and also that's it that's that's all that's the three that we need to give right access for and we also need to give read access for subscriptions here now that we have all the right set up for our key we're just going to hit create key at the bottom here and we'll have our key so one thing to note on this screen is that you do have a secret key and we just want to be thorough and let you know that you should never share this secret key with anyone unless they're on your development team of course and if you are publishing your project to github as a public repository you're going to want to make sure to take that secret key out of your code before you publish it because this is basically the keys to your stripe kingdom here so if you're wondering where or how to treat this secret key you can use the firebase configs to set a config that's hosted on firebase that will just reference a property and auto replace that property with this key so go ahead and dive into that if you are planning on posting this to a public git repository maybe we'll make a video on that soon who knows we might need to we probably will and of course the last step um so we don't forget you'll of course want to copy your newly created restricted key and head back over to your firebase configuration for the extension and paste in your api key so we're going to skip the last config as we can only set this up once the extension is installed to our firebase project so we're going to go ahead and hit install extension and wait a few minutes as it processes and sets everything up for us so once the extension is finished installing we can just go ahead and click on the get started button so obviously there's a lot of information on this page letting you know exactly how to use this extension so you gotta read it word for word or watch this tutorial and we'll tell you how to use a very small portion of it um but if you need something more in depth with stripe then you can read all of it but for now for now we'll keep it simple so we're going to keep going with setting up this extension as there's a few loose ends we need to tie up first we're gonna update our security rules and luckily all that code is laid out for us right here under the set your cloud firestore security rules section it's pretty aptly named so we're just gonna copy everything in between the uh match database database documents all the way down there you go and then we're gonna paste that into our firebase security rules firestore security rules so we've just updated our security rules with the recommended settings from that extension and now we're going to hop back over to the documentation next we need to hop back into the stripe dashboard and set up a web hook to talk between our cloud functions and our stripe api so now that we're back in our stripe dashboard we're going to add that web hook so to get to the web hooks section you're going to go to developers on the left and then web hooks under that and we're just going to hit add endpoint now stripe if we go back to the documentation will give us the url of that endpoint that it's set up for us so go ahead and copy this and then paste that in as the endpoint url next we need to select the events to send with this web hook and you can see in the documentation we're also told which events that we need to add so let's go ahead and add those so once you're done creating that end point go ahead and copy your web hook secret key and we're going to paste that back in our extension configuration you're going to click configure extension in the top right over here and then scroll all the way down and right where it says fill in form post installed that's where you're going to paste in that web hook secret key after you do that go ahead and click save in the top right and it's going to take a few more minutes to reconfigure and rebuild this extension so once your web hook is set up in the previous step we can now set up a subscription or product and stripe so we're here on the stripe dashboard again and we're on products and we're just going to add a new product for our subscription so if we hit the add product button let's give it a name it can be whatever you want it to be and if we scroll down we're going to give it a price and it's going to be the good price of four dollars and 20 cents of course it's going to be recurring and it's also going to be monthly so now we can go ahead and save our product our good product and now we're gonna go ahead and just copied our price id down here um because we're gonna need this in the upcoming steps so now if we hop back over to uh firebase and we head to the cloud firestore section you can see that we now have another little uh product here and that is our new sbd product good subscription so the next thing we need to do is set up our branding and settings for our customer checkout session as well as our customer portal so back in the stripe dashboard we're gonna go under settings and then we're gonna click on the customer portal settings and that's going to bring you to this screen where you can configure how your customer portal acts and your customer portal is just where your user can manage their credit card number their subscription data if they want to cancel or change subscriptions so the only settings we're going to change is if you scroll down to the bottom we're going to enable cancel subscriptions promo codes and payment methods right here and we already have these turned on because we tested this earlier obviously we're also going to enable the update subscriptions here and the pro rate subscription updates now before you can save this you will have to enter a terms of service and a privacy policy url so go ahead and enter those in as well as a default redirect link now the default redirect link is going to come into play when your user is done with their checkout session or their portal session when they are redirected to the stripe checkout session or portal session they're going to do their business and then when they're done they're going to go back to your website and that url that they're sent to is defined right here and so we just have our generic home page and then once you're done you can go ahead and hit save and your checkout session is now set up so one more thing you can do in the stripe dashboard is set up how your customer portal and checkout session look appearance wise and you can do that through this branding setting right here in the settings menu of the stripe dashboard so if you click on that you can change your icon your logo and your colors that are associated and you can see previews of how this will look with the checkout session and customer portal one last thing you'll need to do on the customer portal settings page is actually add the product that you want your users to be able to select to this added products and products section right here so that's going to wrap up all of the firebase console and stripe dashboard setup that we need to do thanks for bearing with us now we actually need to add a little bit of client code to our angular application so that our users can actually access these subscription and portal pages now it's finally time to code some stripe functionality into our app if you have not yet installed the stripe npm package in your application then you can run npm install at stripe slash stripe js i'll be right here something to keep in mind while developing this is that your user has to be signed in before they can see any of this functionality and that's because you know as we mentioned earlier in the episode a user has to be created in firestore and that will also create the stripe user account so they'll obviously need that stripe account before they can actually do anything with this stripe functionality so something we've gone ahead and done on our home page is add a button and this button is dependent on if your user is signed in for one um and if your user is signed in but not subscribed yet it will have a donate 4.20 button and if your user is signed in and does have a subscription then we'll have a manage account button so each of these buttons performs a different action the subscribe monthly is going to call our send to checkout method which is going to send our user to their specific checkout session to purchase a subscription while the manage account button is going to send the user to their customer portal so that they can manage their stripe related information so if we jump into the send to checkout code you can see we're doing a lot in this method so let's just break it down first we're going to obviously need the customer uid from the firebase authentication we're using an authentication service that gives us this but you can use just standard firebase sdk code to get the the firestore user you would once you have that you would we're going to call the users collection and then sub document into that specific user and then sub collection into their checkout sessions we're going to write the an object that has the price id as well as the success url and the cancel url to that collection location in firestore this price id is the id we told you to copy earlier from your subscription product the success and cancel urls are where your user will be sent depending on whether or not they successfully complete the payment or if they cancel out of it once we write to that firestore location a firestore cloud function will be triggered that will generate a checkout session id which will then write that id back to that firestore document location and we're now waiting on updates from that location once we have that session id we can use the stripe js library to then redirect the user to their checkout session by passing in that session id before you can use this redirect to checkout method you'll need to initialize stripe this is where you're going to put your public key from your stripe dashboard api keys settings menu once your user is sent to the checkout screen they can then make a purchase of your subscription which will then trigger the stripe web hook that we updated earlier which will trigger one of the cloud functions that the extension set up for us and it's going to write the subscription information to this user's location in firestore so it's going to store the fact that they have a subscription and that subscriptions information in firestore and that's how we can tell whether we need to show the buy subscription or manage account button on our homepage so now we're going to talk about the send customer portal method and as eliot mentioned earlier this is when your user already has a subscription and wants to manage their account uh through stripe so what this is gonna do is this is gonna call off to a cloud function that we have that the extension set up for us and after it calls that it's going to return a bit of information in this data object and basically we're just going to use that data objects url field to then redirect them to this this url that stripe created for your customer to manage their their account okay it is finally time to demo uh well kind of we kind of goofed a little bit earlier when we were configuring the extension we mentioned that we want sync but we did not turn on sync which we just found out so you need to turn on sync we also did not update our customer details we left it as customer but we were actually using users in our in our database so if you are using users then you'll need to update that we did not we are sorry we forgot we done goofed but once you have the update those uh everything should be good and it is finally demo time so if we take a look at our app so if we go ahead and log in with our small batch devs user we should have triggered all that functionality of the creation of the accounts and now we're going to go ahead and click the donate button one thing to keep in mind we don't have any spinner so we don't know um what's going on behind the scenes but this does take a few seconds to actually load the stripe page so yeah if you have a spinner here that would be a good implementation and a good ui ux experience but we do not so now we're in our stripe checkout session which means that we can test this functionality so as you can see we are in test mode which is something that you had to set up back in the stripe dashboard there's a toggle on the left hand side where you can switch to test mode and create all of these web hooks and products in test mode now we're in test mode and there is a test card that you can use to test payments and it's just 4-2 all the way down and then the month and year is just a future date so we can do a 1 23 and then the cbc is any three digit number name on the card can be anything and your zip code is just a six digit number and then now we can hit subscribe so now stripes processing that payment with that test card we'll get back a successful payment and then we'll be redirected back to our home page there we go and now we're redirected and now you can see our manage account button has appeared instead of our purchase subscription button and just to quickly demo the manage account button if we click on this and wait a few seconds and there we go it looks very similar to the checkout page same styles and everything and you can update anything that you want to update here through stripe so start making some money money money thank you very much for watching this video we definitely hope you enjoyed it and learned something if you did make sure to like the video subscribe to the channel i'm pretty sure oh we have a podcast it's the small branch devs podcast we hope you enjoyed we'll see you next time and thanks for watching peace

Channel: Small Batch Devs

Views: 8,665

Rating: 4.8823528 out of 5

Keywords: firebase stripe extension, stripe firebase extension, how to use firebase stripe extension, stripe subscription, firebase stripe angular, stripe firebase, use stripe with firebase, stripe cloud function, stripe dashboard, firebase cloud function with stripe, stripe webhook, stripe subscribe customer, stripe customer portal, stripe checkout session, stripe checkout session firebase, stripe customer portal firebase, firebase stripe

Id: 5rc0pe2qRjg

Length: 23min 8sec (1388 seconds)

Published: Sat Nov 14 2020