Okay.
What we're going to take a look at now is we want to be able to validate our different elements.
So if we do have an error such as an invalid zip code, for example, there's nothing to stop me clicking
on to the next step in the stepper because we haven't validated this input, but it is invalid and it
will let us step through even though we've got an invalid component or an element.
So we're going to take a look at how we can check the validation status and stripe JavaScript is validating
this.
We can see that this is invalid.
So we can use the stripe functionality to check this to see if this passes the stripe validation, and
if it does not, we can disable our button to go on to the next step.
And that's what we'll take a look at now.
So back to VS code.
And we saw a glimpse earlier when it came to getting the address for an element.
And when we looked at the get value, then one of the parts of this that we have available to us is
the complete property, as this is validating and retrieving form values from the address element.
So we can use a similar technique effectively to get the elements for the address element and the payment
element.
And we can see if they are complete.
If they are complete, that means they've been validated.
And we can let our user move forward to the next step.
So we're going to need to track this again in local state.
So this component is going to get a little bit busy.
And inside our checkout step this is.
So we'll have a const for address complete.
So it's going to use local state.
So we'll have address complete and set address complete.
And we'll use the use state.
And we'll set it to be false initially.
And I'll just copy this down.
And we'll also have another one for the payment complete.
And I'll set this to set payment complete.
And we'll have a couple of helper functions to help us set these different elements.
So where to put this?
Because it is quite a busy component.
I'll just add it after the handle back here and we'll have a const for handling of the address chain.
So I'll call it handle address change and set this equal to an event.
And what is the type of event.
Well if we're not sure I'm just going to use any for the time being.
And then inside here we'll specify set address complete and say event dot complete.
Now we're not going to get an error here because of the use of the any type.
But we do see an error here.
And we're going to use this in the onchange of our address element.
So we'll go down to our address element.
And below the options here we'll give it the onchange.
And if we hover over the onchange in here we can see what type this is using.
And I mentioned earlier that stripe comes with good TypeScript support.
And it does.
So we can use the stripe address element change event as the type that we're going to use inside our
helper method.
So I'll come up here and I'll just paste this in and I'll just add it to the imports from stripe JS.
And if we take a look at the different options now we can see what's available to us from this change
event.
And the one that we're interested in in terms of has the element been completed correctly.
That's the complete one there.
And then we can come back down to our Onchange event and we'll just pass in the handle address change.
And then we can do something very similar for the payment element as well.
So I'll just come back up to where we've got our handle address change.
It's going to be similar enough that I can be lazy enough to copy and paste this one down, and I'll
specify handle payment change.
And I think we can guess what the type is going to be for this based on what the one above is.
So we can use the stripe payment element change event for this one.
And we're going to have access to the same property fully event complete there as well.
So I'll come down to the payment element and we'll give this its Onchange event.
So we'll use Onchange and we'll use the handle payment change.
So now we've got the ability to find out if the different elements have been completed and validated
by stripe.
So let's come down to our button where we're handling next.
And I'll just bring this down because we're going to add a few parts to this.
Or really just the disabled property inside here.
So we'll set disabled.
We'll open curly brackets.
And on the next line here I'm going to add parentheses.
And we're going to check the active step and see if this is equal to zero and not address complete.
And that's going to validate our address elements.
And then we'll add double pipes for the Or condition.
And then in parentheses we'll specify active step is equal to one double ampersand and not payment complete.
And I've got a couple of warnings in here and let's see what those are about.
And I've forgotten to update the function with the set payment complete.
So inside the handle payment change we need these sets payment complete of course.
So if we take a look at our progress and looks like I've lost my checkout.
So I'll just refresh the page there.
And what we should find is we've got access to our next button because this is a complete address.
But if I take out one of the characters of the zip code, notice that our next button is disabled.
I'll try and click on this and the validation kicks in and it goes away once we complete the form properly.
And then we've got access to the next step.
And then this is disabled until such time as I have valid payment information inside here.
So I'll just use all 42 which is one of the stripe test cards.
And I'll just add a valid card which is one of their test cards which is all 40 twos.
Any expiration date in the future is valid and any three digit number is also valid.
But if obviously if we take anything out, the button becomes disabled, we put it back in.
It's then enabled.
So now we've got validation on that as well.
What I'd also like to do is when I go on to the next step, is specify how much they're going to be
paying based on the total we have here.
So instead of saying next, I'd like it to say how much the order is going to be for this button label.
So let's go back and get that information.
And I feel this is something that we've needed in a few places to get our subtotal and get the delivery
fee, and we're going to need it here as well.
And I know we've used this in the order summary.
So let's just go and take a look at what we have inside the order summary itself.
And we've got all of this effectively or all of this I should say the three lines I've highlighted here.
Now we're going to need similar inside our checkout step as well.
And let's take the opportunity to take a look at one of the reusability features that react gives us.
We're using react hooks, and we can create our own react hooks as well that we can utilize.
And I'd like a hook, for example, where we can get hold of our baskets, we can get hold of the subtotal,
and we can get hold of the delivery fee very easily in a single line of code.
Without all of this boilerplate type code that I have here.
Because we're going to need to repeat this inside our checkout stepper for what I wish to accomplish,
which is to give our button a label for the payment stage.
So let's go to and let's do this in the lib folder we'll create a folder called hooks.
And inside our hooks folder I'm going to create a new file.
And I'm going to call it Use Baskets.
And really this is just going to be a very simple quick example of how to create our own custom hook
for reusability purposes where we need similar code in different components.
So in order to create our own little custom hook, I'm going to use export const use baskets.
And let's get the File Explorer out of the way and we'll make it an arrow function.
And inside here that's in fact let's just go to our order summary.
And I'm just going to copy all of this code.
Or in fact I'm going to cut it.
And I'm going to paste it inside here and bring in anything that we need.
I'm just going to try adding all missing imports and that is fine.
So this gives us the same code.
And then to use it as a hook we need to return from this.
So I'm going to return an object that contains the baskets the subtotal the delivery fee.
And now we have our own little custom hook.
And in order to use this inside the order summary, I can then just specify that I want to get const
Curly brackets equals use baskets.
And then I can get hold of the baskets, the subtotal and the delivery fee.
And why do I have the error here.
Did I use something else inside here or did I just not even need the basket inside here?
And no, I don't need the basket because I used the basket or I needed the basket to get hold of the
subtotal.
But of course, if I'm not using the basket inside here, then I just need these two properties.
So great.
That's all we need there.
And then we can remove the imports that we're not using at the top.
So now in our checkout step, in order to get the information about the subtotal and the delivery fee,
then we can just use our new custom hook.
So I'll specify const and in curly brackets equals use basket.
And we'll have our subtotal and our delivery fee inside here.
And we could actually.
Because all I need inside here is a total.
So we could go back to our hook and we could say const total equals subtotal plus delivery fee.
And we can also specify the total inside there and then inside the checkout stepper instead of two properties.
Here I can just utilize the total from the use basket.
And then I can come down to our button.
And instead of specifying next here we can check the active step and see if it's equal to steps dot
length minus one, which will give us step number two which is going to be the review step.
And we'll use a ternary.
And inside Backticks we'll say pay and we'll use dollar.
And then in curly brackets we'll use our currency formats, and I'll pass in the total.
And we'll add a colon for the other side of the ternary.
And this can just be next.
And let's take a look at our progress.
So I'll click on next and I'll need to add the card again.
So all the 40 twos and put some dates in the future and the security code and click on next again.
And now we can see that we've got our order total inside there.
Great.
So the next thing we'll take a look at is how we deal with the summary information in our review component.
And to get that information from stripe, we'll need to create something called a confirmation token
so that when we do click this next button, then we communicate with stripe and we get this thing called
a confirmation token so that we when we do go on to the next step, then we're simply confirming the
payment with stripe, because stripe has already checked that that's going to be a valid card.
And we'll take a look at that next.