Build a Shopping Cart With React JS & Stripe

hey what's going on guys so I've had quite a bit of my plate recently some personal stuff also trying to get this modern JavaScript course done so I've been looking to have some guests on and today we're going to have on a fairly new YouTuber he has a small Channel his Channel's name is Cooper codes and he's going to build a react and stripe shopping cart application with you guys so if you enjoy this content if you enjoy the project check out his channel I'll have the link in the description and the idea is to to give some of these smaller channels some exposure and at the same time you know give you guys a cool project to do while I'm working on some stuff so hopefully you enjoy it and I'll let Cooper take it away from here foreign hey there it's Cooper codes I just want to start by thanking Brad for having me on the channel I actually use Brad's videos when I was just starting to learn how to code so I'm super excited to be your instructor for this project I'm going to get started by showing off the finalized version of the project we have three different items here we can add them to our cart we can have different amounts in the cart for example I can have one sunglasses a bunch of different cameras you can also remove these items from your cart as you'll see here we have a cart in the top right just like you'd expect and it will show all the totals for all the different products in our cart this project is interesting because when we actually purchase these items we're going to be sent to a stripe checkout in the stripe checkout you'll see we have the same products in the same quantity that we had in our cart so I filled in some test credit card data here my name isn't actually Cooper codes and so I can pay by pressing the button here and we will get a little thank you for your purchase from our store if we go over to our stripe dashboard which don't worry about we're going to get into this in more detail later in the video we can see that we have a successful payment that got processed the payment has an invoice that shows the same items with the same quantity and the same price as we saw in our react front end yeah so this is a great really full react project we're going to be working with react router react bootstrap a basic Express backend and also using the stripe API let's get into creating the front-end components for react application let's get started by going to an empty folder and opening up a terminal and we can create our react application by saying npx create Dash react Dash app and then the name of the folder we want the react app to live in I'm going to say store we can now see that we have our empty react application with everything we'd expect we can go into the store folder by saying CD store now that we're inside the folder for our react application we can start by installing a couple packages we're going to need for the front end so we can say npm install we're going to need bootstrap for the bootstrap styling and then react Dash bootstrap for the pre-made react bootstrap components then we're going to need react Dash router Dash Dom for the react routing which helps us go from like page to page for example we can npm star just to make sure everything is working well on the react side of things we can see that we have a boilerplate react application which is perfect exactly what we want we can get started by creating all the different components we need for our front end the first component that we're going to work on is the nav bar which is going to be that little bar you see at the top of a web page for these components we can go into our source folder and make a new folder called components this is where all of our different react components are going to live and I'm going to create a component called navbar.js we can initialize a functional component by saying function the name of the component which I'm going to say navbar component and that's the full definition there if we want to export this component so other files can take a look at it or use it we want to export default navbar component when designing our navbar we're going to use a couple of different external components from the react bootstrap Library we can import everything we need by saying import from react Dash bootstrap the components that we need are going to be the button this is going to be for when we want to click on our cart for example that's going to be a button we're going to need a container for our navbar to live inside we're also just going to need the navbar from react bootstrap which gives us a bunch of preset styling is super easy to use and we're also going to need the modal the modal element is when you click on the cart and it shows that screen on top of your web page showing you all the different data related to your cart so let's get started by building out the return statement of this navbar component we're going to want to initialize a nav bar here and we're going to set the expand property to the nav bar of small this determines where your nav bar collapses for like mobile screens and stuff like that small it looks good on this website so I'm going to choose that we can start by setting that navbar dot brand that's that big title you see to the left and it's going to point to a link of just slash which is going to be like the home link for our web page and we can make that little title or brand say e-commerce store we're then going to have a navbar.toggle this navbar.toggle allows us to have that little element where if you're on a mobile screen some of the stuff is going to collapse and so we can tell the navbar what we want to Collapse by using this navbar.collapse element we want the items within the collapse element to be to the very right of the bar so we can say class name is equal to justify Dash content Dash end and so you can think of it as like the start of the row is kind of at the start to the left then the end of the row is at the end which is going to be to the right on your web page we're then going to have a button which is where the user is going to click on the cart for now we're just going to say cart with zero items later in the video we're going to set up that whole cart system and then eventually change this to show the active amount of items in the cart so let's bring this navbar into our app.js we can run over to the app.js file here and then import navbar component so we can get rid of the boilerplate react application code it here and just put in the navbar component and before we start the application here we're going to want to make sure to import the bootstrap CSS so we have to do this manually by saying bootstrap slash dist CSS slash bootstrap.min.css this import is necessary because it has these style sheets that we need for our bootstrap components so let's npm start our project and see what it looks like right now so as you guys see our navbar is kind of very far to the sides we can bring in a container from react bootstrap this container will allow our entire application to kind of sit closer to the middle of the screen and so we can wrap our entire application so now that the nav bar is inside of the container if we go back to our Local Host it's going to be more centered which is pretty good so now that we have a basic idea of the nav bar figured out we can get into showing different pages to the user by using react router react router allows us to show the user different data based off the link they have for example if we do localhost 3000 we want to point that to some type of home component for example if we wanted to do localhost 3000 slash success we would want to show some type of success component so this is what react router helps us do we're going to import three essential things from react router so we can import the browser router which is the overarching router then we can have routes and route from react router Dom in every single page of our application we're always going to have the nav bar at the top so we can choose where to put the kind of special data by making a browser router within the browser router we're going to define the routes tag inside of the routes tag we can have all the different routes so like I have commented at line 8 and 9. we can have a route with the index property this allows us to have a route show for the kind of Base route or just the regular slash you might have seen before and we can point it to a certain element for now I'm just going to write in some components that we haven't created yet which we're going to create after we make these basic routes we have a store Route which is going to be at the base route so if you go to localhost 3000 for example it's going to go to the store and if we want to point to a specific route we can say path is equal to success this means if we go to localhost 3000 success we're going to show whatever components under this element so for example the success component which again is something we are going to create we're also going to have a cancel path so I just copy that line over and I'm going to change the path to cancel and the element do cancel react router best practice is to call these elements not components but instead pages so we can go over to our source folder make a new folder here and create a Pages folder inside of pages I'm going to make three different files I'm going to make a store.js which is going to be for the actual eCommerce store the cancel.js which is the page for if stripe payment gets canceled or the user exits out of the stripe payment and then also the success.js which will send the user to if they have a successful payment so let's start by going into cancel.js and making a very basic cancel component so it's just going to be a function named cancel I'm going to export default cancel at the bottom and for this component I'm just going to return a very simple little H1 that's going to say sorry to see you canceled your stripe payment I'm going to copy this entire component here which is very simple but I'm just doing this to show you guys the routing initially then we'll get into building the more full pages so over at the store page for example this is going to become a huge page eventually but we're just going to change this function to store and Export default store and I'm just going to have a H1 that says welcome to the store same thing we can copy this component go over to success and then under here instead of saying store we can say success success we can say thank you for your purchase so if we run back over to our app.js stores undefined success is undefined cancel is undefined so to Define these components what we can do is we can import cancel from dot slash Pages slash cancel that's going to get the cancel component and we're going to do a similar little import for all the other Pages as well for example we're going to get the store from the store Page and then the success from the success page if we go to the base route so just localhost slash like up here we're going to be sent to the store component if we go to the success path we're going to be sent to the success component and same thing for the cancel path will be sent over to the canceler component here so let's npm starter application to see see that routing work amazing so at the base route of localhost 3000 we are being shown the store component if we go to slash cancel we can then see sorry to see you canceled your stripe payment and if we go to slash success it's going to say thank you for your purchase just to clear something up is the reason why we don't have a success or cancel under like the nav bar for example where you can click on them and go to them is because stripe is going to redirect our users to the success path or the cancel path based on how they interact with these stripe stuff which I will explain in way more detail when we cover these stripe stuff so let's go over to our store component and make some basic cards for our actual products to live inside so we can go to the store Page by going to store.js under pages and now we have our store we are going to use rows and columns to show all the different products on our website so I'm going to start by importing row and column from react bootstrap I'm going to put this whole store in a little react fragment this just makes it so the Js sex code doesn't get mad at us when we have two elements next to each other and it wraps everything together for our store because under the H1 we're just going to start by creating our row on an extra small screen we only want to show one column for the rows but on a medium screen we want to show three different columns so that's what these properties are doing here I'm also going to give a class name of G4 to make everything look nicer and within the rows we can now use columns for example we can say column and I'm going to use the Align equals Center property just to make everything look nice and in here I'm just going to make a very simple H1 that says product and I'm going to copy this over just to show you guys in a second we're actually going to make a product card component but I just wanted to show you guys how these columns and rows are working first so let's go over to our localhost amazing so you guys will see although they aren't pretty looking cards we have products in our store which we can eventually turn into components and just to give an example this row is really amazing because it can handle as many column challenges you want for example we have five products here and so that's an interesting thing about this project is it's super expandable you can have as many different products as you want you can change these data around but one thing that let's get into right now is how do we dynamically load products like I have like you know sunglasses a camera coffee how do we know where to load those from to make our lives easier I'm going to go into the source folder and make a Javascript file called products store.js I'm making this a Javascript file because I'm on to all of our different components to have access to the product information on our web page so we can make an array of the products by saying const products array is equal to an array here and we can make objects to represent the data for each product for example every single product is going to have an ID a name for example coffee and then a price which I'm going to make a double and make it 4.99 for example and so we can make three different products because I think that's is a good amount for not going super Overkill because I know it's kind of annoying to write this stuff out we can have the second product have an ID of two I'm going to make that sunglasses which I'm going to make let's say 9.99 and then the ID of three here and I'm going to make this last one a camera and I'm going to make this expensive I'm going to say 39.99 for the camera and so we can actually export this products array at the bottom and this allows us to oh and you need curly braces around this because we're actually going to export another thing as well spoiler alert but this allows us to give this array of data to any component inside of our JavaScript project or inside of our react project all we need to do is say import productstore.js and grab the products array from it a function that's going to be helpful for us to get the data of a product from only the ID is going to be function get product data from a certain item's ID this is nice because let's say we only have the ID of a product in our shopping cart for example but we want to know the title and the price of a certain product we can make a helper function so we can say okay get product ID with a certain ID here it goes into this array and gets us the data we need from a certain ID and so we can use the array.find method here and so we can say let product data equal to products array which is an array which we just defined right here dot find What DOT find is going to do is it's going to allow us to Loop through every single element so the current element it's looping through is called the product and then we can use an arrow here to represent what do we want to do with this product well we want to see if the product.id so for example it's looping at this ID this ID this ID we want to see if that is equal to the ID that was passed in from our parameters right here and you'll see visual studio just lit up because now we're using the ID parameter are here so if this ID was the string 3 for example you could say over here three and eventually it's going to say okay first product this is an ID of one that's not three ID of two that's not three ID of three that is three and so it's going to return this full object is what product data is going to be and so let's change this 3 back to ID and so if it finds no product let's say we pass in an ID of four it would have no product and so then that's going to return undefined and so if the product data is equal to undefined we can just do a little console.log to help us is we can say product data does not exist for ID then we can just add the ID to the end of the string there and we can just return undefined here I'm not going to handle this case in this video actually but this is just in case you know you want to make sure you cover all the different cases you can and at the bottom here we are going to return product data for any intermediate programmers or people more familiar with this I already know what you're saying but I'll think this is worth explaining is product data if it's undefined we're just going to return undefined anyways at the bottom here the reason why I'm adding this extra return statement at line 25 is because I think it makes it way more easier to read it's if we have this product data equals undefined we want to do certain logic as a result of that I think just to explain for the further mint of people's learning is that we could get rid of that line at 25 that was just there and it would have the exact same code because if it's undefined it'll log this and then return here I kind of just prefer this extra return statement because it kind of makes the logic more easy to read where like if it's undefined we do these things we don't want to like be like oh we console log and then like fall into doing the next thing it seems kind of odd to me so that's why I keep the return undefined here and so we can also export functions alongside the regular products right here so we can export this get product data like this and this is going to allow us to be able to call this function anywhere else in our react application so if we go over to our store we can have a good example of importing the products array so we can go to store and at the top we can say import products array from dot dot slash products store and so this gives us access to the actual products array if we want to build columns based off of a certain array of data remember it's looking something like this an array where it's an object and then another object and then another object obviously I'll do something like dot dots to show that there's actually data inside those objects but when we want to go over this array we can use something called a map and so let's delete all these different column except for just one because now we can create columns based off the actual products inside the products array we can do that by saying products array dot map so map allows us to go through every single element in the array and then do certain logic based off the element we are at and most importantly return actual react jsx for a certain element so we can Define the product and the index here so if we're mapping over a certain product let's say three different products we can get the current product wrap with this product variable right here then we can Define our logic by doing an arrow here and I'm just going to do some regular Circle braces like this the parentheses here mean that it's expecting us to return a jsx element immediately so that means we can create an element of code for every single product in our products array because we're mapping over it it's also important to notice that we can actually use this product object that we're currently on so if you go to our product store and you look at every single object here you'll see that we have a title for example Apple we can access this by saying product which is this whole object here and then title which is this property here so let's go over here and we can do curly braces and say product dot title we are also going to use the index of where we currently are at to make unique keys for our columns this is just best practice for react so let's go over to our application and see what it looks like amazing so we have access to the coffee sunglasses and Camera which means we also have access to the whole object of data there which is really neat to make it look a little nicer we can align this header on the top to the center and then also give it a class name it's going to give it some padding so I'm going to say P3 let's go see what that looks like there we go way better and now we can get started on creating an actual separate component for all the logic of our current product to live in because we don't want to make our whole components right here for example so we can go into the components folder and make a product card.js we can Define the product car by saying function product card like this and then export default product card and for this example we're actually going to have the props of the element that we're going to use as well and so we are going to pass in the actual product through props dot product so I'm just going to keep this common just to make it helpful for you guys props.product is a product we're selling and it gives us access to all the different information of that certain product in order to make a nice looking card for our product we're going to need to import a couple of things from react bootstrap I'm going to import the card the button the form row and column from react Dash bootstrap so let's get started with styling the card by returning here we can start with the large overarching card so everything is going to be living within this card then we are going to have a card.body which also again everything is going to be a living within so these are the two overarching ones we can start with car r dot title which is going to give us a nicely styled title for our card to use and we can actually get access to this prop stop product by saying const product is equal to props.product and so if we want to get the title of the product we can look at the product store see how these objects are structured and like you can see it's going to be product.title so we can say product.title right here we can then do a card.txt and we can similarly access other properties such as product dot price and I'm from the US I'm going to put a dollar sign in the beginning here also because we're going to be using a USD for the stripe stuff but you feel free to use whatever currency you want then at the bottom here I'm going to make a very simple button it's going to have a variant of primary primary and bootstrap is just a nice like bootstrap blue color which you guys will probably recognize and for now we're just going to say add to cart which of course we don't have the functionality for that quite yet but now we have the full product card so we can actually bring this product card over to our store page so we can import the product card like this from component slash product card for anyone unfamiliar with properties I'll show you how that stuff goes down right now we can create a product card component like this but this is an example of a product card with no properties on it if we want to pass in properties we can say that the product property is equal to product like this you might be like product equals product what's happening here this product is defining the property and then this product right here is looking at the product we are mapping over is what's happening there and so we're able to access this product equals variable by if we go back over to our product card we can say prop stop product props is going to be a list of all the different properties on our component and that product is going to be that object that's also why we're able to say const product equal to props.product and then get different properties from that object for example so now that we have an actual product card being rendered let's go look at our Local Host so this is a basic start to the front end you'll see these add to cart buttons they don't do anything discard zero items also doesn't do anything yet but don't worry we are on our way so let's go over to our navbar code and get started on creating that module that pops up when you press the cart button here and the model is that little screen that makes everything behind it a little bit darker and it will show you all the different items inside the cart so here I am in the navbar component I'm going to separate the navbar and the modal by creating a react fragment around this code so we're going to have the navbar be the first component inside this react fragment so now we can Define our modal modal has an incredibly important show property which means is the modal being showed or not and we're going to set it equal to a show variable that I'm going to create in a second so I'm going to use the on hide property so whenever the hide event happens we can go call a certain function I'm going to make a function in a second called handle close and when we click on the cart this little cart button here we actually want it to show the modal so on here we can say on click is equal to handle show to store the show variable I'm going to use the use state from react and so we can import use state from react u-state just allows us to have local variables and don't mind these errors we're about to fix them up in a second and we can Define the show variable by saying show which is the variable and then the center to the variable which is going to be set show and I want to initially have that modal not showing you could imagine it'd be weird to load up a site and then the cards like in your face right away so it's going to be false initially and we can make some nice simple one-liner functions by using some Arrow syntax so we can make the const handle close is equal to an arrow function where we set the show value to false so if that close event happens or that on hide event happens we hide the modal then we can copy this code and we can then handle the show so if we wanted to show the modal we can set that show variable to true and so before we go and test out this functionality let's go and make a couple more things here for example we're going to need a modal dot header and I'm going to give it the close button property which just means it's going to have a little button to show the user they can close the card now within the header I'm going to have a modal.title which is just going to say shopping cart then there's going to be a modal.body which is where the majority of our code is going to live for now I'm just going to have an H1 say this is the modal body pretty simple for now because we're going to delete it later but now let's go back to our website and refresh it and see if we can access this modal amazing so you guys will see we can click on the cart and it's going to show that little shopping cart modal this is the model body we can also close it by pressing this button here which is very nice that's the nice thing about this on hide event that we can listen to is that's going to get called no matter if we press on the outside or if we press on this x here too so it's kind of nice in that way as you guys see we don't have any actual shopping cart logic in our react website quite yet so what we're going to do is we are going to go and create a cart context by using Create context from react context is amazing because it allows us to store the cart data so for example the IDS and like the quantities of what item you have in your cart and it also allows us to store functions that we can call anywhere in our entire application for example if I wanted to add an item to the cart we could call a function from our context you don't have to fully understand that but I'm going to get into that right now and show you guys what I'm talking about so we can go over to the source folder here and I'm going to get started by creating a cart context.js context is particularly nice when you need data or functions that are necessary throughout a bunch of different parts of your application so we can get started by making a context by importing create context and I'm also going to need use State eventually so I'm going to grab that while we are here and I'm also going to get access to the products array and so let's get started by creating our context we can say const cart context is equal to a create context like this contexts kind of have a flow where you have the actual context so you can imagine your cart add to cart you know remove cards just you know this is more like sudo code but just example like that then you're going to have something called a provider the provider gives your react app access to all the things in your context so you can imagine if we wanted add to cart at a certain you know component boom we got it right here if we wanted to remove the cart or whatever that means we could have it right here that's just an example of what this context is and we initialize that by creating an object in this create context here for example if we wanted the items to the cart I'm going to hold those inside of an array variables are probably the easiest one to understand for context if I want access to the cart I can get that anywhere I want but add to cart is a little bit different so if we want to add functions to our context it's going to look a little bit different if I wanted a get product quantity function for example I'm going to set it equal to an empty Arrow function which is going to have no logic you might be like why do we have this weird function with no logic because I'm about to do this like six times this is why I'm explaining this just so you guys know is because we don't Define the functions right inside of the context all the context is saying is that we can define a function for get product quantity we're gonna have of code down here which is going to help us create the full code for get product quantity and then when we actually have a function for get product quantity we can then pass that to our provider hopefully that makes sense the context you're just saying a function should be here when we actually pass values to our provider which of course I'm going to show you guys that is what's important those values to the provider we can actually pass the functions in then this context is just saying we have room for a function to exist here it's probably the easiest way to think about it so if we want to add an item to the card I'm going to call it add one to cart and again just an empty function with no logic and we can just copy this line over and over I'm going to remove one from cart I'm going to delete from cart and so that's going to be helpful for if we just want to boom all at once delete all the items from the cart as opposed to one at a time then I'm also going to get the total cost of the cart this is going to be a helper function that's going to help us for when we want to see the total at the end and so to give our application access to this context we can say export card context here we can now get started by working on the cart provider that I'm talking about export function cart provider then we're going to get access to all the children of this element I would say don't be too concerned about what this children property means it just means that if we were to wrap cart provider like this for example anything inside of here is going to be the children and so if we wanted to wrap around it our entire application for example we'd want to make sure our entire application goes on the inside of this if that makes sense so inside of our provider at the very bottom just to show you guys what we're leading to First we're going to have a very simple return cart context dot provider value is equal to context value which I'm going to Define in a second and then we're going to pass in the children is why that weird children variable is necessary and so we can even Define the value to our context I don't know if it's going to throw errors but let's see items is going to be equal to a state eventually I want to see what it does for get product quantity is it going to be an error and not yet okay so we can actually have all these different properties here and I'm just going to copy it like this and then just delete like this saves us some time because what we're doing here is we are going to Define all these different functions so we can get started doing that and we also want to Define items so we can make a state that is specific to our provider and we can do this by saying const I'm just going to say cart products Set Card products is equal to a use state with an empty array and so we can actually set these items here equal to this state you might be like okay this is kind of confusing why do we have an empty array of cart products well what's going to happen is when we create these functions we are going to use this cart product state to manipulate what our provider is giving to the rest of our application you can imagine add one to cart is a great example I have this provider and it's showing information to my whole application if I add one to cart I can go to this array add an item to it and then this value that's being tossed to the rest of our application is going to have that new added item to it because it's referencing this car product state so here's the fun part of this video is this is actually really great JavaScript practice for anyone who's not familiar with JavaScript or hasn't really worked with it much so seriously I would say from coding this myself really great practice for making all these different functions and just to explain one final thing before we get into making all these functions in our cart we are going to store the ID let's say is one and then the quantity of how many of those items we have in our cart that's all the information we're putting in our card just to make things as simple as possible so we don't have a bunch of other data kind of swimming around in there right and so I'm going to leave this comment here just to show you guys this is the data that we're working with an edge cart with let's say it has two id1 items a cart would actually look like this so our car products array would look like this for example so if we wanted to figure out the quantity of let's say a certain ID we can make the function here we can say function get product quantity have it be a certain ID and we can say Okay cart products dot find and this is why I say it's such a great JavaScript practice because we're going to use a lot of these array functions and so dot find gives us access to the current element that We're looping over so for example the current product and we can see if the product dot ID is equal to the ID that we passed into this function and so I'm going to show you guys a cool like a mistake on purpose to you know further your learning is we can say dot quantity so if we find the product with a certain ID we want to get its quantity but imagine what if this were to happen undefined dot quantity that's going to be an error because you can get the property quantity out of undefined it's going to toss like a red error not like a joke in round error and so if we want to safeguard from that what we can do is this is we can add a question mark right before the dot this means that if this dot find gets us an undefined object pretty much meaning there is no product with a certain ID for example we you're not going to ask for the dot quantity but if this dot find becomes an actual object of data for example if it's ID of 1 it's going to give us this object then we're going to get the quantity property it's kind of some cool syntax because it allows us to grab this quantity here and if quantity is undefined we can then return zero which is nice because you know we don't want to return undefined for example otherwise we know that quantity is going to be that actual number for example 2 in this case and we can return quantity at the bottom here so just to run through this code for an example let's say we have the ID of one and goodness that's my bad that was commented wrong but let's say we have the ID of one here and I pass in one what's going to happen is we're going to go through carb products which let's imagine is this array and we're going to find the product where the product ID is equal to the ID we passed in so if one is equal to 1 it's going to give us this full object and from that full object right here we're going to grab the quantity out of it the quantity is then going to be 2 as we have right here two isn't undefined so it's going to pass this and then go and return to so that's the explanation of that function and guys if you're new to JavaScript I would say don't get discouraged this is kind of some more intense code which is kind of why the video is longer and so really don't be discouraged if this is kind of hard to understand just really try our best all right so that's all I really have to say forget product quantity we can now get started by creating the logic for add one to cart so we can say function add one to cart then we can pass in the ID so from the front end we can be at you know the id1 for example and we're going to say hey I want to add one of these to the cart so initially we're going to ask for the quantity of the certain product and this is why this code is so cool is because we can say const quantity is equal to get product quantity of the ID why do we need this line so much well because we need to see if there's zero elements or if there's one element take a look at line 17 real quick if I wanted to add one more item to the ID of one here I would have to go in here and say okay go to the quantity of 2 and then add 1 to it which makes it three but if I had a product with an ID of 2 what would we have to do oh we would have to add another object here and say ID is 2 set the quantity of that equal to one so this is an example of what logic we need to do is we can say if it already exists for example if the let's say the quantity is equal to zero because that's kind of the case that we return here then we know we have no objects there and so that's going to be our two different things is product is not in cart and then the else statement is product is in cart and so now we can actually set our state so we haven't used the setter for our state yet if the quantity is zero what we can do is we can set carp products equal to an array of elements and we can use the spread operator on dot dot dot cart products so that's just saying take all of the objects that are already in our cart and put them to the front of this array then on top of all the objects that are already in our cart we want to add another one which is going to have an ID of the ID we passed in here because that's the item we're adding to the cart and it's going to have an initial quantity of one and so if the product is in the cart we are then going to use set carp products again inside of here we can then say cart products.map I'm going to show you guys this map one thing at a time what we're doing is we're going to go through every single object inside of carp products let me bring this array down for an example here if I wanted to add to the product ID of 2 for example I would go map over this object and I would say okay is this object of the product id2 no it's product id1 so I'm just going to keep this object here then I'm going to go to idf2 and I'm going to say okay instead of giving the quantity of 1 again I want to add to my cart products.map the quantity of one plus one and so we can write that logic out by saying okay take the product we're currently mapping over and if the product.id is equal to the ID we're passing in we can then use something called a ternary operator which I can say question mark which means if that's true if the product we're currently on is of a certain ID then we want to change that object and add a different property to it is kind of a way to think about it instead return and this is kind of confusing syntax so bear with me dot dot dot product which is saying all the different properties of product put them in here so if product is an object and you say dot dot dot to the object it's going to use a spread operator to give you the ID of 1 and the quantity of three and then we want to overwrite the quantity so we can say quantity is equal to product dot quantity because remember with the map operator we have access to the current product we're at through this product variable so if we were at this first one it would be this object for example and so that's how we're able to access the quantity but if we look at our example here we wanted to add one to that quantity so we can say plus one and so that's the logic for adding on this new object with an extra one on top of the already existing quantity so you can imagine if the current products quantity was 3 then you would have three plus one it would give you four instead in your cart we can then use a colon which is the kind of the else statement and so you can imagine this like if statement is true and then over here is going to be if statement is false and then down here is going to be the if condition that's kind of how you should think about this dot map code and so else what do we want to do we just want to add the product back to our array like normal so we can just use the regular product object and so just for learning's sake you can fast forward if you guys already get this but just for anyone who might be a little bit lost let's run through this code we're mapping over carp products which let's say is this array and we want to add to the ID of 2. we can start mapping and start with our first product okay which is this product right here does this product ID equal to no it's one one doesn't equal two and so it's going to enter the else statement and this map is slowly building up an array that looks like this and so at this point we just have this now our map is going to access the second product and we're going to say is the product ID equal to the ID of 2 well it is we want to add the product ID of 2 you and this is the two products so instead what we're going to do is we are going to take this entire product which is pretty much what the spread operator is saying and instead show the quantity Where we take the current product quantity and add one to it so our code is literally doing this take the entire product and then add 1 to the quantity so AKA it's going to become 2 on the quantity here I know these Maps can kind of be interesting and weird and this is like I would argue Advanced JavaScript because we're using a map and then we're also using a ternary statement so if you're confused about the question mark in the colon that's called a ternary statement but you can kind of see the logic right here and so before I do remove one from cart I'm actually going to do delete from cart so we can say function delete from cart and we're going to take a certain ID so delete from cards that's going to totally wipe out whatever amount of products from our cart of a certain ID of course if we had like 20 sunglasses it would take all 20 of them out of our cart in one function call so we can start by setting our cart products State we can get the current value of our state by saying cart products and then using an arrow we are then going to use this value of carb products and we're either going to filter over it filter pretty much does this it starts with an empty array and if an object meets a condition then it's going to add the object to array that's the most basic way of thinking about what filter does so I'm going to put this comment up here actually so if I had you know product one product two product three and I wanted to remove product with an i I'll just say this is an ID of two for example what I could do is I could pass in a filter and I could say okay as long as the product doesn't have an ID of 2 pass it over okay is product one and ID of two nope it's not which is good pass it over to the new array so product one here is product two well that does have an idea of two so we don't want that thing anymore then product three three is not two so boom that's kind of the basic way to think about how filter is working and so we can take the current product or app by saying current product use an arrow and then we're going to Define some Logic for okay what is the actual condition here the actual condition is going to return the current product dot ID doesn't equal ID and so if this is true the current product is good to go it's going to get passed to our new array if it's false for example 2 doesn't equal 2 that's false right and so if it's false it's not going to add it to our new array and so that's a cool way to use filter to build a pretty simple delete from cart and so let's go back to above delete from cart and we can make that function remove one from cart I'm just going to take an ID and so we can again get the quantity of a certain item by saying const quantity is equal to get product quantity of ID if the quantity is currently equal to one we are then going to delete the product fully from our cart by saying delete from cart of the certain ID this is because if you only have one left and we take one away what's our quantity going to be so going to be zero right so in the else statement we are then going to define a Set Card products so we're changing that cart State once again and we can map over the cart products here's the thing though check this out I don't even have to explain the logic again because instead of adding one to the quantity we are going to remove one from the quantity so scroll up to your add one to cart and grab the Set Card Products near the bottom of that function we can paste it in here and the same exact logic applies but instead we're going to say product.quantity minus one and so that's pretty much the full Logic for remove one from cart is we're saying okay instead of adding one we're going to remove one and so the same logic as to how I explained above applies here but it's pretty much going to Loop through an array like this for example and when it sees that item's quantity for example if it saw the three here and we want to delete one of the IDS of one we would just say -1 and give us that new 2 value for example I'll also mention we don't really have a case here to handle quantity of zero so feel free to add that if you want but in our front end we're only going to be able to access remove one from cart if we have a button showing that we already have something in our cart pretty much so that's why I don't have that case here if you're curious about that okay now we have to get the total cost of our cart which is a cool kind of fun function because it requires us to get some external data so we can say function get total cost and we don't even need a parameter because this is going to get the total cost of all the different items in our cart so we need every single item I'm going to start by initializing a variable by using let and initializing a total cost equal to zero and so if we want to get the cost of a certain item we actually need to get the data of a certain item so we can go up to the top and go to our product store we can also say get product data here this is a great example of when we can use this function to not have to rewrite the same logic over and over so first let's start by mapping over our cart products array so I'm going to call it a cart item and then we're going to point an arrow function to the logic that we want to use for this map I'm going to use a const product data is equal to get product data of the cart item dot ID because remember inside of our cart we only have access to the IDS so if we want the product data for example the title and the price is going to be the most important one here we can then add to our total cost by saying total cost plus equals the product data dot price times the cart item dot quantity and so this product data object gives us access to the price here and we can see how many of a certain price do we have in our cart by looking at the quantity here if we were to have three different items that were worth ten dollars it would say 3 times 10 is going to give us 30 and would add 30 to our total cost and so we can return the total cost at the bottom here all right so if you made it this far you are now officially a JavaScript array master and congratulations we can go to the bottom here and say export default cart provider and just to explain this kind of finally is we have this context value and all of these functions are now a different color because they are being defined as such above and then these functions we can access throughout our application because we're passing them into this value in order for our app to access this context we need to take this cart provider and wrap it around our whole application so let's go to app.js and then let's import cart Provider from cart context we can then go around our entire app and take this provider element and then wrap it around the entire container so now anywhere inside of here is going to have access to the cart context let's go over to our local host and make sure everything still looks like a chip I'm going to start by working on the product cards and making this add to cart button actually add to our cart so in order to actually use the context which is going to be that cart value it's going to be all those different functions we just defined we need to do two things we need to import the cart context from card context and we also need to import use context which is a hook provided to us from react and so if we want to access the almost cart object you could imagine we can say const cart is equal to use context of the cart context and so if we do cart dot you can see we have access to all the different things here all the different properties of of our context which are being defined over in our cart context at the very top right here so check this out we can actually use our contacts for once we can say const product quantity is equal to cart dot get product quantity and we can pass in the product dot ID because if we go over to our cart context we can go and check out get product quantity and it's going to have the ID here so this is going to allow us to see if we have an item that is in our cart or not and we can also change this add to cart button to add something to our cart by saying on click so when this button gets clicked we're then going to call a function called cart dot add1 to cart boom with the product.id and so this is pretty cool check this out I'm going to console.log cart dot items it's going to be a bunch of different logs which is totally fine for now but we can go and see that products are actually getting added to our card in the front end so as you'll see it's logging that array a bunch of times and boom I can add these two things now and check this out I now have a coffee ID of one has a quantity of one and then sunglasses which I clicked on idf2 quantity of one check that out so if I want to add like a bunch of different coffees for example I now have a coffee with a quantity of five one issue though is we want to be able to adjust the items values in our cart for example so whenever we see that we have coffee has at least one thing in our cart we're actually going to show a different thing on this component it's going to have that remove button and it's going to have like those uh plus and minus buttons as well and so we can make that logic by going in here and saying a little ternary statement where you say product quantity if it is greater than zero for example then we can show a different piece of code and I'm just going to make it an empty element for now then we can do a colon for the else statement and I can go in here and take this button and add it right there so if the quantity is equal to zero it's going to show add to cart but if it is at least one item then we want to show a different interface here so I'm going to go in here and create a pretty basic form and I'm going to do something called as row which gives us to access to some row styling inside the Forum which is nice I'm going to do a form.label its column property is going to be set to true so it's treated as a column in the row which don't worry if you don't understand the stuff fully and it's going to take up six columns inside of the row and I'm going to make it say in cart then I can say the product quantity right there so we can even use these variables to show kind of like interactive data to our user and because this form is being shown as a row I'm going to go in here and make a column that's going to take up six different slots in bootstrap I'm then going to make two different buttons they're going to be a sm6 here and I'm going to make a class name of MX2 this is just going to give some margin across them one of the buttons is going to say plus and the other button is going to say minus so let's go and see what this looks like in our react application amazing so right now we can add to cart and then we are stuck here forever which is pretty funny these plus and minus buttons don't work so let's go get working on that we can change these buttons to on clicks and so whenever the button gets clicked we can run certain code for example if we hit the plus button we're going to want to run the cart dot add one to cart and it's going to take a product.id and then for the minus button we can say I actually want to remove one from cart which is that other function we made inside of our cart and while we're here we can make this large button that kind of goes in the bottom of our card I'm going to say button variant is equal to Danger that's going to give us that red coloring from bootstrap and I'm going to give it a class name of margin Y and y-2 it's going to give us some margin in the y-axis it's going to say remove from cart and when we click this dangerous button on the bottom here I'm going to say on click is equal to calling the function and I'm going to go to cart dot delete from card and so that is that function that's going to totally erase the item from our cart which we can say product.id right here and so this is why making that context is so helpful is once we have these context functions we can really do whatever we want with our react application and all we need to do is just call the function whenever we need it so let's go back to our front end see what this looks like all right so we can add to cart we can add items we can remove items and this console.log is crazy I'll remove it in a second and we can also fully remove from the cart like this add to cart remove from cart add to cart add a bunch of sunglasses remove them all add a camera there you go and so now we have full functionality where we can add whatever items we want to the cart dot items inside of our card context one thing that I'm going to go work on now is look at this cart in the top right it just says cart zero items that's not very cool it's not even showing how many items we currently have in our cart so let's go over to our nav bar and add the code is going to use our card context in the nav bar so I'm going to go over to the nav bar and just like I said before we're going to use that generic setup where we import the cart context from our dot dot slash cart context then we also import use context as well oh and we already imported from react above so we can actually just add this use context to that and to access that cart context we could say const cart is equal to use context of the cart context we actually didn't make a function inside of our card context to get the amount of the total items inside of our context but this is actually a really cool way of looking at it is if you ever need extra functionality for looping through your items let's say it's a one-off thing you don't really use often so you don't want to exactly make a whole function for it and add it to your context you can still do something like this let's make a const products count and we can set it equal to cart.items we can Loop through the card items and get the total amounts of all the different products quantities from our cart I'm going to use a DOT reduce and so this video is really showing off all of the different array functionality you can make I think we might have hit every single one it's wild but for reduce we can have two different things the sum and then the product we can then do an arrow function to define the sum in the product so whenever we go through an item inside of our list we are going to reduce and go to that product and we're going to add to a kind of counting up sum that's running every single time so we can say sum plus product dot quantity and then we also want this counter to start at zero so what this reduce is going to do is it's going to give us access to all the different products.quantities so what this reduces doing is it's kind of summing up all the different product.quantities and then this entire statement here is going to return a number and we can access that number through products count so let's go over to our card zero items here and we can actually put in some curly braces and add in products count do some parentheses around this like this just for styling so now our NAB bar is going to actively refresh and show the latest up-to-date products count value so if we had five items in our card for example it's going to show five items let's go back to our front end and see this as we add items to our cart it is showing the amount of items total so I have three coffees one sunglasses and one camera it's showing cart with five items at the top right here which is super cool this is a perfect example as to how we can use the values from our cart context in order to create functionality throughout a bunch of different react components so now let's get started on this shopping cart and have it say something that isn't this is the modal body so we can use the card data to show actual cart items here so let's get started on that so in our modal.body we can make some functionality to show different things if we actually have items to show to the user so if products count is greater than zero you might want to show something else if products count is you know nothing then we can show to the user a little header that says there are no items in your cart otherwise I'm going to create a little react fragment here and so this is where our actual card data is going to live and so I'm going to make a paragraph to start and I'm going to say items in your cart and we can list the items below as we've done many times in this video we can get some practice with the cart.items.map we can take the current product then also the index here and then use parentheses at the end here to return and element right away for now I'm just going to do a simple H1 and it's going to show the current product dot title and so before we look at that I'm also going to do an H1 on the bottom that's going to show our total in the cart so we can say total is equal to and here's a really good example of how we can use curly braces and even within curly braces we can call that cart.get total cost and an easy way in JavaScript to round values is we can do dot two fixed of two this is going to round our values so it only has two values after the decimal because JavaScript has problems with super long repeating numbers for example and we don't even do any payment validation on our end because we just send all the information to stripe then at the bottom here we can have a button which is going to be green so I'm going to make it a variant of success to show that successful green and this button is just going to say purchase items so kind of just a button to purchase all the different items in your cart so let's go and check out what this looks like so I'm going to add some sunglasses is in a camera and okay we don't quite see anything quite yet in items near cart let's go check this out my bad it's because it's actually because we don't have access to the title here because this is the product that is inside of our cart so we're going to go to the ID instead so we can look at that so although it's simple we can see that in our shopping cart model we know that we have an ID of 2 and an ID of three in our cart and so to kind of make the logic more simple we can make a component to show the different cart products inside of our cart specifically so I'm going to go over to components and I'm going to make a cart product.js we can start by defining this as a functional component called cart product and it's going to take in some props because we're going to get that ID in that quantity in order to make a nice looking component from that data and so we can export default cart product just to get that out of the way I'm going to import a button from react bootstrap and you can import components specifically by doing this button syntax I'm also going to import the cards contacts because I want to get access to the delete function inside of our cart context so I can say from dot dot slash cart context then we're also going to need that import use context from react then I'm also going to import that very important function get product data so we can take those IDs and get the title and the price from them amazing so that's everything we need to get started so let's get started by saying const cart is equal to use context of the cart context just to set that up and so I'm going to pass in the ID and the quantity as props and so the ID is going to be equal to the props.id and the quantity is going to be equal to the props dot quantity using these props I can also do things like get the product data of a certain ID so we can say get product data of the ID that we have at line 8 for example so now at the end we can return I'm going to make this a little react fragment so we have everything to live inside here I'm going to make an H3 3 to hold the title of the product so I'm going to say H3 product data dot title I'm going to make a paragraph here and I'm going to say quantity total so you know three total products for examples without be showing us I can make another paragraph to show the total price of all these things I can make a dollar sign there then I'm going to say Quantity so how many products do we have and then I'm going to get that price by going to product data dot price I'm also going to use that dot to fixed of two just to make sure we don't have any crazy long trailing decimals then I'm going to give the user a button which I'm going to say is a size small and it's going to allow the user to remove a product from their cart while they're within the cart and so when we click on this button we want to have the on click be ran and we want to point it to a cart dot delete from cart and we can take the current ID that this car product component was created with then I'm going to have an HR at the bottom here and this is just going to be a little like line break to show a little style between different products so if we go over to our nav bar here we can actually show our card product instead of this H1 here so let's go to the top and import cart product from dot slash cart product instead of showing this element here you can instead make a cart product like this and we're going to expect two different parameters first one is we're going to set the ID equal to ID and the second one is we're going to set the quantity equal to quantity also going to set the key here equal to the index oh my bad these should be currentproduct dot ID and then the current product dot quantity there we go and so now we're making car products for every single thing in our cart so let's go over to our front end so let's add everything to the card just to test it and amazing so we have one coffee which is gonna be 4.99 total and then look we have sunglasses it shows we have three total and it even adds up that total price to sunglasses times three and we have one camera let's try to remove these sunglasses for example because that's three different totals so we can remove like that and now that's going to be gone from our cart the cool thing is even though we're in the modal look at our nav bar it's still updated to show that we have two items in our cart so we have fully completed the react portion of this which is super great news this means we can get into adding the stripe API on top of this project when you press this purchase items button right here we're going to make a stripe API call to make a checkout with a actual stripe account so let's get started by setting up our stripe account so go on over to stripe.com and we can start by creating an account press sign in on the top right and then create a stripe account or sign in with one you already have so the stripe actually makes this as easy as possible for you as soon as you sign up you're going to see this four developers on the right here you're going to want to reveal your secret key copy the secret key and save it somewhere else so let's just do that now on the bottom here I'm going to split my terminal you can also just open a new terminal and you're going to want to make sure you're not in your store folder anymore and I'm going to just make a server.js and so we actually need a backend server to handle these stripe calls so we're going to make a very simple Express server but for now just copy paste your secret key inside here so we can use it later and let's go back to stripe so now we can get started on creating products in our stripe account we can go to the products tab here and then we can add our first test product and press add a product here first I'm going to add a product called coffee and I'm going to make it worth 4.99 and I want to make it a one-time payment and we can save the product by going up here so when we create products it's going to give us a price ID which references that product so make sure to copy this ID and then bring it over to your text file and just say something like coffee is equal to that certain ID we can then press back here to go to products and make another product I'm going to call this sunglasses and sell it for 9.99 make it a one-time payment save that product and again this price ID is super important copy it here and bring it over to your text file then finally we can go back to products and make another product and we're going to make that camera which we're going to sell for 39.99 and make it a one-time payment and make sure to copy this API ID here bring it over your text file okay so I know that was kind of tedious but that stuff's pretty necessary for setting up stripe but now we have everything we need we have the secret key and also the three price API keys for our products so now we can get started by creating a full back end that's going to handle our stripe requests I'm going to say npm init dash dash yes and make sure you are on the most outside folder you're not inside your react folder because this is going to be a package specifically for our server.js to use a bunch of different npm packages so you should have a server.js and then also a package.json with nothing in it right now I'm going to npm install a couple of things firstly I'm going to npm install Express to make an Express server then I'm going to NVM install cores and I'm also going to install stripe this is all we need to make a pretty basic background let's get started by creating the require statements that are necessary for our back end first we're going to need Express which we can say cons Express is equal to require Express then we're going to need cores I'm going to say our cores is equal to require cores cores is just going to allow any IP address to access our Express server this is so you guys don't run into any weird errors on the react side of things and I'm also going to initialize Strife by saying const stripe is equal to require stripe and stripe requires an extra parameter which is going to be parentheses and then an empty string and we did that empty string it's going to require you to get that secret key that we have Above So copy this full secret key and make sure you get all the characters in there and then save that this is initializing a stripe client specifically for our account we can then create our Express server by saying const app is equal to express we can have our app use middlewares such as cores I'm also going to app.use Express dot static public it's just something that is recommended by the stripe documentation specifically is it wants our express application to use this then we can also use app.use express.json so our experience application is pretty simple it's just going to have one post so we can initialize a post request to our Express server by saying app.post and we can tell it what path to the server I'm going to say slash checkout is going to be our path I'm then going to make the functionality asynchronous within here and we're going to get the request and the response from the user I'm going to make a comment here explaining what's going to happen is on the react side of things we are going to pass in some data to the actual request so it's going to have a request.body.items which is going to look something like this it's going to be an array and it's going to have the ID then also the quantity how many of a certain ID do we need for example and that's what the dot items is going to look like stripe uses a thing called line underscore items so stripe wants data formatted in this way it wants an array still but instead of an ID it wants it to say price is this kind of annoying yes but it's okay if we know that our data from our front end is going to look like this we can just kind of make a new variable to hold what stripe wants so I'm going to make a line items equal to an empty array because that's what stripe calls items is line items for their API call and so I'm going to go and set a constant variable actually equal to the items we're getting from rec.body.items if we send this items through the body here we can get access to it like this and so we can say items.4 each so for each item we are going to take a look at the item in there and then we are going to add two line items and say dot push an object that is formatted in the way that stripe wants for us to process payments so we can push an object such as price is equal to our item.id and then the quantity is going to be equal to our item dot quantity and so line items is going to be our properly formatted data that we are going to send over to stripe so we can initialize our session with stripe by saying const session is equal to await because we're going to make a stripe call here that requires a weight so we can say stripe dot checkout and this is using the actual stripe object to use this this stripe object that we imported and it's going to have a DOT sessions and it gives us access to a DOT create checkout session when we create a checkout session we need a couple of properties first of all we need a line underscore items which is going to be formatted like this guess what we already made that right here so it's actually going to be really simple for us as we already formatted the data how they want it we can set the mode of the checkout for example payment is what we're going to be doing then we also want the checkout to point to certain links if the checkout is successful or if the checkout is canceled so the success underscore URL is going to be equal to http localhost 3000 slash success the cancel underscore URL is going to be equal to http localhost 3000 slash cancel and because we're using a weight here our server is going to wait for stripe to fully create our checkout session so once our code gets to line 50 let's say around here for example we now have access to a URL which the user can use to check out we can send to our response some Json dot stringify data this is just going to allow us to send an object to the front end and it's going to be an object with one property set to session dot URL this allows us to show the user the session that stripe created for them so that's how stripe gets involved and so to actually start up our Express server to listen we can say app.listen to Port 4000 is where we're going to have the server live on and then we're going to just do a little callback function here we can say console.log Vlog listening on Port 4000 just to show the back end working I'm also going to console.log this request.body so we can see that in the terminal but stripe kind of makes it simple for us just to explain this back end again we're going to send a post request to the slash checkout route it's going to take the posted data from the user here it's going to format the Align items to how stripe wants them it's then going to create a session with those line items and it's going to make a payment session and then once this session gets fully created it's going to send that created session URL to the front end so our user can pretty much check out with stripe so let's go to the right terminal here and say npm start which is pretty much starting up our server on the left I still have our react application running so hopefully you still have these three different IDs at the top here I want you guys to copy these three different IDs go over to your react application and then go into your product store dot JS here's where things get interesting is we can make the coffee ID actually equal to that price ID and we can do the same thing for all the other products this is so we don't even have to add some additional functionality we can just make the IDS you know an actual ID instead of like a one two or three we can just use these price IDs that we have created on the stripe side of things this way whenever we interact with a product we know the actual exact price ID that is on the stripe side of things all right we are so closely getting to the final version of this project now we want to go to where our checkout button is living so for example over in the nav bar and we want to create a request to our backend when you click purchase items so we can set purchase items equal to on click is equal to checkout and we can make a function called checkout so I'm going to say const checkout is equal to a asynchronous function I'm going to use some Arrow syntax here where you say async the parameters to the function which I don't need any and then we're going to define the function logic with an arrow like this then I'm going to make an await statement because we are now going to make a fetch request to our back end which I hosted at http slash slash localhost 4000 slash checkout and if you guys remember from the express side of things we want to make sure that we are posting so we have to say method is equal to post to our back end the headers this is also important are going to be of content type application slash Json this allows us to send some json.stringify code in the body so take a look at this we can set the body of the request equal to json.stringify then I can say Okay stringify an object where the items property is equal to cart dot items and we have access to cart.items because we already have this context defined right here there you go a great example of good use of context so once this fetch statement is fully done we can handle the response that we get back from our server by saying dot then take that response and we are going to need to kind of translate that response which is kind of common and return a response.json this turns the response into a Json format that is easy for our code to interpret so we can say dot then response again and now that we have access to the response take a look at the server.js again we are getting an object that has a URL so if we decoded this and we're getting the Json of this if we say response dot URL it's going to give us access to this session.url here so if response.url exists just to you know kind of Safeguard us we can then say window dot location dot assign and so this is going to kind of overwrite whatever the user is currently looking at and show them that response.url so it's going to forward them over to the stripe payment so just to explain what's happening again when we click purchase items here it's going to go and check out for us once we hit checkout we are going to make a post to the checkout route to our back end of localhost 4000 we're going to make it a content type application Json and we're going to pass the items from our cart to our backend over on our back end we are then going to take those items make them into a format that stripe understands and then create a session with those line items once the session is fully created with stripe we are then going to send the URL back to our front end and get that response from our backend turn into a Json and then get the URL out of that Json and forward the user over to stripe so I'll just put that here forwarding user to stripe and so if you are on a fresh account you're going to want to make sure that you go to dashboard.stripe.com account this is because stripe requires you to make a company name even if you're just doing test payments so I'm going to make my name Cooper codes I'm going to save here so once you have a company name you are good to go so let's go to our local host and see how this works we can go over to our react application now and add in a bunch of items to our cart adding a bunch of coffee a bunch of sunglasses and I'm just going to add one camera now we can go over to the cart see all of our different items here and then purchase the items by pressing this button on the bottom and so this is where everything comes full circle we have fully initialized the payment we have three coffees in here which even stripe recognize seven different sunglasses it's kind of expensive and also a camera here as well and so we can put in some fake information that stripe gives us the test Visa card is just four two four two four two over and over then you can put in one two three four for the date and then also one two three for the security code I'm going to make the name on the card Cooper codes but this can be anything again I'm gonna make one two three four five my ZIP code and now we can make a full stripe payment foreign so stripe went and sent us over to the success route so let's go take a look at our stripe dashboard and see if the payment went through so from our home we can already see that payment here but we can go over to payments over here and you can see the fully successful payment it also shows Stripes cut and everything like that and so this is the full kind of Circle of showing you guys a payment processing system with stripe and also managing a bunch of different items on react if you made it this far in the video I just want to say thanks so much for kind of coming through the full project with me and working through the full thing again I'm super excited to have been able to show you guys this full project and work with Brad so thank you so much Brad again hopefully this content was helpful and honestly if I had a project like this earlier on especially when I was learning react there's a bunch of good stuff for you guys to learn throughout this project that really makes you think in you know thinking components think in you know how can I use context in different areas on my application and so hopefully this video was super helpful all right thank you so much for watching

Channel: Traversy Media

Views: 75,290

Keywords: react, react stripe, react ecommerce, react shopping cart, stripe react, stripe javascript

Id: _8M-YVY76O8

Length: 76min 27sec (4587 seconds)

Published: Tue Oct 18 2022