WEBVTT 00:01.500 --> 00:07.950 So before we move on to completing an order and saving a transaction, there's a little glitch, actually 00:07.950 --> 00:10.650 a fairly major glitch in our code that I'm sure you noticed. 00:10.950 --> 00:15.830 And I just noticed that after I completed the most recent letter and we need to fix it. 00:15.840 --> 00:17.670 So let's have a look and see what it is. 00:18.030 --> 00:22.350 So right now, I have our application running and I'm looking at the virtual terminal page and I'm going 00:22.350 --> 00:30.000 to charge, say, eight dollars and ninety nine cents to Jack Smith, whose e-mail is J at Smith dot 00:30.000 --> 00:30.330 com. 00:30.570 --> 00:33.480 And his credit card number is four to four to as usual. 00:34.500 --> 00:36.000 And it's expiry date is 04. 00:36.000 --> 00:36.660 Twenty nine. 00:36.660 --> 00:39.530 And we'll give him a CVC of four four four. 00:39.690 --> 00:42.990 So this should charge eight dollars and ninety nine cents to his account. 00:43.170 --> 00:44.160 So we charge it. 00:46.420 --> 00:50.350 And you can see the payment amount is eight hundred and ninety nine, which is exactly right, because 00:50.350 --> 00:54.640 we're multiplying it by 10 to convert it to cents so we can avoid floating point errors. 00:54.940 --> 01:02.020 And if I go to my stripe test dashboard and click on payments and refresh this page. 01:06.860 --> 01:09.500 There is our eight dollars, 99 cents, that's perfect. 01:09.530 --> 01:12.620 Now let's go back to our application and this time let's buy a widget. 01:13.040 --> 01:16.550 So I'll buy one widget and you can see the price is ten dollars. 01:16.550 --> 01:25.190 So I'll put in Mary Brown, whose email is Mary at Brown dot com and the same credit card number. 01:28.420 --> 01:35.280 Zero for, say, twenty eight and some Khedive, and I'll charge it, look at the amount this time, 01:37.000 --> 01:42.490 one followed by a whole bunch of zeros and if we go back here to our stripe dashboard and click again 01:42.490 --> 01:49.390 on payments and refresh this page just so we get the most recent transaction, you'll see that poor 01:49.390 --> 01:53.350 Mary was charged a thousand dollars for her ten dollar widget. 01:53.650 --> 01:55.300 And there's a very simple reason for that. 01:55.480 --> 01:58.650 But back to our code and we look at the terminal page. 01:59.140 --> 02:03.220 We actually have our amount, which is fine, and we look at our strike days. 02:03.970 --> 02:07.330 And when we calculate the amount, it's right here on line. 02:07.330 --> 02:12.790 Forty eight in my code, this is strike dust, just partial HTML. 02:13.690 --> 02:19.780 We get the amount and we multiply it by one hundred and that's fine for the virtual terminal page because 02:19.780 --> 02:20.890 that's exactly what we want. 02:21.190 --> 02:25.480 But that's not so great for the buying a widget. 02:26.350 --> 02:30.220 So what I'm going to do is just change this to the value. 02:32.920 --> 02:35.830 Of the field called amount. 02:36.100 --> 02:43.060 OK, now if I reload my application and start it all over again now, I'll pay ten dollars for a widget, 02:43.570 --> 02:48.790 but I'll pay a lot less for the amount that's entered into the terminal page so we can fix that really 02:48.790 --> 02:49.250 easily. 02:49.570 --> 02:54.100 We can go to our terminal page and we can find the amount part. 02:54.280 --> 03:03.610 And I'm going to change this to charge amount and I'll change the ID to charge amount and I'll get rid 03:03.610 --> 03:08.710 of the name attribute altogether because I don't need to post this with my form and that will take care 03:08.710 --> 03:08.950 of it. 03:09.520 --> 03:11.740 And I'll change this to charge about as well. 03:12.460 --> 03:20.710 And then I'll go down to the script per toward defined J.S. and that I'll add a script tag and a closing 03:20.710 --> 03:27.070 script tag and I'll simply add an event listener document jet element by idea and I'm going to look 03:27.070 --> 03:35.560 for charge amount of or spell right or won't work and we'll use a function passing at the event 03:38.530 --> 03:42.520 and I'll close everything up here so I don't forget and I'll do a simple test here. 03:42.670 --> 03:44.410 If we don't target 03:48.070 --> 03:55.450 value is not exactly equal to empty string and somebody entered an amount and I'll do something else. 03:55.660 --> 03:56.620 I'll do something else. 03:57.220 --> 04:04.810 And what I'll do here on line 64 is I will refer to an element I haven't added yet, but wire that in 04:04.810 --> 04:11.470 a minute, document that element by ID and I'm going to look for an amount which I'll add is a hidden 04:11.470 --> 04:22.870 field momentarily that will set its value equal to the target value times when one hundred, not one 04:22.870 --> 04:25.890 thousand or will be back in the problematic area. 04:26.500 --> 04:33.430 Otherwise, I'll set the value of the hidden field amount, which I'll add momentarily. 04:36.200 --> 04:37.140 Equal to zero. 04:37.630 --> 04:44.150 OK, and I will just come up here where my hidden fields are, and I'll add one, which I'll call them 04:44.160 --> 04:47.360 out and I'll get the ID around. 04:48.110 --> 04:51.450 OK, so that will solve the problem. 04:51.470 --> 04:56.690 So this way, any time we enter information on the virtual terminal, we'll take the amount entered 04:56.690 --> 04:57.890 and multiply by 100. 04:58.140 --> 05:02.980 Otherwise we'll just take the amount that's on the Bye Once page, which is right here. 05:02.990 --> 05:06.560 And as you can see, the amount for that can be fined about. 05:09.260 --> 05:14.900 Right here that's taken from the database and the in the database, our widget prices are stored as 05:14.900 --> 05:17.270 integers, so this solves that problem. 05:17.420 --> 05:18.610 OK, time to move on.