WEBVTT 00:00.000 --> 00:02.580 Okay, now that we've got our RTK query signed, two things set up. 00:02.580 --> 00:06.390 We can now think about creating the order from our checkout system. 00:06.390 --> 00:09.960 So let's head over to our checkout step first. 00:09.960 --> 00:13.080 And inside our quite busy component. 00:13.080 --> 00:19.470 Admittedly this one we'll bring in our Create Order mutation. 00:19.470 --> 00:22.740 So I'm going to say const in square brackets creates order. 00:23.760 --> 00:28.980 And I'll set it equal to use create order mutation. 00:28.980 --> 00:34.590 And we need to create an object effectively to send up as a parameter to this method. 00:34.650 --> 00:37.080 So I'll create a helper method inside here. 00:37.080 --> 00:38.370 Find somewhere to put it. 00:38.400 --> 00:44.850 I'll put it below the confirm payment and we will say const. 00:44.910 --> 00:49.170 And we'll just call it create order model equals. 00:49.170 --> 00:50.580 And we'll make it async. 00:50.610 --> 00:54.540 We'll add parentheses and open the arrow and curly brackets. 00:54.540 --> 00:56.850 And we need to get hold of our shipping address. 00:56.850 --> 01:03.030 So I'll say const shipping address equals. 01:03.030 --> 01:08.440 And we can use await and get stripe address that we've already created. 01:08.500 --> 01:11.590 And we also need the payment summary here as well. 01:11.590 --> 01:15.640 So I'll specify const payment summary equals. 01:15.640 --> 01:22.300 And we can get this from our confirmation token and payment method preview dot card. 01:22.300 --> 01:24.700 And we'll check to make sure we have these. 01:24.730 --> 01:34.210 And we'll add an if statement and say if not shipping address or not payment summary, then we will 01:34.210 --> 01:42.040 throw a new error and just say problem creating order. 01:43.060 --> 01:45.790 And below this we can return inside an object. 01:45.790 --> 01:52.270 So we'll open curly brackets and we'll return our shipping address and our payment summary from this. 01:52.360 --> 01:56.260 So these are the two elements that we need to send up to create an order. 01:56.260 --> 01:59.710 So let's go up to our confirm payment method. 01:59.710 --> 02:00.700 And where do we do this. 02:00.730 --> 02:02.590 Where do we want to create the order. 02:02.590 --> 02:04.630 Is it before we've made the payment. 02:04.630 --> 02:11.800 Well coming up soon we need a way to get stripe to communicate with our backend API server and update 02:11.800 --> 02:14.860 our order to say that the payment has been successful. 02:14.980 --> 02:21.400 So just to avoid any timing issues, then we're going to create the order before we've actually confirmed 02:21.400 --> 02:22.240 the payment. 02:22.240 --> 02:26.920 And the order is going to be in a pending status on our backend API. 02:26.950 --> 02:34.120 So inside the try, after we've confirmed we've got the confirmation token, we'll say const order model 02:34.150 --> 02:37.510 equals await and create order model. 02:38.470 --> 02:45.490 And then we'll use const order results equals await and create order. 02:45.490 --> 02:49.960 And we'll pass through the order model that we've just received. 02:49.960 --> 02:53.050 And it looks like we've got an error here. 02:53.050 --> 02:55.750 And it looks like I've got a typo in payment summary. 02:55.750 --> 02:57.130 So let's correct that. 02:57.130 --> 03:00.400 And that should be payment summary with an R. 03:00.400 --> 03:02.230 And I'll change this. 03:02.230 --> 03:06.880 And I'll change this as well and does not resolve the issue. 03:06.880 --> 03:07.420 Of course not. 03:07.420 --> 03:09.100 That was just a simple typo. 03:09.190 --> 03:13.170 And let's take a look and see what we've got an issue with here. 03:13.170 --> 03:17.460 It looks like shipping address line two incompatible between these types. 03:17.460 --> 03:20.790 String null is not assignable to type string undefined. 03:21.060 --> 03:23.550 I feel we've been caught out with this before. 03:23.550 --> 03:30.990 And if we go and take a look at our order type then where we're using our shipping address. 03:30.990 --> 03:37.830 Then let's give the line two the type of string or undefined or null. 03:37.830 --> 03:40.620 And that should resolve the issue in our checkout step. 03:40.740 --> 03:46.200 But it claims I've still got an issue and it's telling us the type card is missing the following properties 03:46.200 --> 03:47.670 from type payment summary. 03:47.700 --> 03:48.750 Expiry month. 03:48.780 --> 03:49.890 Expiry year. 03:49.920 --> 03:55.170 So let's go back to our orders and we need to make a change to our payment summary type. 03:55.170 --> 03:56.970 That's how we're going to get it back from our API. 03:57.000 --> 04:03.690 But when we send it via stripe we need underscore month and exp underscore year. 04:03.690 --> 04:06.660 And that should resolve the issue in our checkout step. 04:06.750 --> 04:08.160 But apparently not. 04:08.160 --> 04:10.020 And we've got another issue. 04:10.050 --> 04:10.860 Payment summary. 04:10.860 --> 04:14.130 Last four is coming as a string. 04:14.150 --> 04:16.400 and it's not assignable to type number. 04:16.400 --> 04:21.560 So once again, another bit of TypeScript jiggery pokery that we need to accommodate here. 04:21.560 --> 04:27.830 And even though last four is a number, we'll give it an alternative type of string as well. 04:27.830 --> 04:29.630 And back to the checkout stepper. 04:29.630 --> 04:32.900 And finally we have a working type. 04:32.900 --> 04:42.440 Now the change here will have an impact on our API side as well, because if we go to take a look at 04:42.470 --> 04:49.340 our payment summary inside here, then we've got the exp month and exp year. 04:49.340 --> 04:54.470 So we're going to need to add the JSON property name configuration that we've used before to accommodate 04:54.470 --> 04:55.880 these stripe types. 04:55.880 --> 05:00.800 And we'll add the JSON property name and inside quotes. 05:00.800 --> 05:04.610 We'll have exp underscore month for the month. 05:04.610 --> 05:13.130 And I'll just copy this and paste it above the exp year and change this to exp underscore year. 05:13.130 --> 05:20.780 And just in case, I'll just restart the API at this point as well as I'd like to ensure success as 05:20.780 --> 05:25.610 much as possible with what we're doing here so that change has been applied. 05:25.610 --> 05:32.390 So back in our checkout step in our order result should come back from our API server as the order. 05:32.390 --> 05:38.510 And we can pass that when we redirect them to the checkout success page, because that's going to have 05:38.510 --> 05:43.850 things like our shipping address we could use and our payment summary as well. 05:43.850 --> 05:49.580 So inside the navigate here, if we do have success then we're going to add a second parameter here 05:49.580 --> 05:52.730 so that we can pass some state to our checkout success. 05:52.730 --> 05:54.050 And we'll use state. 05:54.050 --> 05:59.900 And we'll pass the order result as the thing that we're passing to our checkout success component. 05:59.900 --> 06:03.230 So let's take a look and configure our checkout success. 06:03.230 --> 06:08.840 We won't do the whole component yet because we've got a bit of material UI components to format this 06:08.840 --> 06:09.200 page. 06:09.200 --> 06:14.360 So we'll just make sure that we've got the order effectively coming back from our API initially. 06:14.360 --> 06:21.010 And we know we can get the state that we're passing through as a navigation route from the use location 06:21.040 --> 06:21.430 hook. 06:21.430 --> 06:23.230 So we'll use that to inside here. 06:23.230 --> 06:27.370 And I'll say const states equals use location. 06:27.910 --> 06:32.140 And below this I'll just use a variable for the order. 06:32.140 --> 06:42.280 So I'll say const order equals states as order which we get from app models order. 06:42.280 --> 06:49.900 And inside the typography here, just for the short term I'll just use Json.stringify and pass in the 06:49.900 --> 06:54.340 order and specify null and specify two. 06:54.340 --> 07:00.070 And it's going to look terrible initially, but it will tell us if we're getting the order back correctly 07:00.070 --> 07:01.960 from our API. 07:02.350 --> 07:05.650 And one more thing I just want to check before we move forward. 07:05.650 --> 07:13.240 If we go to our baskets API, we are clearing the items from our basket, but we'd still be leaving 07:13.240 --> 07:15.610 something behind in our store. 07:15.610 --> 07:21.190 So as well as clearing out the items, I'm just going to specify draft basket ID and set this to an 07:21.190 --> 07:22.960 empty string as well. 07:22.990 --> 07:28.040 Okay, that should be everything that we need now to actually create the physical order on our backend 07:28.070 --> 07:29.300 API server. 07:29.330 --> 07:30.950 And let's go test. 07:30.950 --> 07:37.040 So I'll go back to the application and I'll just refresh this page. 07:37.760 --> 07:40.730 And I've got checkout success of null. 07:40.760 --> 07:41.210 Okay. 07:41.240 --> 07:41.780 That's fine. 07:41.780 --> 07:43.670 We haven't got anything to look at there. 07:43.670 --> 07:45.230 So I'll go back to the catalog. 07:45.230 --> 07:48.800 I'll just add an item into my shopping basket. 07:49.040 --> 07:53.330 I'll go to the basket, I'll go to checkout and I'll click on next. 07:53.330 --> 08:01.310 And I'll just add the card number and the expiration dates and the security code. 08:01.310 --> 08:04.880 I'll click next again and I'll pay. 08:04.970 --> 08:10.790 And what should happen is we get our order back from our API. 08:10.820 --> 08:12.440 So we've got the ID of three. 08:12.470 --> 08:15.380 We've got the buy email, we've got all of the shipping address etc.. 08:15.380 --> 08:19.040 So that's a successful request to our API server. 08:19.040 --> 08:22.820 And that proves our order is being created successfully. 08:22.850 --> 08:28.490 What we'll take a look at next is making our checkout success look a bit more presentable than this.