at 14:36 I got those errors: require('dotenv').load() TypeError: require(...).load is not a function. I solved it by using require('dotenv').config(). But WHY? I'm simply trying to debug according to their npm dotenv, they say: config will read your .env file, parse the contents, assign it to process.env, and return an Object with a parsed key containing the loaded content or an error key if it failed. So I take it it does the same thing with load(), am I correct? Sorry it sounds silly, but it's all new to me.
Thank you so much. I been trying to find how to fix it, until i gave up i just decided to scroll down through the comments until i found your post. Thank you so much for the fix.
You can also hover your mouse over the specific keyword/function and you'll get all the details straight from VSCode. In this case : "@deprecated - since v7.0.0 Use config instead." Hope it helps with future problems :) Cheers
The last few days I have been watching/coding along with your videos. I've done a lot of self guided programming learning, both through youtube and udemy, and you're by far one of the best instructors I've learned from. I've found a lot of instructors go so painfully slow that their tutorials are incredibly boring, or some move too fast and are unclear/confusing. You hit a perfect rhythm-- fast enough that you're constantly engaging, but you always explain what you're doing/why the code works in a clear, straightforward, succinct way. Thanks a lot for your great videos, you've now got another loyal subscriber.
Can't appreciate you enough. This channel deserves more recognition. You may find repeated content over and again on tons of TH-cam channels but this is Gold. _/\_ You must incorporate a "Donate" button here.
Thanks. I really appreciate it. I have a Patreok you can find linked in my newer videos if you want to donate. I also have a few courses you can check out linked in my newer videos if you are interested as well.
when I open the site in my localhost:3000 and go to the store page it tells me store.html can't be found. Sure there is no store.html anymore because it is store.ejs, but how to fix this? What worked is to have a store.ejs and a store.html, but the purchase button still doesn't seem to work. After I give the "node server.js" comment I also don't get the stripe keys.. it will just be empyt and open the port. Thank you for your great work!
34:38 when I load up my website and click the button, nothing happens. Neither an error, neither any alerts and no popup for the stripe handler either. I'm confused as to why its not working.
The Stripe documentation has changed and it says "token" is no longer allowed. I am completely stuck, I do not know how to adapt this code to the new version of Stripe. I've tried fixing this issue all day but I just can't do it. My Stripe checkout simply doesn't show and it gives me a bunch of errors. Help would be very appreciated!
Are you trying to use the same token? You have to use a new one every single transaction. If it says token no longer allowed im willing to bet the token expired due to it timing out or already being used
@@brandonz404 The token is only one of many problems when initiating Stripe. For example, StripeCheckout is deprecated and cannot be used so everything in that section must be redone with different methods.
@@Matdrox this video is old. so im havin doubts to follow this toutorial. Should I proceed?. If you found an alternative to this payment through node js , can we talk at my insta- nide.786
@@arimassuh6294 The stripe library has completely changed. I am still trying to get it working. I managed to get the popup to work but idk how to take in all the elements in the cart.
That's weird because I'm not getting any problems using this code, apart from a console warning that I'm using a legacy version of Stripe Checkout. I've got no problems using the token at all.
hi, thank you so much for the tutorial. I followed all the way until the 27th minutes. However, unable to go into Store page after changing the file name from store.html to store.ejs and moved it to views directory. When i tried going to store, it has Cannot GET /store.html error. Am I doing anything wrong here? edit: got my answer, the href is supposed to be /store instead. thank you for other comments below.
if u see this, please help: I've changed the href in the index, about, & store.ejs files and still getting the same error. Is there anything else I need to change?
hello my big I followed your tutorial carefully but I can't take it back for a personal project on which I am long ago. I want your help to succeed I ask if you want a private discussion so as not to disturb the comments too much my email: jackibenj@gmail.com
Hey this tutorial is amazing !!!! thanks for sharing with us on youtube. I've got one simple question for you. In this video you were able to access a variable called "StripeCheckout" in the "store.js" file and I'm not fully understanding how you were able to just have access to this variable without needing to do anything appart from installing stripe from your terminal at the beginning of this video. Can you please explain how this "StripeCheckout" variable was made accessible in the "store.js" file?
29:50 He included the checkout.js file from checkout.stripe.com in the script inclusion part of store.ejs, at line 7. Then at line 11, the EJS includes the store.js file. And the effect on code is that the store.js source code comes in after the checkout.js one (that refers StripeCheckout), so store.js is able to know what StripeCheckout is. If store.js had been included in the EJS section before that checkout.js file, then it would not have worked. Priority of JS inclusions matters too!
hi kayal, I'm talking about the 34.00 mintues of the video. I'm not able to get the popup of pay window. it actually remains same its not getting any error or alerts please help me with this.
i am having same issue too, i checked the console and i saw an error "store.js:24 Uncaught ReferenceError: stripeCheckout is not defined at app.js:24"......can anyone help please
I already know this stuff, but decided to watch anyway, just to see if I learned anything new... I will say, the distinct lack of semi-colons shook me to my core.
How can I get that there is also an interface to put in the shipping address? Great video, helped me a lot, now it would be good if there are some input boxes to type in the shipping address.
@@RD-lf3pt actually most of it seems good enough but in 32:40 he gets price data from element. Of course this is to be a basic example and it might be fine but then again, I would warn people about it. Because it needs to be fetched from some kind of database, otherwise I can inspect element to change the price.
hello my big I followed your tutorial carefully but I can't take it back for a personal project on which I am long ago. I want your help to succeed I ask if you want a private discussion so as not to disturb the comments too much my email: jackibenj@gmail.com
What an excellent tutorial! I am very thankful for this lesson. I am having trouble finding the current Stripe Checkout API tag... Does anyone have a solution?
Please make a video about how to create login/sign up system using node.js and mongoDB, I also watched your video about create shopping cart using only vanilla.js, it's gonna be great if you also make a tutorial about that, but using an actual web server and databases Great job by the way !
This is amazing thank you so much. Can you please do a video in full shopping cart experience with checkout process (customer info, shipping address, etc) and add to cart items carrying over as uses navigate to different pages? Sometimes users navigate from one page to another when shopping.. Example: browsing "clothing" tab and then "shoes" tab.. How can the add to cart item stay in the basket when users flip through different pages? It would be greatly appreciated if you can do a video on this. Your tutorials are perfect. God bless! :)
can you do a follow up to change this project to a live project? In order to deploy the site. What are the steps we need to change it to a live and working enviroment?
@@WebDevSimplified OK cool awesome. I'm trying to implement a payment method to a site I'm working on. So what about if we want to implement this in a real project. just did a website for them but they want to implement a payment method for the users. Instead of deploying to Heroku, we can upload it to our server?
@@WebDevSimplified ok i undersand. And hey one more question i have. Every time I make a purchase, in this case a $6.99 (coffee cup), I make the transaction and when i go to the stripe dashboard, the payment shows up as $12.99. It adds a 6 dollar for some reason. It doesnt show the correct total amount. I tested it and it just shows up random total amounts from different quantities and prices. Why is that?
It sounds like your Node.js.js server is sending the wrong amount to Stripe. I would check the server code to see if it is adding the amount correctly.
How would you go about making the cart on a separate page? For example, I have all my products on their own separate pages and want to be able to add them to the cart form their individual pages and then click a link to the cart page to see the cart and checkout.
Hey, I have a quick question: 1. you set up gitignore, so you env will not be tracked by git, but if you git add . , you can still add that env file onto your github repo right? 2. If it's in that case, does it mean we must move our .env file somewhere so to be safe when we commit to Github? 3. What happens when you configure it to a real server, you just upload everything since your real server will probably only show stuff in the public folder? I know I am going to know more about this later, but I'm just curious. ^^ Thank you!
Great questions. 1. If you add a file to your .gitignore it will not be added to your repository when you run git add . If you added and committed the file to Git before adding it the .gitignore, though, it will be in the repository, but it will not be updated after adding it to the .gitignore. To remove the file you will need to go through some extra steps to remove it from your old commits and the actual repository itself. 2. You do not need to move the .env since it will not be added. 3. When you deploy to a server you should be able to deploy the code that is in you remote GitHub repository. The server will then install any additional libraries such as node_modules it needs. As for environment variables, you will need to set those up on the server. Luckily, hosting platforms make it incredibly easy to setup environment variables.
@@WebDevSimplified Ah, thank you so much! Great to know. ^^ I've started basics of Node.js and found after this tutorial it becomes a bit easier for me. Even when I did the tutorial everything is daunting and I spent certain amount of time reading various documentation. :) But it's probably easier if I have learnt basics first then do tutorials. Like the JS one I did previously.
@@WebDevSimplified By the way, maybe you can make a video on how to do the "damage control" in case some newbie dev forget to pass env with password in the gitignore, then commit it, and what's the best practice to remove everything, would be a great idea for the git series, and it's related to people who might follow this whole tutorial (I'd assume they're more or less newbies like me).
@@WebDevSimplified Looks a very good video I will probably go back and build the cart and maybe a jquery clone as the alerts look hideous! Some good questions on here I have a few will ask separately for clarity. 1: You don't use a database to save the id from stripe as you mention at the beginning of the video but the video sort of implies much later it will be on the stripe dashboard which in effect is the database, is that sufficient?
Hello everyone ! I understand that currently the link "checkout.stripe.com/checkout.js" no longer works, what can I do to replace it and make the payment work ??? A great tutorial !!
Thanks for the tutorial. One question I have is what is usually the determining factor in deciding between in-line javascript vs external .js files? I understand as a general rule that external is typically the way to go so why use in-line scripts here?
Aww. I see what you are saying. There is really no way to move that logic out of the HTML since it is essentially passing variables to your stripe checkout javascript. This is a quite unique use case though since it is a way that stripe found to make the setup of stripe as painless as possible for users. You can use the custom process defined in this video, which does not use the easy setup stripe checkout, but it depends on your needs.
@@WebDevSimplified Okay that makes sense. Well that's good news then that it's not the only(or even preferred) way of setting it up. I prefer your setup. Thanks for the quick reply!
hello my big I followed your tutorial carefully but I can't take it back for a personal project on which I am long ago. I want your help to succeed I ask if you want a private discussion so as not to disturb the comments too much my email: jackibenj@gmail.com
Great tut. However, worth ensuring when you install node modules they are same versions as in Kyles package.json or you will end up with lots of problems, then it is no longer s 55 minute video! Could do with an update as it is now 4 years old and lots of packages have move on since then :)
hello at about 20th minute the store.ejs is stored in views folder. At localhost:3000 it opens the index.html but pressing the link to store it is written :"cannot get store.html. But it is now store.ejs. write?
I love this video. It is super helpful and I am so happy you created. I have a few questions though. My store isn't rendering properly, I am still getting the error saying "Cannot GET /shop1.ejs" and I believe it might be because I changed something that I did not need to change. In my index.html file should I change my href from shop1.html to shop1.ejs? Also in my server.js file I should have app.get('/shop1', function(req,res) right?.
Thank you. You are correct in your second statement but the href should be '/shop1' since it needs to exactly match the route. The route could also be named anything you want. It doesn't have to match the file name. You just need to make sure you render the correct file in the route.
@@WebDevSimplified Okay. Thank you. I fixed all of the things you pointed out. Now I am getting an error message. "Failed to lookup view "store1.ejs" in views directory". I can't find where I ever put store1.ejs instead of shop1.ejs. Where does it set the name of the file its searching for? Because in my render function is shop1.ejs. I apologize for all of the questions!
In your app.get function for the store page it should say res.render('shop1.ejs', ...) or whatever your view file is called. An easy way to find where you are using the incorrect file name is to use ctrl-shift-f to search in all files.
@@WebDevSimplified That's what I had. Some how when I changed the local host and moved my views folder and it worked. Thank you for your help! I love your videos!
@@WebDevSimplified If the stripe popup checkout isn't working what could be the problem? I tried traversing back through my code and did everything that you did. Yet when I press purchase nothing happens.
That is actually a part of my full intro to backend series that I am working on. It is a quite large project so it may be awhile until it is out. The idea of creating a simple search box is an idea that I will add to my list of individual videos. Thanks for the suggestion.
Once this is done, what would be the next step to ensure that the business then knows what products to distribute to where? I see that it registers the payment on stripe but what happens next from a business point of view? I appreciate this might not be your area but I hope seeing as you understand stripe you may be able to point me in the right direction. Thanks in advance!
Hi, a simple question: when you type in browser localhost:3000 and run the server, what makes the app serving the index.html file as default and not the store.html or about.html?
I have seen in many courses on e-commerce that they use a test card number but I have always wondered how I do to validate those credit cards as well as their passwords, as for example on the udemy page, sorry for my English?
server.js is never referenced outside of the node command to initialize the server. So my question is, how are you able to statically reference the stripe (public) key variable, defined inside server.js, from the context of the stripeHandler without error? I'm getting "Stripe Checkout is missing the required `key` parameter" error, which I'm assuming if from the failed reference.
hello my big I followed your tutorial carefully but I can't take it back for a personal project on which I am long ago. I want your help to succeed I ask if you want a private discussion so as not to disturb the comments too much my email: jackibenj@gmail.com
Hi, do you have tutorials on how customers can purchase the item without paying but rather send an email to user about the customers request. Pay on delivery
I'm having some trouble linking to store.ejs. Would I need to go into the index and about html pages and chage the store href to store.ejs or is there another fix to this problem? The error I am getting says: "Your file was not found It may have been moved or deleted. ERR_FILE_NOT_FOUND" Any help would be appreciated, Thanks!
I was making a drop-down menu with options for people to select which type of membership they would like. Now, I have two separate dropdowns working (one with the name of the membership and one with prices, however, I was wondering if there was a way when they click on the membership name in the selection dropdown menu, the price would change according to the id.
Do you think it is better to just watch the video, or to actually code along with you? I often get completely lost, and feel like a robot blindly copying what you're writing :/
Hello, really good video but may I ask you... how can I run the node command when I'm using notepad++ There is no such console like you are using in visual studio so that way I cannot run local host
Thanks for the guide, everything is working! Is there a way to add the shopping cart to the navbar instead? and if I want it to remember the products added ,for example when I add a product then go to another page, do I need to add the products to the mongoDB server or is it possible using only javascript?
Thanks! I do not plan to modify this to use React or PayPal since that would be a very large undertaking and I do not like to make super long project videos/series.
19:50 I have a shopping cart on the side of my page, kinda like a drop-down menu. so I dont have a store page, my products are in a json file, from there I have a code that puts them on my index.html page. what should i put instead of "/store" should I make the whole "index.html" into "index.ejs"?
Hi, firstly thank you for this great video. I followed all you instructions but I got error like "UnhandledPromiseRejectionWarning: Error: Invalid integer: NaN" and "Successfullt purchased items" alert message doesn't appear! Where I have made mistake?
very good tutorial, thx so much. but, i'd like to see what are the products that the customer have purchased when i click on the customer's details, if anyone know a video explaining how to do so, please share me the link. thx
hello my big I followed your tutorial carefully but I can't take it back for a personal project on which I am long ago. I want your help to succeed I ask if you want a private discussion so as not to disturb the comments too much my email: jackibenj@gmail.com
Hi, thank you very much for the video, is there any for the user to know how much we are charging, because the website may show some amount, and charge some bigger amount.
at 14:36 I got those errors: require('dotenv').load() TypeError: require(...).load is not a function. I solved it by using require('dotenv').config(). But WHY? I'm simply trying to debug according to their npm dotenv, they say: config will read your .env file, parse the contents, assign it to process.env, and return an Object with a parsed key containing the loaded content or an error key if it failed. So I take it it does the same thing with load(), am I correct? Sorry it sounds silly, but it's all new to me.
You are correct. It looks like they removed the load method and replaced with with config last week.
Thank you so much. I been trying to find how to fix it, until i gave up i just decided to scroll down through the comments until i found your post. Thank you so much for the fix.
I love you so much I was stressing on how to proceed, thank you for sharing your findings!
yep just change the:
require('dotenv').load()
to
require('dotenv').config()
working perfectly
You can also hover your mouse over the specific keyword/function and you'll get all the details straight from VSCode. In this case : "@deprecated - since v7.0.0 Use config instead."
Hope it helps with future problems :)
Cheers
The last few days I have been watching/coding along with your videos. I've done a lot of self guided programming learning, both through youtube and udemy, and you're by far one of the best instructors I've learned from. I've found a lot of instructors go so painfully slow that their tutorials are incredibly boring, or some move too fast and are unclear/confusing. You hit a perfect rhythm-- fast enough that you're constantly engaging, but you always explain what you're doing/why the code works in a clear, straightforward, succinct way. Thanks a lot for your great videos, you've now got another loyal subscriber.
A wealth of knowledge here, and for free! Kudos, sir.
I'm glad you enjoyed it.
Information must always be open and free. That's what the world wide web is for
After 2 months I finally found you. You are a life saver.
Being in 2020 Stripe changed a lot since this tut. Could you consider to make a new one updated? Regards.
I love u bro. You've helped me and others so much. People like you deserve all the best. Teaching us to feed ourselves, big ups
great tutorial! Please slow down with the scrolling, esp after you add new code. It makes it easier to follow.
Can't appreciate you enough. This channel deserves more recognition. You may find repeated content over and again on tons of TH-cam channels but this is Gold. _/\_
You must incorporate a "Donate" button here.
Thanks. I really appreciate it. I have a Patreok you can find linked in my newer videos if you want to donate. I also have a few courses you can check out linked in my newer videos if you are interested as well.
this video explains everything so well, so easy to follow. well taught, appreciate this
your so amazing! i am so glad I found you! thank you so much for this. All your tutorials are perfect! :)
I really enjoy your tutorials...You make it very easy to understand
quick question how do i receive order/shipping address and billing address?
when I open the site in my localhost:3000 and go to the store page it tells me store.html can't be found. Sure there is no store.html anymore because it is store.ejs, but how to fix this? What worked is to have a store.ejs and a store.html, but the purchase button still doesn't seem to work. After I give the "node server.js" comment I also don't get the stripe keys.. it will just be empyt and open the port. Thank you for your great work!
I have the same problem, when I hit store in nav and its showing page not found. /store. I wonder how this is going to solved.
I am having the same problem. The git clone is now different and doesn't seem to include the store.html file that is in the beginning of the video.
The link on your index page and your about page should look like this: STORE
Love this guy's tutorials!
34:38 when I load up my website and click the button, nothing happens. Neither an error, neither any alerts and no popup for the stripe handler either. I'm confused as to why its not working.
having this same issue
i have the same problem i think it is a update of the nodejs version
I too have the same problem
I always wondered how to access the data- elements now I know !
That's what you learned from this tutorial?? 😂😂😂
I really like your tutorial. However, I would appreciate it if you could make a new version of Payments With Node.js And Stripe ASAP.
great tutorial, a few little bugs along the way but everything worked out along the way, thank you very much!
The Stripe documentation has changed and it says "token" is no longer allowed. I am completely stuck, I do not know how to adapt this code to the new version of Stripe. I've tried fixing this issue all day but I just can't do it. My Stripe checkout simply doesn't show and it gives me a bunch of errors. Help would be very appreciated!
Are you trying to use the same token? You have to use a new one every single transaction.
If it says token no longer allowed im willing to bet the token expired due to it timing out or already being used
@@brandonz404 The token is only one of many problems when initiating Stripe. For example, StripeCheckout is deprecated and cannot be used so everything in that section must be redone with different methods.
@@Matdrox this video is old. so im havin doubts to follow this toutorial. Should I proceed?. If you found an alternative to this payment through node js , can we talk at my insta- nide.786
@@arimassuh6294 The stripe library has completely changed. I am still trying to get it working. I managed to get the popup to work but idk how to take in all the elements in the cart.
That's weird because I'm not getting any problems using this code, apart from a console warning that I'm using a legacy version of Stripe Checkout. I've got no problems using the token at all.
hi, thank you so much for the tutorial. I followed all the way until the 27th minutes. However, unable to go into Store page after changing the file name from store.html to store.ejs and moved it to views directory. When i tried going to store, it has Cannot GET /store.html error. Am I doing anything wrong here?
edit: got my answer, the href is supposed to be /store instead. thank you for other comments below.
if u see this, please help: I've changed the href in the index, about, & store.ejs files and still getting the same error. Is there anything else I need to change?
Great tutorial. I'm new to Node & Express. Hopefully you're going to make more node & express tutorials?
I definitely will. I want to have both back end and front end videos on this channel, so there will be plenty more Node.js and Express to come.
The video is so helpful and useful. I do appreciate any course you provided. REALLY
Thanks. I am really glad I am able to help!
hello my big I followed your tutorial carefully but I can't take it back for a personal project on which I am long ago. I want your help to succeed
I ask if you want a private discussion so as not to disturb the comments too much
my email: jackibenj@gmail.com
Hello, when i click wallet button i am getting a error as Cannot GET /store.html
same here. anybody help?
same
you have to change href link in about.html, index.html and store.ejs(formal store.html) from store.html to /store
Hey this tutorial is amazing !!!!
thanks for sharing with us on youtube.
I've got one simple question for you.
In this video you were able to access a variable called "StripeCheckout" in the "store.js" file and I'm not fully understanding how you were able to just have access to this variable without needing to do anything appart from installing stripe from your terminal at the beginning of this video. Can you please explain how this "StripeCheckout" variable was made accessible in the "store.js" file?
29:50
He included the checkout.js file from checkout.stripe.com in the script inclusion part of store.ejs, at line 7.
Then at line 11, the EJS includes the store.js file.
And the effect on code is that the store.js source code comes in after the checkout.js one (that refers StripeCheckout), so store.js is able to know what StripeCheckout is.
If store.js had been included in the EJS section before that checkout.js file, then it would not have worked. Priority of JS inclusions matters too!
hi kayal,
I'm talking about the 34.00 mintues of the video. I'm not able to get the popup of pay window. it actually remains same its not getting any error or alerts
please help me with this.
did you figure it out? I am having the same problem
i am having same issue too, i checked the console and i saw an error "store.js:24 Uncaught ReferenceError: stripeCheckout is not defined
at app.js:24"......can anyone help please
As always, awesome video 👍. I will need to do something similar very soon, thank you 🤓
Thanks! You are too kind.
I already know this stuff, but decided to watch anyway, just to see if I learned anything new...
I will say, the distinct lack of semi-colons shook me to my core.
well it helps for those who are slow typer i guess in a way
How can I get that there is also an interface to put in the shipping address? Great video, helped me a lot, now it would be good if there are some input boxes to type in the shipping address.
Stripe is not defined
Cannot read property 'open' of undefined
can u please tell me why this error is comming after clicking the stripe button
Really educational video, though it seems quite insecure. You should warn people about configuring the code for production
Where is it insecure?
@@RD-lf3pt actually most of it seems good enough but in 32:40 he gets price data from element. Of course this is to be a basic example and it might be fine but then again, I would warn people about it. Because it needs to be fetched from some kind of database, otherwise I can inspect element to change the price.
hey can you please make a updated video where you tell us how to accept payments in a shoping cart acording to stripes new system
Great tutorial dude, it worked!
hello my big I followed your tutorial carefully but I can't take it back for a personal project on which I am long ago. I want your help to succeed
I ask if you want a private discussion so as not to disturb the comments too much
my email: jackibenj@gmail.com
Can you provide us with a tutorial for the same website but with the newer version of stripe payment
Hell yeah, great video/tut to have. Thanks man
You are very welcome! I am glad you enjoyed it.
Thanks for a great job you did here keep up and be healthily blessed
Thank you!
Nice video bro. Your videos are amazing...
Thanks!
a tutorial for how to manage .env variables in an nginx setup would be awesome
What an excellent tutorial! I am very thankful for this lesson. I am having trouble finding the current Stripe Checkout API tag... Does anyone have a solution?
in server.js use => require('dotenv').config(); instead of .load() function
Thank you so much, I was struct in the error by using load(), but you are a great help for me.
Require is not defined showing
Please make a video about how to create login/sign up system using node.js and mongoDB,
I also watched your video about create shopping cart using only vanilla.js, it's gonna be great if you also make a tutorial about that, but using an actual web server and databases
Great job by the way !
That is on my list of future videos for sure.
Thanks this is really helpfull but i have a question can i make this without stripe
This is amazing thank you so much. Can you please do a video in full shopping cart experience with checkout process (customer info, shipping address, etc) and add to cart items carrying over as uses navigate to different pages? Sometimes users navigate from one page to another when shopping.. Example: browsing "clothing" tab and then "shoes" tab.. How can the add to cart item stay in the basket when users flip through different pages? It would be greatly appreciated if you can do a video on this. Your tutorials are perfect. God bless! :)
can you do a follow up to change this project to a live project? In order to deploy the site. What are the steps we need to change it to a live and working enviroment?
The only real changes needed would be to use a database for the items, and to deploy the site to a place like heroku.
@@WebDevSimplified OK cool awesome. I'm trying to implement a payment method to a site I'm working on. So what about if we want to implement this in a real project. just did a website for them but they want to implement a payment method for the users.
Instead of deploying to Heroku, we can upload it to our server?
@@kevyyar Yeh. You can upload to any server that you have. I just mentioned Heroku since it is easy to setup.
@@WebDevSimplified ok i undersand. And hey one more question i have. Every time I make a purchase, in this case a $6.99 (coffee cup), I make the transaction and when i go to the stripe dashboard, the payment shows up as $12.99. It adds a 6 dollar for some reason. It doesnt show the correct total amount. I tested it and it just shows up random total amounts from different quantities and prices. Why is that?
It sounds like your Node.js.js server is sending the wrong amount to Stripe. I would check the server code to see if it is adding the amount correctly.
How would you go about making the cart on a separate page? For example, I have all my products on their own separate pages and want to be able to add them to the cart form their individual pages and then click a link to the cart page to see the cart and checkout.
For those having issues with "Content Security Policy" errors, replacing my meta tag with this solved them for me:
Sorry please are you having a problem with compiling your ejs file
Does anyone else have this error: store.js:54 Uncaught ReferenceError: StripeCheckout is not defined?
U could try including the without defer tag
Hey, I have a quick question: 1. you set up gitignore, so you env will not be tracked by git, but if you git add . , you can still add that env file onto your github repo right? 2. If it's in that case, does it mean we must move our .env file somewhere so to be safe when we commit to Github? 3. What happens when you configure it to a real server, you just upload everything since your real server will probably only show stuff in the public folder? I know I am going to know more about this later, but I'm just curious. ^^ Thank you!
Great questions.
1. If you add a file to your .gitignore it will not be added to your repository when you run git add . If you added and committed the file to Git before adding it the .gitignore, though, it will be in the repository, but it will not be updated after adding it to the .gitignore. To remove the file you will need to go through some extra steps to remove it from your old commits and the actual repository itself.
2. You do not need to move the .env since it will not be added.
3. When you deploy to a server you should be able to deploy the code that is in you remote GitHub repository. The server will then install any additional libraries such as node_modules it needs. As for environment variables, you will need to set those up on the server. Luckily, hosting platforms make it incredibly easy to setup environment variables.
@@WebDevSimplified Ah, thank you so much! Great to know. ^^ I've started basics of Node.js and found after this tutorial it becomes a bit easier for me. Even when I did the tutorial everything is daunting and I spent certain amount of time reading various documentation. :) But it's probably easier if I have learnt basics first then do tutorials. Like the JS one I did previously.
@@WebDevSimplified By the way, maybe you can make a video on how to do the "damage control" in case some newbie dev forget to pass env with password in the gitignore, then commit it, and what's the best practice to remove everything, would be a great idea for the git series, and it's related to people who might follow this whole tutorial (I'd assume they're more or less newbies like me).
That could be a good idea. Usually whenever that comes up I have to Google it since I never remember all the steps needed.
@@WebDevSimplified Looks a very good video I will probably go back and build the cart and maybe a jquery clone as the alerts look hideous! Some good questions on here I have a few will ask separately for clarity. 1: You don't use a database to save the id from stripe as you mention at the beginning of the video but the video sort of implies much later it will be on the stripe dashboard which in effect is the database, is that sufficient?
Thank you for your video. it helps a lot. I'm currently switching my pos systems on my project site.
Hello everyone ! I understand that currently the link "checkout.stripe.com/checkout.js" no longer works, what can I do to replace it and make the payment work ??? A great tutorial !!
have you gotten a way around this?
it still works even now
Thanks for the tutorial. One question I have is what is usually the determining factor in deciding between in-line javascript vs external .js files? I understand as a general rule that external is typically the way to go so why use in-line scripts here?
I don't believe there is inline javascript in this tutorial. All the JavaScript is either in a template file, a server file, or an included js file.
@@WebDevSimplified I can't find it in the documentation now but this is a form the Stripe documentation says should be used in the html:
Is there not a better way to separate those variables from the form in the HTML?
@@WebDevSimplified Found it. Form with the script tags inside is about 1/4 way down the page.
stripe.com/docs/checkout
Aww. I see what you are saying. There is really no way to move that logic out of the HTML since it is essentially passing variables to your stripe checkout javascript. This is a quite unique use case though since it is a way that stripe found to make the setup of stripe as painless as possible for users. You can use the custom process defined in this video, which does not use the easy setup stripe checkout, but it depends on your needs.
@@WebDevSimplified Okay that makes sense. Well that's good news then that it's not the only(or even preferred) way of setting it up. I prefer your setup.
Thanks for the quick reply!
Aye Man. Nice tutorial. Keep at it
Thanks!
This is an amazing tutorial, thank you!
hello my big I followed your tutorial carefully but I can't take it back for a personal project on which I am long ago. I want your help to succeed
I ask if you want a private discussion so as not to disturb the comments too much
my email: jackibenj@gmail.com
Thanks man for such a helpful tutorial :)
bro your hair is majestic af. Like a lions mane XD
Great tut. However, worth ensuring when you install node modules they are same versions as in Kyles package.json or you will end up with lots of problems, then it is no longer s 55 minute video! Could do with an update as it is now 4 years old and lots of packages have move on since then :)
hello at about 20th minute the store.ejs is stored in views folder. At localhost:3000 it opens the index.html but pressing the link to store it is written :"cannot get store.html. But it is now store.ejs. write?
same problem here
Hey, man really appreciate the content. I was wondering if you knew a way to at a shipping address to the checkout? Thanks man.
This is something you'd likely have to implement on your own, I don't believe stripe handles any kind of shipping
I appreciate this vid!!!!!!! You're the man!
I love this video. It is super helpful and I am so happy you created. I have a few questions though. My store isn't rendering properly, I am still getting the error saying "Cannot GET /shop1.ejs" and I believe it might be because I changed something that I did not need to change. In my index.html file should I change my href from shop1.html to shop1.ejs? Also in my server.js file I should have app.get('/shop1', function(req,res) right?.
Thank you. You are correct in your second statement but the href should be '/shop1' since it needs to exactly match the route. The route could also be named anything you want. It doesn't have to match the file name. You just need to make sure you render the correct file in the route.
@@WebDevSimplified Okay. Thank you. I fixed all of the things you pointed out. Now I am getting an error message. "Failed to lookup view "store1.ejs" in views directory". I can't find where I ever put store1.ejs instead of shop1.ejs. Where does it set the name of the file its searching for? Because in my render function is shop1.ejs.
I apologize for all of the questions!
In your app.get function for the store page it should say res.render('shop1.ejs', ...) or whatever your view file is called.
An easy way to find where you are using the incorrect file name is to use ctrl-shift-f to search in all files.
@@WebDevSimplified That's what I had. Some how when I changed the local host and moved my views folder and it worked. Thank you for your help! I love your videos!
@@WebDevSimplified If the stripe popup checkout isn't working what could be the problem? I tried traversing back through my code and did everything that you did. Yet when I press purchase nothing happens.
great tutorial thanks, can you create a tutorial on how to create and process a search field with node. js and mongodb
That is actually a part of my full intro to backend series that I am working on. It is a quite large project so it may be awhile until it is out. The idea of creating a simple search box is an idea that I will add to my list of individual videos.
Thanks for the suggestion.
Very helpful. Thank you Jedi!
Once this is done, what would be the next step to ensure that the business then knows what products to distribute to where? I see that it registers the payment on stripe but what happens next from a business point of view? I appreciate this might not be your area but I hope seeing as you understand stripe you may be able to point me in the right direction. Thanks in advance!
Great job brother!
Amazing tutorials, I absolutely love this and I'm looking to learn web dev.
Do you have an updated version of this great video ?
Thanks sir keep up with the valuable information🤘🏽🔥
Hi, a simple question: when you type in browser localhost:3000 and run the server, what makes the app serving the index.html file as default and not the store.html or about.html?
Correct
Thanks man. Awesome video
You're welcome!
I have seen in many courses on e-commerce that they use a test card number but I have always wondered how I do to validate those credit cards as well as their passwords, as for example on the udemy page, sorry for my English?
great work - so In production, how do we access the keys if .env is not deployed?
Hello! Mark did you find the answer to your question. I'm asking myself the same question.
im getting Cannot GET /store.html when i click on the store tab
same here, did you find a solution ?
Update the href on the store button in index.html to just 'store'
I did change my store.html to store in my index file but still same problem
@@emonrocks3376 same here, i changed it in the index, about and store.ejs files, but still get the error. did you ever figure this out?
server.js is never referenced outside of the node command to initialize the server. So my question is, how are you able to statically reference the stripe (public) key variable, defined inside server.js, from the context of the stripeHandler without error? I'm getting "Stripe Checkout is missing the required `key` parameter" error, which I'm assuming if from the failed reference.
If anyone else has ran into this issue, please upvote my comment so that we may try and get an answer!
at 33:53 After clicking purchase, the payment card does not appear. What i need to change ?
have you found the answer?
0:50 you can just npm init -y and it will automatically hit enter for all of the terms
I always forget to do that since I am so used to just mashing enter 100 times.
@@WebDevSimplified me too lol
this video helps me so much, thanks for sharing
You're welcome!
hello my big I followed your tutorial carefully but I can't take it back for a personal project on which I am long ago. I want your help to succeed
I ask if you want a private discussion so as not to disturb the comments too much
my email: jackibenj@gmail.com
Is there a way you could show us how to create a website for e-commerce with an admin panel
Great tutorial sir, thank you so much. Can you do a tutorial on stripe transfer please
Hi, do you have tutorials on how customers can purchase the item without paying but rather send an email to user about the customers request. Pay on delivery
after changing store.html to store.ejs, STORE button in the home page is not working. Its throwing an error 'Cannot GET /store.html'. How to fix this?
I got
require('dotenv').load()
^
TypeError: require(...).load is not a function
and i gave up. there is no way around this
Change require('dotenv').load()
with
require ('dotenv').config()
And it should work
@@bedrockcoder5169 Yes, the .config() one is the new function!
load() is deprecated, it is for old versions.
@@peterminea3949 Thanks for your answer
I'm having some trouble linking to store.ejs. Would I need to go into the index and about html pages and chage the store href to store.ejs or is there another fix to this problem? The error I am getting says:
"Your file was not found It may have been moved or deleted.
ERR_FILE_NOT_FOUND"
Any help would be appreciated, Thanks!
After running localhost:3000/store.ejs I get: "Cannot GET /store.ejs"
You will need to change the href to /store. This is because it needs to match the route you defined in the Express application.
@@WebDevSimplified thanks so much, it works now
I'm glad I could help.
I was making a drop-down menu with options for people to select which type of membership they would like. Now, I have two separate dropdowns working (one with the name of the membership and one with prices, however, I was wondering if there was a way when they click on the membership name in the selection dropdown menu, the price would change according to the id.
THANK YOU FOR YOUR VIDEOS
Do you think it is better to just watch the video, or to actually code along with you? I often get completely lost, and feel like a robot blindly copying what you're writing :/
Can we make a complete video on webhooks and payment integration using MERN
Does anyone know where you can see what the customer bought for item/items
Hello, really good video but may I ask you... how can I run the node command when I'm using notepad++
There is no such console like you are using in visual studio so that way I cannot run local host
You can install git bash and run npm from there
Thanks for the guide, everything is working!
Is there a way to add the shopping cart to the navbar instead? and if I want it to remember the products added ,for example when I add a product then go to another page, do I need to add the products to the mongoDB server or is it possible using only javascript?
You haven't any issue with cross-site warning?
@@csablons no I didn't get that, where did you see this error? in terminal?
@@ruthless236 Everything fine with Firefox, it seems Chrome have new security standards about cross-site...
@@csablons Oh I haven't gotten that far as to upload it to my host , but it is working on localhost:3000 and i'm using google chrome there.
@@ruthless236 No, no. I was on my localhost too...
Your tutorials are always excellent! Would you consider making this as a MERN stack video using Paypal for secure donations?
Thanks! I do not plan to modify this to use React or PayPal since that would be a very large undertaking and I do not like to make super long project videos/series.
@@WebDevSimplified Thanks for reply.
19:50 I have a shopping cart on the side of my page, kinda like a drop-down menu. so I dont have a store page, my products are in a json file, from there I have a code that puts them on my index.html page. what should i put instead of "/store" should I make the whole "index.html" into "index.ejs"?
Which is the best backend for your stripe checkout webhook? node? or Next js? or Cloud functions ? :)
Please make tutorial on newest version of stripe payment intents
I do have a newer version of thus tutorial on my channel already
@@WebDevSimplified this is not a new version, I'm talking about payment intent api
Very, very VERY COOL bro. 👍
This is a great video but the stripe service is not available in my country
Hi, firstly thank you for this great video. I followed all you instructions but I got error like "UnhandledPromiseRejectionWarning: Error: Invalid integer: NaN" and "Successfullt purchased items" alert message doesn't appear! Where I have made mistake?
very good tutorial, thx so much. but, i'd like to see what are the products that the customer have purchased when i click on the customer's details, if anyone know a video explaining how to do so, please share me the link. thx
It's really helpfull....
Thanks a Ton🙏🙏
You're welcome!
hello my big I followed your tutorial carefully but I can't take it back for a personal project on which I am long ago. I want your help to succeed
I ask if you want a private discussion so as not to disturb the comments too much
my email: jackibenj@gmail.com
Hi great video. Wondering if there is any chance you could go through the new PaymentIntent stripe API?
I'm using strip payment intents I'm getting incomplete status in stripe payment dashboard what do I do
Hi, thank you very much for the video, is there any for the user to know how much we are charging, because the website may show some amount, and charge some bigger amount.