Build a Stripe Checkout with Next.js 13

hey what's up YouTube my name is Brett Westwood and today I am going to teach you how to create a stripe checkout for a one-time payment using next.js version 13. so here's an example of what we're going to create we're going to create four different pricing cards and these price cards each have a product ID and the product was created on the stripe dashboard and these are all in test mode so if we do end up clicking one of the buttons we're going to be redirected to a stripe checkout pre-built page so that's where we're building so we're going to fill out the information real quick and test it out so this is exactly what we're creating today so we can just fill out dummy information here the card information for test mode will be four two four two four two and as you can see right here it does say test mode so no actual money is going to be used for this transaction so after we have all the information we're going to click pay it's going to process the payment and we're going to get a payment is successful so then if we go to the stripe dashboard we go to test mode we go to payments and as you can see right here this is my timer here 1 37 a.m Gmail I did succeeded for 339 dollar payment so if you're interested in learning how to actually accept payments on your next application through stripe keep watching this video and before we get into it if you can like the video and also subscribe my channel for more content related to next.js react Tailwind anything full stack related subscribe to this Channel and you won't regret it so let's get right into the code so to get started we are going to create a next app so the way we do that is we are going to go inside of our computers terminal I am going to go into my directory where I keep all of my projects so we're going to CD in there and then I'm going to open up a tab real quick or Google Chrome and we are just going to go to the beta docs and I'm going to show you exactly what it says so next.js 13.3 is the current version I am using at the time of this video recording we are going to go to installation and we're just going to do the automatic installation so we're going to copy this code here and I'm going to paste it here and it's npx create Dash next Dash app at latest with the flag of experimental app and then after this you have to name your app so we're going to name this stripe checkout and then we can just do stripe checkout demo and I spelled it wrong let me spell it right real quick so after we do that it's going to start asking us to be questions first question do we want to use typescript we are just going to say no es slant we'll put no 13.3 now introduces Tailwind CSS as the automatic import when you create the project which is pretty cool so we're going to say yes to Tailwind since we are going to use that to style our pricing cards and project here would we like to use the source directory we're going to put no because we're going to use the app directory which is the beta directory and it import Alias we're just going to keep as the at symbol so we could press enter so now it's going to initialize the project and install all the required dependencies as you can see are listed right there this should take about 10 to 15 seconds after this is completely done we are going to navigate your CD back into our stripe checkout demo folder and then we're just going to press code dot what this does is it opens up a vs code which is my text editor of our new project name stripe checkout demo which is a basic application of an xjs project so as you can see here we have app directory and not a source directory that's the first major change here we already have tailwind and all that installed onto our project so if we go inside the app directory the first thing is that the front end and back end are all done inside of the app directory so the back end you want to keep clean and coded clean and organized you're going to put all that inside the API folder but you don't have to so right after that they give you an example route endpoint route called API slash hello so it'll be localhost slash API hello and then the route which is like the Handler where we actually do the git request or post request is done inside of a route file so that is the Syntax for that and our home page is the page.js and this is just going to be the default home page that next.js does I'm going to show you what that looks like so we're going to open up the terminal and we're going to run npm run Dev this is going to run the development server and it's going to open up on a new Google Chrome file and as you will see here after it loads it is going to load and this is what the default home page looks like for next JSM for cell so I'm going to minimize this and we can just remove all that code we don't need any of it so we remove that we're going to type a div and inside of that div we could just put home page so that's the name of the page we could remove this import of image so there's our home page which is the page file inside of the root layout of app so we also have a layout file which is technically our root layout and this is going to apply to all the pages so as you can see right now they're applying a Google font called enter to all the body of our whole application by calling enter doc last name to all the children so this file allows you to actually use nav bars and Footers and certain button layouts that you want you can put them all in here and you could use the inside of your layouts you could also put layouts inside of other routes so I'll show you how to do all that later and then we also have the metadata which is right here which you don't have to worry about for this project but this is for Google SEO purposes so we're going to go inside the global CSS we're going to remove everything from line 5 to 27. and we're going to keep lines one through three because that's for Tailwind and that's just going to clean up our CSS a little better and the next thing I want to do is I actually do want to create a pricing page for the front end so we're going to go inside the app and then we're going to create a new folder called pricing so this is actually the route that we're going to do so it's logo hosts 3000 slash pricing and each route needs a page.jsx associated with it so we could just do raf-c-e we can name this pricing we're going to just export it as pricing and this is where we're going to have our pricing page so before we actually get in any code let me show you just quickly what I've done we have the home page here as the CSS home page and if I go to slash pricing it just says page which that's what our code says so that route works for the front end we can just go back to the home page and that's it that we've done so far the next step I want to do before coding anything is I want to go to stripe.com so if you don't have a stripe account you can create one real quick just follow everything it tells you to do and then when you get in the stripe dashboard I'm going to zoom in here a little bit you will see that you have a test mode and a developer so we're going to go inside the developers and we're going to have test mode so there's a few spots that we're going to use that I'm just going to mention real quick first is in the developers you have an overview and then you have API keys so stripe gives you two API Keys one is a publishable key and the other is the secret key the only thing we're going to use of these keys in this project is the secret key and hence the name you should not let anybody else know about your key because then people could actually hack your stripe and make it seem like you're charging them but it's actually a hacker so just make sure you keep this key secret and this key is going to be in your dot EnV file for this project but I'm not going to reveal it I'm not going to reveal the test key now but we're just going to keep this as is but the first place we're going to go and start working on in stripe.com is the products so the products tab up here we're going to click this and I already have four products so from that example I showed you at the beginning of the video These are those products in each of the pricing cards so we're going to create all the products inside of stripe you can actually create the products inside of your application in vs code but we're just going to do it here because I feel like it's a lot easier all you have to do to create product is ADD product here at the top right uh let me confirm my password real quick okay um so these are the product details you have to fill out so you just have to give it a name a description the pricing model we're going to use standard pricing the price if it's a reoccurring or one-time uh checkout you could see additional options which are different metadata and unit labels and features lists and all that you can just go through that but I'm going to show you exactly what I did for each of the products redone so for this 15 yard dumpster three-day rental we are going to go into the edit and as you can see I gave it a name a description I left the product tax category as this I didn't do any additional options here if you go to the price information I left a standard pricing I gave it a price with the one-time occurrence and then I just gave it a price description of 15 yard dumpster and then you go up to the right and click save product so I've already made the four products here that we need for this project so how do we get these products onto our application and that is through a get request so we're gonna have to send a get request to actually receive the products we need into our application so I am just going to stop the server real quick and there's going to be two packages we need we need first package of stripe so npm install stripe and then we're going to use axios if you don't want to use axios you can use fetch but we can use axios as well so we're going to install those two packages real quick if you want to make sure those packages were installed correctly just go to your package Json and these are my versions that I'm using for this project so we could close that close that and The Next Step we're going to do is we're actually going to create the back end endpoint for this get request so for this backend get requests the front end and back end kind of works similarly so when we're in the API folder the route is going to be whatever the folder's name is so inside of API we could create another folder and we will call this one get products so git products is going to be the route so it's going to be localhost 3000 slash API slash get products and inside of each route for a back end we need a route file and then for the front end you need a page file so this is going to be a route.js and we're going to have two Imports we're going to import stripe with the capital s and then we're also going to import next response and next response is specific to nextgs only and this allows us to be able to send Json data to our front end so it has to be imported right here in our backend we are going to create an asynchronous function and this function is a little different compared to version 12 and xjs you're just going to call whatever the endpoint request is so this is going to be a get request so you say get if it's uh post you put post instead of Handler it used to be Handler back in the other version so we're going to pass the request in here as a parameter and then inside of the code block first thing we need to do is we need to initialize stripe and to initialize stripe you need to use that secret key that I was talking about earlier so this is going to be the syntax of how it looks so we're just creating a variable called stripe and this is going to initialize it but initialize it we use stripe and then we pass in that string but to pass in that string we are going to pass it in in a new file called dot EnV we will name as stripe underscore secret underscore key this is going to equal that secret key we go back into our dashboard go to the home developers API keys you're going to copy this key and then put it in that EMV file so let me pause my video and do that real quick okay so now we're back after you copy and paste your secret key into the EMV file make sure you do without um a string so you don't need any of the quotations you could just copy and paste it as is next to access that NV specific file we are going to say process.env dot whatever you named it I named it stripe secret underscore key so now we just initialize stripe inside of this get request next thing we're going to do is we are going to create a variable called prices this price is we're going to have to wait and then stripe gives you different methods since we did download it so to see the methods it gives you just type in stripe Dot and then you can see the list of different messages so we have like check out charges billing portal all that but we're going to use prices Dot and then we're going to list so we're going to list all the prices and we're going to pass an object parameter and we're just going to pass one same limit so this is just going to limit the number of different product prices we're going to pass and I'm going to keep it off four since that's how much we have other than that next we just have to return the Json now so return the Json you just put next response dot Json and it's going to be prices dot data dot reverse so the date I mean the data is required but the reverse isn't the reverse is just going to reverse the order of the products so for example instead of starting with 24 hour special it's going to start with 15 yard dumpster and go this way whenever it appears on our application so now if we go back data is required and prices.data because it's actually giving you an array with four different objects and each object is the data so for example we're going to test this out real quick with Postman to make sure this get request is working so we're going to go to postman.com and first thing is first we're going to make sure our development server is actually running which it isn't so make sure you npm run Dev and if you did make changes the EnV file and didn't reset your development server you probably should so we're going to open up the localhost 3000 we're going to go to postman and we are going to do a give request to http dot slash localhost 3000 and the eight Pinter slash API slash get products so when I clicked send to get this we should get a response of four different prices so we're sending for the request and as you can see we get an array let me move this up with four different objects which these are four different prices properties so as you can see each product is associated with the price ID and that is how we're going to be able to access each product and you can see the unit amount the lookup key when it was created if it's active what the object is it's price um and it just gives you a bunch of properties here so that's how you're going to be able to test your endpoint which that means our get request endpoint is actually working so I'm just going to close Postman here here's our localhost 3000 I could close this next JS and I'm just gonna have stripe and I'm gonna have next JS localhost 3000 open next thing I'm gonna do is I'm gonna go back in our application and we are going to start working on the actual pricing page so I'm just going to close up this API folder and I'm going to go inside the UI of the pricing page which is the front end of what people see so for this pricing page we are going to have this is where our title is going to be and then we're going to pass in a component called pricing card and then that pricing card is what we're going to style to make those pricing cards look like you did at the beginning of the video so we are going to have in this return we're gonna just wrap everything with the section and we're going to give this a class name so this next section is all pretty much going to be Tailwind CSS so if you do want to skip it and just copy the code you can but I'm just going to kind of go over everything tail1css to actually style everything out so to do that though I am going to side by side my actual code and then I'm going to side by side the locals 3000 so we can see the changes in real time so we're going to go to the pricing page I'm going to make this a little bigger we can remove this and then we can remove this so now it's full width okay so our first class name with our parent element we're going to give it a width of full and then we are going to create the pricing card section right here so we're going to have a div inside of here and this div is going to have a class name of MX Auto Max width of 4XL we're going to have all the text centered we have a margin top of 10 and item Center So within that div we are going to have an H2 and this H2 is going to be our title we're just going to say pricing and we're going to have give this a class name with the text of 3XL font is going to be semi-bold we're going to have the text leading of seven and then we're going to give the text a specific color which means we have to put in Brackets and this color is going to be that same orange that you saw earlier as well and if you do have any questions about the Tailwind CSS you could either look in the docs or leave me a comment below in this video and I'll be more than happy to get back with you but the docs are pretty simple for Tailwind CSS they make it really easy to understand so we're going to create a paragraph tag underneath with the margin top of two we're gonna have text for excel we're going to have the font as bold tracking tight we're gonna have text Gray of 900. and on smaller devices and up we're going to have text of 5xl and then in this paragraph tag we are going to name this choose the right dumpster for you so as you can see everything's popping up here as we type the next tab we are going to do we're going to do another paragraph tag and then in this paragraph We could say check out all the information below and then we're going to style this a little bit give it a class name this one is going to have MX of Auto margin top of six Max width of 2XL we're gonna have the text large leading is going to be eight text gray 600 and then a small screens and up we'll have the text Center so there's that and it looks pretty good for now now we're going to have a div right below this div so this div is covering this H2 and 2p tags now we're going to have another div and inside we are going to style this main div right here we're going to say grid then on small screens we're going to have a column of one and then all small screens and up which are going to be like your computers and desktops and just bigger tablets it'll be Columns of two we'll have a gap of 8 in between each card and we'll have a Max width of a thousand forty pixels so it's not going to go more than that no matter how big the screen is and then items will be Center and then we'll have MX Auto last property there so inside of this div we are going to map through all the prices so to do that we need to get that endpoint and actually connect it to our front end right here so to do that first thing first we need to actually add a used client at the top because all pages on xjs 13 are server side rendered by default so if we do a used client which is going to be anything with you state anything that the client kind of has to interact with it's a use client file so that's why we have to tag it as this or you are going to get an error and it will tell you in the error that you have to use client so it's not too big of a deal but we're going to import a few things first we're going to import axials from axials to hook up our back end or front end we are also going to import you state and use effect we're going to use States so we could have those prices inside of a variable so set prices and prices and then we'll do use effect to get those prices every time we land on this page so right when we land on the slash pricing we're going to call that get request and it's going to get all those prices for us so we are going to create that call function right here so before we do that let's do prices and set prices and that's going to equal the use state and for that it's going to be an empty array so an empty array of prices that's going to be the initial value and then we're going to create a variable called Fetch prices let's do a lowercase f and this fetch prices is going to be an async function so asynchronous function and it's going to be an arrow function and inside of the code we are going to destructure the data that we get with the price so it's pretty much like when we receive the data from stripe and the products we get the prices and then we go down one level to data and then we're just destructuring all of that data so we're going to wait and then we're gonna do an axios.get so we're going to wait the get request and we have to go to that endpoint which is slash API slash get products and then after we get the products we are going to set prices to the data so our prices variable is now going to be the new product so if you want you can console log the data so let's do that real quick console.log data and since it is use client it should pop a bit in the console so let's refresh this and it's actually not popping up because we haven't called the fetch prices yet so let's do use effect with an arrow function and the array dependency is going to be empty and let's just call that best prices so we could actually run that piece of code so now we called it and we're going to refresh the page and if you open this up more now we get four so as you can see here we get all the prices all the properties of the price and everything and now we can actually utilize all this information and show to our actual customers so as you can see we have four products and we do get an array length of four so this is every time we Refresh on this page so if I go to my localhost 3000 we're not going to get that because it's not calling that endpoint so you see in the console we get nothing so if we go to slash pricing and you see it then we get four so that's how it looks now and Tailwind CSS is um mobile optimized first and it always adjusts us to the screen size so Tailwind is a really good CSS framework to use at first it may look messy in the code but it's actually worth learning and using and you do get used to it so now that we have the prices like I said down here inside of this div that we created we are going to map through the prices so to do that we're going to say if there is prices so prices is true then we are going to do prices dot map and then we're going to pass through each price and then we're going to return a pricing card component and this is going to be a self-closing tag we're going to get thrown in error because pricing card is not defined so to Define it we are just going to go inside of our app directory again we are going to create a new folder called components so you can still create the components folder and then inside the components we're going to have a pricing card.jsx we can just do rafc it's going to export the pricing card we can close that real quick and then we can just import the pricing card inside of our page right here so as you can see there we get four pricing cards and if we spread out you get those Columns of one and then I'll mid small screens and up you get Columns of two so that's looking good right there and then since we're getting the prices here we want to pass some price information into the pricing card so to pass the price we need to send it as a prop down to this component so we're going to pass prices price and then we need a key which is going to be price dot ID because that's going to be unique identifier and then other than that we are done with this specific page so we can close this we can close this route and we could close the home page next thing we're going to do is we are going to work inside of the pricing card component so to do this there's one package I want to install before doing it so we are gonna shut the terminal down real quick by Ctrl C and we're gonna do npm install react Dash icons reason why is because that green check on that pricing card is from react icons so now we have that available we're going to say npn run Dev to start the development server again wait till it says that the client and back uh client and server are successful and then you can just refresh this page to make sure everything's good okay so everything looks good now we are inside of this pricing card so I'm just going to make this full screen just for a sec real quick and we can work on a few things so first thing is first we did pass price into this function so I want to catch it by destructuring it so price as a parameter next thing I want to do is I want to import a few things I want to import axios from axials because we are going to have to use axios to connect to our backend for the Post request to actually create the stripe checkout another thing I want to import at the top is link and this is going to be from next slash link and then I'm going to import that check from react icon so it's going to be AI fill check Circle from react icon slash AI okay so now let's work on the actual classes again inside below the return so the top parent element we're going to style real quick we're going to have a border Gray of 100 and let me minimize this so you can start seeing it actually play out in real time okay and as you see you don't see the word pricing card anymore because it was actually in this component so you'll start seeing stuff as we start coding it so let me remove this remove this and let's start coding so we're gonna have a shadow of 2XL a border of Four we have all the texts centered we're going to have a margin top of 10. and we'll have a Max width of a thousand forty pixels okay so inside of that div we are going to create another div this div is not going to have any class name whatsoever we just need this as a box kind of as a container I'm gonna do another div and this div is going to cover your title of each pricing card so as you can see right now you can see a faint line because you see the Border gray of 100. so for this class right here let's stall this we're gonna have BG Gray 100 we're going to have a height of 28 so now you can kind of see the car taking shape right there you see the cards we have the height of 28. we are going to have all the items centered inside of the card and we want the font to be bold this will give that bold font to the titles that we're about to do so we're gonna have H4 and inside of this H4 we need a class name we're gonna have the text as 3XL and for this we are going to give this a dynamic value and this is going to be price dot nickname so that is going to be one of the properties so as you can see they popped up 15 yard dumpster 20 yard dumpster 10 yard dumpster 24 hour special 15 yard dumpster so if you're wondering where this nickname comes from I am going to open this up go inside the products now we're in the products from Stripes dashboard if you click edit on the products you do and then you come to the price information click the additional options and the price description this is your price dot nickname so that's what it's going to be another way to check what your [Music] um specific variables are within your price I'll show you another way you could do it if you inspect open up your console log since we are console logging that get request if you open up one of these you can see all the properties that are related to that specific uh product so you see it says nickname so that's obviously one you could use you could use price.nickname you could use price.currency you could do price dot unit underscore Mount dot decimal as you can see that's how you kind of look at it so that's why I used price dot nickname so all those are popping up right there and then we're going to have a P tag and this P tag we want the information to be dynamic again so the only way you could do this is by creating different functions that have specific if ands and stuff like that so I'm going to show you what I'm talking about and then I'm just going to copy and paste it so we're going to have a dynamic function in here we're going to call this Dynamic sub title right and then we're passing in the price which gives you all of that information I just literally showed you in the console log so we're going to get an error because we have not defined Dynamic subtitle so to do that we're going to do this right above the return and we are going to say cons Dynamics subtitle and this is going to equal an error function with price passed in as a parameter and then inside of the code block this is how we're going to do it so we're going to say if the price dot nickname right equals and then whatever that nickname was so the first one we could do is 20 yard dumpster so the price dot nickname equals 20 hour dumpster we are going to return A P tag that says three day rental right so as you can see here the 20 yard dumpster price nickname is the only one with three day rental and that is how you kind of do the dynamic and you just gotta do if this then that if this then that like four times so I'm going to copy and paste that code because it's very very repetitive so let me copy that real quick and I'm going to show you exactly how it looks so as you can see I copied it right there and now all four of them have different ones three day rental three-day rental weekend special three-day rental so if it's that price nickname we use that specific P tag now we could close this specific line seven right here to make the code look a little cleaner okay so now the next thing is we need another H3 underneath here and this H3 is just going to say first two thousand pounds included so this information is specific to like stumpster rentals so if you don't know anything about dumpster rentals it's not a big deal but there's that for you and that's going to be everything that's going to be inside this div now we are going to create another div right below this and this is going to act as a container we don't need a class name for that we're going to have another div inside and then inside of this we're going to have some Style and in this style we're gonna have a flex Dash column items Dash Center justify Dash Center and then we'll have a padding top of four so this is just going to be the div right underneath all of these titles here so for example now we're going to have an H1 inside so this H1 is going to be the main element that we really want to use inside the card which is going to be the price and the price is more than just saying price dot price because that's not going to work so let's style this real quick we're gonna have text of 5xl and the font is going to be bold so inside of this H1 it is going to be dynamic again because each price is different so it needs to be dynamic so we're going to get the price let's see it's going to be in parentheses because we're going to do price dot unit underscore amount so that's what the property is if you look at the console log and then we're going to divide it by a hundred because if you look at it you need to divide it by 100 to actually get the right number so as you see it says 339 379 289 and 299. that is in USD if you don't do it divided by 100 it's going to look like it's 28 000 37 000. so it needs to be divided by a hundred to actually give you the right number and then after that we are going to um fix that to a local string right and then in the local string we're going to pass a parameter called nus because it's going to be in the US dollars right and then we need a comma after this and that payload that we're going to do which is options we're going to have a style and this style is going to be currency and then a comma and then the currency is going to be USD which is US dollar so as you can see there everything looks pretty good I am zoomed into so there is a hundred percent but this is zoomed in 125 percent so that is how it looks there's the price that is dynamic for each specific dumpster rental and now right below that I'm gonna have an H3 and this H3 is going to say additional weight just uh five cents just five cents per pound and that's going to be underneath each one so that's going to do it for this specific div here underneath that we are going to have an unordered list and this is where we're going to do all of the bullet points so the bullet points that whatever comes with this um specific dumpster you're gonna get so that's also going to be dynamic as well so we are going to style this unorder list and that is going to have Flex and justify Center and then in an unordered list you usually have a listed item and inside of this listed item let's style it first we're going to have a class name the text will be extra large and the font is going to be bold and each listed item is going to be dynamic as well so we can name this one Dynamic description so we name one Dynamic subtitle because that was the subtitle and then this one's going to be dynamic description where you get an arrow thrown because we don't have a dynamic description so we're going to create that right now so Dynamic description equals the price as a parameter an error function and then we have a code of block so inside of the coded block I'm going to show you an example what we're going to do it's almost similar to the subtitle so what we're going to do is if the price dot nickname equals 20 yard dumpster right then we are going to return and then you're just gonna have a bunch of CSS classes and stuff like that so I'm just going to copy the first one so you can see how it will look and this is where we use that react icon of the AI fill check Circle so if I paste this in here this is what it creates right here so it has a little border of the bottom it's 25 per day after three days it gives you specific features that are included with a specific price right so that is going to be in there like that so I am just going to um pause real quick here you could pause the screen you can see the exact class names I use and how I use it so we have a div that surrounds it all and then these divs surround the icon in an H2 and then you have a specific div right here that's a self-closing tab that acts as the border the gray border so we're going to do that for each of the um Dynamic description so I'm just going to copy and paste that code real quick because it is a lot so let me do that real quick and as you can see we have it for all four now and I am just going to close this so the code looks cleaner but you can see that's line 19 through 179 so that's a lot of code right there so let's go back down and let's finish this card real quick the CSS of it so right underneath that we are going to have underneath the UL we're going to have a button so this button is going to have an on click and the on a click is going to handle the subscription so for now we could just do an on click Anonymous function with the closed code block so we don't get any errors we're gonna have to create a handle subscription which is going to connect us to a post API endpoint but let's also style this bun real quick so we're gonna have a class name margin top with eight we're gonna have Flex width is going to be full justify Center rounded MD we're gonna have a border a border transparent a BG of that specific orange that I've been using just let me copy that real quick we are going to have a padding top and bottom of two we'll have padding left and right of four the text will be small and the font will be medium so yeah the font's going to be medium the text will be white and then Shadow will be small so right now the button looks like squished the reason why is because there's no text in it so let's just add text in it and the text we could say is you could either make a dynamic and keep doing it the way we've been doing or you could just say rent this dumpster so as you can see there there's the buttons and there is your cards so your cards are looking pretty good right now so that is exactly how you style the cards so if you wanted to skip that section you could but I will um put the code in a repository and you guys could just copy the CSS if you need to but that is going to be how you style the cards okay so after the cards have been styled we are going to do pretty much the most important part of this whole tutorial which is create the post request so I'm just going to open up my code because you're not going to see any changes on the front end we are going to open up our folder structure we are just going to close folders that we don't need and we are going to create a back-end API endpoint with the post request so we need to create another folder inside of API and we're going to name this one payment because this is how we are going to actually accept the payment so inside the payment we need a file called route.jsx and inside of this route.jsx we need to import two things we need to import Stripe from stripe and then we also need to import next response and next request because we're not just using request we're using response and request for the specific um API endpoint so to do this we're going to export in a synchronous function and this function is going to be a post request so we're going to pass the request any here and inside of the code block first thing is first let's initialize stripe by saying new stripe and then passing in that secret key which is in our environment variable so stripe underscore secret underscore key okay next thing we are going to do is before we start doing any of this we don't actually have any information to keep continuing so we actually need to start with the front end code so to do that it is going to be inside of our pricing card so inside of our pricing card is where we're going to connect that API endpoint to our backend so we can do this right above the return and we are going to call this handle subscription so this handle subscription is going to be fired off when that button is clicked where it says rent this dumpster and this handle subscription is actually going to be asynchronous and we could pass the event in it because the reason why is because we want to do e prevent default and we don't want the page to reload on us so that's the very first thing we should do um next thing is we want to have a destructure of the data and then destructure we want to actually assign it to your weight axios dot posts and then we want to connect to the endpoint we just created which is slash API slash payment okay and then after that we're going to have a comma and then we I'm going to press enter again we are going to have an object and inside of this object we are going to find price ID so price ID is going to equal that price dot ID and like I said you can find this in the console when you run that get request so we're going to have price ID equal to the price ID and then also we need to pass in a few headers so these headers it's going to be an application Json type right so this is pretty basic um post request that we're just using in nexjs so application slash Json and then we have another comma and then one of the biggest Miss shapes I did that I was stuck on this code for the longest time that you're not going to be stuck on it now is I have this when I wanted to open up that pre-built strike page I had it as window.open and window.open only worked in the development server and on my computer personally but on any other device it wouldn't work so this is what you need to type you need to type in window dot location dot assign and then it's going to open up that data and that data is going to be that stripe checkout that we actually Define inside of this post request route right here so that is it for this front end we are sending the data and price ID to this um payment API so inside of this payment API right here we're going to let data equal away requests.json so it is a little different here it's usually request.body but instead for next year s13 it's request.json you launch the request.body so after we let the data equal that we are going to let price ID equal data Dot price ID reason why is because the data equals the request.json and the request.json is going to be this right here the price ID so then the price ID is going to equal the data.price ID so we're just initializing a few variables here real quick you can console log this to make sure everything's working but we are just going to go into [Music] now what stripe gives us as a method so the method stripe gives us is we have to create a session so this session is going to be the stripe checkout session so that is going to open up that pre-built stripe page you saw at the beginning so we're going to call this session and we're going to wait stripe Dot checkout Dot sessions dot create and then we're going to pass an object so this code is all inside of the stripe Docs so let me open that up real quick and the only reason why I know this is because that is how you learn how to do it stripe um check out docs so the stripe docks are pretty good but you can get confused pretty easy so if we go into products and pricing up here um or maybe invoicing payment methods hmm payments accept online payments and as you can see here it is pretty hard to see but you can see right here it's doing an app post request to this specific endpoint it's taking the request response and it's creating a session just like we did and we're awaiting the stripe.checkout.sessions.create and we have to define a few parameters inside of it and the main one is line items so we need line items we need mode we need to success URL a cancer URL and we don't need the automatic text so if you want to do that you can but here are the documents you can go through them if you want or you just watch the video so after we do this session right here waste stripe checkout we first thing we're gonna do is we're gonna do line items so line underscore items and this is going to equal an array and then we're going to have an object inside of that and the price is going to be the price ID and then the quantity is only going to be one one for each so anytime you click the button you only have to have one quantity um other than that you can add a custom fields which I'm not going to do now all you have to do is go underneath the line items like this press custom fields you do this you'll have an array and then you have an object like that and you could create custom fields and you could look at the docs for that as well but we're not gonna do that for now so after we have the line items we needed the mode and the mode was going to be payment and as you can see let me do that again you could have payments setup or subscription so payment is the one-time payment subscription is the other one and you could do set up which I've never done so I'm not even going to talk on it but we'll just do payment for now then you need a success URL and a cancel URL so for our sake we are going to keep http slash local host three thousand we could just do that as a success and they cancel we could do the same thing so whenever you actually run your application and um production you need to change this URL because nobody's gonna be able to access it and you might get errors thrown okay so there's that and then all we have to do is now we have to return so inside of the code block we are going to return a next response dot Json and if you look in the um docs again for stripe it's going to show that you have to return the session.url so that should be it for the Post request and this post request is talking to the front end through axios inside of the pricing card so now we just need a bring this handle subscription down to this on click and the on click was all the way down here and we just gotta pass handle subscription so let me minimize this code open up that page again I'm going to refresh it real quick inspect and we are just the only thing we are getting right now is saying that the P cannot appear as a descended a p I think that's because we put two P tags um simultaneously together so if you want to fix that you can but um that should not affect the code at all and as you can see we're still getting that give request that's working so we're gonna see if this button actually works when you click it so Moment of Truth so when this gets clicked yep the stripe checkout works it opens up and let's just make sure it opens up with the correct one so as you can see if I press the back button it goes to localhost 3000 we have to go to pricing which is the page so that was 339 dollars let's see if this actually opens up at 299 dollars and it does 24 hour special 15 yard 299 dollars so everything looks like is working perfectly fine let me just do a quick review of the code and that should be it for this video so as you can see here we created two API endpoints one was a get request to get all of the products into our application and the other was a poster request to create that pre-built stripe checkout page after we created those two endpoints we created those pricing cards so those pricing cards were created using Tailwind CSS and then we mapped through all the prices because we set the prices with you state as prices and set prices we then use Dynamic subtitles and descriptions by using IF statements and then as you can see here here is the code for the um post request and that is the handle subscription so when you click the button this handle subscription function fires is taken data as a destructuring and it's sending it to the await axios post slash API slash payment endpoint before it sends it's going to send the data dot price ID is going to equal the price to ID it's telling the type it's going to be sent over and the window doll location DOT sign that is going to open up this data which gets sent back from this payment and all the docs are in stripe and you can look up the docs in SJ next js13 and I'm also going to include the code in the description down below so hopefully you guys learned a lot from this video it was longer than expected but I just wanted to make sure I covered everything even to the point of styling the pricing cards I know this application created is a very very useful application that a lot of you are going to get a lot of use out of I mean you see this on a lot of pages so I mean this is this is golden right here so hopefully you learned a lot in this video if anything before we leave hit that like button and also subscribe for more content like this um and thanks for watching and if you have any questions on the code or you get stuck on a specific problem just send me a message in the comments and I will be happy to get back with you within 24 hours hopefully other than that just happy coding

Channel: Brett Westwood - Software Engineer

Views: 14,142

Keywords: Stripe Checkout, Nextjs 13, How to code a stripe checkout, stripe api integration, online payments, how to accept online payments on your application, Reactjs, Step by step on how to use stripe checkout api, POST request stripe, GET request Stripe, ReactJS tutorial, full stack web development

Id: d4sMYnenaU8

Length: 61min 42sec (3702 seconds)

Published: Tue Apr 25 2023