Okay.
What we're going to take a look at in this lesson is when we click through to the review component from
our payment component or element, then we're going to communicate with stripe and get something called
a confirmation token.
And this token is a consolidation of all of the payment details including the shipping address the payment
card.
And when it comes to confirming the payment with stripe, which we will not have done yet, then we
use that confirmation token so that when we do click on the pay button, we just send the confirmation
token to stripe, and that contains all of the payment information consolidated into that single token.
Also, what it means is that if we were in two different components, for example, and we weren't just
in inside a single component, which we are because of the way that we've laid out our checkout stepper,
then we could, when we go through to the next component, get hold of all of the payment card and address
information from this token as well, if we needed to.
Technically, we don't actually need to do that because we've got access to the payment element and
the address element inside here.
But I do want to demonstrate this concept of a confirmation token because it is useful, it's flexible.
And if it wasn't my desire to have the Google auto completion, then I probably would have split the
different elements into their own components anyway.
So let's go take a look at how we use this confirmation token.
And if we go up to our handle next we're going to add some more into list.
We're going to check to see if the active step is equal to one.
And if it is then we're going to create this token.
So first of all we need to make sure.
And really this is just for our TypeScript compiler to make sure we have these things before we try
to use them.
We're going to make sure elements is not equal to null or stripe is not equal to null as well.
And stripe is something that we haven't brought in yet.
So we also need as well as the elements here, we need to bring in stripe so that we can use this for
what we're doing here.
So I'm going to say const stripe equals use stripe.
And we also have a hook that's provided to give us this.
So we're going to check to make sure we have both of these things.
First of all.
And if we do not we are going to return because we cannot do what we're about to do.
Then we'll use const results equals await.
And we're going to use elements and submit.
And what this does, if we look at the submit method before confirming payments, call element submit
to validate the states of the payment element and collect any data required for wallets.
So this is just something we have to do before we can attempt to create a confirmation token.
And if we do get an error and we'll check the results and say if result dot error, then we will return
a toast dot error and we'll use results.
Dot error dot message.
And again because we're returning here, this stops the execution of this method.
And we don't execute any lines of code below this.
Following this we'll say const stripe result equals await.
And then we can use stripe.
And we can use one of the functions from stripe.
And there are many many different functions inside stripe JavaScript.
But we're going to be creating a confirmation token.
And inside here we pass the options.
But all we need to pass here is the elements inside curly brackets.
As we send this up as an object.
And the elements contains all of our address details and our payment details.
Once again, we're going to check this for an error as well.
And we'll say if stripe result dot error then once again we're going to return a toast at this point
and toast dot error.
And we'll use the stripe results Dot error dot message.
And we'll store our token in local state as well.
So let's create another piece of local state inside here I appreciate this is quite a busy component,
but it's just the nature of what we're doing here.
So we're going to have a confirmation token and let's call it confirmation token and set confirmation
token.
And we'll set it equal to use state.
And we can use a type for this from stripe.
We do have a confirmation token type that we can utilize.
Or it's going to be null.
And we're going to give it an initial value of null.
And then once we have this we'll use the set confirmation token.
And we'll set it to the stripe result dot confirmation token.
So when we do move forward to the review component, then we should have access to this confirmation
token.
And we'll pass that down to our review component.
So I'm going to go down to the review components, and we're going to pass the confirmation token as
a prop.
So we'll say confirmation token equals.
And in here we'll use the confirmation token.
And of course we'll need to add this to our review component.
As a prop I'm getting quite busy at the top.
So I'm just going to close the others and right click and go to definition for the review component.
So inside here we'll add a type of props equals and we'll say confirmation token of type confirmation
token.
And we'll use the or null as well.
So it matches what we're doing inside our checkout stepper.
And then we'll add this to the arguments in the review component.
So we'll open curly brackets and specify colon props.
And we'll use confirmation token inside here.
Now we're using our a basket inside this component.
We can simplify this a little bit.
We can use our new hook that we created.
So instead of using the Usefetch basket query we can just use our use basket hook instead.
Not a big change.
We've saved ourselves 6 or 7 characters there, but it all counts.
Every every little helps when it comes to removing code.
And inside.
Here, let's make use of our confirmation token because we need to provide the shipping address and
also the payment details.
Now we're going to need to format this as a string.
So we'll create a couple of helper methods inside here to do such a thing.
And we'll use const address string equals.
And we'll just make this an arrow function.
And we're going to check to see not a confirmation token.
And if we take a look at the different things we've got access to inside our token, we've got the created
expires at the payment intent payment method preview.
And we've also got inside here shipping.
So we're going to take a look and make.
Sure we have the confirmation token shipping address effectively.
And if we do not have this then we're going to return an empty string.
That shouldn't be the case of course, because we're not going to let the users get to this stage until
they've got the address completed.
But once again, we do a lot of things just to make TypeScript happy when it comes to using things that
could possibly be null.
And this is one of those occasions.
It's just defensive coding to ensure that we cannot use something that possibly could potentially be
null, even though as developers, we know that's not going to be the case.
So next we'll destructure from our shipping address because it's going to have the address and name
separated.
And I'll just say const empty curly brackets.
And then confirmation token dot shipping.
And from here we can get the name and the address from this.
And then we can return a formatted string.
So we're going to open Backticks and we'll use dollar and specify name.
And then add a comma and then dollar.
And we'll use addressline1 another comma.
We'll ignore line two for what we're doing here.
And use address dot city.
And then another dollar.
And then address dot states another comma.
And then uh address dot postal code and comma and a dollar and then address dot country.
And let's move some of this down to clean it up a little bit.
So that gives us our address string.
And then we can just use that inside our shipping address where we've got address goes here.
We can just inside here use our address string and execute that because it's a function.
and then we'll need to do something similar with the payment string as well.
So I'll do the same.
I'll just have a payment string equals and add the arrow function.
And we'll just do our quick defensive check again for the confirmation token.
And for this one we're going to use the payment method preview dot card.
We're going to make sure we have that.
And once again we're just going to return an empty string if we do not have it.
And then we'll destructure the card from the confirmation token dot payment method preview.
And then below this we will return in Backticks and say dollar curly brackets.
And then cards dot brands.
And we'll make this uppercase.
And then add a comma after the curly brackets.
And then we'll have Asterisk.
Asterisk.
Space.
Same again.
Space.
Same again.
And then use dollar and then curly brackets.
And we'll use cards last for the last four digits of the card.
Because that's all we have access to in the confirmation token.
We do not have access to the full card number, but that's fairly standard as well.
And then we'll add a comma and say exp and then dollar curly brackets cards dot exp month.
And then after the curly bracket we'll add a former slash and then dollar and then cards dot exp year.
And once again I'll move some of this stuff down.
And then we can utilize our payment string inside here.
So inside curly brackets we'll specify payment string and execute that as well.
And I've got some errors inside here.
Let's see what's going on.
And it's because I've got an unused import.
So let's remove that as well okay.
That should be that.
So let's go back to our browser and see how we are getting on.
So I've got the address and I can next my way through that because that's already completed.
But for this one we'll just stick with using all 40 twos, give it an expiration date in the future.
Click on next.
And what we do see here is we've got the shipping address information and the card information.
And we've got our payment button to actually go ahead and pay it.
So seeing this here confirms effectively that we do have our confirmation token because that's where
we got these details from.
So that's definitely functionality that is working.
And now that we have the confirmation token our next step is to actually confirm the payment with stripe.
Because just creating the confirmation token does not do that.
And we'll take a look at confirming payments next.