Beautiful once we have restricted access to the checkout page next we can start working on the page
itself.
And you know what I am going to log in just of course we can see what is happening even though in this
video we're going to start somewhat slowly which is getting the imports and again setting up some kind
of place holders for our functions.
But still let's log in.
Let's make sure that we are displaying the page.
We're going to go with secret and now we're accessing the data.
Notice how I kind of keep on pressing on submit.
If we're still waiting on the info and now I'm just gonna close it.
And of course we're gonna go to a check out page now.
I'm also gonna open of course in my text that are the page.
Otherwise it is impossible to work on a page.
And we're going to start with our imports.
We're gonna start by getting the cart context the user context use history as well as the empty cart.
Now why I would want to have an empty cart.
Because if the cart is empty then I would just want to display that component that we also show within
the cart page because there's no point for checkout page if there is no items in the actual cart.
So we're gonna start by our imports.
Cart context then that is coming from of course of context.
So we're gonna go with cart.
I am going to copy and paste it.
Now we're going to change that to user.
Same goes for this guy.
I'm going to go with the user.
Then also we have use history because we would want to of course navigate away from the page.
So we're gonna go with import then use history.
So that is coming from react roll her down and then we have the empty cart.
So therefore you've got this already component that we created before.
So we're going to go with import then we're gonna set up empty cart to cart and is coming from all the
components.
So we're going to look in the components then we'll look in the cart folder and there we have the empty
cart and then right after the empty cart we're gonna look for react stripe elements.
So let me first just add a comment.
React.
Stripe elements and essentially this package provides the functionality when we are connecting to strike
because if we're looking at that form there's gonna be some parts that we're going to create let's say
like our total as well as whatever name we're passing and info of what kind of testing car the user
needs to provide.
But then in order to in fact communicate with stripe we're gonna use a package for that because essentially
they're just setting up everything for us.
We just need to place it within our form.
So eventually we're gonna get our imports from react strip elements.
But first we would need to set up the account.
So that's gonna be in a few videos.
And then also I'd want to get submit order.
So it's gonna work very very similarly.
Like we already did within logon page where we had two functions and when once we submitted the form
then essentially we ran those functions.
So in this case we're only going to have one function that is going to be submit order again.
Currently just a comment but we're going to still import.
So we're gonna go with import by the way let me close the sidebar.
Let me say submit order submit order and that is coming from.
Course our strappy folder.
So let's look for strapping.
Let's look for submit order.
And now we can start working on our checkout page.
All right.
Now first we're gonna need a props those props are gonna be useful for react striped element.
So just before I forget doing that I'm gonna add these props again.
Currently they're not gonna make sense but once we hook it up to react strip elements then you're gonna
see why we are in fact right away passing deep props object and now within the actual component we're
gonna go with the structuring.
So let's start by concept.
I'm looking for carte total as well as clear cart.
So let's get these functions from our court context.
So cart total as well as clear cart and that is coming from.
We have react and that is of course used context and then we have carte contexts of cart context like
so once we have the structured cart next we're going to look for the user.
So the user is gonna be a little bit longer what we're gonna look for user then also would want to show
alert hide alert as well as alert altogether and we're gonna get a react then use context again.
And in this case we're looking for user context so let's get these values.
Now I'm going to initialize my history so I'm going to use const as three and then we're gonna set it
equal to use his three hook use three hook which again we used already before and then let's set up
some values for the state.
So we're gonna have a name one because we're gonna have a name field as well as the errors because we
would want to display the errors.
So let's say if I'm trying to submit on my order and if I haven't added the card well then I would want
to display your card number is incomplete.
Again the message is coming from the stripe but we are responsible for displaying that message.
That's the reason why we're going to have to state values.
I'm I have state values like so we're going to start with name as well as there.
And both of them are going to be exactly the same.
They're just gonna be an empty string.
So we're gonna go here with cost then we're going to look for name as well as set.
Name that is equal to react use state use state and then we're passing an empty string.
We're gonna copy and paste it and we're gonna have the error same way.
And I have the error set error of course that is the name of our function and then it is also gonna
be an empty string and then we're gonna have our handle submit before and I'll submit though we're gonna
have still are is empty.
So we're gonna still check for empty values.
So let's say if we don't fill out the name then of course we're also gonna have please fill out the
name field and since we already previously covered that in the log in page I'm right away.
Gonna hook it up to a lurch.
So I'm just gonna make sure that while I'm getting back the response user can keep on submitting the
form.
All right.
That's the reason why again we're gonna have our is empty.
So we're gonna head over back.
We're gonna have cost is empty.
That is of course the variable that's responsible for showing or displaying our buttons.
And then we're gonna tie it to a name.
So if the name is empty value is empty is gonna be true and then we're gonna display of course a paragraph
and we're not gonna show our button.
And I'm also gonna say or if alert.
So the global alert show is equal to true.
So that way we kind of keep on submitting the form if we're in a process of getting back our response.
Now our handle submit is also gonna be a synchronous.
So we're gonna go with a sink.
It's gonna be a function.
We're gonna have a handle.
Matt like so we're gonna pass in our event object and first we can just right away have a event prevent
prevent default.
MARK So that is our handle submit and within the J six we can write away check if we have the empty
car.
So we have hello from checkout.
And of course we're gonna work on the rest of the J six and the next video but we can right away check
whether our car is empty.
So I say if then we have access to the cart and if I can say if cart length is a less than one like
so then I'm just gonna return and we're gonna go with empty cart so empty cars empty cart value then
if the cart has some values then we're going to show the checkout page.
Since I have one item in the cart that's the reason why we can see hello from cart page.
But if I'm gonna head over to cart and if I'm going to remove the item now of course I'm displaying
the empty cart component and that's our initial setup for our checkout page.