WEBVTT 00:02.890 --> 00:07.330 So we're getting closer to having this as a functional terminal that will allow us to charge credit 00:07.330 --> 00:07.640 cards. 00:07.660 --> 00:12.370 There's a fair bit of work to do yet, but this time around, I'd like to have a look at client side 00:12.370 --> 00:13.170 validation. 00:13.210 --> 00:19.510 So in other words, when someone clicks charge card, I want to make sure that these three fields are 00:19.510 --> 00:20.650 actually entered correctly. 00:20.650 --> 00:23.120 And of course, this one will be handled by stripe. 00:23.560 --> 00:24.340 So let's get started. 00:24.460 --> 00:30.550 So I go back to my ID and I'm looking again at Terminal Page Dot Go HTML. 00:31.000 --> 00:35.800 And I want to work on this valve function and there's a few things I want to set up first to start with. 00:36.040 --> 00:40.260 Let's get some constants things that I know I'm going to want to have references to. 00:40.660 --> 00:44.110 So I'm going to create a place for messages and there will be messages. 00:44.110 --> 00:49.660 We get back from our back end when we go get a payment intent from Stripe, which will have to do yet, 00:49.660 --> 00:50.570 but we'll get there eventually. 00:51.190 --> 00:59.010 So I'm going to create a constant which I'll call card messages and that will be equal to document that 00:59.020 --> 01:00.250 element ID. 01:00.580 --> 01:04.840 And I'm going to be looking for something called card messages. 01:04.840 --> 01:06.580 And that doesn't exist yet, but it will in a minute. 01:07.330 --> 01:12.020 OK, and then we'll create another constant, which will be a link to the paper. 01:12.040 --> 01:19.360 And the reason is back on our Web page, when someone clicks this, I want that button to go away and 01:19.360 --> 01:23.230 to show a processing message or something that indicates that something is happening because I don't 01:23.230 --> 01:25.950 want them to click that button twice because that my charge card twice. 01:26.950 --> 01:33.010 So we'll create another one called pay button, another constant and that will be equal to document. 01:33.400 --> 01:39.280 Don't get element by ID and I'll be looking for a pay button and we'll have to add that ID to our button 01:39.280 --> 01:39.760 in a moment. 01:41.320 --> 01:46.210 And finally, I'll have another one called Const Processing, and this will be the processing message 01:46.210 --> 01:53.920 that's displayed when someone clicks the button, document that element by ID and I'll look for processing 01:56.470 --> 01:56.890 payment. 01:58.060 --> 02:02.200 All right, let's go create the necessary IDs to start with that. 02:02.380 --> 02:05.380 The pay button already has an ID pay button, which is great. 02:07.060 --> 02:12.520 Now let's make our card messages and I'll put that right at the top of the form and I'll I'll put in 02:12.520 --> 02:25.180 here is a div class equals alert or use bootstrap alert and I'll make it an alert danger to make it 02:25.180 --> 02:36.370 red and I'll center it textile center and initially it's hidden OK and has to have an ID and then ID 02:36.460 --> 02:42.370 called card dash messages and initially I'll make it empty. 02:42.400 --> 02:43.210 Nothing in it at all. 02:43.510 --> 02:50.620 OK, so there's that now we want our processing bit and I'll put that down here just under the button 02:50.620 --> 03:00.070 and I'll make it a div and I'll give it the ID of processing the payment and its class will be text 03:00.070 --> 03:02.550 center to center it. 03:04.030 --> 03:05.650 And again it's initially hidden. 03:05.890 --> 03:14.290 So Dynon the dash and I'll close that deal so I don't forget about it and I'll just make it a standard 03:14.290 --> 03:16.180 bootstrap spinner from bootstrap five. 03:16.210 --> 03:25.300 So that's div class equals Spiner dashboard and you can get this right off the bootstrap documentation 03:25.870 --> 03:32.020 text dash primary and its role will be equal to status like that. 03:33.970 --> 03:43.030 And inside of that I have to have a span with the class of equal to visually dash hidden a standard 03:43.030 --> 03:45.010 bootstrap class from Bootstrap five. 03:45.430 --> 03:47.590 I'll just put loading so it has some content in there. 03:47.590 --> 03:48.280 We'll never see it. 03:48.280 --> 03:57.340 But there it is good for screenwriters and close that div and close that div. 03:57.340 --> 03:58.270 So that's already close. 03:58.510 --> 03:58.840 Good. 04:00.640 --> 04:01.990 So let's make sure we've got them all. 04:02.530 --> 04:08.230 So I have card messages, pay button and processing payment and there's processing payment and the other 04:08.230 --> 04:09.310 two are, they're good. 04:09.460 --> 04:09.850 All right. 04:09.850 --> 04:11.500 So I can also get rid of this comment. 04:11.500 --> 04:12.370 I may as well do that. 04:13.810 --> 04:17.800 So there's some constants set up and they're pointing to the right place. 04:18.160 --> 04:19.870 So now let's go work on our eval function. 04:20.920 --> 04:25.090 And again, as I said, what I'm going to do is use the standard bootstrap client side validation, 04:25.090 --> 04:26.730 which will work just fine for our purposes. 04:27.520 --> 04:35.470 So I'll get a reference to the form let form equal document element ID and I called my form charge dash 04:35.800 --> 04:39.640 for I think it was a dash of error. 04:39.640 --> 04:40.150 Check that. 04:43.910 --> 04:51.410 The charge underscore for OK, so change that to an underscore, I knew I had that wrong, so I have 04:51.410 --> 04:52.330 a reference to it now. 04:52.340 --> 04:53.660 I'll just check its validity. 04:53.660 --> 04:57.830 And this, again, is just a variation on what Bootstrap gives you right from their documentation. 04:58.520 --> 05:03.720 If form dot check validity, which I better spell right. 05:03.860 --> 05:11.240 Valaida it wyo if that's exactly equal to false and I want to do something. 05:11.990 --> 05:21.530 And what I want to do is just say this event dot prevent default any further. 05:22.760 --> 05:39.120 This dot event dot stop prop arrogation form dot class list and, and I'm going to add bootstraps was 05:39.530 --> 05:45.380 validated class to give it the appropriate look and feel and return. 05:45.410 --> 05:46.280 I don't want to go any further. 05:46.860 --> 05:57.830 OK, and after this, but before the closing of the valve function and formed a class list, the ad 05:59.420 --> 06:05.720 was validated and that'll give nice visual feedback saying that everything was entered properly. 06:06.440 --> 06:07.700 And that's all I'll do for it now. 06:07.860 --> 06:15.440 OK, so let's save that and go back to a Web browser and reload the page and see if it works. 06:19.400 --> 06:23.450 This started to stop a misspelled propagation, let's go fix that. 06:26.970 --> 06:44.700 Stop prop p a g a t i o f sloppy Debbie started again reload and charged the car and another stop prop. 06:44.700 --> 06:47.220 I guess it probably just compiled before I got it done. 06:48.600 --> 06:49.410 Try it again. 06:51.390 --> 06:52.080 Charge her. 06:54.850 --> 06:59.440 OK, so it's not compiler error is letting me down stop the. 07:00.780 --> 07:01.830 And start air again. 07:05.310 --> 07:10.800 OK, third time is the charm, let's clear the console, reload this. 07:12.590 --> 07:19.190 Good charge the card, and that's exactly what I wanted, but if I put something in here, say ten for 07:19.190 --> 07:20.500 ten dollars, it turns green. 07:20.840 --> 07:28.490 And if I put it in a cardholder name and my email, Trever here, everything changes the way that it 07:28.490 --> 07:28.820 wants. 07:29.480 --> 07:35.900 So the next step, of course, is to actually process, to go call our back and to get the necessary 07:35.990 --> 07:41.330 payment intent, which I'll be talking about shortly, and to do all of the things necessary to actually 07:41.330 --> 07:43.250 process the card and generate a receipt. 07:43.400 --> 07:45.440 And we'll get started on that in the next lecture.