Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Killeon Patterson
18,528 PointsNode.js Stripe checkout
I'm attempting to test errors for a card submission for a form. When I restart the server, enter data into the field, and press 'checkout', I receive a 404 error POST /checkout 404. Through multiple iterations, I changed the file path and I receive variations of the 404 message. What is the file path that I'm looking for? I also looked in the layout.hbs file. The jquery script appears to be in the right order?
this is my gist https://gist.github.com/Satellite9/5e4ce3de5c19cee2f355d872b6d7d3c8
4 Answers
Kevin Korte
28,149 PointsI think you're problem is your form's action. It's trying to post to yourdomain.com/checkout and it's telling you in it's error message that 404 (It can't find) /checkout.
I have no way of testing this, but I think you can just capture the form submit event, like your doing, and handle the submission, without posting to an action. Trying making your form's action action="" or even just removing that attribute from your form element, and see what happens.
Andrew Chalkley
Treehouse Guest TeacherIn the jQuery form submit try adding event.preventDefault() to the first line of the submit callback. This should stop the form from submitting to a URL that doesn't exist.
Killeon Patterson
18,528 PointsHello Andrew,
Thank you for your response. I updated my gist and added the event.preventDefault(); in the first line of my event callback. I'm still receiving the same bug. My npm windows reads Post /checkout 404 206.855 ms -5424
This is the error that the browser throws
Error: Not Found at C:\Users\Leimamo\PhpstormProjects\untitled2\app.js:60:13 at Layer.handle [as handle_request] (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:317:13) at C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:284:7 at Function.process_params (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:335:12) at next (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:275:10) at C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:635:15 at next (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:260:14) at Function.handle (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:174:3) at router (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:47:12) at Layer.handle [as handle_request] (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:317:13) at C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:284:7 at Function.process_params (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:335:12) at next (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:275:10) at C:\Users\Leimamo\PhpstormProjects\untitled2\app.js:51:5 at Layer.handle [as handle_request] (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:317:13) at C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:284:7 at Function.process_params (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:335:12) at next (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:275:10) at serveStatic (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\serve-static\index.js:75:16) at Layer.handle [as handle_request] (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:317:13) at C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:284:7 at Function.process_params (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:335:12) at next (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\express\lib\router\index.js:275:10) at SessionStrategy.strategy.pass (C:\Users\Leimamo\PhpstormProjects\untitled2\node_modules\passport\lib\middleware\authenticate.js:325:9)
Kevin Korte
28,149 PointsYou're still submitting your form to /checkout. I see you have that route defined, but it doesn't look to me like that route is set up to handle an form submit with this information - which my be why it's throwing a 404. I'm not sure, I can't easily run this on my current machine, but you need to know what you want to do after you've created a stripe card token. Do you want to save this to your local database, show a "thank you" page, what's the end goal here.
Right now you're still posting a form to /checkout after you get the card token back from Stripe, but not charging the card. After the form submits, that route would be your opportunity to to save what you want to save to your own database, and also submit the token stripe gave you to charge their card.
Killeon Patterson
18,528 PointsHi Kevin,
Yes I haven't dealt with the full submission as of yet because I was testing the if statement for the error in the stripeResponseHandler. When I enter in incorrect information to the form, I'm expecting it to direct me to the /checkout page with the and removeClass 'hidden' for the error message. I've looked into the Jquery script and changing the paths on the form and the route, still doesn't seem to do the trick. Andrew Chalkley suggested that it may be the return false vs event.preventDefault(). I tried that and no go. I'm going to attend a coding lab on Thursday and try to get some help there. I posted on stackflow, as well, attempting to work it out with a guy that thought it was the matter of post vs get, unfortunately, the same results.
Andrew Chalkley
Treehouse Guest TeacherHave you tried Stripe support? Do they have any example code what you're trying to do?
Regards,
Andrew
Killeon Patterson
18,528 PointsHello Andrew
I got it worked out with the Stripe team. I thought the issue was on the front end and did not realize that was something they'd assist me with. Thank you for you advice.
Best, Killeon
Killeon Patterson
18,528 PointsKilleon Patterson
18,528 PointsHello Kevin,
I believe that it is the form's action that's causing the issue. Although, I attempted to change the attribute to action="" and removed the action completely, I got the same message. Do you have any other suggestions? Thank you for your time.
Killeon