Okay, now let's take a look at using the address element from stripe inside our checkout component.
If we go and take a look at the stripe documentation and we'll take a look at the element we're about
to use, I'll just scroll down in here and we're going to be utilizing this the address element.
And we've got some docs specifically for this element.
And this is what it gives us.
It gives us the country selector.
And then if we've got the payment provider hooked up as well, then we get something like this.
We get the suggestions powered by Google.
And then we can select this.
And it's going to automatically populate the rest of the address.
So pretty cool stuff that we get with this.
And let's go ahead and implement this in our component.
So back to our checkout step.
Let's just right click and go to this definition to open up the checkout stepper.
And inside our address step, we can use the address elements we get from Stripe React and we can make
this self-closing.
We do need to give this some options.
So we'll specify options equals.
And then in curly brackets and more curly brackets we can give this a mode.
And we've got two options here billing or shipping.
We're going to use the shipping address.
And when it comes to the payment then depending on the region and the financial regulations in that
particular country, then stripe will automatically format the payment for what is needed to make that
payment.
So it'll either ask for a full address or depending on where you are, it might just ask to confirm
which country the payment card is from.
So we're going to go for shipping because we do want to take the address for shipping purposes.
And we'll let stripe deal with the billing address.
And like I say, it will depend on which region.
You may see a different result to me, for example.
And if you do, that's fine.
That's just what stripe needs for that particular region.
With regards to shipping and billing addresses, if they are different.
So what did that do for us?
Well, let's go take a look and we'll go back to our component.
And we can see that we've got a country selector where we can select from different countries.
But it doesn't look great.
But if I select United Kingdom for example, and this is the name property, and then I start typing
inside here, then notice that it populates the rest of the fields for the different options specific
to United Kingdom.
Now it's not looking great because of the formatting of the address.
That is something that we need to adjust.
So let's go and adjust that now.
And the issue is here is dark mode.
Actually if I go back to light mode then it's a bit clearer about what's going on inside here.
So we need this option is kind of fine.
I'd rather floating labels to keep it consistent with other input fields we're using, but I'd also
like the inputs to be colored accordingly, depending on whether or not we're in light mode or dark
mode.
So we'll make the adjustment to that.
And we need to go to a higher level than the address element.
So we'll go back to our checkout page and our options here we can give this an appearance.
And if I just go add a comma after the clientsecret then we have an appearance option.
I was expecting a bit of automatic completion help here, and I'm kind of surprised I'm not getting
it.
And possibly because we're inside the usememo layer.
So okay, so we'll have to be careful with the typing.
So I'm going to specify appearance.
And inside here we can specify labels.
And again no automatic Completion, which is not that helpful.
And the labels will give a value of floating.
And we can also use a theme.
And if I specify nights, then let's just make sure this is working, because we'll make this dynamic
based on which mode we're currently in.
But I do just want to double check if this is going to work based on the options that we're passing.
So loading checkout.
Okay, I can see that this has now gone to dark mode.
So that does appear to be working.
And of course if we change to dark mode then that appears better than it was.
So back to VSCode and we'll bring in our dark mode value from our store, because we've got the dark
mode value inside our UI store.
So we can use that from anywhere.
And we'll bring in the dark mode.
So I'll specify const and dark mode and set this equal to use app selector.
And we'll pass in state and state dot UI as that's where our dark mode value is stored.
And then for our theme, we can check to see if we are in dark mode and if we are, it's going to be
night.
If we're not, we're just going to use the default stripe theme, and then we can add the dark mode
as another dependency to our usememo.
And if we go back and take a look, what we should have now is dark mode themed inputs and light mode
themed inputs as well.
Perfect.
And what we'll also do is we'll add a checkbox inside here to give the user the option to save this
address as the default address.
So back in the checkout stepper just below the address element, we'll use a form control label and
make this self-closing and give this some properties.
The property will use Display and Flex and we'll use justify content.
And we want this to be at the end on the right hand side of the component.
We'll use a control.
And inside here we'll set this to be check box from UI material.
And we'll give it a label equal to save as default address.
And we won't deal with this functionality just yet.
We'll wait until we've got a few more elements in place.
But we can see that we've got our checkbox there.
So great.
And if we do make changes because we're just really hiding things inside here.
If I did have an address inside here, and if I did populate these fields and just say London and S1
or whatever, it doesn't matter.
I'm not saving this anyway.
But what we should have, if we click on next and we go to the next step and we go back because we've
not changed the component, then we remember what's going on.
Also, what we get is validation as well.
So stripe is going to recognize if I put in a postcode that isn't a postcode, because whatever I've
put in there is not a postcode, then we're going to get warnings and can I even guess a postcode that's
going to pass the validation.
Okay, so that is a valid postcode.
And stripe is aware of what is and is not.
And that will be the same for most countries as well.
So pretty cool stuff that we have going on here with very little code for us to write to get this form
adequately provided for us.
But we're not going to do anything with this yet, because what I do not get right now is Google autocomplete
on the address.
As I started typing here, nothing happened.
Nothing's coming from Google to auto populate that address, and we only get that functionality when
we also use the payment element.
So we're going to take a look at that next.