How to integrate Stripe Checkout with Node.js

hello and welcome in this video we're going to learn how to integrate the stripe checkout with a node.js application you can check the stripe official documentation by visiting docs. stripe.com and click on apis and sdks and select the API option and the documentation is a bit extensive CU there's a lot you can do with stripe but we're going to use the checkout option where you can find on the left side menu here under the checkout options and you can select the session option so what we need to do is create a new session so you can select the create a session option and you can find examples here on the right side for different Technologies so I'll choose node.js here and we could call the API end points directly using something like Axis or node fetch but it's recommended to use the stripe module instead cuz it makes our life a lot easier so in our node application we have to import this module passing this key here as a parameter and I'll show you later how to get this key and next we need to create a session using the stripe checkout sessions create passing an object containing details of the products that the customer is purchasing the shipping address billing address and other parameters that you can find here on the documentation but I'll show you all the parameters we need to send and the response we're going to get back when we start coding so what we're going to do is is create a simple page simulating a shopping cart with some products and when the user clicks on proceed to checkout button we're going to create a checkout session with the products on the shopping cart and we'll redirect the user to the stripe checkout page where the user can enter the payment details and the shipping address as well and once everything is complete the user can click on pay and if everything is okay the user will be redirect to a success page and we'll receive the payment on our stripe dashboard okay so before we start coding the first thing you need to do is to create a stripe account if you don't have one yet by visiting the official stripe website which is stripe.com and you can click on sign in on the top right and if you don't have an account you can click on sign up and it will ask your personal details once you finish filling out you can click on create account and stripe will send an email so you can verify your account I already have an account so I'll sign in with one of my personal accounts here okay so this is this strip dashboard and as you can see here on the top left we are in test mode that means that all transactions we make for now all payments we receive will be fake just so we can test and make sure everything is working before going live and by default stripe already created a business account for us which is called new business as you can see here on the top and we can change the name of this business here by clicking on addit and enter the new name and if we click on developers option here on the top and then on API Keys tab so we have two keys here the publishable key which is used on the client side on the front end and we can create card elements and other payment elements we can create tokens but we're not not going to use this key on this video since we're going to focus more on the server side but we'll definitely use on future videos and there's also the secret key which is us it on the server side so this is the key that we'll be using on our node.js application but let's say we're creating a project for a store e-commerce or another business to sell services or products so let's create a new business account here on stripe dashboard with new API Keys as well so we can click here on the business accounts drop down and select create new account and the name of this new account I'll just add Mafra doio for example but you can use the name you prefer and the country I'll just leave as United States and we can click on create perfect so now we have the MRA doio business account selected and let's click on developers option again then on API Keys Tab and here are the new keys related to the mana. business account we'll get back later on this page to copy the secret key and store securely in our node.js application okay so we can get started on coding uh I'll be using vs code for this tutorial but feel free to use the code Adder you like and I have an empty folder open here on vs code which is called stripe check out with node.js let's start by creating our node.js applic by opening the terminal here on the top and type npm in it once we hit enter it will ask a few questions and we can just hit enter for everything cuz later we can change all this information if we need is this okay yes great so now we have the package.json file created with the details of our application and now let's install the modules that we'll be using so back on the ter let me clear here and I'll type npm install and we'll be using Express to organize our route and the stripe module the ejs module for our template engine and last the in module to securely store the stripe secret key but if you're using node version 20.6 do0 node already comes with a built-in functionality to store environment variables but for for this example I'll just be using the in module okay hit enter and great modules install and you can see here on the package.json file under the dependencies object and also on the package.json file there's a main property here pointing to an index.js file which is going to be our main file so let's create this file here on the root so new file index.js now inside the index.js file I'm just going to paste some lines of code here because in all no tutorials here on the channel I just keep repeating myself with just setting up a basic Express server so here we're just bringing our dependencies and initializing the do in module and here we are importing and initializing Express inside an app constant here we are setting the view engine as ejs and here we are creating in an index route like a home route that is just going to render an index template that we're going to create and then we're starting our server on Port 3000 okay very simple and here on the root uh we need to create ourin file to store our environment variables so new file dot a we'll get back on this file later and we need to create a folder to store our ejs template files so new folder and I'll call this folder views and inside this folder let's create the index file that we are rendering here on the Home Route so new file index.js and inside this file if you're using vs code you can type HTML and select this HTML column 5 here and vs code will create a basic HTML template here for us and let me change the title here to to shopping cart cuz this page will simulate a shopping cart page and we're not going to create any Styles any CSS files for this example we just want a basic template so inside the body here I'll just create an H1 and I'll put shopping cart and Below I'll create an H3 with the name of a product so I'll put node.js and express book and a paragraph with the price and it's going to be equals to $50 and I'll add another paragraph here with the quantity and for this product I'll just add one now we need to add a form here and this form action is going to call the slash checkout route so we're going to create this checkout route later and this is going to be a post request so m method is equals to post okay and inside this form all we need is a submit button so I'll add an input here of type submit and the value I'll just put proceed to check out all right and that's it so let me save this and we should be able to run our application here on the terminal so let me clear and type node index. JS or just index okay hit enter and we got server started on Port 3000 now if we go to the browser and open a new tab and type Local Host 3000 and there it is just a simple page simulating a shopping cart with just one product and if we click on proceed to check out it's going to make a request to SL checkout but we haven't created this route yet on the index.js file so it's not going to do anything for now now every time we change something on our app we need to stop the server by pressing contrl C and run again the node index.js command so I'm going to install a module called nodemon which will keep listening for changes inside our app and every time we save a file node modon will restart the server for us automatically so let me stop the server here on the terminal and we can install nodemon as a global dependency so we don't need to add any extra for configuration I already have node modon install and the command to install node modon globally is npm install node Manon and you need to add a global flag here which is dasg and maybe you'll need to add P sudo here on the front since it's installing a global dependency once you hit enter node modon will be installed and now all you need to do is type noemon and hit enter and now every change we made once we save the file node modon will restart the server for us we can even close the terminal here for now okay so now we'll create the integration with stripe so the first thing we need to do is copy the secret key from the dashboard so here on the developers page API Keys tab we can click on review test key and click on top of the key to copy now let's store this key inside thein file so I'll create a new environment variable call stripe underscore secret underscore key which is equals to the key we just copy perfect now back on the index.js file we need to import this tribe module here on the top so below the Express in import I'll add cost stripe equals to require stripe and to initialize stripe we need to add parenthesis here and inside the stripe secret key that we added here on the M file and to get the content from the stripe secret key we need to call process. a do stripe secret key great now we need to create the checkout route we're calling once the user clicks on the proceed to checkout button inside the form on the index ejs file so on the index.js file let's create this route below the Home Route so app dopost and the name of the route is slash checkout and we need the request and response parameters Arrow function and inside we need to create the checkout session so I'll create a new cost call session equals to await stripe do checkout do sessions do create and this will receive an object and since we're using the await word here to wait for this function to be executed so we need to add the async word before the request and response parameters from the route function okay so inside the object we need to set a few details so stripe know what to do and show the correct information on the checkout page so we'll add the mode property which is equals to payment that means means it will be a one-time payment this can also be a subscription which will charge the customer over a certain period we will use this mode in future videos but for now we're just going to use the payment and we can set a property call successor URL which is the URL the user will be redirect when the payment is complete so let's add here HTTP Local Host 3,000 slash complete for example and we can also add a property called cancel uncore URL if this property is set the checkout page will display a back button and the customer will be redirect to the URL will configure here so let's add HTTP Local Host 3000 and we'll call this route SL cancel for example and we'll create both these routes here on the index.js file so we need to set a property for the products so I'll just create above the mode here and this property is called line uncore items which is an array of items that the customer is purchasing so let's add an object here and inside We'll add the price underscore data property which is also an object with the currency property so this is the three-letter EOC currency code in lowercase so I'll put USD which stands for United States dollars but make sure to change this to the currency you are accepting next the product underscore data which is also an object with the name of the product so let's copy here from the index.js file so the product name is node.js and express book and let's paste inside the name here and we could add other properties here like the description or the image of the product but let's leave just the name for this example so that's it for the product data property and next uh we'll add the unit underscore amount which is the product price but we need to add in cents so on the index.js file we put the price as $50 so let's put 50 here times 100 to convert to cents and that's it for the price data object and we need to set the quantity property which is the quantity of the line item being purchased so for this product here let's check we just add one great so that's it for now and let's write on the console the session cons so we can see the result so here on the bottom console do log and inside session okay let's save and test this on the browser so I'll call the Local Host 3000 here and let's click on proceed to check out now as you can see we didn't send any response to the client to the browser so it's just going to keep waiting and let's check the result on the terminal and here's the response let me expand here uh okay so as you can see the session result has a lot of details so here we have the session ID and some other details for the checkout session but what we'll need here is the URL property so if we copy this URL here and open on the browser let me open a new tab here and paste the URL so this is the checkout page we should redirect the customer and on the left side here we have the total amount and the product details and on the right side we have the payment details where the customer can enter the card information or choose other payment types for this example we have the link here uh we'll change some things on the checkout page later like disable the link payment or maybe enable other payment methods as well and we can add the shipping address as well CU as you can see they're not here on this page now if we click on the back button here on the top left the customer will will be redirect to the slash cancel route which we haven't created yet now let's go back to the checkout page and let me enter the payment details here so we can test so for the email I'll just add an email address here so email at domain.com and for the card number stripe recommends to test 4242 for all numbers which will return a success payment so I'll just add for two for everything here and for the expired date we can add any date here so I'll add January 25 and for the CVC we can add any number as well so I'll just add one two three for the card holder name I'll put John do for example and the country I'll leave as Brazil okay all good and this option here is to save the payment details for our next purchase but we won't use it for this tutorial so we can leave unchecked uh great so now we can click on pay okay great and the customer will be redirect to the slash complete route but it's showing the Z here because we haven't created this route yet now if we go to our stripe dashboard and click on payment here on the left side you can see that we receive one payment of $50 the pay payment method details and the customer email here and if we click on this payment we can see more details like the products the customer purchased and the total amount we actually received after the tripe fee and if we scroll down uh we can see the customer details as well awesome so the checkout information that we're passing to stripe is working and we need to do a few changes here so inside the checkout route we need to redirect the user to the stripe checkout page which is the URL here on the response so let me remove this console log from here and add response. redirect and the session constant do URL okay now we need to create the routes that we configure here for the success URL and the cancel URL properties just one small change we need to do here because we're testing our application on our personal machine which is the local host but when this application is in production when it's live we want to specify the actual domain for the production server so we need to add this base URL here which is the Local Host 3000 on the M file because we'll have a different a file with different variables here for the production environment so this is one of the main reasons why we need to create an environment file like to make thingss easier and secure of course when we put the application in production so let's create a new environment variable which is going to be the basore URL and for the development environment I'll add the HTTP Local Host and the port 3000 now back on the index.js file on the success URL property let me replace here with back ticks and remove the Local Host base URL from here leaving just these lash complete and add dollar sign curly braces and inside process. a. Bas URL great now the same for the cancel URL property so back tick and replace the Local Host here with the dollar sign C braces and call process. a. Bas your perfect so now everything is configured inside thein file now let's create both these routes So Below the checkout post route I'll add app.get and the name is slash complete the request and response parameters Arrow function and inside I'll just send a message to the customer so response. send and we'll add something like your payment was successful of course when this is in production you definitely want to create a nice template file here on the views folder and render to the customer but since this is just an example we'll make it simple now let's create the cancel route below the complete route so app.get slash cancel the request and response parameter Arrow function and inside let's send a message to the customer as well so R do send and we'll put payment cancel actually what we can do here is redirect the customer to the Home Route where we're rendering the index template so instead here we'll call rest. redirect and the Lash here which is the Home Route we could add the Home Route Direct here on the cancel URL property but let's say you might want to save some information when the customer cancel the purchase so we could do it here inside the cancel route and then redirect the customer back to the Home Route so I'll leave it like this now let's save and test again back on the browser and let me open the tab we were using already I'll call the Local Host 3000 and let's click on proceed to check out great and now the customer will be redirect to the stripe checkout page and if we click on the back button the customer will be redirect to the cancel route and redirect again to the Home Route perfect now let's click on proceed to check out again now before we enter the payment details and click on pay let's change some things here on the page let's say we don't want other payment methods here and leave just the card payment method or maybe add other payment methods as well and to configure the payment methods uh we can go to the stripe dashboard and click on the settings icon here on the top and select settings next we can click on the payments option and click on the payment methods tab okay so if we scroll down here you can see all payment methods we can enable or disable from the checkout page so the card is active and we'll leave it like this now let's disable other payment methods so the Apple pay here let's click and then click on turn off okay now for the cash app pay as well okay now for the link as well so depending on the payment method we are turning off stripe will ask if we really want to turn off because it's a popular payment method but for our example we can turn it off okay so now on the checkout page it will only show the card option so let's go back to the Local Host 3000 and click on proceed to check out and great as you can see now it's only showing the card payment method and for the product items here uh let's add another item so we can see how it looks so back on the ind. ejs file uh let's add another product here on the page so I'll add an BR tag here and copy the H3 and both paragraphs and paste below the BR tag now the second product name uh I'll add JavaScript t-shirt for example and the price will be $20 and the quantity uh let's put two here okay now we need to pass these details inside the line items property so let me copy the entire object here add a comma and paste after the first product object so the name of this other product will be let me copy here and paste and the price is 20 * 100 and for the quantity we added two now note that the unit amount here is the price of each of this product item here and the quantity is two so stripe will calculate the total amount automatically for this product let's test and see how it looks so save and back on the browser let me call the Local Host 3000 again click on proceed to check out and there it is so now the total amount is $90 and we have two items now the node.js express bug and two JavaScript t-shirts of $20 each and the total amount is $4 perfect now one last thing we need to change here is add the shipping address form so the customer can type the complete address so we can deliver the purchase product so back on the index.js file inside the checkout session object all we need to do is add a property called shipping underscore address sore collection and this is an object and inside we need to add the allowed underscore countries this is an array of countries that we can deliver the product so we need to add the two letter EO code for the country so for example I'll add United States here which is us and Brazil for example which is BR we could add other countries here but for our example I'll just leave these two and that's it so let's save and test on the browser so back on the Local Host 3000 click on proceed to check out again and there it is now we have the shipping address input with the full name of the customer who will receive the product the country drop down with Brazil and United States the address and we can click on enter address manually here to show more details like the neighborhood the city the state and the postal code and if we change the country to United States the fields will also change according to the address details of the country so let's F this inputs so we can test so for the email I'll just type the same email from before and the name I'll put John do again and I'll leave the country as United States and the address line one I'll add 100 test Road and the address line number two I'll add Unit 10 and for the city I'll put San Diego for example and the zip code I'll put 920000 and the state is already filled to California according to the ZIP code now for the payment details uh the car number I'll add again 4242 to all numbers and the expired date to January 25 and the CVC to1 123 now we can leave the billing info is same as shaping checked but we can uncheck this and it's going to ask for different billing information so we'll leave as checked and let's click on pay okay processing and great we got redirect to the complete route and showing the message your payment was successful now let's check on the stripe Dash board if the payment is there so I'll click on the payment options on the left and there it is we have a new payment of amount $90 let's open and here are all the details like the customer details uh the shipping details the items the customer purchased and the total amount after the stripe fees awesome everything's working perfectly now what if we need to get the details of the payment here inside the complete route so for example we might want to store the details of the payment and the customer inside our database so what we can do is add as a parameter the session ID here on the/ complete route and this session ID we can get it when the checkout session is created so here on the success URL property we can pass a query parameter by add in a question mark on the end of the URL and we'll name this parameter as session underscore ID equals to curly braces and inside we can type checkout underscore session uncore ID and stripe will automatically replace this variable with the session ID but we have to type exactly like this session ID equals to check out session ID all in upper case because this is a string literal now here inside the complete route let's log the session ID from inside the URL so console.log and to get the session ID parameter we can pass the request objectquery do session uncore ID just like we added here on the URL okay let's save and test this on the browser again so back on the Local Host 3000 click on proceed to check out and I'll just fill all information here with the same details from before Okay click on pay and great uh we got your payment was successful and here on the URL we got the session ID as a parameter and if we check on the terminal here is the session ID now we can retrieve the checkout session details inside the complete route for that we can create a new cost here call session equals to AWA stripe. checkout. sessions. retrieve and inside we need to pass the session ID so request do query do session uncore ID and it's showing an error here on the8 because we need to add the async word before the request and response parameters making this route a synchronous now let's log the session constant on the console so I'll replace here to the session constant let's save and test again on the browser open the Local Host 3000 and click on proceed to check out and I'll type the same informations from before Okay click on pay okay your payment was successful assful now back on the terminal let me expand here a little and here the complete object with all the details from the checkout like the total amount details of the customer uh the shipping details but it's not showing the items that the customer purchase and also the car details cuz we might need to inform the customer if we have any problems so we could call another function here from from stripe to get the payment intent details by passing the payment underscore intentor ID return here on the response or we could add an extra parameter here inside the retrieve function which is an object and we can add the expand property and this will be equals to an array of the details we like to expand so for example uh we can expand the payment underscore intent payment uncore method so when we do this instead of just showing the payment intent id here it will show a complete object with all payment details like the card number last four digits the expired date the card holder full name and other details as well and for the items the products that the customer purchased for that we'll need to call another stripe function because unfortunately we don't have a property to expand like we did for the payment intent So Below the session retrieve function I'll add another cost call line items equals to await stripe dot checkout dot sessions Dot and the list line items function and inside we need to pass the session ID which we can get it from the query parameter inside the request so request do query do session uncore ID now let's log the line items constant so console. log and the line items constant okay let me close the Explorer here so not that we're calling two asynchronous functions here but we are waiting for the retrieve function to be executed and then we need to wait for the list line it items function and then we are sending the response and the list line items function doesn't depend on the results of the retrieve function so instead of calling like this we can call these two functions in parallel so I'll create a new constant called result equals to promise do all and we can add an array here passing both functions we want to execute so I'll copy this strip retrieve function here and paste inside the array now copy the list line items [Music] function and let me break this in different lines here add a comma and paste the list line items function so now we're calling these two functions at the same time great now we can remove these two functions call and instead of calling two console logs like this we can call just one with the result constant but the result constant here is a promise so we need to add an await here in front of to await for the result we can add directly inside the console log here or create a different constant and pass that new constant now some properties we return an object so let's convert the result here to a string by adding the json. stringify method and the await result constant inside okay so let's test all this so I'll save and open up the browser open the Local Host 3000 again click on proceed to check out all right and I'll type all details again from before Okay click on pay and perfect we got the your payment was successful message now back on the terminal so we got this huge response here as a string so let me copy all the response here and here on the tabs I'll click on new text file and paste the content here inside okay now right click and select the format document okay so now we have all details from before and if you check check the payment intent property uh as you can see now it's an object with all the payment details and inside we can check the C details with the brand and the expire month and expire ear and the last four digits of the card and if we keep scrolling you'll find another object which is the list line items details with the products that was purchased like the node.js and express book and also the JavaScript t-shirt details so now we can actually grab the information that we need and store inside our database for example so we can have more control over the checkout and the payment details here inside the complete route great so we saw in this video how to integrate the stripe checkout on a node.js application using the stripe official module and like I said on the beginning uh we can do a lot with stripe so I really encourage you guys to read the documentation and understand more about stripe and we can test as many times as we want because since we're in test mode so all transactions will be fake and there aren't real money involved I'll leave the GitHub repo link for this project on the description below hope this video was helpful to you and if it was please click on the like button and subscribe to the channel so we can continue continue making more videos like this thank you so much for watching and hope to see you on the next video

Channel: manfra․io

Views: 4,598

Keywords: nodejs, node, node.js, stripe, checkout, stripe checkout, payment, payment gateway, credit card, javascript, express, ejs, api, coding, programming, vscode, json, manfra, manfra.io, node with stripe

Id: cheDHoEazPs

Length: 40min 33sec (2433 seconds)

Published: Fri Apr 05 2024