Lesson 8 - Stripe Payments
Create an App's Backend with AI📅 2024-12-17
Transcript
[00:00] in today's video we're going to learn how we can start leveraging stripe to start processing payments for application welcome back y'all today's video we're going to be using stripe to set up some payments for application so we can actually make some money for now though from the previous tutorial you already saw we are done with analytics we successfully connected ga4 toour application so byebye analytics we're going to use this and the ability for key events for conversion code later on let's jump over to payment and getting paid first things first go ahead and create a stripe account completely free in this video I'm going to show you how
[00:30] to set up everything and connect everything in the test environment the test environment and the Real Environment where someone can put a real credit card in and actually get charged money are basically the same thing so the steps and processes you're about to see you're going to be able to apply that to the real life situation regardless though the test environment is valuable as you're going to use it anyways when you're developing and creating your application to get started here I'm going to create a new Branch completely dedicated to purchasing get checkout dasb purchase time enter here we go as you know when you do major
[01:01] deployments or major features to your app you want to do a separate branch and then we'll merge to main once it all looks good this is so that if you really mess up you can always revert to the main branch and the code that works perfectly for now though we are going to go we're in the purchase time let's proceed I'm going to go and log in here sign up with Google and we currently have our nice little profile from the previous tutorials here so what we're going to do here is we're just going to add another UI element here that's going to allow the user to Simply purchase a package obviously when it comes to this tutorial and this entire series you probably already know this up to this point but I'm not leaning into design
[01:31] I'm not trying to make this look pretty I have a whole separate front end playlist for that and since you're in my school Community you can check it out it's building out a web app my purpose here is to purely show you how to connect the dots in the back end when it comes to conversion for money so let's do that I'll be right back you already know the Vibes sweetest House Mafia coffee let me get this UI element done as the point of this series is backend so we're back and before I show you this new UI element you are most likely going to get prompted with this error later in the tutorial so let's solve that now basically we need to install the dependency of stripe which allows us to
[02:03] access this external API to do so it's very simple and I wanted to show you this because if you ever run into errors with other types of dependencies it's typically mpm install and then whatever it's called so for us mpm install stripe stripe JS enter obviously make sure you're in the correct directory for me it's actual backend app that all looks good and I want to point out one other thing here as I've seen this in my comments when you see stuff like 16 vulnerabilities moderate hype don't worry about that your application is not broken this is standard software development practices so with that done I went ahead and created my nice little UI element here this this obviously
[02:35] isn't amazing but I will say this is better than some sites I've seen in the past as of recently here we go though we have the first stage done here in the sense that that there's a UI element here that we can click a Buton and for this context we're creating some type of conversion here where you pay $5 you get more abilities to promp here or ask more questions we're calling them messagely credits obviously you'll know your naming your reasons or how you're going to monetize your platform for now though we got our UI element which does nothing as of now so before I jump into the code over here and explain everything let me show you the exact prompt you should use
[03:06] within cursor AI Wier for whatever editor you're using currently maybe you're just a classic VSS code Chad gbt go ahead and go into the relevant file where you want this conversion event to happen so for example what we have is this little box right here in theory this could be a whole separate file maybe it's a popup whatever it may be go there select all of the code here and then put this we're going to go and say this I need help integrating stripe into my react dashboard. JS component please add a simple purchase button for a fixed $5 message lead plan using Stripes load stripe and Firebase Cloud functions
[03:38] ensure all variables and function names are unique keep the implementation straightforward and include basic air handling here's the situation especially if you're new go as simple as possible for your first time doing this don't like jump into the deep water make five subscription plans with 20 different prices no no no no start simple one purchase one time get it working once you build out the code in this context expanding past that becomes a lot easier I would hit enter here and proceed once you do that your code should look very similar to this if it doesn't cursor AI messed up help cursor AI out and simply
[04:09] put in very similar terminology of what I'm about to say right now first off we need to import stripe and the way we import stripe in the context of a dependency within this file is going to be import load stripe and then the dependency we downloaded together or installed next is going to be your stripe promise which will be found in your stripe dashboard which I'll show you here pretty soon and we're going to load this as an EnV variable as this is a high-risk variable we don't want to be public facing in theory your promise can be public facing but just go of good practices here put it in your EMV so scrolling all the way down to the front
[04:40] end little UI component we saw which is that little box you'll notice is that it's just simply within this little purchase section here and then it does the event or it does the function on click of handle purchase click anytime you want to see what that means or what it does when I click the button simply do this command F control F find it within your file and you'll see that there is two different references to it right here for handle purchase click which all it's doing is just running initial purchase and initial purchase is right here to make our code secure and scalable we'll obviously do the actual
[05:11] stripe logic within the back end of our app here but within the front end all we need to do is do an HTTP callable we're going to send a payload so right after bat we'll go ahead and call our python function here that's going to handle the purchase logic start payment session which kind of makes sense next you'll notice a reference to gclid here put that in this is going to be referenced in the next tutorial here which shows you how to do conversion code for the payload here it's not too important for this tutorial as I'm just showing you how to do a one time with a very specific purchase ID which will make more sense here but the idea is
[05:43] basically assuming that maybe you have a little bit more variables involved with your stripe logic here for example maybe there's a one time and a subscription if that's true then in our payload we would make that clear one time or subscription and then when we send that to our back end it'll be able to differentiate how to handle that logic depending on how it comes in that's why we like HTTP cbles because just think of it like hey you ever see Blue's Clues you know it's like hey we got male like that male is the HTTP cable receiving the data from the front end so this is Blue's Clues and
[06:15] you got male sometimes my brain wanders from here though we're going to use very specific dictation found within stripe which is going to be the idea of creating a session from that payload then we're going to have very standard stuff like creating the session ID the stripe stripe promise here don't worry we talking to AI it should know to add this if it doesn't then add it with all that added let's go ahead and add to our EMV file this public key it goes without saying that your test environment and your live environment when it comes to stripe are going to have two entirely different publish keys and secret keys
[06:45] so the keys you see over here are completely for test mode how do you know if you're in test mode first off you see that up there you see a little orange bar in order to get out of test mode you're just going to have to basically complete the profile as shown here that's standard stuff anyone can do that so once we at our dashboard though we got to get our publish key and our secret key now it's found right here but let me get a better UI I'm going to go to developers API Keys now here we're going to find two major things we're going to find our publish key which we're going to use in the front end and then we're going to find our Seeker key which we'll use in the back end for obvious reasons never share these and if you're like oh shoot I got Corbin's
[07:17] little publish key no I'm deleting this account okay so that doesn't exist anymore for now though you'll notice that in a test environment you're going to see test here in a real environment test won't be there so coming back over here and then going to our EMV which just found right up here I'm obviously going to Black this all out right there but we're going to go ahead and add this and then we're going to hit equal and then let's add it click it to copy it paste it so there you go once we add it here we should be good to go within our dashboard JJs as it's going to reference this when loading this code although
[07:48] right now the code is still not going to work why the code is not going to work still is because we need to create our back end so now that we have our front end working with all the relevant variables we need to do a stripe we're going to come here to python functions we're going to create a new file called purchase new file. py obviously in purchase. py is where we're going to do all our purchase code before we do that though let's create a test product here comeing over to our stripe account here if we come over to product catalog you'll notice that we have no products let's create a product how you structure this is completely dependent on the business you're running right so are you
[08:19] a subscription based business are you going to be a one-time purchase however it may be let's try it so we're going to do messagely credits here buy more prompts we can upload an image we'll upload this image of a dog we going do recurring or oneoff today's video is going to be oneoff we're going to set a fixed price of five and then we can add this product with this product added you'll see it up here and the reason we need to do that is we're going to reference this in our code specifically the product ID I'm back even though it's a couple seconds for you it's a whole new day for me when duty calls duty calls let's finish this tutorial one
[08:50] clarification real quick is that we do reference the product ID in other context when it comes to strip API for what we're doing today since we're only referencing the specific price ID of $5 all we need to do is simply come down here hit these three ellipses and then hit copy price ID which is a little cut off right now it should start with price underscore and then the ID so going back over to our front end here obviously we know we're sending the plan messagely the GCL ID when we do that in the next tutorial here and then we are referencing start payment session let's jump over to main pop high so the
[09:21] situation is this since I'm already plan on creating an entire playlist dedicated towards creating a software applications front end backend and then actually advertising it and getting consumers off of it I plan on structuring the back end more effectively in those tutorials as the whole purpose of this playlist that you're currently watching is more of just allowing you to connect the dots because once the dots are connected you know it just opens the door for you to do everything else when it comes to coding and learning so then what I'm going to do in this series to make it simple on your end is I'm going to combine all the relevant functions and
[09:52] put them in our main doy therefore you can kind of come to your main.py you don't get too confused with too many files and just go to the relevant function that you care about so since we are now dealing with stripe we need to install this as a dependency to do this we need to install this specifically within our python functions folder so let me show you with a fresh terminal window and then honestly go ahead and put this in your cheat sheet so you don't have to deal with this again in our cheat sheet we're going to do CD to actual backend app that's going to be the relevant folder we're in that's our directory that's typically what we go to for all of our commands but then we're
[10:23] going to do one further which is going to be python functions this is going to be your python folder hit enter once we are here we have to do one more line before we install strip and that's going to be within this folder we need to activate our Ven and to do so do this line Source vve bin activate once you do that you should see vve over there once you're here and you specifically see VM that's when we're going to do the stripe install command which will be pip install stripe hit enter there we go once it's installed this is going to
[10:53] circumnavigate a ton of errors that you may see in your emulator so step once's down this basically gives us the ability to access a third party like stripe in our code in main.py so once we have that done we need two major variables in our EMV obviously our stripe secret key which as we saw earlier if I go to API here developer API Keys it is found right here so simply hit reveal test key copy paste into your EMV naming it stripe secret key equal make sure when importing this and handling this though it is after the load. EMV and it is
[11:24] found right here right before the open AI API key so knowing all this let's go over the two major functions that are going to be encompassed in any type of stripe checkout specifically when dealing with software development so the first is going to be start payment session this is what we're referencing in our front end here with start payment session and as the name suggests basically this is going to open up the checkout so we can start checking out our specific product and all we're passing through the front end is simply the payload we're creating a stripe session with the specific price ID put here that's what I referenced earlier
[11:54] when I said to copy that price uncore ID and then the quantity amount amount so for us we're going to do one and then finally where should redirect so we'll do Local Host 3000 dasboard for a real application you would put apples.com dashboard Etc or you would set up some additional logic here where it would be able to understand whether it was in qway local or prod and then switch the URLs depending on that once that's done that's done so that's the situation with the first function we're just creating the checkout when the user converts they
[12:26] convert but nothing happens past that therefore we need these second function the second function is what's going to actually handle the data that we receive from stripe so I went ahead and just named it handle stripe web hook we'll need a variable that I'm going to show you how to get pretty soon here called stripe web hook secret this going to allow the software to identify that hey it's okay for us to receive this data and let stripe know that scrolling all the way down here we're going to go ahead and have the end goal of basically once a successful conversion occurs EG the user completes a checkout we're going to store a 100 credits in their fir store database this right here is
[12:57] unique so the idea here is that when we receive checkout session complete from stripe this will all make sense when you see it in play we can do whatever we want I mean Theory we could change the users's UI if we wanted to do that or we change a variable that already exists in the fire store this is all unique this is all custom therefore our version of like hey the user pays five bucks what do we do in our app is give them 100 credits in their fire store which then we could reference throughout the application so let's go ahead and get this all up and running and as I've encouraged before when speaking of
[13:28] cursor AI or handling this kind of information use the same terminology I'm currently speaking in also check out the git in the description when it's available you can simply copy all this code load it into a cursor AI chat and then be like hey this is good stripe code help me out once we have the Firebase emulator running you'll notice our functions right there generate completion handle strip web hook start payment session without running here let's get started sign off Google we're logged into our account here and obviously if we go to our Local Host reload this we go so far so good now
[13:58] with the connection from in the front and the connection in the back before we are going to test this fully we need to launch in our stripe a local web hook so in theory when we actually running this we're going to create an actual endpoint here but the logic is the same in the sense of how we call upon this underlying web hook so test to make sure all this is working we say add local listener we need to do two major steps here the first one is just stripe login so copy that open up another terminal simply paste that in go through authentication enter hit enter again you should see this message that means we currently allow access you will then see
[14:29] completed once that is done the next line we're going to do is stripe listen forward to and then a local host URL due to the fact that we are currently developing in Local Host local environment so we'll go ahead and use that same exact command but then we're going to provide the underlying URL strip listen forward to Local Host 50001 then your app name so from mine it's actual backend app the way you find your app name is going to either be in your Firebase or if you simply just come down to your firebase.com that's right there check it out in your
[15:00] EnV it's going to be the same one then we are doing essential one this is the server we're on so I'm assuming you have the same one you may not so make sure to check that in your Firebase and then finally handle stripe web hook and that is the way we named it here handle stripe web hook hit enter with this done it's going to provide our web hook secret which is right here so make sure to copy that that's probably going to be blurred out a little bit but just copy it starts with whs ecore huge string go ahead and name it stripe web hook secret put that in our EnV here and then just
[15:32] equals so as you can see here with it all blurred out it's stripe web hook secret W hsec string paste it okay it's all looking good we got completed completed let's try it so what we're looking for here basically is for us to load in these specific product complete a purchase and see 100 credits identified within our fire store purchase we are processing stage one is done we are in our nice little environment here me zoom in this is all fake as you can see with test mode there and then we need to provide test card numbers to find that just simply type in stripe test cards
[16:04] you're going to see something like this scroll down and then just choose any of these what i t i just choose a top one 4242 email can be anything so we'll just put in that the card information 4242 put in random numbers here we're talking anything y'all name random numb zip code random numbers we're just trying to test the feature right hit pay so this should redirect us to our dashboard and then on top of that let's check our fire store so the first part's good and the second part's good as well user uid they get those 100 credits on top of that if you come back to stripe you can see received
[16:34] events incurs here these are the events and how the payload messaging looks like when stripe receives it this is how they send the data to us and for us to identify alternative way of seeing this is going to be in that terminal that we set up earlier if you see a bunch of 200s that's really good that means it went through perfectly if you see any other air code like 500 obviously look at up check out Stripes documentation but everything should be good up to this point therefore we have successfully correlated a specific user and their specific purchase to their firestore data therefore from here we can
[17:04] reference that data point and use it how we will through our application now when structuring your database in this context of purchasing and stripe I encourage you to do two major things first thing have it so there's an entire collection dedicated towards this entire conversion event right we're going to do like user plan within user plan we should set up like relevant stripe variables that we care about but furthermore just stuff that is relevant to your platform so is your platform not necessarily a use per basis but rather a flat fee like CH gbt where it's 20 USD a month if so the logic here becomes very
[17:36] simple the user pays 20 bucks you switch a buling that says hey they're on Pro Plan and then in your entire front end UI you can simply have it so that when user uid has Pro Plan for plan type in their buling is true then proceed to changing the user interface to only give the pro features and that becomes available that way where if the free plan user comes comes in there and we do that same type of logic flow and it recognizes that it is not on the Pro Plan they won't be given the same additional features I'm going dive deeper into this topic and really good
[18:07] structuring in this topic when I create that Mega playlist where I really go from ground zero to ground Dot and creating a full-blown application everything above W in that manner for now though we have successfully set up stripe API within our web application to start getting paid let's go and check out the next video here which shows you how to take Google analytics pair that with web application and Google ads and see how we connect all three to start tracking conversions within our software sound good I'll see you in the next video