WEBVTT 00:02.020 --> 00:07.530 So we have a virtual terminal form displaying properly with the exception of this credit card area, 00:07.540 --> 00:13.930 and of course, that is what's going to be populated with Stripe's credit card entry functionality. 00:13.960 --> 00:15.270 So let's get started doing that. 00:15.310 --> 00:24.940 So back in my ID, let's go down to the bottom of the terminal page orrego HTML and inside this second 00:24.940 --> 00:28.520 script tag, the first one, of course, is loading the striped bass. 00:28.600 --> 00:29.650 So we have access to it. 00:29.920 --> 00:30.970 I'm going to create a variable. 00:31.000 --> 00:32.320 I shall create a couple of variables. 00:32.770 --> 00:39.430 So I'll create one called card check card and I'll create one called Stripe Stripe. 00:40.330 --> 00:47.100 OK, now the first thing I need to do is to initialize that stripe variable with my publishable key. 00:47.140 --> 00:54.970 I do it like this stripe equals stripe string stripe which is available because we imported that stripe 00:54.970 --> 00:58.960 J.S. on line fifty two in my code and I just put my publishable. 00:59.860 --> 01:01.100 Now a word of caution. 01:01.240 --> 01:03.400 This is my publishable key. 01:03.430 --> 01:04.630 It is not yours. 01:04.630 --> 01:10.240 If you try to use this one, it simply won't work because before I make this course alive, I'm going 01:10.240 --> 01:14.140 to reset my private and publishable test keys. 01:14.950 --> 01:16.890 So this is just to get it working on my end. 01:16.900 --> 01:18.640 You'll have to use your own key there. 01:18.640 --> 01:19.170 Of course. 01:19.720 --> 01:26.230 Just go to your stripe dashboard, copy your publishable key, your test key control of key and put 01:26.230 --> 01:28.950 it where I put it in this line on line 58. 01:29.170 --> 01:33.160 OK, so that sets up my stripe variable, which is now available to me. 01:34.090 --> 01:40.090 So now I'm going to scroll down a bit after my valve function and I'm going to create an anonymous function 01:40.090 --> 01:45.030 which will make use that stripe variable we just created and also the current variable we created. 01:45.580 --> 01:52.930 So I created an anonymous function function and the opening and closing curly brackets. 01:53.140 --> 01:58.330 And inside of that I'm going to create a stripe and its elements. 01:59.110 --> 02:05.770 OK, so I'll create a constant contact elements and that's going to be equal to using the straight variable 02:05.770 --> 02:08.170 we just initialized a moment ago elements. 02:10.510 --> 02:13.870 And I'm also going to create a style that I'll use with that element. 02:13.870 --> 02:17.620 And that's because I don't want to use Stripe's default styling. 02:17.620 --> 02:19.300 I actually want it to match boot straps. 02:19.300 --> 02:20.240 And that's pretty straightforward. 02:20.260 --> 02:24.730 So we'll create another concept which I'll call style, which are better spelled right. 02:29.220 --> 02:35.610 And that's going to be equal to in curly brackets, some success, but it's not pure success, it's 02:35.610 --> 02:37.550 Stripes version of success. 02:37.890 --> 02:43.290 So we're going to override the style and we're going to give it to directive's. 02:43.920 --> 02:45.810 The first one is the fault size. 02:45.810 --> 02:47.850 But you can't use font size. 02:48.270 --> 02:51.720 You have to use font size like that, is it? 02:52.440 --> 02:55.740 I'm going to set that to 16 pixels, which I verified before. 02:55.740 --> 02:58.350 This lecture is pretty much what I want. 02:58.500 --> 03:04.140 And we also want to change the line height of it, line height and again use stripes syntax which will 03:04.140 --> 03:05.530 set to twenty four pixels. 03:06.420 --> 03:09.920 OK, so that's defined. 03:10.920 --> 03:12.690 So now I'll create the card entry. 03:14.520 --> 03:19.610 In other words, we're going to change that div in our form to be an actual formula. 03:20.160 --> 03:21.180 So KO'd. 03:21.510 --> 03:24.650 And that's a variable defined up on line fifty five. 03:24.660 --> 03:33.090 I'm now I'm initializing its value to elements dot create and I'm going to create a card and it has 03:33.090 --> 03:33.900 a few parameters. 03:36.810 --> 03:42.660 And the first one is going to be style, which will set to that variable style we just created a moment 03:42.660 --> 03:46.850 ago, and I still spelled it wrong, so I better fix Stevi out. 03:48.870 --> 03:52.690 And I'm also going to take advantage of another attribute available to me. 03:52.860 --> 03:55.110 Let's hide the postal code. 03:55.350 --> 03:57.860 I want postal code to be available in production. 03:57.870 --> 04:01.710 But for right now, I'm going to set the false just to show you that you can override things in the 04:01.710 --> 04:02.750 elements were created. 04:03.900 --> 04:05.370 So that creates the card variable. 04:06.720 --> 04:14.820 Now let's mount it card dot mount and I'm going to mount it in the div with the idea of card dash element, 04:17.220 --> 04:18.780 which you have to spell right or won't work. 04:20.310 --> 04:25.430 Now I also want to check for errors, so let's check for input errors. 04:25.440 --> 04:30.750 And this is one of the really nice things about using Stripe is we can do that as the card is being 04:30.750 --> 04:31.340 typed in. 04:32.070 --> 04:39.900 So we'll add an event listener card add event listener and I want to add it on change. 04:39.900 --> 04:44.190 Whenever that element changes, I'll fire this function passing at an event. 04:47.670 --> 04:52.040 And what I want to have happen is let's first of all get a place to display errors. 04:52.050 --> 04:58.500 What we already have that we scroll up here, we created this input right here on line thirty eight 04:58.500 --> 05:02.850 in my code and that is that has the ID of Kurdish errors. 05:02.880 --> 05:03.570 So we'll use that. 05:05.850 --> 05:11.660 So we'll get a reference to it for display error, which is just the name I'm choosing. 05:11.670 --> 05:21.960 That's going to be equal to document get element for ID and it's ID, which is card errors. 05:25.850 --> 05:27.630 So now I have a reference to it, so I'll just fire it. 05:27.630 --> 05:35.910 If, if there is an error event, the error that exists that is populated, do something otherwise, 05:36.180 --> 05:38.330 else do something else. 05:38.550 --> 05:47.220 And what I want to do, if there's an error is first of all I will say display error, dot class list, 05:48.510 --> 05:49.440 class list. 05:50.370 --> 05:56.040 I'm going to remove something that might be there, which is not Daschner, which comes straight out 05:56.040 --> 05:57.780 of bootstrap and that hides things. 05:58.260 --> 06:01.040 And I also want to populate that div with the error message. 06:01.050 --> 06:04.530 So display or dot text content. 06:08.160 --> 06:15.570 It's going to be equal to the error message, event, error message, and that's what we're getting 06:15.570 --> 06:16.340 from strike. 06:17.190 --> 06:21.300 Otherwise there if there is no error, we want to remove one, if there is one. 06:21.300 --> 06:22.190 So we'll just hide that. 06:22.350 --> 06:35.940 So display our classless ad does not and will set its error or the message content to be an empty strength 06:35.940 --> 06:41.310 display or text content equals an empty string. 06:42.250 --> 06:49.770 OK, now we need to come down here to the very end of this anonymous function and of course, put those 06:49.770 --> 06:51.350 opening and closing parentheses. 06:52.140 --> 06:54.620 And I think we have everything right here. 06:54.960 --> 06:56.270 So let's find out. 06:56.910 --> 06:58.110 Make sure that air is running. 06:58.320 --> 06:59.010 It is. 06:59.160 --> 07:01.650 And I'm getting an air behind the address already in use. 07:01.650 --> 07:02.730 That happens once in a while. 07:02.730 --> 07:07.640 So I'll stop air start there and there it goes. 07:08.190 --> 07:10.590 So let's go back to our Web browser and see if we got anything wrong. 07:11.670 --> 07:16.710 Reload and there's something wrong with our console. 07:18.750 --> 07:22.500 Let's clear this, reload it and see if we have any typos. 07:23.100 --> 07:29.340 And we do so missing a closing bracket after property, this virtual terminal. 07:29.340 --> 07:29.940 Eighty seven. 07:29.950 --> 07:31.170 Let's see if it'll show it to me. 07:33.180 --> 07:36.630 One eighty seven right there. 07:36.640 --> 07:38.430 So something wrong in my style definition. 07:38.440 --> 07:39.450 So let's go fix that. 07:45.780 --> 07:47.310 So we shouldn't be semicolons. 07:47.640 --> 07:48.450 Let's get rid of that. 07:53.520 --> 08:01.800 And here, that looks better, see if that fixed back over here, clear the console, reload this. 08:04.240 --> 08:05.810 And then we have occurred no good. 08:06.340 --> 08:10.810 Now, you might notice here you get some error messages in your JavaScript console and that's to be 08:10.810 --> 08:17.860 expected in development because we're actually using a non encrypted connection, localhost four thousand 08:18.070 --> 08:22.950 to connect to Stripe's back end, which expects things to come in HD. 08:23.230 --> 08:27.520 So when it goes live, of course, we're going to be serving this over https. 08:27.970 --> 08:29.130 But don't worry about those errors. 08:29.140 --> 08:30.760 That's to be expected at this point. 08:30.770 --> 08:33.730 So I'm going to close this and let's see how it works. 08:33.940 --> 08:35.100 So I'll type in a card number. 08:35.320 --> 08:43.690 Let's try one, two, three, four, five, six seven eight nine zero one, two, and then three more 08:43.690 --> 08:44.070 digits. 08:44.080 --> 08:46.300 And it says your card number is invalid. 08:46.310 --> 08:46.800 Perfect. 08:47.110 --> 08:51.970 Now, I could type a legitimate credit card in there, but I don't want to because that's a really bad 08:51.970 --> 08:54.520 idea to be giving my credit card to the entire planet. 08:54.790 --> 09:00.220 So instead, we'll use one to Stripe's test credit card numbers for two four two four to four to four 09:00.220 --> 09:04.380 to four to four to four to just a bunch of fours and twos. 09:05.860 --> 09:10.600 And now you can see that my focus has already changed to the month. 09:10.600 --> 09:14.050 So let me put zero one and let me put something in the past ninety nine. 09:14.140 --> 09:18.630 And it says, your cards, your cards expiration, your expiration year is invalid. 09:18.640 --> 09:19.750 It's also added to the future. 09:19.930 --> 09:21.280 Twenty nine that's better. 09:21.790 --> 09:26.680 And any three digit security code and then some valid zip code. 09:26.800 --> 09:32.590 Now in development, I really don't want to be entering zip codes all the time and that's a very smart 09:32.590 --> 09:33.160 zip code. 09:33.160 --> 09:39.580 It will change the postal code for Canada or countries that use postal codes or zip code for the US. 09:39.760 --> 09:44.290 So it's very intelligent, but it's also irritating because I kind of remember American postal codes. 09:45.010 --> 09:50.260 So I'm going to go back to my code and I'm going to change this postal code. 09:50.260 --> 09:51.640 False to be true. 09:52.120 --> 09:54.040 OK, let's do that again. 09:54.730 --> 09:55.150 True. 09:56.350 --> 09:58.180 Say that it recompile. 09:58.360 --> 10:05.500 Let's go back to our Web browser, reload this page and now I'll put four to four to four to four to 10:05.830 --> 10:06.640 all the way. 10:06.640 --> 10:09.550 And now when I get in here, I don't have to enter the postal code. 10:09.550 --> 10:14.770 Now, in production, you always want to have that postal code check, of course, but in development, 10:14.770 --> 10:16.390 it's fine to leave it turned off. 10:16.720 --> 10:25.180 OK, so we have our credit card displaying properly and it's almost time to start trying to run a test 10:25.180 --> 10:28.720 transaction to fire off an actual amount and so forth. 10:29.170 --> 10:30.670 We have a little bit of work to do yet. 10:30.680 --> 10:35.530 We want to put some client side JavaScript validation on the form to make sure we have an amount, that 10:35.530 --> 10:38.050 we have a cardholder's name and a valid email address. 10:38.410 --> 10:41.830 But we'll take care of that and get started on the next steps in the next lecture.