Create Your Stripe Invoice Template for Planning Effortlessly

Stripe invoice template for Planning

even though the stripe API documentation is longer than Lord of the Rings there is a very easy and fast way to set up monthly recurring payments for your software in this video we're going to uh create a little pricing table for people to choose monthly or yearly uh subscriptions we're going to deal with stri web hooks to make sure that we Grant or revok access to users based on their current subscription status and we're going to let your users manage their subscription whether they want to update their credit cards upgrade or downgrade their plans or even cancel it and you'll see that we'll be able to do this with just a few dozen lines of code for the tech tack I'm going to be using just a little bit of react as well as an API endpoint uh through the nextjs API route but you can use anything else like for instance an Express server and that's pretty much it if you're new here my name is Mark I have built over 20 products on the internet from AI tools habit tracker a few useless products and some software that I grew to a couple thousand in mostly recing revenue and this is the video I wish I found when I got started first let's start with a quick overview of what we're going to build on the client side so your customers they will be able to select a yearly or monthly plan and subscribe to one of them by entering the credit card details this is going to go straight to stripe create the subscriptions create the customers and STP is going to update our API through web books tell us whether or not we should give access to the user again for the API I'm using nextjs but you can use pretty much anything you want like Express and then once the customer has access they will be able to manage their subscription with the strap customer portal so if they want to upgrade the subscription download the invoice or uh even cancel it and it's going to update stripe and stripe is going to let us know again through a webbook whether we should update or not the user in the database before we start coding let's set up the strip account so make sure you are in test mode and then go to your product catalog and there you will be able to add a new product you can call it the way you want I'm going to call it hello YouTube and set up whatever recurring payment you want I'm going to start with a monthly recurring payment at $19 it's going to create the product you can click on it and you will see your pricing plan here start by creating uh a payment link so just click that button make sure you check this option right here if you work with uh European businesses that would let them input their tax ID so they have invoices with their vat for instance and on the after payment page you want to replace with a custom message that says go back to your dashboard and refresh it to unlock the services thanks for your trust you can create the link and you will create another link for this product so go back to your product catalog select the product you just created and we're going to create a yearly plan so we're going to add another price and we're going to say let's say $99 per year and create the price and we're going to do the exact same thing we're going to create a payment link we're going to allow businesses to input their V number and in the after payment page you can copy past the exact same message we said earlier make sure to say to your user to refresh your product page so that they get the latest data from your API and then create the link and and you're going to end up having another payment link for the yearly plan for each of the pricing we created we're going to did two things per pricing we're going to did the price ID right here as well as the payment link so the URL that you can copy right here now we're going to code a little pricing table where people can choose between paying monthly or paying the yearly and we're going to see what happens when we click on this link for that I have spin up a little next year project so I have this uh page this homepage whatever it is with a component called pricing the pricing component is important there are two things going on first there is this array of plans and you can see we have two objects this one is the monthly plan and this one is the yearly plan we have uh these data for visualization on the table component and we have the payment link uh URL that we copy past from stripe earlier as well as the price ID that we copy pasted earlier and because stripe has a test and a production mode I'm also using process.of not not environment equal developments when I'm testing on my computer and I would set this up to the actual production price when I go live it's important to export this constant here because we're going to be using it later for the web hook all right now we have the components the component is very simple it's mostly UI with the little use states to uh swap between different type of plans the yearly and the monthly ones there's nothing fancy here is just a purely visual what matters here is what happens when people click on the Subscribe button you can see we are going to open a new window and we are going to direct the user to the payment link URL and we're going to prefill the email with with prefield email using the user email for this part of the video I assume that you already have some kind of authentification system I'm using next oath for that as well as a mongodb database but you can use literally anything you want as long as the user is authentification you can pass the user email after the pre-filled email query and is going to prepopulate the user email and if you don't have some authentification in place already at the end of the video I'm going to ver a use case where you can start charging subscriptions to user that is not even authenticated so now now when the user click on the Subscribe link is going to open the payment link and it's going to prefill the user email so we can know who uh paid for this uh membership and then we're going to input some dummy data and see what's happening Mark and we're going to say okay and then we're going to back to stripe and if we refresh the page it is this one this customer was just created the subscription is active on stripe and the customer paid I already have a bunch of other payments because I'm testing it with my computer but normally you should have subscription that is active right here and on the confirmation payment page it says go back to your dashboard and refresh it to unlock the service okay now we need to update users in our database to know whether or not they have access and for that we're going to use stripe web hooks so go to your developer tabs and you're going to need two things first you're going to need your API key so you can reveal your test API key the private one and you're going to copy paste it in your project you can call your key whatever you want I call it stripe secret key and then just pass the key right after that because I'm using nextjs those are private and they will never be shared with the client but if if you're using react you want to make sure that you only share those API keys on your back end then go to the webbook part and you're going to say you want to add a local event listener you're going to type this in your terminal so stripe login is going to prompt you to log to stripe and once you're good with that do not run the common number two I'll show you the one we're going to be using so we are going to create a second terminal I usually put it uh on the right side of it and then you're going to use this common stripe listen-- forward to Local Host the port you're using usually 3,000 I call mine /i/ web hook slst stripe just copy paste this and press enter and it's going to set up a little listener on your computer and you're going to get a webbook secret signing key like this one and you can copy paste it in an environment variable called strip webbook Secrets the webbook secret is just a random number to make sure that the calls we receive from stripe are actually coming from them and not from someone else now that we have a stripe local event listeners everything that happens on your stripe test account will arrive on your computer and you will be notified in this console so if I try to pay again here you will see that you will get notified but it also works if I do actions directly on stripe for instance let's say I create a payment of $1 I create the payment and you will see that I will be notified here in my console I receive some events from stripe like charge succeeded payment intend succeeded and a bunch of other events and this is how we're going to update users in the database to know whether or not they have access to your product for that you're going to need a little API endpoint for me as I'm using njs I I created a/ API folder and in the webbook folder in the stripe folder I created a route where I have my API Handler if you're using Express for instance uh stripe has a nice documentation they will show you exactly how you do that if you go back to that developer uh page they will show you how to set up your Express server the beginning of the code here does not really matter you see we pull the stripe webbook secret and the stripe secret key here and then we're going to verify that the webbook is actually coming from stripe and then the important part that we're going to in this video is the events we receive and so we have a big switch and we're going to iterate over each events that we receive and decide which actions to take and for us for our simple use case we only have two events that we really care about we're using the stripe node.js package in order to uh query and interact with the stripe API so the first thing we do is we actually get the session object from that customer we're going to extract the customer ID we're going to get some more information about the customer we're also going to retrieve the price ID from the session so if you remember earlier the price ID is the little thing we copy pasted and then we're going to iterate over the plans our plans if you remember in our uh pricing component we set up an array with two objects each of them have the price ID and that's why it's important so that we can get the plan here if there is no plan it's probably some uh bugs or mistakes so we just want to break the loop and move on and then we're going to either create the customer or update the person if they already exist for instance if a customer paid and then cancel the subscriptions and then 3 months later came back and paid again we don't want to create a new customer we want to update them so it's going to check the customer email so the email that the customer inputed in this field here and we're going to search if that customer exist in our database I'm using mongodb this is how I query it it would be the same for uh anything else you're using if there is no user we want to create the the person so we want to uh we get their normally we get their name from the stripe checkout uh we also get the email and we get the customer ID it's a unique identifier in stripe that we're going to reuse later and then going to update the user um there are two things we want to update we want to say the price ID so they subscribe for that monthly or that yearly plan and we also want to update a some kind of Boolean for me I call it as access if it's true the user has paid if it's false the user hasn't paid we save the user and then we're done one thing I also recommend you here is to sending a little extra email like welcome to your product name here is your logging link or something like this to make sure that if the user move on after paying that they have some kind of backup on their email uh box and the second event that's is called customer subscription deleted so stripe will create a subscription life cycle for you when the customer start to pay for um that monthly or yearly membership and they will send you events frequently uh if the user has paid the invoice if the subscription has renewed cancelled uh upgraded whatever you only want to listen to the subscription deleted this is fired when the customer cancel the subscription and they reach the end of their billing cycle this is usually the time where you want to stop providing access to your customers so for that we're going to get back the subscription from stripe we're going to first retrieve it with the ID and thanks to that object we know uh the customer ID unique identifier for the customer we're going to retrieve it from our database this time and we're going to turn off their Boolean and save the user and this is pretty much all you need to have a subscription that either grants or revoke access to your customers there are also some nice tripe even that I'm going to share with you just in case you have some more uh complex or you want to do some marketing things for instance the stripe checkout expired event is when the customer don't pay and they leave the checkout page you can sometimes access their emails and this is when you want to tell them like hey you did not make a purchase here is a 20% discount for next checkout or something like that the customer subscription updated is fired every time there is some events like the subscription is renewed every month you'll receive an event normally you don't need to do anything here because we just revoke the access when the subscription is actually deleted the invoice payment failed event is fired after a customer was charged but it was not successful let's say your customers will have money on the bank account then you will receive this event in some cases you might want to block subscription right away but usually it's quite friendly to wait until the end of the billing cycle to stop granting them access so you would normally don't do anything here unless you want to stop the subscription right away after a fail payment and finally the invoice paid event is fired after the opposite happens so when a customer credit card is charged if you're using the previous even to stop giving access as soon as the payment is failed then in the invoice paid you might want to have the opposite effect which means that you get the customer and you give them access back every time they make a successful payment but again in 99% of the cases you only need those two events all right let's see what we have now so we can create any subscription I'm going to go for the yearly plan and I'm going to input some Demi data the test credit card is 424242 we're going to be in 2025 and I'm going to say uh I'm going to be John this time and then I can subscribe to the yearly plan in my backand I should receive the stripe events right here here uh one of those events is supposed to be called checkout session completed and this is where we're going to create our user in the database we're going to double check my mongodb making sure that it was actually created there we go when I refresh I see the user so I have those information so the name and the email provided during the checkout as well as some stripe uh information like the customer ID and the price ID and we can see that the user has access to the product so we can give him or her uh probably him in this case this is John access if we double check in stripe and refresh the customer tab we will see we should have a new customer created called John here we go and he has an active subscription now I want to test if the revok access is also working so I'm going to cancel the subscription immediately and on my backand I should also receive some new events somewhere here actually I received it already it was really fast customer subscription deleted which is the second event we're listening to this one which normally should update our database and remove access from the user we're going to double check that in mongodb again refresh and and we can see the user uh does not have access anymore so this is working okay now we want to let users manage their subscription so either upgrade plan cancel change download the invoice change your credit cards and all that things for that go back to your product catalog and pick the monthly plan and you're going to say in the upsell category say upsell to the yearly plan and then in the search tab type customer portal and in setting Billings customer portal you should have this page um I think I turned mine on already uh there might be a button to turn it on in the subscription part here you will want to uh select the products that customers can um subscribe or not so you will find your product here the yearly plan and the monthly plan save the changes and you're going to copy the link that is right here and then in your code so this is my uh homepage or whatever user dashboard page I created a simple react component button customer portal in this button I just get the user session so I know their emails and I also have the link I just copied from the customer portal and when the user is actually authenticated I just have a link that goes to that customer portal link plus I add the as before for the checkout the prefill email query with the user email in the end and then when I click on it on the user side it's going to open the striped customer portal with the email prefilled from here customer can receive an email to log to their customer portal and manage everything so this is my Gmail if I click here is going to open my stripe customer portal and then the customer will receive an email it looks like this and when they click on it they will access to their uh billing portal where they can update their plan or cancel it as well as changing their payment method adding new credit cards building information invoice history and a bunch of other cool stuff a few things once you're ready to go to production uh go to your developer tab turn off the test mode part and copy your actual production API key and in the webbook tabs you will have to add your own uh website so add an endpoints your domain name/ API webook stripe and add the events you want to listen to Because by default they're known so you want to listen checkout completed this one as well as the subscription deleted here we go you can add events and at the end point and you should be good to go in the case you want to start charging a subscription before logging users in which I think is a really good way to increase your coners rate you want to make sure that first on your payment link confirmation page you tell people to actually follow the instruction received by email and in your webbook Handler you want to make sure that at the end after creating the user it actually sends an email to the user with a link for them to log in if you already have a business that's processing couple thousands of dollars on monthly recuring revenue and you need some very specific granular control you can try to create customer portals and checkout session using the API but if you're getting started this setup will work for 99% of the cases and actually if you're also getting started I recommend you to play around with onetime payments of their subscriptions the strip setup is exactly the same as I just showed you but you'll see it's much easier to sell a software for $99 lifetime payment than it is to to sell a $19 monthly recording payments and when you're getting started you'll see it's very important you start making a little bit of money at the beginning because you will keep you motivated and one time payments are much easier to sell if you want to understand the logic behind this I'll share a video around here to explain that that's it for this video if you liked it you can like it if you enjoy it you can subscribe to the channel that will really means a lot and until the next one I hope you just ship it