Stripe Payments API for Subscriptions Tutorial

in this video I'm going to show you how to use the new stripe payments API specifically for subscriptions I'm going to walk through the whole process I'll show you in your stripe account how to create a subscription how to create a price and then I'm just going to use vanilla JavaScript HTML and node.js to explain how to create a session how to handle that session and how to update your user information in the process to show that yes they are a paying subscriber now the first thing you'll want to do is have have a stripe account you'll want to make sure you're in test mode whenever you're uh just testing out the process or it will actually charge your card you can click on this developer section you'll need the API Keys you want to get this secret key you can go ahead and save that to an environment variable in your project the other thing you'll want to do if you're creating a subscription is click this more button over here come down to product catalog click this add product button you can you can name it whatever you want I'll just say my subscription you can give it a description this is my subscription description you can provide an image to go along with the subscription I'll just pick a random image you want to say if this is recurring or one off I'm going to say it's recurring and I'll just say $1 so over here it gives you preview a quantity of one equals $1 it's good to give it a value of one because then it gives you more control whenever you're creating the subscription you can just increase the quantity by a dollar so even if it's like $100 a month or something you could just add a quantity of 100 and it will automatically update to be $100 a month I'm going to click add product then you can see your product should appear here you can click on the product and the thing we're looking for is this price ID this is another thing you'll need for your project so you can copy this and save it to another environment variable and that's all the information you need to get started I'll go ahead and go to my project I just have a basic node.js server uh that uses Express and I have that at the root of my project and I have a client folder for the client code on my client side I just have a checkout button and a script to a script.js file and this is what that file looks like it just has a post request to uh create checkout session and obviously when you're live you'll want to change the uh URL to be whatever your url is my server is on Local Host 440 and what's going to happen is it is going to return a URL that is going to be used to take you to the stripe checkout session and I'll just show you what that looks like in a moment I'll put a link to that in the description below one of the first things you'll want to do on your server is create a const stripe and for the value of that say require stripe string with your stripe private key remember how I said in your stripe account in Developers for API Keys you'll need that secret key well that goes right here that's where that stripe private key goes now you're able to use the stripe API just using the variable stripe this is my create checkout session API endpoint the first thing you need to do is create a session this is very important you need to start creating sessions first before you do anything with the stripe payments API just so it'll work all around the world in all circumstances so to do that you can say const session equals await stripe. checkout. sessions. create and these are the four main things you need inside of your session create object you need a success URL this is the URL that you want the user to go to after they successfully pay for the product and that can be any link you want you need a cancel URL this isn't absolutely required but if you want a back button in your uh stripe checkout session you should put this here or there will not be a back button so you'll probably want to put a cancel URL say where you would like uh the user to be taken to if they cancel and here are a couple of the line items the first one is price remember in your uh stripe account how I had you click on the product you created and then you can come down here and copy your price ID right here it'll start with the word price you put that right here and you'll notice I imported all myv variables up here so I'm just using their names directly but that is where you would put the stri price ID next you would say the quantity remember we made it $1 so that it would be easy to update the quantity so my quantity I'm just saying I have a const up here where I say 25 just the number 25 cuz I want it to be $25 a month the next thing you need to to put is mode this can either be payment which if it's a payment it's going to be a one-time payment so it will not become a subscription so if you want it to be a subscription you should put subscription which that's what I'm going to do in this session after you run this code you'll receive a session object the things we'll be interested in is I'll go ahead and get the whole session for you so you can see what it looks like but we want the session ID and the session URL so session. session. URL especially the reason is you want to save the session ID to the user's data in the database in your database for the user row you want to make sure after this is done first get the session ID and however your database is structured you'll want to save your session ID to the user in your database because you'll need this after the user successfully goes through the checkout process that'll be the only way way that you'll be able to know if the payment was successful or not so it's really important you should get the session ID and save it to the user however you do that the other thing you need is the session. URL in your return return an object with the value of url session. url this URL is the place that the user needs to be taken to to provide their payment information and you'll notice back on our front end code in the script.js file uh after posting to create checkout session in the return we get the URL and we take the user to that URL so this session is going to create a unique URL that will be used to take the user to that place to provide their credit card information and so let's go ahead and walk through this code just go ahead and run this function just so you can see what happens so here's my front en code it's just a simple checkout button I'm going to click check out and show you what happens on the back end so it went ahead and ran this stripe code here it created a session and this is what a session object looks like right here it has a bunch of values and again the two things you really interested in is the ID here which you should save to your users's database row and then this URL here whenever you go to this URL that's the session that is being returned and so that URL is being returned but always remember again make sure to save your session ID first before you return something but we returned the URL and over here in our front end code we said window.location equals URL and you'll notice now what happened is and I'll go ahead and cancel and just show it again click check out it automatically takes you to a place like this and you'll notice that cancel back button is there because we provided a cancel URL and that took us back to to our checkout page the way to use the test form is you can provide whatever email you want and just use the numbers 42 42 42 for everything and then it will work these numbers here don't matter just the card number matters click subscribe and you'll notice it took us back to the success URL this is the success URL and you'll notice it's just the homepage I just took them back to the homepage but if you have a different success URL it'll take you to wherever ever you have set it at this point what you would need to do is you will need to have saved the user's user ID something like that however you reference your user whenever it's taken back to the success page you'll need to run some sort of function automatically and it can trigger something like uh I created an endpoint called stripe session and your goal with running this git function is to check was the session successful did the user successfully pay or did they not successfully pay and so you'll need to send something like a user ID your first step will be to use however you connect to your database get your user and the things you'll want from your user is the stripe session ID that remember you save that you're supposed to save that up here get your stripe session ID check if they're a paying subscriber already or not and then if they are not a paying subscriber and they have a session ID you can go on to check the session to see if it was successful so noticed I I first here I check if there's no session ID at all then I just want to return a fail or if the user's already paying I want to return a fail so that this next part doesn't run but if there is a session ID and paid sub is fail then you can go on to retrieve the session the way that works is you can do const session equals await stripe. checkout. sessions. retrieve and the value here needs to be the stripe session ID that you saved that you got from your original post up here this session ID that would go here and the result of the session if you retrieve a session it would give you another gigantic object but the values this is an example result the values you're interested in are the customer this is a way to know uh just in stripe they give each customer an ID so this would be a customer ID you might want to save this to the user's database just so you have record of it uh and the main main thing is this status you want to see if the status was complete if the status equals complete that means the payment was successful and you can go ahead and update the user's database to say this is a paying subscriber they successfully paid you might also want to save the subscription ID that they give you you so whenever you run this kind of code if you said mode subscription then it will create a subscription ID this is sometimes useful if you want to update the subscription in the future you'll need this subscription ID so it's smart to save this subscription ID to the user in your database as well and then you can run whatever you want from then on out to show that this is a paying user this is just an example I say if there is a session object and the session. status is equal to complete then I want to update the user to say it's a a true paying subscriber and obviously again you probably want to save the customer ID the subscription ID as well and then on the front end after you automatically run that code if it was all successful then you don't have to show the checkout button anymore you can just show them your app from that point on I hope that was helpful I'll provide the code in the description below I'll also provide links to the stripe documentation in the description below and one final thing before I go is I wanted to mention next chat. a it is the sponsor of this video next chat. a works just like chat gbt except it's more secure it's kind of like the Duck Duck Go of chat GPT duck Dogo works like Google but it's private it doesn't track your data next chat. is the same way it works just like chat GPT I use it almost every single day but it's secure it does not keep record of your conversations it's literally impossible for next chat to have access to your conversations which is very valuable when you're using proprietary code you can feel safe knowing that next chat will not save your data you'll notice it works just like chat gbt it's got the same great service but like I said it doesn't track the conversations it also has some additional cool features you can search through your uh conversations so say I wanted to find an API or something it'll return all the conversations about apis you can also create folders and save your conversations inside of those folders you can also create prompts uh this is something I use a lot in projects I like to save say I'm working on a nextjs app or something like that I could save uh the template colors and things like that so I'm not always having to tell chat GPT what technology I'm using what branding I'm using I can just have a uh prompt saved I can go to that prompt and then start a conversation this is my conversation and then it'll start returning results thank you for watching this video don't forget to like subscribe and hit the Bell icon if you'd like to see more content like this thanks for watching and I'll see you next time

Channel: Native Notify

Views: 3,505

Keywords: stripe, payments, api, subscriptions, sessions

Id: 4YjsG8u2QFA

Length: 13min 50sec (830 seconds)

Published: Fri Dec 22 2023