Build a Shopping Cart With React JS & Stripe

[@sanjaybatak3549]

Just when you wanted something like this, Brad drops this video. 🎉 Thank you Brad and the team. You guys are doing phenomenal work.

[@paulthomas1052]

A fantastic tutorial. Easy to follow....no errors....a great introduction to Stripe too. Thanks

[@thangtruong1808]

Thank you for your time to support us. Loved.

[@laxmiprasanna4092]

This is exactly what we need. These small videos help us during actual work.

[@JonBrookes]

Watching this from start to finish I honestly did not know how Cooper Codes would fit all the material required to code a react app and Stripe backend with express in such a short session but he did ! Very well structured approach and excellent teaching by Cooper. If you dont know arrays in Javascript and methods for workng with them you will at the end of this. If you've never used context with React you will be fine to do so at the end of this video. If you thought integrating payments into a front end app or any other for that matter is in some way beyond reason difficult you will see how easy it can be by the end of this tutorial. Thank you Cooper and also to the venerable Brad for showcasing a new channel and content of great quality

[@renangaldino6538]

This is absolutaly one of the best React tutorial avaiable in YT, Thanks a lot !!!

[@gnarpow]

@30:31 hands down the best description and analogue. If you just watch this part alone you will understand how powerful react context api is. You truly don’t need state managers. BUT. You do. Excellent work amigo! ❤️

[@mikeynavarro3195]

This is probably my favorite youtube tutorial, Cooper revisited harder concepts for clarification multiple times. he's cool for that, definitely earned a Sub

[@RobButzofNorthAmerica]

Stuff like this is why I support your Patreon! Thanks so much

[@tonykharioki6913]

I hadn't used stripe in two years, and thanks for this. I needed this refresher

[@aliplaysgtr]

Exactly what I needed for a graduation work. Thanks a lot! Super clear and comprehensive

[@josephngugi]

Been looking forward to learn stripe and here it is. thanks to traversy media

[@charugupta7103]

Heyyy traversy! Big fan here, saw your react tutorial few months ago. Came back to revise the same and found this. Thanks for the amazing contetnt.

[@user-vk8kt3tp1g]

Questions can come in⬆️

[@maskman4821]

This is the best React + Stripe tutorial, thank you so much 🙏

[@MatthewPostrel]

This video helped me finish my first full stack project. Thank you.

[@delgorithm]

You're genuinely the boss. No cap. Thanks a lot 🤝

[@mukangwakalonda7726]

I thanks all traversy group, it is my first time I manage the payment project God bless you all

[@HeatherKonz]

This was an amazing tutorial! I am working on a Capstone project that is very similar to this so this was really, really helpful!! Thank you!

[@brandonespinosa3756]

Bravissimo, context hook is amazing. Thank you so much for showing this. Great video!

[@blue_berry_pie64]

Very nice video explaination for each step! Thank Brad and Cooper Codes so much!

[@Julesarixx__my__teleqram__ID]

👆send a direct message for support and guidance

[@shannonbrookshire234]

great tutorial. thank you so much for your efforts. I was stuck on a project for a couple of days and using the 'useContext' and 'CartContext' approach really helped. thanks

[@blipblop92]

Thank you Cooper. Amazing tutorial, so glad I found your channel. Wish the tutorial also showed how to deploy the code to something like heroku or netlify.

[@pablodominguez6129]

awesome, simple and cut to the chase. Thanks man!

[@DavisNorde]

Thank you, Cooper! And nice t-shirt, Brad :)

[@hbela1000]

Your tutorial is very straightforward, thx Brad, thx Cooper.

[@shannonbrookshire234]

I can't give this video enough thumbs up. Thank You

[@aniket1008]

Best tutorial on shopping cart on react

[@Brazo07]

Loved every single minute. Thank you so much

[@perrythepalteypus2185]

Brilliant tutorial man ❤️ total blast 👌🏻

[@tonghandsome1]

Thank you very much Cooper for all the efforts you have done! Also Thank you Brad!

[@Julesarixx__my__teleqram__ID]

👆send a direct message for support and guidance .

[@plaguegames3556]

Great job Cooper, thanks.

[@250kennedy8]

@CooperCodes thank you for this amazing project.

[@andrewaghoghovwia1948]

Thanks so much guys

[@Russ_Paul]

Excellent tutorial Cooper, you're a very good teacher. Your tutorial is very straightforward, it's to the point and makes perfect sense start to finish. One thought that is going through my mind, I don't know if this goes against the grain of React, but could it be restructured into an MVC pattern?

[@TechIndustryAnalysis]

Thanks for doing this bro!

[@logancabrera7824]

