WEBVTT 00:00.020 --> 00:04.670 Okay, now that we've got our confirmation token, we can now look at confirming the payment. 00:04.700 --> 00:12.680 So back to VSCode and we'll create a method inside our checkout stepper to confirm the payment. 00:12.680 --> 00:15.650 So we're going to add another helper method inside here. 00:15.650 --> 00:20.450 And we'll actually confirm the payment or use that method inside this handle next. 00:20.450 --> 00:25.850 So let's add another method inside here and we'll call it const confirm payments. 00:26.000 --> 00:30.170 And we'll make it an async method that takes no parameters. 00:30.170 --> 00:36.080 And inside here we'll add a try catch block. 00:36.140 --> 00:42.620 And we'll also add some local states to track whether or not we're submitting this payment to stripe 00:42.620 --> 00:43.010 as well. 00:43.010 --> 00:46.040 So let's just add a bit more local state inside here. 00:46.160 --> 00:56.000 And I'll just say const submitting and set submitting equals use states. 00:56.000 --> 00:58.730 And I'll just set it to false initially. 00:58.730 --> 01:01.470 And then we'll use this inside our new method. 01:01.470 --> 01:07.860 So before the try block we'll just use the set submitting method and set this to be true inside the 01:07.860 --> 01:08.340 try block. 01:08.370 --> 01:15.210 Then we first of all need to be a bit defensive here because we need to make sure we have both the confirmation 01:15.210 --> 01:17.160 token and the client secret. 01:17.160 --> 01:21.150 Before we do this, we should have both because where we're going to call this is going to be on the 01:21.180 --> 01:23.220 button inside the review component. 01:23.220 --> 01:24.090 So we should have this. 01:24.090 --> 01:28.800 But for Typescript's benefit we'll do our defensive work here. 01:28.800 --> 01:36.480 So I'll say if not confirmation token or not basket. 01:36.780 --> 01:40.290 And we need access to our basket inside here. 01:40.530 --> 01:43.470 And we do not have that yet. 01:43.470 --> 01:45.150 So we'll also bring this in as well. 01:45.150 --> 01:47.490 And we've got our convenient hook to use now anyway. 01:47.490 --> 01:53.760 So I'm going to use the use basket hook inside here and specify baskets. 01:53.880 --> 02:00.770 And then inside our confirm payment we'll check for not basket dot clientsecret. 02:00.770 --> 02:05.330 And if that is the case, we do not have either of those. 02:05.330 --> 02:14.900 Then we're just going to throw a new error and say unable to process payments because we cannot do anything 02:14.900 --> 02:15.950 without those elements. 02:15.950 --> 02:18.470 But we should have them at this point anyway. 02:18.470 --> 02:23.600 And I'll just move this below the if statement so that I don't go off the edge of the screen. 02:23.600 --> 02:28.670 So below the if statement, then let's add a const for a payment result. 02:28.670 --> 02:32.750 And we'll set this equal to Await and stripe. 02:32.750 --> 02:38.060 And we can use the confirm payment method. 02:39.740 --> 02:41.600 And this takes some options. 02:41.600 --> 02:44.360 So I'll open parentheses and then curly brackets. 02:44.390 --> 02:47.210 And we'll need the client secrets. 02:47.210 --> 02:50.120 And we'll set that to the baskets dot client secret. 02:50.120 --> 02:57.680 For this method we'll use redirect and we'll say if required because we'll handle redirection ourselves. 02:58.350 --> 03:03.900 And then the confirmed programs will open curly brackets. 03:03.900 --> 03:10.590 And we need to give this the confirmation token, which will set to the confirmation token.id. 03:10.980 --> 03:16.500 And below this payment result, we'll need to check it for any errors. 03:16.500 --> 03:17.940 So we'll add a check. 03:17.940 --> 03:25.200 We'll add an if statement and say if payment result dot payment intent which we get back from stripe. 03:25.260 --> 03:31.470 We can check its status and check to see if it is succeeded. 03:32.430 --> 03:34.620 And if it is succeeded. 03:36.630 --> 03:44.310 Then we'll redirect them to a checkout success component and we'll need to bring in navigate from React 03:44.310 --> 03:45.600 Router here as well. 03:45.600 --> 03:46.710 So something else to add. 03:46.710 --> 03:54.210 Inside this already busy component we'll use const navigate and set this equal. 03:54.210 --> 03:59.560 To use navigate we get from React Router and back down to our method. 03:59.590 --> 04:08.290 So if we are successful, then payment has been received and we'll use navigate and redirect them to 04:08.320 --> 04:09.700 forward slash checkout. 04:09.730 --> 04:16.780 Forward slash success which we don't have yet, but we will create and we'll add an else if and we'll 04:16.780 --> 04:20.170 check our payment result for an error. 04:21.130 --> 04:26.950 And if we do have a payment result error then we're going to throw a new error. 04:28.990 --> 04:35.080 And we'll pass in the payment result dot error dot message. 04:35.710 --> 04:41.620 And we'll also just add a final else condition just in case we're not successful. 04:41.620 --> 04:44.860 And for whatever reason we don't have a payment result error. 04:44.860 --> 04:49.000 We'll just throw a new error inside here because we don't really know what's gone wrong. 04:49.000 --> 04:50.290 But we shouldn't see this. 04:50.290 --> 04:57.400 And we'll just say something went wrong and then we'll deal with the error which we're throwing inside 04:57.400 --> 04:57.640 here. 04:57.640 --> 05:02.860 So of course, if we throw an error inside our if statements here, then it's going to be caught in 05:02.860 --> 05:04.330 this block of code. 05:05.290 --> 05:11.650 And inside the catch block, we'll just use a toast and say toast dot error, and we'll pass in the 05:11.650 --> 05:13.510 error dot message. 05:14.800 --> 05:16.480 And we can't use it like that. 05:16.510 --> 05:22.810 Of course we need to check because the error at this stage is going to be of type unknown. 05:22.810 --> 05:25.660 We'll need to check just to make sure it's an instance of an error. 05:25.660 --> 05:30.130 So we'll check to see if the error is an instance of error. 05:30.130 --> 05:34.180 And this will give us access to the error message property. 05:34.180 --> 05:36.550 I'll just cut the toast and put it inside here. 05:36.550 --> 05:38.200 And then below the if statement. 05:38.200 --> 05:41.710 We'll just put them back on to the previous step. 05:41.710 --> 05:44.440 Because if they do get an error we've confirming the payment. 05:44.440 --> 05:46.270 That means there's been a problem with the card. 05:46.270 --> 05:58.000 So we'll set the active step and we'll set it to step and add the arrow and say step minus one just 05:58.000 --> 05:58.930 to move them back. 05:58.930 --> 06:00.880 And I've got a bunch of errors in here. 06:00.880 --> 06:02.110 Let's see what these are about. 06:02.110 --> 06:07.090 Oh, it's because I haven't used the confirm payment yet, but we'll create a checkout success page, 06:07.090 --> 06:11.200 just the basic boilerplate we need and add a route for it. 06:11.200 --> 06:18.370 So inside the checkout folder let's create a new file and call it Checkout Success dot TSX. 06:18.370 --> 06:20.770 And we'll add the boilerplate inside here. 06:20.770 --> 06:27.730 So RFC and all we'll do for the time being is we'll use typography. 06:28.090 --> 06:32.200 We'll give it a variant of H5. 06:32.200 --> 06:38.860 And we'll just say checkout or payment successful for the time being. 06:38.890 --> 06:42.940 And we'll also need to create a route for this so that we do actually get redirected. 06:42.940 --> 06:44.110 So we'll go to our routes. 06:44.110 --> 06:50.650 And where I've got the checkout I'll just copy this one down because if we're redirecting them to the 06:50.650 --> 06:53.830 success page then we expect them to be authenticated of course. 06:53.830 --> 07:01.700 So we'll put it inside where are require auth routes are and we'll use the checkout success as the component 07:01.700 --> 07:02.480 will load. 07:02.480 --> 07:05.570 And then we can go back to our checkout stepper. 07:06.020 --> 07:08.810 And we can make use of our new confirmed payment method. 07:08.810 --> 07:19.610 So inside the handle next we'll check to see if the active step is equal to two. 07:21.050 --> 07:25.430 Then if it is we'll just use await and confirm payments. 07:25.430 --> 07:27.380 And I've still got a warning inside here. 07:27.380 --> 07:29.660 Let's see what that is about. 07:29.660 --> 07:32.420 So it's up here and submitting. 07:32.450 --> 07:35.060 Of course I haven't turned off the submitting flag. 07:35.060 --> 07:37.430 So let's go back down to the confirm payment. 07:37.430 --> 07:39.530 And we've got our try block. 07:39.560 --> 07:41.000 We've got our catch block. 07:41.000 --> 07:42.560 And we'll add a finally block. 07:42.560 --> 07:48.740 So regardless if the request is successful or not we turn off the loading spinner. 07:48.740 --> 07:53.270 And I'll say set submitting is false. 07:53.270 --> 08:02.500 And we'll go down to our button inside here, and we'll just add another condition on the handle. 08:02.530 --> 08:08.530 Next button and we'll add another or and we'll check for submitting. 08:11.020 --> 08:12.250 So we're only disabling the. 08:12.280 --> 08:13.270 Buttons. 08:14.680 --> 08:20.470 And in fact because this is not going to be going through or it's not using RTK query for this because 08:20.470 --> 08:25.300 it's just our client communicating directly with stripe, then this would be a good argument to use 08:25.300 --> 08:30.880 a loading button instead, but we'll need to do a bit of work to enable a loading button on this. 08:30.880 --> 08:32.770 So I'm not going to include that functionality in this. 08:32.800 --> 08:38.200 We'll just use disabled for the time being to see if that is submitting or not. 08:38.380 --> 08:39.280 So that's part one. 08:39.280 --> 08:45.100 We've still got a bit of work to do to add this functionality, as once we've made the payment, what 08:45.100 --> 08:46.960 we'd also like to do is clear the basket. 08:46.960 --> 08:52.720 So we'll take a look at finishing up this process in the next lesson, and I will take a look in the 08:52.720 --> 08:55.540 next lesson at adding a loading button for this as well.