Awesome we have our card input and we can start accepting the payments.
However the way it works would strike.
It's not like user enters sensitive card number values as well as the rest of the card info and then
would just send it over the wire.
That would be highly insecure.
The way it works would strike is once our card values are correct.
Once the numbers are correct and rest of the values we get back the token.
So once we submit the form we're gonna get back to token.
If everything is correct as far as the card is concerned if we're gonna get errors well then we're gonna
get errors and we're just going to display like I showed you before where if I'm trying to submit my
form and my card values are incorrect.
Well then we're just getting back the years Hello.
If everything is correct we get back our token.
So we're gonna pass our token to a back end and then using the secret key and the token from the back
and from our strappy back and we're going to communicate with a stripe and complete the transaction
so that way again.
We're not sending sensitive information from our front end which would be highly insecure and we're
gonna start working in this video on submitting the form.
So we're gonna head up to our handle submit remember the function that we had And first we're going
to start by showing dealer like we did previously already within a log in so I'm not going to repeat
myself essentially we're just doing that.
So the user doesn't keep on submitting so we're going to go with show alert and then as far as the alert
while we can just pass in the same message we can just say a message and then let's say submitting order
or maybe let's do a different message submitting order and then we're gonna say dot dot dot please wait.
Something like that that is gonna be our alert and then we need to get back out talking.
So how do we set up to talking.
Well since we have access to the props we can get props stripe and then create token and it is returning
I promise.
So since we have a sync we can just use a white keyword where we await when our promise is settled.
So I'm gonna have cost response and that is equal to a wait for UPS and then we have of course the stripe
and then we're looking for the method by the name of create token.
OK so it does return a promise so we can change the catch right away if there's some kind of error.
Let's say we're gonna have the error and then we would want the console log it.
So let's go with console log let's remove the semicolon and let just type out the error.
And then I would want to console log the response because depending on what response we're gonna get
well we're gonna take some actions.
So if we're gonna get back our token awesome we're gonna call our submit order function and we haven't
created which essentially just communicates with stripe and passes the values down to our back end.
However if the token doesn't exist then of course we're just going to display the message.
But I guess there's just going to be the fastest if we just console log.
The response first.
So let's say what would be our response and let's try to submit it.
Like I said I'm going to fill out the name value just so I can submit something because I want to show
you the errors first.
So we're gonna go with some kind of name we try to submit and then of course we get back the error.
Now I still have of course my alert that says submitting the order.
So of course if I'm going to get the errors then we're just going to clean out everything.
But then in this case notice if my response is of course the error.
Well then I can just get whatever moral message I had.
So in this case the error message is you've got your card number is complete.
So remember we had of course our error correct.
So now if the token doesn't exist and it definitely doesn't exist because I'm getting it back the error
object then of course I can just show that there is some kind of error.
So the way it's going to work is I'm going to check first of all if the token is there.
So I'm gonna structure out the token token from my response.
That's gonna be my first step.
So get me the token from the response of course if there is ever a token it's not going to be there.
So I'm going to set up my if statement if token.
Then we're going to do a couple of actions.
If the token does exist if it doesn't exist we're going to go with else if it doesn't exist what we
would want to do.
Well first of all we have a method of hiding the alert so we can just go with high alert because there's
no point for us to show anything within the alert.
We already displaying everything within a paragraph correct.
So we can just hide the alert.
That's step number one.
And then we can just set error using our function so set error a number that was our state value and
then we can get our message by looking in the response.
Then error.
And then the property name is.
Message message.
And then let's go one by one.
Just so you can see that we're gonna be getting correct messages.
So I'm just gonna type out here John and then we're going to start with car number.
Once we clicked.
Notice your card number is incomplete.
So one by one let's add correct values just so we can check that all our error messages are correct.
Next one is gonna be your card's expiration date is incomplete.
And I'm not going to console log each and every one of them.
Hopefully you get the gist.
Then we're gonna go home let's say correct month and just keep in mind that it needs to be in the future.
So of course you cannot pass on some incorrect values then it says your card security code is incomplete
in order to have the proper code.
We just need to type any three digits so two three two.
And then the last one is your postal code is incomplete.
So let me add some kind of old postal code and of course once I do that then I'm gonna get back to response.
So now if token lets in fact console log our response just so I can see what's console.
Our response and we're going to see that if everything is correct and by the way of course I refresh
now.
So let me typing again John.
Then we're gonna go with all the correct value since we already cover these error messages.
So January 1st 2022 then some kind of security code.
And as far as the zip code again we're gonna go with one of the old zip codes.
Let's try to submit.
We're submitting the order again we're not handling the alert in this case.
That's the reason why alert is gonna stay.
But we got back our token which is awesome.
This is what we were looking for.
So once we have our token then we can start communicating with a backend.
And again we're gonna pass to a back and our token and then from the back end we're going to complete
our transaction.