Hey guys, I'm having troubles hosting this code. Do I have to change any code to make it work on the web (hosted)?

[@danielowusu6163]

Lifesaver 🎉 subscribed

[@bnji6601]

Amazing tutorial, I had one question on the success and cancel url in the server. I realize this works for localhost. For live deployment how would you go about setting up the routes for that.

[@Julesarixx__my__teleqram__ID]

👆send a direct message for support and guidance .

[@kamichikora6035]

Yes!!!!! Cooper codes!!!! This guy has good stuff

[@CooperCodes]

Hah I appreciate it! Thanks for watching :)

[@arminesmaili908]

real good Armin liked that👍

[@nicolassuarez2933]

Best of its kind!

[@kellyncodes7421]

Thanks for the vdeo Brad/Copper Code

[@sadique_x_]

ohh Brad!🤟

[@VitorGomes_]

Awesome work! Thank you.

[@christian-schubert]

Thanks for this! Love how Cooper structures this video, I really think Brad should make sure any video to be featured on this channel should meet certain criteria, i.e. demonstrating the final product before getting down to the nitty-gritty, etc.

[@thenomad.engineer]

DUDE... MEGA HELPFUL

[@WebAppMeta]

Another tutorial hell. keep going!

[@Feciboy]

Great tutorial! Thank you!

[@cosanostraytc1030]

Great tutorial man. Thank you!!!

[@estifanosgashawtena8789]

Great video, at 45:40 to find the total cost of products from cart, it better to use Array.Reduce() but overall good content 👌

[@CooperCodes]

Yeah there were definitely some tradeoffs at areas to make the code easier to understand, I feel map can be easier to show that at each item we are getting that total price but it is a bit unnecessary. Thanks for the comment and perspective I appreciate it.

[@tarcisiosassi9379]

Really cool. Thanks for share!!

[@M.H.12-m2s]

cooper is the best

[@CodeCouture]

hi, I have a question whn building a full stack ecommerce website how to do you get the person's details Thank you

[@densel.c8935]

Great video!

[@WebAppMeta]

Thanks Cooper

[@futureverse9347]

Very good project Thank you @Cooper Codes 10/10

[@omarimoody9794]

Excellent work, Appreciate cha!

[@madfut24_official]

until now I've my website completely built with html. Do i need an other program and witch program do you use in your vid? Maybe you've said this in your vid but for me only the last 15 min are important

[@VictorJReilly118]

Thanks so much!! Really good tutorial!

[@robeeeeen]

Any necessity of "Remove from Cart" red button? Is that button added since the minus button does not makes the In Cart: 0 ? The function removeOneFromCart do not make it 0.

[@movrew]

This is super cool

[@dannydanny477]

57:15 i have still a NaN in total what is changed ?

[@963seeker]

does anyone know how to set a fixed quantity for items to control the amount of supply of any given item? A user might pay for an item that the supplier (You) don't have in stock :( Any help is greatly appreciated

[@paymankhayree8552]

thanks. really helped me

[@emmanuelenwereji472]

Thank you for this awesome video, I would really appreciate if I can get more clarifications on using local storage for this project, I am having issues, whenever I reload the page, I usually loose all my items in the cart. Thank you

[@marshallgraphic]

This is interesting with Strip letting you manage your products from their platform. Do they provide an API to fetch the products from there so you don't have to store items in a DB in your app?

[@oyeyinkaojora]

Thank you so much for this,

[@dgloria]

Cool T-shirt!

[@sonamohialdin3376]

This is awesome tutorial thank you

[@oxanasf6369]

Amazing, thank you!

[@emvoinamdinh]

thank you sir very much !!!😍😍

[@programmingwithnit5308]

Thank you so much🙏🙏

[@thomasstambaugh5181]

Does the Modal (that contains the cart) hide when the user clicks outside the BROWSER? For example, if the user has this app open in a chrome browser on a desktop and clicks on "Snipping tool" to take a screenshot, will the Modal hide? I spent a few days (close to a week) trying to provide that behavior to an Material UI (v5) pane with no success. It appears that the "onHide" handler in the (Bootstrap Modal component) is somehow connected to the "focusout" and "blur" events that are flying around under the cover. I'm curious about whether this is a "hard" problem that the Modal component solves or (more likely) whether I'm just confused about how to provide the desired behavior. I do have one substantive criticism of the approach presented here -- I would have used literal object ("{}") rather than array ("[]") for the container of items. Since each item in the array must have a unique ID, then the "id" property used in each item can be its key in an object container. That makes the manipulators for the items cleaner, more robust, and more performant. I appreciate this well edited piece. I might pick some nits with specifics, but those are just nits -- this is an excellent piece.

[@ankitbhatt9388]

