WEBVTT 00:03.110 --> 00:06.500 So let's get started working on the form for a virtual terminal. 00:06.530 --> 00:10.940 And of course, we're going to do that in the file terminal page go HTML. 00:11.360 --> 00:17.170 And that file exists inside the templates folder, inside the web folder, inside the systemd folder. 00:17.180 --> 00:22.010 And most of our work this time around will be done inside of this defined content block. 00:22.400 --> 00:24.670 We'll take care of the JavaScript in a later lecture. 00:25.400 --> 00:30.920 So I have error running, which will automatically recompile my code as I make changes. 00:30.920 --> 00:37.130 And you would think that if I put an H.R. tag here, for example, and save that and go back to my Web 00:37.130 --> 00:40.970 browser and reload this page, that you'd see the change, but you don't. 00:40.970 --> 00:43.850 And that's because we change the extension on our templates. 00:44.240 --> 00:46.840 So we'll stop error to make this work properly. 00:46.850 --> 00:52.640 Just open up the dot er html file and go down the line 15 and 16. 00:52.640 --> 00:57.140 And the comment on line 15 says watch these file name extensions. 00:57.140 --> 01:02.990 And of course what we need to do is to add to this array on line 16, a comma and then in quotes go 01:03.010 --> 01:05.370 HTML and save that and close it. 01:05.660 --> 01:13.400 And now when I start er starts up properly and if I say at a class here to the to say I take advantage 01:13.400 --> 01:20.200 of bootstraps classes and put class equals oh give it a margin top of three and center it text dash 01:20.330 --> 01:20.930 center. 01:21.800 --> 01:24.410 I save that it should recompile and it did. 01:24.410 --> 01:25.820 You can see that down here in the bottom. 01:25.850 --> 01:30.550 So when I go back and look at this page and reload it there, there are the changes. 01:31.040 --> 01:33.260 So let's go back and start building our form. 01:34.310 --> 01:40.100 So right off the tag I'll put an opening form tag and I'll give it an action, something that doesn't 01:40.100 --> 01:40.460 exist. 01:40.460 --> 01:44.280 You just say slash payment dash succeeded. 01:46.160 --> 01:51.890 Now we'll have to create that route and that will effectively be a receipt page because when we attempt 01:51.890 --> 01:54.650 to charge a credit card, we're never going to leave this page. 01:55.250 --> 02:00.530 It'll be making a call to our back end to get something called a payment intent from Stripe. 02:00.530 --> 02:01.640 And we'll have to write that yet. 02:02.420 --> 02:07.220 And then we don't leave this page unless the card is charged successfully. 02:07.310 --> 02:13.550 So the payment dash succeeded route will probably lead to a receipt page and the method for this form 02:13.550 --> 02:14.270 will be post. 02:14.930 --> 02:16.340 And then I'll just go to the next line. 02:16.880 --> 02:17.770 I'll give it a name. 02:17.780 --> 02:23.750 Name equals charge, underscore formal ID, same thing, charge, underscore form. 02:25.400 --> 02:30.440 And I'll also give it a class and we'll use one of bootstraps classes. 02:30.440 --> 02:38.000 Dash blog and I'll also add needs validation needs dash validation which isn't actually a class, but 02:38.000 --> 02:41.920 we'll use that to take advantage of bootstraps client side form validation. 02:42.650 --> 02:48.440 And finally I'll add another one charge dush for now that doesn't exist. 02:48.440 --> 02:52.330 But a bit later on we'll add some styling to this in an external stylesheet. 02:52.580 --> 02:56.810 OK, now I'll add this auto complete equals off. 02:57.230 --> 03:01.400 And what I'm doing, and this is one of several things I'm going to have to do, is I'm trying to prevent 03:01.400 --> 03:06.710 the browser from suggesting completion when I start typing things in, because I don't want, for example, 03:06.980 --> 03:11.750 to start typing a credit card number, have the browser say, oh, here's a different credit card number 03:11.750 --> 03:13.430 that's already been entered into this form. 03:13.460 --> 03:15.620 That sort of information should be suppressed. 03:15.710 --> 03:20.540 And this is one thing, one one of several things will have to do to take advantage of that or to stop 03:20.540 --> 03:21.260 that from happening. 03:21.740 --> 03:23.420 So completely goes off. 03:23.600 --> 03:29.150 And finally, I'll put no validate, which I have to do if I'm going to use bootstraps validation. 03:29.510 --> 03:35.360 I closed this form tag like that and I'll put my first text and put it. 03:35.450 --> 03:38.270 And again, I'm going to use the standard bootstrap way of doing it. 03:38.570 --> 03:46.100 So I'll make it in the class of m.b three emergen on the bottom of three and I'll close that do so I 03:46.100 --> 03:46.640 don't forget. 03:47.480 --> 03:54.170 And inside of this I'll put a label in and it will be for I'll do the amount for the amount I want to 03:54.170 --> 03:59.450 charge the credit card for is equals amount and the class equals form dash label. 04:02.430 --> 04:11.340 And then I put out and closed the label tag that I will have, my input type will be equal to text. 04:12.910 --> 04:16.500 The class will be able to form dush control Strader to bootstrap 04:20.070 --> 04:21.810 the ID will be equal to the amount. 04:21.930 --> 04:23.160 This is what I'm going to charge. 04:23.280 --> 04:27.750 The name will be equal to the amount it is required. 04:28.010 --> 04:30.420 Can't charge it with the credit without the amount to charge. 04:32.460 --> 04:35.790 And here's another autocomplete directive. 04:35.880 --> 04:38.100 Autocomplete is equal to. 04:38.130 --> 04:42.390 And this is something that's caused headaches for browsers for the last several years, particularly 04:42.390 --> 04:45.690 with Chrome, which seems to be determined to give you autocomplete. 04:46.200 --> 04:51.000 But as I record this, this is the method that seems to work really well across every browser. 04:51.570 --> 04:57.720 Give the autocomplete a unique name, a unique name that is different from the name of this particular 04:57.720 --> 04:58.320 form element. 04:58.710 --> 05:01.440 So I'll call it simply amount Fashanu. 05:02.760 --> 05:07.830 And that's the format I'll use for all of the autocomplete directives where I don't want the browser 05:07.830 --> 05:08.970 to suggest changes. 05:09.000 --> 05:11.420 So let's save that and see if we got it right. 05:11.850 --> 05:18.690 So I'll switch back to my Web browser, reload the page and there is my amount field. 05:18.730 --> 05:21.620 Now, it's not styled the way I want, but I'll take care of that a bit later on. 05:21.630 --> 05:23.030 Right now, let's come back in here. 05:23.850 --> 05:26.070 So I want the amount to charge. 05:26.610 --> 05:29.250 I'm going to copy and paste it here. 05:29.400 --> 05:39.140 I also want the cardholder name and this will be for card holder Dasch name like that. 05:40.740 --> 05:43.380 So it has an idea of and I'll just copy this. 05:45.160 --> 05:52.600 Cardholder Dasch name and the name itself, I'll use a slightly different syntax just so I know which 05:52.600 --> 05:59.440 one's the idea and which one's not, I'll make a card holder underscore name and I'll call this autocomplete 06:00.070 --> 06:04.780 card holder named Dash and it is required. 06:04.990 --> 06:06.460 Looks like everything is right there. 06:06.460 --> 06:07.600 So let's see how that looks. 06:08.620 --> 06:10.990 Reload amount, cardholder name. 06:10.990 --> 06:11.290 Good. 06:13.030 --> 06:14.560 We're also going to need an email. 06:14.680 --> 06:25.090 So let me copy this, paste it down and change this to email type is equal to email in this case and 06:25.090 --> 06:33.550 the card holder email and the card holder underscore email and down here, change this to email. 06:35.260 --> 06:37.540 OK, go have a look at it. 06:38.290 --> 06:38.980 There it is. 06:39.340 --> 06:41.560 Change the label per holder email. 06:42.510 --> 06:43.360 Here we go. 06:44.290 --> 06:47.230 Reload the moment to start up. 06:47.650 --> 06:48.220 There it is. 06:48.220 --> 06:56.260 OK, so now I have those three things, but of course I also need say a place to enter a credit card. 06:56.380 --> 07:00.550 Now, you might think you could just copy this and put it in a directive for a credit card number, 07:00.550 --> 07:01.510 but we're not going to do that. 07:01.720 --> 07:05.860 Instead, we're going to let Stripe take care of that information for us. 07:05.890 --> 07:12.580 OK, so down here in the JavaScript locked, let's include the necessary script directly from Stripe, 07:12.580 --> 07:13.270 which is pretty easy. 07:13.540 --> 07:26.080 Script source equals https, colon slash, slash just dot stripe, dot com slash the three slash and 07:26.080 --> 07:27.070 then just close your script. 07:28.480 --> 07:34.300 OK, so that's what we're going to be using to build the necessary place to enter the information and 07:34.300 --> 07:36.040 we'll take care of that in the next lecture. 07:36.040 --> 07:37.780 But just bear in mind that right here. 07:38.080 --> 07:45.850 But commenting card number will be built straight. 07:49.060 --> 07:54.580 OK, so we're going to take care of that in a little bit, but we can get started with the actual HTML 07:54.700 --> 08:02.350 by putting something like this in div class equals M.V. three, same as before, and we'll close that 08:02.350 --> 08:10.480 div and inside of this we'll put in a label labeled for equals. 08:10.480 --> 08:15.190 And I'm going to call this Kurdish element and that's how I'll be referring to the part that's built 08:15.190 --> 08:26.110 by stripe and controlled by straight and the class equals form the label and I'll give it a name credit 08:26.110 --> 08:26.500 card 08:29.260 --> 08:30.220 slash label 08:33.430 --> 08:37.570 and then I'm going to put a div with an ID equals Kurdish element. 08:37.630 --> 08:39.190 And that's what our label refers to. 08:39.520 --> 08:44.890 OK, and it's class will be formed control. 08:47.620 --> 08:50.590 It's not an input, but it will be by the time we're done. 08:50.680 --> 08:52.330 OK, so let's close that div. 08:54.220 --> 09:00.100 And I'm going to put two more divs in here, OK, div class equals alert dash danger. 09:00.670 --> 09:07.080 Even though Bootstrap Five uses a different syntax, Stripe expects us to use this syntax. 09:07.150 --> 09:14.650 This will be four error messages div classic with alert danger and I'll send it text dash center and 09:14.650 --> 09:15.610 I'll give it an ID. 09:15.680 --> 09:22.690 ID equals car dash errors so we can find it or so Stripe can find it and the roll equals alert. 09:25.270 --> 09:30.820 And I'll close that div and I'll duplicate that line and I'll give the second one alert. 09:30.820 --> 09:34.090 Success is just for success. 09:34.090 --> 09:39.010 Messages from Stripe and it's called car dash success. 09:39.010 --> 09:40.720 That's its ID and its role is alert. 09:41.020 --> 09:41.430 OK. 09:44.840 --> 09:51.230 Now, after that, let's just put it nature in and let's have a button to submit the form. 09:52.100 --> 09:57.950 So I'm actually going to use a link that looks like a button because I want to call some JavaScript 09:57.950 --> 10:01.090 to do some validation before I try to charge the credit card. 10:01.100 --> 10:06.260 So I'll put in a and I'll give it an ID equals, say, Hadash Button. 10:12.850 --> 10:22.000 And I'll give it an equal to JavaScript void zero, so nothing happens. 10:24.130 --> 10:29.320 I don't give a class of BTL from bootstrap and button primary. 10:32.050 --> 10:37.510 And unclick, I'll give it an unclick handler, which is equal to Val Revalidation. 10:37.700 --> 10:40.180 OK, I'll just say charge card 10:43.480 --> 10:43.900 like that. 10:44.680 --> 10:48.670 And of course that means down here in my script section, I better have a valve function, which I'll 10:48.670 --> 10:50.110 just create stub one for now. 10:50.110 --> 10:55.840 The script function, Val, that does nothing yet 10:58.570 --> 11:00.430 and that should give us a good start. 11:00.460 --> 11:03.670 So let's go back, close our script tag script. 11:05.330 --> 11:08.130 Let's go back, make sure that everything renders the way we expect it to. 11:08.440 --> 11:14.020 And again, we'll see a label for the credit card and we see an empty div and that is the div that will 11:14.020 --> 11:17.900 get populated with Stripe's credit card entry functionality. 11:17.950 --> 11:18.940 So this is a good start. 11:19.600 --> 11:26.260 So in the next lecture will begin putting in the logic, the JavaScript logic that actually displays 11:26.260 --> 11:31.030 that field for the credit card number and we'll get started on that in the next lecture.