WEBVTT 00:00.000 --> 00:04.260 Okay, next on our list is to deal with the next step, which is the payment element. 00:04.260 --> 00:05.730 And we can't click on these. 00:05.760 --> 00:09.750 We have to use the buttons to go backwards and forwards between our steps. 00:09.750 --> 00:12.450 And that's the system I prefer. 00:12.480 --> 00:18.840 I'm sure we can add configuration to enable us to click on the different tabs above, but I'm going 00:18.870 --> 00:25.050 to stick with using buttons to go backwards and forwards through the checkout step, as we want to retain 00:25.050 --> 00:31.890 control over this and make sure that this button is only available, for instance, once the address 00:31.890 --> 00:33.990 has been adequately completed. 00:33.990 --> 00:35.670 And we'll come on to all of that soon. 00:35.670 --> 00:41.040 But for the short term, we'll go on to our payment and we'll add the payment element. 00:42.000 --> 00:47.100 Now brace yourselves for this because this is a significant piece of work. 00:48.060 --> 00:48.990 That's a lie. 00:48.990 --> 00:50.910 It's not a significant piece of work at all. 00:50.910 --> 00:57.090 All we need to do is use the payment elements that we get from stripe, react, and boom, there we 00:57.090 --> 00:57.420 go. 00:57.420 --> 00:58.860 Now we've got our payment element. 00:58.860 --> 01:03.910 And what we should also have is Google address autocomplete as well. 01:03.910 --> 01:06.220 So let's test that theory. 01:06.670 --> 01:08.800 And this has changed since I last looked at it. 01:08.800 --> 01:14.560 Google pay wasn't automatically something that was available for selection and it is controllable. 01:14.560 --> 01:20.110 What we do specify inside here I see no problem with enabling Google Pay doesn't affect us, however 01:20.110 --> 01:21.310 the user wishes to pay. 01:21.310 --> 01:22.300 That's fine. 01:22.330 --> 01:28.270 I won't be able to test that easily, but we can test the card with stripe demo cards or test cards. 01:29.410 --> 01:33.460 But now we've got our payment element as well, and we can see that the billing information is the same 01:33.460 --> 01:34.330 as shipping information. 01:34.330 --> 01:41.800 If I uncheck that, then we can select a different country depending on where the payment card is located. 01:41.830 --> 01:45.820 Otherwise we select this and that form field goes away. 01:45.820 --> 01:49.570 What we also get now because we've got the payment elements. 01:49.600 --> 01:56.470 If I start updating the address again, notice now that I've got suggestions powered by Google, and 01:56.470 --> 02:02.920 I can select an address based on what I've started typing in to the line one of the address. 02:03.100 --> 02:06.840 And if I pick a different country, let's go for United States for instance. 02:06.840 --> 02:09.360 And I say ten these, whatever. 02:09.390 --> 02:12.990 Then I start to get USA based addresses inside here. 02:13.020 --> 02:15.540 Now, this does not work for every country. 02:15.540 --> 02:22.710 I think there's 30 countries at the time of recording where autocompletion from Google is enabled and 02:22.710 --> 02:23.280 provided. 02:23.280 --> 02:28.200 So if you're not from a country that is supported, then there's nothing you can do about that. 02:28.200 --> 02:30.840 And the address would have to be typed in manually. 02:30.840 --> 02:37.350 But if the country is supported, then you do get this Google suggestion autocomplete functionality, 02:37.350 --> 02:38.130 which is great. 02:38.130 --> 02:45.030 It's helpful, but if it's not available then there's not a switch you can click to make it enabled. 02:45.030 --> 02:48.720 It's just something that should come along in time from stripe. 02:48.750 --> 02:51.870 Now another thing I want to check before we move on. 02:52.050 --> 02:55.260 And I don't want to check this, but I'm going to do it. 02:55.260 --> 03:01.770 I'm going to open up the Chrome DevTools console and oh my word, that's horrendous. 03:01.770 --> 03:08.010 I'm just going to refresh the page and see what genuinely is left after this. 03:08.200 --> 03:15.160 And oh my word, 598 of these. 03:16.720 --> 03:17.710 Wowzers! 03:17.740 --> 03:21.460 Okay, so there's going to be a few things in here that we can adjust. 03:21.490 --> 03:24.370 Well, not adjust, but kind of filter out. 03:24.820 --> 03:31.930 Now the payment manifest I'll probably turn off Google Pay because I don't know what we can do about 03:31.930 --> 03:33.820 this to remove this warning. 03:33.820 --> 03:35.710 I don't even think I can test Google Pay. 03:35.740 --> 03:40.420 I wasn't expecting to see it on the payment, and it wasn't something I was intending to demonstrate. 03:40.420 --> 03:46.600 So one of the things we'll do or look at before we finish this section is turning off Google payments. 03:46.600 --> 03:51.250 And also we have not registered or verified our domain. 03:51.250 --> 03:54.070 So the following payments are not enabled in the payment element. 03:54.100 --> 03:57.400 Apple pay again, it's not something we're going to demonstrate. 03:57.400 --> 04:02.440 So we will take a look at stripe soon and see which of these we can actually turn off to remove these 04:02.440 --> 04:03.280 warnings. 04:03.310 --> 04:07.420 Now there are some things we can do nothing about these third party cookies. 04:07.420 --> 04:09.820 We can do nothing about this. 04:09.820 --> 04:12.840 And it's been like this for a few years now. 04:12.870 --> 04:18.150 So as I mentioned, there's not a huge amount we can do to remove these different warnings. 04:18.150 --> 04:24.300 The best we can do is to use this filter option to remove the noise from here. 04:24.330 --> 04:28.290 The warnings are still going to be present, but we won't have to look at them. 04:28.290 --> 04:31.050 So we can't do anything about third party cookies. 04:31.050 --> 04:33.780 So I might just highlight the word third party. 04:33.780 --> 04:38.940 And then in the filter I'm going to say minus third party and that one disappears. 04:38.940 --> 04:40.230 I'll add a space. 04:40.230 --> 04:43.050 And I don't think we can do anything about the Apple Pay one. 04:43.050 --> 04:49.110 So I'm going to say minus Apple and the Google Pay ones I'm going to ignore. 04:49.140 --> 04:52.560 These are errors and I don't like to ignore errors. 04:52.560 --> 04:55.500 And I'm going to see if there's a better way to deal with this. 04:55.500 --> 05:04.920 But the icons as well, this one, if we go to our payments component, these icons, then again this 05:04.920 --> 05:08.340 is something from stripe JS that needed them to update. 05:08.340 --> 05:15.130 So I might just use minus UTF TF eight to get rid of those. 05:15.130 --> 05:19.030 And now we're just left with the the ones that are actually errors. 05:19.060 --> 05:20.470 I won't do anything with them yet. 05:20.470 --> 05:25.000 I'm still going to ignore them for the time being, because I'll need to take a look and see how to 05:25.030 --> 05:25.660 remove this. 05:25.690 --> 05:31.030 It should be fairly straightforward, but that's our payment system in place. 05:31.030 --> 05:35.530 What we also get with this is we get card validation automatically. 05:35.530 --> 05:42.940 Now if we add in all 40 twos, we add an expiration date in the future and we add a security code, 05:42.940 --> 05:44.410 then everything looks fine. 05:44.410 --> 05:50.950 But if I put in an invalid card and move on to the next step, then we get our card number is invalid. 05:50.950 --> 05:57.520 If I have an expiration date in the past, I'll get the card's expiration date is in the past, and 05:57.520 --> 06:01.570 if I don't complete the security code, then we get validation for this as well. 06:01.570 --> 06:04.630 All of it automatic, all of it provided by stripe. 06:04.630 --> 06:07.150 So pretty good functionality we get from this. 06:07.150 --> 06:09.130 So we'll continue onwards through our steps. 06:09.130 --> 06:12.580 We'll get everything laid out and then we'll add the functionality afterwards. 06:12.580 --> 06:17.470 So what we'll take a look at next is what we're going to use for our review component.