Okay, next on our list is to deal with the next step, which is the payment element.
And we can't click on these.
We have to use the buttons to go backwards and forwards between our steps.
And that's the system I prefer.
I'm sure we can add configuration to enable us to click on the different tabs above, but I'm going
to stick with using buttons to go backwards and forwards through the checkout step, as we want to retain
control over this and make sure that this button is only available, for instance, once the address
has been adequately completed.
And we'll come on to all of that soon.
But for the short term, we'll go on to our payment and we'll add the payment element.
Now brace yourselves for this because this is a significant piece of work.
That's a lie.
It's not a significant piece of work at all.
All we need to do is use the payment elements that we get from stripe, react, and boom, there we
go.
Now we've got our payment element.
And what we should also have is Google address autocomplete as well.
So let's test that theory.
And this has changed since I last looked at it.
Google pay wasn't automatically something that was available for selection and it is controllable.
What we do specify inside here I see no problem with enabling Google Pay doesn't affect us, however
the user wishes to pay.
That's fine.
I won't be able to test that easily, but we can test the card with stripe demo cards or test cards.
But now we've got our payment element as well, and we can see that the billing information is the same
as shipping information.
If I uncheck that, then we can select a different country depending on where the payment card is located.
Otherwise we select this and that form field goes away.
What we also get now because we've got the payment elements.
If I start updating the address again, notice now that I've got suggestions powered by Google, and
I can select an address based on what I've started typing in to the line one of the address.
And if I pick a different country, let's go for United States for instance.
And I say ten these, whatever.
Then I start to get USA based addresses inside here.
Now, this does not work for every country.
I think there's 30 countries at the time of recording where autocompletion from Google is enabled and
provided.
So if you're not from a country that is supported, then there's nothing you can do about that.
And the address would have to be typed in manually.
But if the country is supported, then you do get this Google suggestion autocomplete functionality,
which is great.
It's helpful, but if it's not available then there's not a switch you can click to make it enabled.
It's just something that should come along in time from stripe.
Now another thing I want to check before we move on.
And I don't want to check this, but I'm going to do it.
I'm going to open up the Chrome DevTools console and oh my word, that's horrendous.
I'm just going to refresh the page and see what genuinely is left after this.
And oh my word, 598 of these.
Wowzers!
Okay, so there's going to be a few things in here that we can adjust.
Well, not adjust, but kind of filter out.
Now the payment manifest I'll probably turn off Google Pay because I don't know what we can do about
this to remove this warning.
I don't even think I can test Google Pay.
I wasn't expecting to see it on the payment, and it wasn't something I was intending to demonstrate.
So one of the things we'll do or look at before we finish this section is turning off Google payments.
And also we have not registered or verified our domain.
So the following payments are not enabled in the payment element.
Apple pay again, it's not something we're going to demonstrate.
So we will take a look at stripe soon and see which of these we can actually turn off to remove these
warnings.
Now there are some things we can do nothing about these third party cookies.
We can do nothing about this.
And it's been like this for a few years now.
So as I mentioned, there's not a huge amount we can do to remove these different warnings.
The best we can do is to use this filter option to remove the noise from here.
The warnings are still going to be present, but we won't have to look at them.
So we can't do anything about third party cookies.
So I might just highlight the word third party.
And then in the filter I'm going to say minus third party and that one disappears.
I'll add a space.
And I don't think we can do anything about the Apple Pay one.
So I'm going to say minus Apple and the Google Pay ones I'm going to ignore.
These are errors and I don't like to ignore errors.
And I'm going to see if there's a better way to deal with this.
But the icons as well, this one, if we go to our payments component, these icons, then again this
is something from stripe JS that needed them to update.
So I might just use minus UTF TF eight to get rid of those.
And now we're just left with the the ones that are actually errors.
I won't do anything with them yet.
I'm still going to ignore them for the time being, because I'll need to take a look and see how to
remove this.
It should be fairly straightforward, but that's our payment system in place.
What we also get with this is we get card validation automatically.
Now if we add in all 40 twos, we add an expiration date in the future and we add a security code,
then everything looks fine.
But if I put in an invalid card and move on to the next step, then we get our card number is invalid.
If I have an expiration date in the past, I'll get the card's expiration date is in the past, and
if I don't complete the security code, then we get validation for this as well.
All of it automatic, all of it provided by stripe.
So pretty good functionality we get from this.
So we'll continue onwards through our steps.
We'll get everything laid out and then we'll add the functionality afterwards.
So what we'll take a look at next is what we're going to use for our review component.