Once we have completed our initial setup next we're going to add one item to the cart.
At least one I guess.
Just so we can see what happens if we have some items in a cart.
And now we're going to navigate to a checkout page and of course the only thing we're displaying right
now is a hearing one.
So let's start working on the rest of our form.
And again there's gonna be values that we're gonna be setting up.
I mean most of them.
But then there's gonna be card elements that is gonna come directly from our package that we're gonna
install and then this is gonna be displayed using the package.
This particular input but we can of course work on the rest of the values we can draw back and we're
gonna first set up our section.
So let me delete the heading One I'm not gonna need that and we're gonna go with section section then
within the section there's gonna be adding two but we still need to add some classes.
So class name section and form because that is for our styling then we're gonna have a Q with some kind
of class and class name is going to be section title and the name is gonna be checkout checkout and
then after that we're gonna have a form with a class of checkout form check out form.
Now of course it requires an action but since we're submitting using react we don't really need the
action and then we're gonna have our order total.
So within the form first I would want to show how much is our total.
So we're gonna have our hand three then as a text we're gonna write here order total.
And within a span we're gonna place our total whereas the total coming from that is coming from the
card.
Remember when we do structure it in the last video.
Well now we're accessing and I can see that I have my checkout form and then I have the order total
is let's say hundred dollars and now we're gonna work on our single input.
And please keep in mind I only added single input because of the simplicity.
Normally are gonna You would have an address with multiple fields and all that but in our case I'm just
placing a name just so we can see that we have placed that particular order.
So when we are looking in our back end in our API I can see all right.
So the order was made but again normally you would add more fields but I just thought that this is gonna
be somewhat time consuming if I'm gonna start adding everything from the address all the way up to a
country.
All right now we're gonna head over back and write off 30 heading I was always going to add my comments.
You don't have to.
I'm going to go with single input input.
We're gonna copy and paste and I'm gonna say and offer single input and then within the input while
First we're gonna have a div.
So we're gonna start with a div of class of form control then we didn't leave.
Let's add a label right away label and it is gonna be for a name.
So that's the reason H email for is gonna be also for the name.
Let me close out the label name.
And then right after the label we're going to display our input.
Let me scroll down a bit so you can see better and we're gonna have type of text.
Yes that stays the same.
I.D. is going to be name and then also the value is gonna be our state value.
So the state value was the name.
So I mean get the name for the value and on change again I'm gonna do an in line where we have a listener
and then of course we're just gonna pass and our function the arrow function and then within the arrow
function we're going to access our event object and then I'm just gonna say that said name since that
is the function that controls my set value I'm going to pass in e target and we're gonna grab devalue
that is gonna be our single input then we have the info about the card and I got normally probably you're
not gonna add this to the form because in this case we're just showing what kind of numbers user has
to use in order to test out the cards.
It's not like we are accepting real cards we're still in test now and again normally you wouldn't have
that.
You'd have right away the card but I just find it a bit more useful if let's say somebody visits your
application and in that way they can at least enter something otherwise they need to go and search the
internet and look for the values that you can use for stripe test cards which I don't think it's very
good use of their time and we're going to start again by setting up some kind of comments and we're
just going to say that it is going to be a card element so Card element copy and paste and we're gonna
have end of Card element and the card element and now I went all the way to the top of my page and we're
gonna start by setting up a div with a class or stripe input stripe input like so and then within this
div we're gonna start by setting up a label for the card element.
So we're going to go with label and actually am all for is going to be for Card element and then within
the label we're gonna write card or no sorry credit or debit card and then we're gonna have our paragraph
with a bunch of info where we're gonna have a test card as well as the info about security numbers and
the zip code so we're gonna start by placing a paragraph and then within the paragraph we're gonna have
some text.
Now we also gonna add the right away class.
So let's say last name stripe info just so we have a bit of styling.
Then let's add a text of test using this credit card.
Then we have our colon and then within the span the number is essentially 4 2 4 2 4 times.
So just that 4 2 4 2 and now we would need to copy and paste that four times.
So let me selected.
Let me copy that and we're gonna go with 1 2 3.
So we have four times 4 2 4 2.
And then of course that is gonna be our test number.
Then we're gonna have a line break.
So right outside this plan we're gonna have a line break.
We're gonna say enter any five digits for these zip code zip code and then of course this gives me a
code that I'm not looking for.
And then we're gonna have another line break.
So we're gonna have another line break.
And then this case where we say enter any three digits three digits for the security number forty CVC
CVC.
Let's say that we have currently paragraph.
We have our card element next.
We're gonna have stripe elements.
So again I'm just gonna add a comment of Stripe elements or element whatever.
And then we're gonna have the error.
So right after the input field that stripe element is going to provide where essentially we're just
at a card info as well as all the proper dates and everything.
Then we're gonna have our errors where if there is an error we're gonna display like your card number
is incomplete.
If we add let's say card let me selected properly like.
So let me grab it then copy and paste if let's say I tried to submit it in this case.
And of course I need to type something in here.
Then I'm gonna have your card's expiration date is incomplete.
And in order to set it up we're gonna head over back to our project and then right after striped element
we're gonna add one more comment and the comment is gonna be stripe adverse and then we're just gonna
check our state error value if it is true then we're going to display there.
If not then of course we're just not going to display anything so error.
And then if it is true then I would want to render my paragraph paragraph is gonna have some classes
of class name form empty.
And then in here we're just gonna type in our.
So whatever the error is then we're just gonna display it also would want to show if my value is empty.
So if the user hasn't typed in the name then I'm going to display my paragraph with again the values
are empty or if the user has filled out the value for the name then we're going to display the submit
button.
Please keep in mind that even though again we have our name filled out.
If the values within the card are incorrect we're not going to be able to submit the form.
So it's not like just because we typed in the name all the time we're gonna be getting some kind of
error.
No we're always gonna check whether the card values are correct.
And only then we're gonna be able to submit our order.
We're gonna head over back and in this case unlike the previous time where I'd made two checks four
is empty I'm just gonna set it up as they third operator just so I can show that of course there's always
multiple options how we can solve the same thing.
So I'm going to go with empty value here and then like I said it is gonna be a ternary operator but
I think it is gonna be easier if we first type all the paragraph.
We're gonna add a class name again.
Form empty.
Like so and let's just write please fill out.
Name field and then also let's randomly button.
And then we're gonna set up the eatery operator where it just copy paste.
Again I just find it a bit faster if we type it out this way.
So we're gonna have our button on the button is gonna have a type of submit.
So we're gonna go with submit then we're gonna have a click event.
So we're gonna have on click we're gonna sign it to our handle submit and then also we're gonna add
some class names of class name.
And it's gonna be between between primary as well as Beatty and block and as far as text we're just
gonna have submit.
Let's save it.
And then like I said Let's set up our ternary operator where if the is empty is true then we're showing
please fill out the name field if these is empty is false meaning if the user has filled out the name
value then we're gonna be able to submit.
So we're gonna go with is empty is empty ternary operator and first case scenario we're gonna render
the paragraph.
So essentially if it is true and then the second case if it is false if the user has filled out the
values then let's just grab our button and display that button copy and paste a closed D sidebar and
then of course the moment I fill it out I can submit if the name is empty then we're showing please
fill out Team Name field and now we're going to switch gears.
Sign up for the stripe account and setup our stripe elements.