WEBVTT 00:00.020 --> 00:05.960 Okay, now let's take a look at using the address element from stripe inside our checkout component. 00:05.960 --> 00:11.870 If we go and take a look at the stripe documentation and we'll take a look at the element we're about 00:11.870 --> 00:17.690 to use, I'll just scroll down in here and we're going to be utilizing this the address element. 00:17.690 --> 00:21.500 And we've got some docs specifically for this element. 00:21.500 --> 00:23.270 And this is what it gives us. 00:23.270 --> 00:25.610 It gives us the country selector. 00:25.610 --> 00:31.940 And then if we've got the payment provider hooked up as well, then we get something like this. 00:31.940 --> 00:35.180 We get the suggestions powered by Google. 00:35.180 --> 00:36.590 And then we can select this. 00:36.590 --> 00:40.190 And it's going to automatically populate the rest of the address. 00:40.190 --> 00:44.300 So pretty cool stuff that we get with this. 00:44.300 --> 00:48.230 And let's go ahead and implement this in our component. 00:48.230 --> 00:51.380 So back to our checkout step. 00:51.410 --> 00:56.540 Let's just right click and go to this definition to open up the checkout stepper. 00:56.540 --> 01:07.310 And inside our address step, we can use the address elements we get from Stripe React and we can make 01:07.310 --> 01:08.570 this self-closing. 01:08.570 --> 01:10.790 We do need to give this some options. 01:10.790 --> 01:13.070 So we'll specify options equals. 01:13.070 --> 01:17.240 And then in curly brackets and more curly brackets we can give this a mode. 01:17.240 --> 01:20.180 And we've got two options here billing or shipping. 01:20.180 --> 01:22.040 We're going to use the shipping address. 01:22.040 --> 01:29.180 And when it comes to the payment then depending on the region and the financial regulations in that 01:29.180 --> 01:35.540 particular country, then stripe will automatically format the payment for what is needed to make that 01:35.540 --> 01:36.050 payment. 01:36.050 --> 01:40.940 So it'll either ask for a full address or depending on where you are, it might just ask to confirm 01:40.940 --> 01:43.940 which country the payment card is from. 01:43.940 --> 01:49.070 So we're going to go for shipping because we do want to take the address for shipping purposes. 01:49.070 --> 01:52.760 And we'll let stripe deal with the billing address. 01:53.270 --> 01:56.450 And like I say, it will depend on which region. 01:56.450 --> 01:58.910 You may see a different result to me, for example. 01:58.910 --> 02:00.000 And if you do, that's fine. 02:00.000 --> 02:02.880 That's just what stripe needs for that particular region. 02:03.000 --> 02:06.870 With regards to shipping and billing addresses, if they are different. 02:06.870 --> 02:08.310 So what did that do for us? 02:08.310 --> 02:11.550 Well, let's go take a look and we'll go back to our component. 02:11.550 --> 02:17.580 And we can see that we've got a country selector where we can select from different countries. 02:17.580 --> 02:19.020 But it doesn't look great. 02:19.020 --> 02:25.290 But if I select United Kingdom for example, and this is the name property, and then I start typing 02:25.290 --> 02:32.640 inside here, then notice that it populates the rest of the fields for the different options specific 02:32.640 --> 02:33.870 to United Kingdom. 02:33.870 --> 02:37.950 Now it's not looking great because of the formatting of the address. 02:37.950 --> 02:39.990 That is something that we need to adjust. 02:39.990 --> 02:42.600 So let's go and adjust that now. 02:42.780 --> 02:46.410 And the issue is here is dark mode. 02:46.410 --> 02:52.170 Actually if I go back to light mode then it's a bit clearer about what's going on inside here. 02:52.590 --> 02:56.160 So we need this option is kind of fine. 02:56.160 --> 03:01.680 I'd rather floating labels to keep it consistent with other input fields we're using, but I'd also 03:01.680 --> 03:08.520 like the inputs to be colored accordingly, depending on whether or not we're in light mode or dark 03:08.550 --> 03:08.940 mode. 03:08.940 --> 03:11.130 So we'll make the adjustment to that. 03:11.130 --> 03:15.090 And we need to go to a higher level than the address element. 03:15.090 --> 03:22.950 So we'll go back to our checkout page and our options here we can give this an appearance. 03:22.950 --> 03:31.890 And if I just go add a comma after the clientsecret then we have an appearance option. 03:32.460 --> 03:40.620 I was expecting a bit of automatic completion help here, and I'm kind of surprised I'm not getting 03:40.620 --> 03:41.040 it. 03:41.040 --> 03:45.300 And possibly because we're inside the usememo layer. 03:45.300 --> 03:48.960 So okay, so we'll have to be careful with the typing. 03:48.960 --> 03:51.210 So I'm going to specify appearance. 03:51.360 --> 03:55.200 And inside here we can specify labels. 03:55.320 --> 04:00.460 And again no automatic Completion, which is not that helpful. 04:00.460 --> 04:04.120 And the labels will give a value of floating. 04:04.120 --> 04:06.220 And we can also use a theme. 04:06.820 --> 04:13.330 And if I specify nights, then let's just make sure this is working, because we'll make this dynamic 04:13.330 --> 04:15.400 based on which mode we're currently in. 04:15.400 --> 04:21.250 But I do just want to double check if this is going to work based on the options that we're passing. 04:21.250 --> 04:22.900 So loading checkout. 04:22.930 --> 04:25.750 Okay, I can see that this has now gone to dark mode. 04:25.750 --> 04:27.670 So that does appear to be working. 04:27.670 --> 04:32.260 And of course if we change to dark mode then that appears better than it was. 04:32.260 --> 04:38.980 So back to VSCode and we'll bring in our dark mode value from our store, because we've got the dark 04:38.980 --> 04:41.290 mode value inside our UI store. 04:41.290 --> 04:42.790 So we can use that from anywhere. 04:42.790 --> 04:44.560 And we'll bring in the dark mode. 04:44.560 --> 04:50.800 So I'll specify const and dark mode and set this equal to use app selector. 04:50.800 --> 04:58.780 And we'll pass in state and state dot UI as that's where our dark mode value is stored. 04:58.780 --> 05:05.920 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 05:05.920 --> 05:06.460 night. 05:06.460 --> 05:11.500 If we're not, we're just going to use the default stripe theme, and then we can add the dark mode 05:11.500 --> 05:15.940 as another dependency to our usememo. 05:15.970 --> 05:22.270 And if we go back and take a look, what we should have now is dark mode themed inputs and light mode 05:22.300 --> 05:24.550 themed inputs as well. 05:24.940 --> 05:25.840 Perfect. 05:25.840 --> 05:31.990 And what we'll also do is we'll add a checkbox inside here to give the user the option to save this 05:31.990 --> 05:34.420 address as the default address. 05:34.420 --> 05:44.020 So back in the checkout stepper just below the address element, we'll use a form control label and 05:44.020 --> 05:47.470 make this self-closing and give this some properties. 05:47.470 --> 05:54.400 The property will use Display and Flex and we'll use justify content. 05:54.400 --> 05:59.750 And we want this to be at the end on the right hand side of the component. 05:59.780 --> 06:01.550 We'll use a control. 06:02.060 --> 06:07.640 And inside here we'll set this to be check box from UI material. 06:07.640 --> 06:16.430 And we'll give it a label equal to save as default address. 06:17.000 --> 06:19.580 And we won't deal with this functionality just yet. 06:19.610 --> 06:21.650 We'll wait until we've got a few more elements in place. 06:21.650 --> 06:24.890 But we can see that we've got our checkbox there. 06:25.520 --> 06:26.300 So great. 06:26.300 --> 06:31.490 And if we do make changes because we're just really hiding things inside here. 06:31.490 --> 06:44.180 If I did have an address inside here, and if I did populate these fields and just say London and S1 06:44.180 --> 06:45.980 or whatever, it doesn't matter. 06:45.980 --> 06:47.690 I'm not saving this anyway. 06:47.690 --> 06:52.460 But what we should have, if we click on next and we go to the next step and we go back because we've 06:52.460 --> 06:57.650 not changed the component, then we remember what's going on. 06:57.650 --> 07:01.280 Also, what we get is validation as well. 07:01.310 --> 07:06.860 So stripe is going to recognize if I put in a postcode that isn't a postcode, because whatever I've 07:06.860 --> 07:15.890 put in there is not a postcode, then we're going to get warnings and can I even guess a postcode that's 07:15.890 --> 07:17.060 going to pass the validation. 07:17.090 --> 07:19.550 Okay, so that is a valid postcode. 07:19.670 --> 07:22.910 And stripe is aware of what is and is not. 07:22.910 --> 07:25.700 And that will be the same for most countries as well. 07:25.700 --> 07:32.300 So pretty cool stuff that we have going on here with very little code for us to write to get this form 07:32.570 --> 07:35.780 adequately provided for us. 07:35.780 --> 07:41.990 But we're not going to do anything with this yet, because what I do not get right now is Google autocomplete 07:41.990 --> 07:43.130 on the address. 07:43.130 --> 07:45.710 As I started typing here, nothing happened. 07:45.980 --> 07:52.430 Nothing's coming from Google to auto populate that address, and we only get that functionality when 07:52.430 --> 07:54.380 we also use the payment element. 07:54.380 --> 07:56.390 So we're going to take a look at that next.