Okay, now that we've got our RTK query signed, two things set up.
We can now think about creating the order from our checkout system.
So let's head over to our checkout step first.
And inside our quite busy component.
Admittedly this one we'll bring in our Create Order mutation.
So I'm going to say const in square brackets creates order.
And I'll set it equal to use create order mutation.
And we need to create an object effectively to send up as a parameter to this method.
So I'll create a helper method inside here.
Find somewhere to put it.
I'll put it below the confirm payment and we will say const.
And we'll just call it create order model equals.
And we'll make it async.
We'll add parentheses and open the arrow and curly brackets.
And we need to get hold of our shipping address.
So I'll say const shipping address equals.
And we can use await and get stripe address that we've already created.
And we also need the payment summary here as well.
So I'll specify const payment summary equals.
And we can get this from our confirmation token and payment method preview dot card.
And we'll check to make sure we have these.
And we'll add an if statement and say if not shipping address or not payment summary, then we will
throw a new error and just say problem creating order.
And below this we can return inside an object.
So we'll open curly brackets and we'll return our shipping address and our payment summary from this.
So these are the two elements that we need to send up to create an order.
So let's go up to our confirm payment method.
And where do we do this.
Where do we want to create the order.
Is it before we've made the payment.
Well coming up soon we need a way to get stripe to communicate with our backend API server and update
our order to say that the payment has been successful.
So just to avoid any timing issues, then we're going to create the order before we've actually confirmed
the payment.
And the order is going to be in a pending status on our backend API.
So inside the try, after we've confirmed we've got the confirmation token, we'll say const order model
equals await and create order model.
And then we'll use const order results equals await and create order.
And we'll pass through the order model that we've just received.
And it looks like we've got an error here.
And it looks like I've got a typo in payment summary.
So let's correct that.
And that should be payment summary with an R.
And I'll change this.
And I'll change this as well and does not resolve the issue.
Of course not.
That was just a simple typo.
And let's take a look and see what we've got an issue with here.
It looks like shipping address line two incompatible between these types.
String null is not assignable to type string undefined.
I feel we've been caught out with this before.
And if we go and take a look at our order type then where we're using our shipping address.
Then let's give the line two the type of string or undefined or null.
And that should resolve the issue in our checkout step.
But it claims I've still got an issue and it's telling us the type card is missing the following properties
from type payment summary.
Expiry month.
Expiry year.
So let's go back to our orders and we need to make a change to our payment summary type.
That's how we're going to get it back from our API.
But when we send it via stripe we need underscore month and exp underscore year.
And that should resolve the issue in our checkout step.
But apparently not.
And we've got another issue.
Payment summary.
Last four is coming as a string.
and it's not assignable to type number.
So once again, another bit of TypeScript jiggery pokery that we need to accommodate here.
And even though last four is a number, we'll give it an alternative type of string as well.
And back to the checkout stepper.
And finally we have a working type.
Now the change here will have an impact on our API side as well, because if we go to take a look at
our payment summary inside here, then we've got the exp month and exp year.
So we're going to need to add the JSON property name configuration that we've used before to accommodate
these stripe types.
And we'll add the JSON property name and inside quotes.
We'll have exp underscore month for the month.
And I'll just copy this and paste it above the exp year and change this to exp underscore year.
And just in case, I'll just restart the API at this point as well as I'd like to ensure success as
much as possible with what we're doing here so that change has been applied.
So back in our checkout step in our order result should come back from our API server as the order.
And we can pass that when we redirect them to the checkout success page, because that's going to have
things like our shipping address we could use and our payment summary as well.
So inside the navigate here, if we do have success then we're going to add a second parameter here
so that we can pass some state to our checkout success.
And we'll use state.
And we'll pass the order result as the thing that we're passing to our checkout success component.
So let's take a look and configure our checkout success.
We won't do the whole component yet because we've got a bit of material UI components to format this
page.
So we'll just make sure that we've got the order effectively coming back from our API initially.
And we know we can get the state that we're passing through as a navigation route from the use location
hook.
So we'll use that to inside here.
And I'll say const states equals use location.
And below this I'll just use a variable for the order.
So I'll say const order equals states as order which we get from app models order.
And inside the typography here, just for the short term I'll just use Json.stringify and pass in the
order and specify null and specify two.
And it's going to look terrible initially, but it will tell us if we're getting the order back correctly
from our API.
And one more thing I just want to check before we move forward.
If we go to our baskets API, we are clearing the items from our basket, but we'd still be leaving
something behind in our store.
So as well as clearing out the items, I'm just going to specify draft basket ID and set this to an
empty string as well.
Okay, that should be everything that we need now to actually create the physical order on our backend
API server.
And let's go test.
So I'll go back to the application and I'll just refresh this page.
And I've got checkout success of null.
Okay.
That's fine.
We haven't got anything to look at there.
So I'll go back to the catalog.
I'll just add an item into my shopping basket.
I'll go to the basket, I'll go to checkout and I'll click on next.
And I'll just add the card number and the expiration dates and the security code.
I'll click next again and I'll pay.
And what should happen is we get our order back from our API.
So we've got the ID of three.
We've got the buy email, we've got all of the shipping address etc..
So that's a successful request to our API server.
And that proves our order is being created successfully.
What we'll take a look at next is making our checkout success look a bit more presentable than this.