WEBVTT 00:00.020 --> 00:00.350 Okay. 00:00.350 --> 00:05.780 What we're going to take a look at in this lesson is when we click through to the review component from 00:05.780 --> 00:11.450 our payment component or element, then we're going to communicate with stripe and get something called 00:11.450 --> 00:12.980 a confirmation token. 00:12.980 --> 00:18.890 And this token is a consolidation of all of the payment details including the shipping address the payment 00:18.890 --> 00:19.670 card. 00:20.390 --> 00:26.510 And when it comes to confirming the payment with stripe, which we will not have done yet, then we 00:26.510 --> 00:31.670 use that confirmation token so that when we do click on the pay button, we just send the confirmation 00:31.670 --> 00:38.000 token to stripe, and that contains all of the payment information consolidated into that single token. 00:38.030 --> 00:44.390 Also, what it means is that if we were in two different components, for example, and we weren't just 00:44.390 --> 00:49.640 in inside a single component, which we are because of the way that we've laid out our checkout stepper, 00:49.670 --> 00:55.760 then we could, when we go through to the next component, get hold of all of the payment card and address 00:55.760 --> 00:58.790 information from this token as well, if we needed to. 00:58.820 --> 01:03.770 Technically, we don't actually need to do that because we've got access to the payment element and 01:03.770 --> 01:05.660 the address element inside here. 01:05.660 --> 01:11.030 But I do want to demonstrate this concept of a confirmation token because it is useful, it's flexible. 01:11.030 --> 01:17.570 And if it wasn't my desire to have the Google auto completion, then I probably would have split the 01:17.570 --> 01:20.990 different elements into their own components anyway. 01:21.440 --> 01:25.130 So let's go take a look at how we use this confirmation token. 01:25.130 --> 01:30.470 And if we go up to our handle next we're going to add some more into list. 01:30.500 --> 01:35.180 We're going to check to see if the active step is equal to one. 01:35.180 --> 01:39.470 And if it is then we're going to create this token. 01:39.470 --> 01:41.630 So first of all we need to make sure. 01:41.630 --> 01:46.130 And really this is just for our TypeScript compiler to make sure we have these things before we try 01:46.160 --> 01:46.970 to use them. 01:46.970 --> 01:55.790 We're going to make sure elements is not equal to null or stripe is not equal to null as well. 01:55.790 --> 01:58.370 And stripe is something that we haven't brought in yet. 01:58.370 --> 02:04.650 So we also need as well as the elements here, we need to bring in stripe so that we can use this for 02:04.650 --> 02:05.460 what we're doing here. 02:05.460 --> 02:09.060 So I'm going to say const stripe equals use stripe. 02:09.060 --> 02:13.500 And we also have a hook that's provided to give us this. 02:13.530 --> 02:16.380 So we're going to check to make sure we have both of these things. 02:16.380 --> 02:17.400 First of all. 02:17.850 --> 02:22.800 And if we do not we are going to return because we cannot do what we're about to do. 02:23.430 --> 02:27.390 Then we'll use const results equals await. 02:27.390 --> 02:30.630 And we're going to use elements and submit. 02:30.630 --> 02:37.920 And what this does, if we look at the submit method before confirming payments, call element submit 02:37.950 --> 02:43.650 to validate the states of the payment element and collect any data required for wallets. 02:43.650 --> 02:51.450 So this is just something we have to do before we can attempt to create a confirmation token. 02:51.630 --> 03:00.210 And if we do get an error and we'll check the results and say if result dot error, then we will return 03:00.240 --> 03:05.300 a toast dot error and we'll use results. 03:05.300 --> 03:07.610 Dot error dot message. 03:07.640 --> 03:12.080 And again because we're returning here, this stops the execution of this method. 03:12.080 --> 03:15.140 And we don't execute any lines of code below this. 03:15.500 --> 03:21.320 Following this we'll say const stripe result equals await. 03:21.320 --> 03:22.940 And then we can use stripe. 03:22.940 --> 03:25.460 And we can use one of the functions from stripe. 03:25.460 --> 03:30.860 And there are many many different functions inside stripe JavaScript. 03:30.860 --> 03:34.700 But we're going to be creating a confirmation token. 03:34.700 --> 03:37.940 And inside here we pass the options. 03:37.940 --> 03:41.660 But all we need to pass here is the elements inside curly brackets. 03:41.660 --> 03:44.450 As we send this up as an object. 03:44.450 --> 03:49.910 And the elements contains all of our address details and our payment details. 03:49.940 --> 03:52.670 Once again, we're going to check this for an error as well. 03:52.670 --> 03:59.540 And we'll say if stripe result dot error then once again we're going to return a toast at this point 04:00.740 --> 04:02.630 and toast dot error. 04:02.630 --> 04:07.060 And we'll use the stripe results Dot error dot message. 04:07.540 --> 04:12.040 And we'll store our token in local state as well. 04:12.040 --> 04:18.460 So let's create another piece of local state inside here I appreciate this is quite a busy component, 04:18.460 --> 04:20.770 but it's just the nature of what we're doing here. 04:20.770 --> 04:28.030 So we're going to have a confirmation token and let's call it confirmation token and set confirmation 04:28.030 --> 04:29.050 token. 04:29.380 --> 04:31.720 And we'll set it equal to use state. 04:31.720 --> 04:34.120 And we can use a type for this from stripe. 04:34.120 --> 04:38.260 We do have a confirmation token type that we can utilize. 04:38.290 --> 04:39.730 Or it's going to be null. 04:39.730 --> 04:42.940 And we're going to give it an initial value of null. 04:42.970 --> 04:48.610 And then once we have this we'll use the set confirmation token. 04:48.610 --> 04:52.930 And we'll set it to the stripe result dot confirmation token. 04:53.440 --> 04:59.920 So when we do move forward to the review component, then we should have access to this confirmation 04:59.920 --> 05:00.790 token. 05:00.790 --> 05:04.030 And we'll pass that down to our review component. 05:04.030 --> 05:10.890 So I'm going to go down to the review components, and we're going to pass the confirmation token as 05:10.890 --> 05:11.640 a prop. 05:11.640 --> 05:16.200 So we'll say confirmation token equals. 05:16.590 --> 05:21.060 And in here we'll use the confirmation token. 05:21.090 --> 05:24.480 And of course we'll need to add this to our review component. 05:24.480 --> 05:26.490 As a prop I'm getting quite busy at the top. 05:26.490 --> 05:32.220 So I'm just going to close the others and right click and go to definition for the review component. 05:32.220 --> 05:44.580 So inside here we'll add a type of props equals and we'll say confirmation token of type confirmation 05:45.300 --> 05:46.200 token. 05:46.200 --> 05:50.370 And we'll use the or null as well. 05:50.370 --> 05:53.550 So it matches what we're doing inside our checkout stepper. 05:53.670 --> 05:57.450 And then we'll add this to the arguments in the review component. 05:57.450 --> 06:01.530 So we'll open curly brackets and specify colon props. 06:01.530 --> 06:05.520 And we'll use confirmation token inside here. 06:05.700 --> 06:08.270 Now we're using our a basket inside this component. 06:08.270 --> 06:09.980 We can simplify this a little bit. 06:10.010 --> 06:12.290 We can use our new hook that we created. 06:12.290 --> 06:18.980 So instead of using the Usefetch basket query we can just use our use basket hook instead. 06:19.580 --> 06:20.630 Not a big change. 06:20.630 --> 06:24.080 We've saved ourselves 6 or 7 characters there, but it all counts. 06:24.080 --> 06:27.200 Every every little helps when it comes to removing code. 06:27.200 --> 06:28.220 And inside. 06:28.220 --> 06:34.940 Here, let's make use of our confirmation token because we need to provide the shipping address and 06:34.940 --> 06:36.470 also the payment details. 06:36.470 --> 06:38.810 Now we're going to need to format this as a string. 06:38.810 --> 06:44.480 So we'll create a couple of helper methods inside here to do such a thing. 06:44.510 --> 06:48.740 And we'll use const address string equals. 06:48.740 --> 06:51.050 And we'll just make this an arrow function. 06:51.050 --> 06:57.260 And we're going to check to see not a confirmation token. 06:57.260 --> 07:02.480 And if we take a look at the different things we've got access to inside our token, we've got the created 07:02.480 --> 07:06.410 expires at the payment intent payment method preview. 07:06.410 --> 07:09.070 And we've also got inside here shipping. 07:09.070 --> 07:11.110 So we're going to take a look and make. 07:11.140 --> 07:16.780 Sure we have the confirmation token shipping address effectively. 07:16.780 --> 07:21.370 And if we do not have this then we're going to return an empty string. 07:22.000 --> 07:25.960 That shouldn't be the case of course, because we're not going to let the users get to this stage until 07:25.960 --> 07:28.510 they've got the address completed. 07:28.510 --> 07:34.030 But once again, we do a lot of things just to make TypeScript happy when it comes to using things that 07:34.030 --> 07:35.560 could possibly be null. 07:35.560 --> 07:37.690 And this is one of those occasions. 07:37.690 --> 07:45.280 It's just defensive coding to ensure that we cannot use something that possibly could potentially be 07:45.280 --> 07:49.270 null, even though as developers, we know that's not going to be the case. 07:49.270 --> 07:54.220 So next we'll destructure from our shipping address because it's going to have the address and name 07:54.220 --> 07:55.240 separated. 07:55.240 --> 07:58.330 And I'll just say const empty curly brackets. 07:58.330 --> 08:00.940 And then confirmation token dot shipping. 08:00.940 --> 08:05.530 And from here we can get the name and the address from this. 08:06.310 --> 08:09.140 And then we can return a formatted string. 08:09.140 --> 08:16.880 So we're going to open Backticks and we'll use dollar and specify name. 08:17.390 --> 08:19.790 And then add a comma and then dollar. 08:20.030 --> 08:24.860 And we'll use addressline1 another comma. 08:24.890 --> 08:27.440 We'll ignore line two for what we're doing here. 08:27.440 --> 08:30.020 And use address dot city. 08:31.340 --> 08:32.900 And then another dollar. 08:32.900 --> 08:37.640 And then address dot states another comma. 08:37.670 --> 08:50.480 And then uh address dot postal code and comma and a dollar and then address dot country. 08:50.780 --> 08:55.460 And let's move some of this down to clean it up a little bit. 08:55.460 --> 08:57.350 So that gives us our address string. 08:57.350 --> 09:03.380 And then we can just use that inside our shipping address where we've got address goes here. 09:03.380 --> 09:09.470 We can just inside here use our address string and execute that because it's a function. 09:09.470 --> 09:14.200 and then we'll need to do something similar with the payment string as well. 09:14.200 --> 09:14.890 So I'll do the same. 09:14.890 --> 09:19.750 I'll just have a payment string equals and add the arrow function. 09:20.710 --> 09:24.970 And we'll just do our quick defensive check again for the confirmation token. 09:24.970 --> 09:30.130 And for this one we're going to use the payment method preview dot card. 09:30.130 --> 09:31.930 We're going to make sure we have that. 09:32.830 --> 09:36.970 And once again we're just going to return an empty string if we do not have it. 09:37.780 --> 09:45.220 And then we'll destructure the card from the confirmation token dot payment method preview. 09:46.750 --> 09:57.460 And then below this we will return in Backticks and say dollar curly brackets. 09:57.460 --> 09:59.980 And then cards dot brands. 09:59.980 --> 10:02.920 And we'll make this uppercase. 10:04.000 --> 10:08.110 And then add a comma after the curly brackets. 10:08.380 --> 10:10.860 And then we'll have Asterisk. 10:10.890 --> 10:11.370 Asterisk. 10:11.400 --> 10:11.880 Asterisk. 10:11.910 --> 10:12.630 Asterisk. 10:12.630 --> 10:13.560 Space. 10:13.590 --> 10:14.610 Same again. 10:14.610 --> 10:15.180 Space. 10:15.180 --> 10:16.380 Same again. 10:16.620 --> 10:20.640 And then use dollar and then curly brackets. 10:20.640 --> 10:25.140 And we'll use cards last for the last four digits of the card. 10:25.140 --> 10:28.470 Because that's all we have access to in the confirmation token. 10:28.470 --> 10:34.710 We do not have access to the full card number, but that's fairly standard as well. 10:34.710 --> 10:45.180 And then we'll add a comma and say exp and then dollar curly brackets cards dot exp month. 10:46.620 --> 10:54.150 And then after the curly bracket we'll add a former slash and then dollar and then cards dot exp year. 10:54.390 --> 10:57.540 And once again I'll move some of this stuff down. 10:58.170 --> 11:03.300 And then we can utilize our payment string inside here. 11:03.570 --> 11:10.800 So inside curly brackets we'll specify payment string and execute that as well. 11:10.940 --> 11:13.850 And I've got some errors inside here. 11:13.850 --> 11:14.900 Let's see what's going on. 11:14.900 --> 11:17.960 And it's because I've got an unused import. 11:17.960 --> 11:22.010 So let's remove that as well okay. 11:22.010 --> 11:22.850 That should be that. 11:22.850 --> 11:26.330 So let's go back to our browser and see how we are getting on. 11:26.330 --> 11:31.160 So I've got the address and I can next my way through that because that's already completed. 11:31.160 --> 11:37.040 But for this one we'll just stick with using all 40 twos, give it an expiration date in the future. 11:37.070 --> 11:38.720 Click on next. 11:39.470 --> 11:45.500 And what we do see here is we've got the shipping address information and the card information. 11:45.500 --> 11:48.590 And we've got our payment button to actually go ahead and pay it. 11:48.590 --> 11:53.810 So seeing this here confirms effectively that we do have our confirmation token because that's where 11:53.810 --> 11:55.460 we got these details from. 11:55.640 --> 11:59.270 So that's definitely functionality that is working. 11:59.270 --> 12:06.110 And now that we have the confirmation token our next step is to actually confirm the payment with stripe. 12:06.110 --> 12:10.100 Because just creating the confirmation token does not do that. 12:10.610 --> 12:13.640 And we'll take a look at confirming payments next.