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.
Stripe does allow subscriptions and they are very similar to purchases. I would recommend checking out the API for recurring charges. I don't plan to make a video on that topic.
Can't appreciate you enough. This channel deserves more recognition. You may find repeated content over and again on tons of UA-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.
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.
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!
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?
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 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
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
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.
22:18 when you turn the store page into an ejs file, It does not longer work to navigate between pages where the page is specified as "store.html", how do you fix this?
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?
From 30:37 onwards, the codes cnt work anymore. Guys, go through the documentation to see what have changed at stripe.com/docs/payments/checkout/migration#client-products
at 13:14 I got an EADDRINUSE for port 3000. I ran kill-port 3000, which killed process on port 3000. I tried to run server.js again, but still undefined. Any reasonable suggestions?
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.
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 !!
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.
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 :)
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.
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?
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!
How do I transfer money from companies bank account to customer's bank account in backend the use of is in a small loan landing app in india. Can any one help me
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?
@@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
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?
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, 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
i got an error on the last steps where charge fail and shows an error in console purchase:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error) store.js:66 SyntaxError: Unexpected end of JSON input at store.js:57:28
After changing Store html to store Ejs. node.server js stopped working and started giving me this error SyntaxError: missing ) after argument list at Module._compile (internal/modules/cjs/loader.js:723:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
i had to remove all the .html tags from the nav toolbar on (stores.html) in the three html pages then left this as so in server.js res.render('store.ejs', { stripePublicKey: stripePublicKey, items: JSON.parse(data) }) this may be your issue to???
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! :)
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 !
Hi! Is there a Demo set up available for a payment Gateway like Stripe? For example, I'd be interested in setting a Demo payment gateway on a project I am doing and I"d want to simply showcase the functionality w/o actually using it with real payment card data.
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!
@@WebDevSimplified Thank you for your reply. Do you mean the user can manipulate the html file? I am really sorry but I still don't get exactly how you can do this. I obviously lack some fundamental knowledge, which is why I really have to get my head around this. Any ways, great channel!
I have issue at 34 minute, the stripe pop-up window is not coming up, i checked my console and i saw an error "store.js:24 Uncaught ReferenceError: stripeCheckout is not defined at app.js:24"......can anyone help please
I'm having an error total = total + itemJson.price * item.quantity ^ TypeError: Cannot read property 'price' of undefined at E:\AlexProjects\NodeJs\PaymentPortal\server.js:43:42 at Array.forEach () at E:\AlexProjects\NodeJs\PaymentPortal\server.js:39:28 at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
is it easier if possible after providing a shipping handler along with its shipping types and prices to be included as the total price if purchasing shipping specific items (Ex) Price:35.99 Shipping:5.00 Total :S40.99 to have a form open upon clicking the purchase button to input email,number,address and credit info but have different destination pages after clicking "verify" purchase depending on info provided and verified ? Both thanking them for purchase but directed to one page for shipping merch that prompts them that a tracking number will be sent upon shipment and directed toward another page for albums that prompt them that a link will be sent via email upon fund verification and transfer to access and download the album. So is their a service that can verify funds in the purchasers account quickly for transfer before allowing one access to the download page via email? So they won't have to wait to long to download? But also is their a code to only allow a specific timeframe to have access to the link sent, to download in order to prevent non-purchasers to have access? Is their a js code to keep track of the customers inputed info provided linked with verified purchases(transferring of funds and or shipment) to then automate a email response for either purchase? Or is this to be done manually(keeping track via excel then sending the links once shipment or transfer of funds are verified on my end? Is their a specific program and or programming code from scratch that can do this for me as i input the customer info and mark as verfied to then automate an email response?
Are there any possibilities for clients to make a payments with their cards and the money goes straight to my bank account without using stripe or anything else?
Technically yes but not really. This is not going to be something you can setup since payment processing is an incredibly complex and difficult process. It is also something that requires strict security compliance and that is very expensive and difficult. I would just stick with stripe or some other payment processor.
Can I use the backend code to make a mobile app ...When I click on purchase button there is a box popping up, would this workout when I use the backend code for a mobile app too(Would such a box pop up in mobile too...)
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.
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
I’m having an issue, maybe you can help. I’ve scraped down everything to make it a simple one price payment but now i a failed charge and syntax error: unexpected end of json
@@larip8 I would prefer a message on Twitter if you can @DevSimplified. If not you can try to find me on discord as well, but I don't use discord much.
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.
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!
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
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.
After 2 months I finally found you. You are a life saver.
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
I hope you all enjoyed this long video. If you have any ideas for topics related to Node.js you want me to cover let me know.
Does this allow subscriptions too?
Could you make a video on how to setup subscriptions with stripe and node.js?
Stripe does allow subscriptions and they are very similar to purchases. I would recommend checking out the API for recurring charges. I don't plan to make a video on that topic.
Firebase integration!
You could do a project with sign/up, login, A/B testing and including payments!
Would love to see a video on Firebase integration as well, specifically Firebase Auth!
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
Can't appreciate you enough. This channel deserves more recognition. You may find repeated content over and again on tons of UA-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.
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.
i have the same problem i think it is a update of the nodejs version
I too have the same problem
great tutorial! Please slow down with the scrolling, esp after you add new code. It makes it easier to follow.
I really enjoy your tutorials...You make it very easy to understand
quick question how do i receive order/shipping address and billing address?
this video explains everything so well, so easy to follow. well taught, appreciate this
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.
a tutorial for how to manage .env variables in an nginx setup would be awesome
your so amazing! i am so glad I found you! thank you so much for this. All your tutorials are perfect! :)
bro your hair is majestic af. Like a lions mane XD
at 33:53 After clicking purchase, the payment card does not appear. What i need to change ?
have you found the answer?
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
I always wondered how to access the data- elements now I know !
That's what you learned from this tutorial?? 😂😂😂
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
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?
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"?
great tutorial, a few little bugs along the way but everything worked out along the way, thank you very much!
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
Thank you for your video. it helps a lot. I'm currently switching my pos systems on my project site.
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
At 25:30 when I restarted my server as you did, the error code did not disappear
Love this guy's tutorials!
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
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.
22:18 when you turn the store page into an ejs file, It does not longer work to navigate between pages where the page is specified as "store.html", how do you fix this?
localhost:3000/store don't add HTML. It will work hahahaha
@@bobbyG883 thanks for this! make sure to also remove the .HTML in the href of a tags that makes the link
Thanks for a great job you did here keep up and be healthily blessed
Thank you!
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
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
Does anyone else have this error: store.js:54 Uncaught ReferenceError: StripeCheckout is not defined?
U could try including the without defer tag
From 30:37 onwards, the codes cnt work anymore. Guys, go through the documentation to see what have changed at stripe.com/docs/payments/checkout/migration#client-products
i got Uncaught ReferenceError: StripeCheckout is not defined, can you please help me to slove this?
Amazing tutorials, I absolutely love this and I'm looking to learn web dev.
Great job brother!
at 13:14 I got an EADDRINUSE for port 3000. I ran kill-port 3000, which killed process on port 3000. I tried to run server.js again, but still undefined. Any reasonable suggestions?
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
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.
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
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.
Very helpful. Thank you Jedi!
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
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.
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 :)
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!
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
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?
Thanks man for such a helpful tutorial :)
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!
Nice video bro. Your videos are amazing...
Thanks!
Thanks sir keep up with the valuable information🤘🏽🔥
How do I transfer money from companies bank account to customer's bank account in backend the use of is in a small loan landing app in india.
Can any one help me
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?
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.
Does anyone have any idea how to bank in or get those payments into a specific bank account upon a successful charge?
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
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
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?
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?
Thanks this is really helpfull but i have a question can i make this without stripe
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?
This would've been so useful .. I live in South Africa & it's not available here .. are there any other methods that msy work for my country?
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
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
Hi, is it possible to share the public keys and secret keysif we're using third party to make integration or plugin with Stripe?
Does anyone know where you can see what the customer bought for item/items
Can you provide us with a tutorial for the same website but with the newer version of stripe payment
i got an error on the last steps where charge fail and shows an error in console
purchase:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)
store.js:66 SyntaxError: Unexpected end of JSON input
at store.js:57:28
i'm getting the same error dude
Which is the best backend for your stripe checkout webhook? node? or Next js? or Cloud functions ? :)
After changing Store html to store Ejs. node.server js stopped working and started giving me this error
SyntaxError: missing ) after argument list
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
i had to remove all the .html tags from the nav toolbar on (stores.html) in the three html pages then left this as so in server.js
res.render('store.ejs', {
stripePublicKey: stripePublicKey,
items: JSON.parse(data)
})
this may be your issue to???
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! :)
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.
Running into an error: Cannot GET /store.html
What should be the path of my file in server.js
it's only "store".
@@tristan7352 That doesn't fix the error
@@loganwiley9252 U need to change to STORE in HTML files as well as store.ejs
@@tristan7352 I fixed that error but now my store won't show the images do you understand why that would be
@@tristan7352 Also I changed it to store.ejs and that was what worked
Hi! Is there a Demo set up available for a payment Gateway like Stripe? For example, I'd be interested in setting a Demo payment gateway on a project I am doing and I"d want to simply showcase the functionality w/o actually using it with real payment card data.
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 can't see how you could change the price from the front end as a user? Could someone please explain, I am pretty new to this. Thank you!
The user can easily open the developer tools of the browser and change the displayed price of any item.
@@WebDevSimplified Thank you for your reply. Do you mean the user can manipulate the html file? I am really sorry but I still don't get exactly how you can do this. I obviously lack some fundamental knowledge, which is why I really have to get my head around this. Any ways, great channel!
I have issue at 34 minute, the stripe pop-up window is not coming up, i checked my console and i saw an error "store.js:24 Uncaught ReferenceError: stripeCheckout is not defined
at app.js:24"......can anyone help please
I'm having an error
total = total + itemJson.price * item.quantity
^
TypeError: Cannot read property 'price' of undefined
at E:\AlexProjects\NodeJs\PaymentPortal\server.js:43:42
at Array.forEach ()
at E:\AlexProjects\NodeJs\PaymentPortal\server.js:39:28
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
Sorry, I found it. Forgot to add id under addToCartClicked
lol I had the same problem this comment helped me find the solution thanks.
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.
is it easier if possible after providing a shipping handler along with its shipping types and prices to be included as the total price if purchasing shipping specific items
(Ex)
Price:35.99
Shipping:5.00
Total :S40.99
to have a form open upon clicking the purchase button to input email,number,address and credit info but have different destination pages after clicking "verify" purchase depending on info provided and verified ? Both thanking them for purchase but directed to one page for shipping merch that prompts them that a tracking number will be sent upon shipment and directed toward another page for albums that prompt them that a link will be sent via email upon fund verification and transfer to access and download the album.
So is their a service that can verify funds in the purchasers account quickly for transfer before allowing one access to the download page via email? So they won't have to wait to long to download? But also is their a code to only allow a specific timeframe to have access to the link sent, to download in order to prevent non-purchasers to have access?
Is their a js code to keep track of the customers inputed info provided linked with verified purchases(transferring of funds and or shipment) to then automate a email response for either purchase?
Or is this to be done manually(keeping track via excel then sending the links once shipment or transfer of funds are verified on my end?
Is their a specific program and or programming code from scratch that can do this for me as i input the customer info and mark as verfied to then automate an email response?
Great tutorial sir, thank you so much. Can you do a tutorial on stripe transfer please
for cart-items div, why not just use an id instead of a class since there's only 1?
Are there any possibilities for clients to make a payments with their cards and the money goes straight to my bank account without using stripe or anything else?
Technically yes but not really. This is not going to be something you can setup since payment processing is an incredibly complex and difficult process. It is also something that requires strict security compliance and that is very expensive and difficult. I would just stick with stripe or some other payment processor.
As always, awesome video 👍. I will need to do something similar very soon, thank you 🤓
Thanks! You are too kind.
Can I use the backend code to make a mobile app ...When I click on purchase button there is a box popping up, would this workout when I use the backend code for a mobile app too(Would such a box pop up in mobile too...)
Aye Man. Nice tutorial. Keep at it
Thanks!
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.
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
How to generate invoice of recent payment using puppetteer (Using dynamic data)?
si quiero subir mi aplicación a producción me basta con configurar el firewall, y el ssl?
Hell yeah, great video/tut to have. Thanks man
You are very welcome! I am glad you enjoyed it.
I’m having an issue, maybe you can help. I’ve scraped down everything to make it a simple one price payment but now i a failed charge and syntax error: unexpected end of json
You need to look at the line number of the error. This could be many different things, but it sounds like you may have a malformed json file.
Web Dev Simplified can i hyu on discord?
@@larip8 I would prefer a message on Twitter if you can @DevSimplified. If not you can try to find me on discord as well, but I don't use discord much.
Web Dev Simplified okay, sent you a message
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.
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!
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
hello, what you use on your face and hair???