I am deploying a project like this, so in cart.jsx and server.js page in checkout function what URL should i give.

[@jancahlik9959]

How does one host this project in production? Can someone explain please? Would this be under 1 domain and hosting? I am confused, because two different ports are being used.

[@bradwoods371]

what would be the best way to implement this into a site already built with html css javascript etc.

[@yuehanchen578]

I Created my account and updated the stripe Secret key and product API but it was not working when you click the "Purchase" button

[@ahsanaqueel1182]

Hey @CooperCodes what if we have a lot of products how can we use stripe without creating products on stripe as it will be very difficult to upload same products on 2 different platforms (website and stripe).

[@codewithahad5990]

It;s was really great toturial best of luck

[@Julesarixx__my__teleqram__ID]

👆send a direct message for support and guidance .

[@iUniverse]

Hi Brad, if you don't mind can you make a React, Redux-Saga, React Tool Kit real world projects tutorial in your Udemy platform. Learning with you is a great help.

[@iUniverse]

Is this Brad's Whatsapp number?

[@rajatmalviya1097]

I am also looking for a Redux-tool kit Course.

[@haroldve98]

this tutorial it's absolutely god thanks

[@Julesarixx__my__teleqram__ID]

👆send a direct message for support and guidance .

[@lehuynh7637]

20:29 you can use ffc snippet Simple React Snippets extension to fast to code

[@danimusbar]

Unfortunately the stripes service is not available yet for indonesia

[@mostafahemdan8609]

This Bootstrap is unfamiliar to me , Is this better or the usual one written in the class name?

[@ambrosebeavers]

Hi There, thank you for this vid. How do one receive payment in a production environment using Stripe. Would it be the same procedure. How would the money get to ones bank account

[@ThePatrickHuynh]

Great tutorial

[@Seedley]

This is a great video. If I want to make a post once I get a success url back from stripe is there a way to do that? I'm making a car listing site and would like to charge per car post.

[@godswillumukoro8908]

Awesome tutorial I'm not sure why, it doesn't work for me unless I change the modefrom 'payment' to 'subscription'

[@murdermurcoo]

Great tutorial i succeeded to do this on localhost. I want to publish it to my hosting. Im new to react and run a build in the shop folder. How can i build the server along with my project and upload into the ftp.

[@Julesarixx__my__teleqram__ID]

👆send a direct message for support and guidance

[@igwanwan_dagoat1523]

Can I use this for business use?

[@jawidz4636]

Amazing tutorial bro ! One question ! im trying to use that show cart button in some other component. tried many stuff but none worked! any suggestion for that matter ? i Appreciate any help

[@TheBelafleck]

Hey. This is awesome and very helpful. One question: How is the cart emptied after the purchase is completed?

[@VaibhavPawar-k7e]

Hey Brad, Thanks for this video. I just having one question, Because I am not able to access array for added product in other components of my project. How can I fix this ?

[@plaguegames3556]

C'mon that is a very specific request with almost none information given. Maybe if you can share the code people can help here.

[@puahwankoon9227]

Hello, i follow along the whole tutorial and all is fine till listening on port 4000, it keep throwing error "Cannot GET /", even i clone this github project and still the same error, anyone please help!!>

[@varadarajanm6954]

Awesome

[@ArnavSingh-im5bj]

You should have also covered webhook

[@aguywithoutaname]

Thanks man

[@romimaximus]

I have a question, ..what about the customer's address, to ship the products ? ..cause i didnt see that, when customer makes the payment ?

[@CooperCodes]

Hey, thanks so much for watching! I Know documentation can be daunting, but check this page out: stripe.com/docs/payments/checkout/shipping . In the video we already created the stripe.checkout.sessions.create() , so you need to add some stuff to the create method that will make stripe ask the customer for their shipping information.

[@romimaximus]

@@CooperCodes Thankx for your reply, .. by the way, i really like the way you explain things in details... i learned a lot from this video tutorial ...!! thank you very much.. 😎👍

[@abdulmoeez13]

Hello there. I have a question. Why is it necessary to create products on stripe when I can directly pass my shopping cart details to stripe. What's the need for creating products on stripe?

[@CooperCodes]

This is a good question. Creating the product in Stripe can be nice because that price API ID we use in the video provides a consistent reference to that specific product. Although it wasn't featured in this video, you can show live up to date prices from the Stripe ID so lets say you wanted to put a sale on sunglasses you wouldn't need to go and change the code of your website. You would just change the price in Stripe for example. Hopefully this explains some things!

[@newabyuser]

after passing CartProvider in the app.js everything went blank

[@Julesarixx__my__teleqram__ID]

👆send a direct message for support and guidance