WEBVTT 00:00.020 --> 00:00.260 Okay. 00:00.260 --> 00:04.520 What we're going to take a look at now is we want to be able to validate our different elements. 00:04.520 --> 00:11.240 So if we do have an error such as an invalid zip code, for example, there's nothing to stop me clicking 00:11.240 --> 00:19.100 on to the next step in the stepper because we haven't validated this input, but it is invalid and it 00:19.100 --> 00:25.070 will let us step through even though we've got an invalid component or an element. 00:25.070 --> 00:31.700 So we're going to take a look at how we can check the validation status and stripe JavaScript is validating 00:31.700 --> 00:31.880 this. 00:31.880 --> 00:35.090 We can see that this is invalid. 00:35.570 --> 00:41.780 So we can use the stripe functionality to check this to see if this passes the stripe validation, and 00:41.780 --> 00:45.500 if it does not, we can disable our button to go on to the next step. 00:45.500 --> 00:47.540 And that's what we'll take a look at now. 00:47.540 --> 00:49.100 So back to VS code. 00:50.150 --> 00:57.470 And we saw a glimpse earlier when it came to getting the address for an element. 00:57.470 --> 01:03.390 And when we looked at the get value, then one of the parts of this that we have available to us is 01:03.390 --> 01:09.780 the complete property, as this is validating and retrieving form values from the address element. 01:09.780 --> 01:15.600 So we can use a similar technique effectively to get the elements for the address element and the payment 01:15.600 --> 01:16.170 element. 01:16.170 --> 01:17.940 And we can see if they are complete. 01:17.940 --> 01:20.520 If they are complete, that means they've been validated. 01:20.520 --> 01:23.910 And we can let our user move forward to the next step. 01:23.910 --> 01:27.120 So we're going to need to track this again in local state. 01:27.120 --> 01:29.580 So this component is going to get a little bit busy. 01:29.580 --> 01:32.400 And inside our checkout step this is. 01:32.400 --> 01:36.240 So we'll have a const for address complete. 01:36.240 --> 01:37.800 So it's going to use local state. 01:37.800 --> 01:42.150 So we'll have address complete and set address complete. 01:42.150 --> 01:45.480 And we'll use the use state. 01:45.720 --> 01:48.720 And we'll set it to be false initially. 01:48.720 --> 01:50.250 And I'll just copy this down. 01:50.250 --> 01:54.360 And we'll also have another one for the payment complete. 01:54.360 --> 01:58.680 And I'll set this to set payment complete. 01:58.680 --> 02:03.540 And we'll have a couple of helper functions to help us set these different elements. 02:04.120 --> 02:05.770 So where to put this? 02:05.770 --> 02:07.390 Because it is quite a busy component. 02:07.390 --> 02:14.800 I'll just add it after the handle back here and we'll have a const for handling of the address chain. 02:14.800 --> 02:19.330 So I'll call it handle address change and set this equal to an event. 02:19.330 --> 02:22.360 And what is the type of event. 02:22.360 --> 02:25.870 Well if we're not sure I'm just going to use any for the time being. 02:25.870 --> 02:33.880 And then inside here we'll specify set address complete and say event dot complete. 02:33.910 --> 02:36.910 Now we're not going to get an error here because of the use of the any type. 02:36.910 --> 02:38.590 But we do see an error here. 02:38.590 --> 02:43.330 And we're going to use this in the onchange of our address element. 02:43.330 --> 02:45.400 So we'll go down to our address element. 02:45.400 --> 02:48.910 And below the options here we'll give it the onchange. 02:49.990 --> 02:54.610 And if we hover over the onchange in here we can see what type this is using. 02:54.610 --> 02:58.030 And I mentioned earlier that stripe comes with good TypeScript support. 02:58.030 --> 02:58.930 And it does. 02:58.930 --> 03:05.980 So we can use the stripe address element change event as the type that we're going to use inside our 03:05.980 --> 03:06.690 helper method. 03:06.690 --> 03:14.610 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. 03:15.300 --> 03:20.790 And if we take a look at the different options now we can see what's available to us from this change 03:20.790 --> 03:21.180 event. 03:21.180 --> 03:26.550 And the one that we're interested in in terms of has the element been completed correctly. 03:26.550 --> 03:28.950 That's the complete one there. 03:28.950 --> 03:35.850 And then we can come back down to our Onchange event and we'll just pass in the handle address change. 03:36.480 --> 03:40.770 And then we can do something very similar for the payment element as well. 03:40.800 --> 03:43.560 So I'll just come back up to where we've got our handle address change. 03:43.560 --> 03:48.720 It's going to be similar enough that I can be lazy enough to copy and paste this one down, and I'll 03:48.720 --> 03:50.940 specify handle payment change. 03:50.940 --> 03:56.280 And I think we can guess what the type is going to be for this based on what the one above is. 03:56.760 --> 04:02.460 So we can use the stripe payment element change event for this one. 04:02.460 --> 04:06.630 And we're going to have access to the same property fully event complete there as well. 04:06.630 --> 04:11.710 So I'll come down to the payment element and we'll give this its Onchange event. 04:11.830 --> 04:17.050 So we'll use Onchange and we'll use the handle payment change. 04:17.380 --> 04:23.350 So now we've got the ability to find out if the different elements have been completed and validated 04:23.350 --> 04:24.070 by stripe. 04:24.070 --> 04:27.070 So let's come down to our button where we're handling next. 04:27.070 --> 04:31.300 And I'll just bring this down because we're going to add a few parts to this. 04:31.330 --> 04:35.200 Or really just the disabled property inside here. 04:35.200 --> 04:36.400 So we'll set disabled. 04:36.400 --> 04:38.380 We'll open curly brackets. 04:38.380 --> 04:41.260 And on the next line here I'm going to add parentheses. 04:41.260 --> 04:51.910 And we're going to check the active step and see if this is equal to zero and not address complete. 04:51.910 --> 04:55.390 And that's going to validate our address elements. 04:55.390 --> 04:58.570 And then we'll add double pipes for the Or condition. 04:58.570 --> 05:08.770 And then in parentheses we'll specify active step is equal to one double ampersand and not payment complete. 05:08.770 --> 05:12.530 And I've got a couple of warnings in here and let's see what those are about. 05:12.530 --> 05:17.840 And I've forgotten to update the function with the set payment complete. 05:17.840 --> 05:22.940 So inside the handle payment change we need these sets payment complete of course. 05:22.940 --> 05:26.510 So if we take a look at our progress and looks like I've lost my checkout. 05:26.510 --> 05:28.280 So I'll just refresh the page there. 05:29.750 --> 05:35.390 And what we should find is we've got access to our next button because this is a complete address. 05:35.390 --> 05:41.030 But if I take out one of the characters of the zip code, notice that our next button is disabled. 05:41.030 --> 05:48.770 I'll try and click on this and the validation kicks in and it goes away once we complete the form properly. 05:48.800 --> 05:50.930 And then we've got access to the next step. 05:50.930 --> 05:57.890 And then this is disabled until such time as I have valid payment information inside here. 05:57.890 --> 06:01.910 So I'll just use all 42 which is one of the stripe test cards. 06:01.910 --> 06:09.140 And I'll just add a valid card which is one of their test cards which is all 40 twos. 06:09.170 --> 06:15.990 Any expiration date in the future is valid and any three digit number is also valid. 06:15.990 --> 06:21.900 But if obviously if we take anything out, the button becomes disabled, we put it back in. 06:21.930 --> 06:23.160 It's then enabled. 06:23.160 --> 06:26.160 So now we've got validation on that as well. 06:26.280 --> 06:32.250 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 06:32.250 --> 06:35.190 paying based on the total we have here. 06:35.190 --> 06:41.310 So instead of saying next, I'd like it to say how much the order is going to be for this button label. 06:42.000 --> 06:45.060 So let's go back and get that information. 06:45.060 --> 06:50.340 And I feel this is something that we've needed in a few places to get our subtotal and get the delivery 06:50.340 --> 06:52.650 fee, and we're going to need it here as well. 06:52.650 --> 06:54.810 And I know we've used this in the order summary. 06:54.810 --> 06:59.370 So let's just go and take a look at what we have inside the order summary itself. 06:59.370 --> 07:05.880 And we've got all of this effectively or all of this I should say the three lines I've highlighted here. 07:05.880 --> 07:11.190 Now we're going to need similar inside our checkout step as well. 07:11.190 --> 07:18.190 And let's take the opportunity to take a look at one of the reusability features that react gives us. 07:18.190 --> 07:24.340 We're using react hooks, and we can create our own react hooks as well that we can utilize. 07:24.340 --> 07:30.310 And I'd like a hook, for example, where we can get hold of our baskets, we can get hold of the subtotal, 07:30.310 --> 07:35.560 and we can get hold of the delivery fee very easily in a single line of code. 07:35.560 --> 07:38.650 Without all of this boilerplate type code that I have here. 07:38.650 --> 07:44.620 Because we're going to need to repeat this inside our checkout stepper for what I wish to accomplish, 07:44.620 --> 07:50.050 which is to give our button a label for the payment stage. 07:50.050 --> 07:55.960 So let's go to and let's do this in the lib folder we'll create a folder called hooks. 07:57.460 --> 08:00.970 And inside our hooks folder I'm going to create a new file. 08:00.970 --> 08:04.870 And I'm going to call it Use Baskets. 08:06.250 --> 08:11.740 And really this is just going to be a very simple quick example of how to create our own custom hook 08:11.980 --> 08:17.810 for reusability purposes where we need similar code in different components. 08:17.810 --> 08:24.320 So in order to create our own little custom hook, I'm going to use export const use baskets. 08:24.320 --> 08:30.080 And let's get the File Explorer out of the way and we'll make it an arrow function. 08:32.210 --> 08:36.230 And inside here that's in fact let's just go to our order summary. 08:36.230 --> 08:38.930 And I'm just going to copy all of this code. 08:39.230 --> 08:40.850 Or in fact I'm going to cut it. 08:41.150 --> 08:45.830 And I'm going to paste it inside here and bring in anything that we need. 08:45.860 --> 08:50.480 I'm just going to try adding all missing imports and that is fine. 08:50.480 --> 08:53.630 So this gives us the same code. 08:53.630 --> 08:57.860 And then to use it as a hook we need to return from this. 08:57.860 --> 09:04.940 So I'm going to return an object that contains the baskets the subtotal the delivery fee. 09:05.600 --> 09:09.110 And now we have our own little custom hook. 09:09.140 --> 09:17.270 And in order to use this inside the order summary, I can then just specify that I want to get const 09:17.470 --> 09:20.410 Curly brackets equals use baskets. 09:20.710 --> 09:28.180 And then I can get hold of the baskets, the subtotal and the delivery fee. 09:30.460 --> 09:33.280 And why do I have the error here. 09:33.310 --> 09:38.950 Did I use something else inside here or did I just not even need the basket inside here? 09:40.090 --> 09:45.100 And no, I don't need the basket because I used the basket or I needed the basket to get hold of the 09:45.100 --> 09:45.910 subtotal. 09:45.940 --> 09:51.040 But of course, if I'm not using the basket inside here, then I just need these two properties. 09:51.280 --> 09:52.270 So great. 09:52.270 --> 09:53.170 That's all we need there. 09:53.170 --> 09:56.500 And then we can remove the imports that we're not using at the top. 09:56.500 --> 10:04.420 So now in our checkout step, in order to get the information about the subtotal and the delivery fee, 10:04.450 --> 10:07.150 then we can just use our new custom hook. 10:07.180 --> 10:13.120 So I'll specify const and in curly brackets equals use basket. 10:13.990 --> 10:19.030 And we'll have our subtotal and our delivery fee inside here. 10:19.070 --> 10:21.470 And we could actually. 10:21.470 --> 10:24.350 Because all I need inside here is a total. 10:24.350 --> 10:33.710 So we could go back to our hook and we could say const total equals subtotal plus delivery fee. 10:33.890 --> 10:42.170 And we can also specify the total inside there and then inside the checkout stepper instead of two properties. 10:42.170 --> 10:47.630 Here I can just utilize the total from the use basket. 10:47.630 --> 10:52.490 And then I can come down to our button. 10:52.490 --> 11:02.240 And instead of specifying next here we can check the active step and see if it's equal to steps dot 11:02.270 --> 11:10.580 length minus one, which will give us step number two which is going to be the review step. 11:10.580 --> 11:12.140 And we'll use a ternary. 11:12.140 --> 11:17.780 And inside Backticks we'll say pay and we'll use dollar. 11:18.020 --> 11:24.270 And then in curly brackets we'll use our currency formats, and I'll pass in the total. 11:25.380 --> 11:28.200 And we'll add a colon for the other side of the ternary. 11:28.200 --> 11:30.660 And this can just be next. 11:30.900 --> 11:33.990 And let's take a look at our progress. 11:34.890 --> 11:38.760 So I'll click on next and I'll need to add the card again. 11:38.760 --> 11:47.850 So all the 40 twos and put some dates in the future and the security code and click on next again. 11:47.850 --> 11:52.890 And now we can see that we've got our order total inside there. 11:53.520 --> 11:54.510 Great. 11:54.510 --> 12:00.390 So the next thing we'll take a look at is how we deal with the summary information in our review component. 12:00.390 --> 12:06.480 And to get that information from stripe, we'll need to create something called a confirmation token 12:06.480 --> 12:11.040 so that when we do click this next button, then we communicate with stripe and we get this thing called 12:11.040 --> 12:17.220 a confirmation token so that we when we do go on to the next step, then we're simply confirming the 12:17.220 --> 12:21.450 payment with stripe, because stripe has already checked that that's going to be a valid card. 12:21.450 --> 12:23.940 And we'll take a look at that next.