WEBVTT 00:01.020 --> 00:05.640 So we have our by one widget functionality working more or less the way that we want, and now it's 00:05.640 --> 00:11.160 time to fix our virtual terminal, which simply doesn't work and it doesn't work because the handlers 00:11.160 --> 00:15.000 have changed and it doesn't work also because I was a little sloppy. 00:15.030 --> 00:18.960 I'm looking at the terminal dot page go html file right now. 00:19.740 --> 00:25.980 And if you recall quite some time ago we added this document get element ID bit at the bottom and I 00:25.980 --> 00:27.020 was really sloppy here. 00:27.060 --> 00:36.300 This actually should be document get element by ID charge amount and then dot add event listener. 00:36.690 --> 00:44.730 You never actually tested that and we want to add the event on change, then we want to run this function 00:45.480 --> 00:46.770 and this is almost right. 00:46.890 --> 00:52.200 So what I'm going to do just to show you why it's almost right, is to change the input type equals 00:52.200 --> 00:55.780 hidden for ID amount to input type equals text. 00:56.460 --> 00:58.940 Now I open my terminal and I'll show you why I'm doing this. 00:58.950 --> 01:03.630 So let's say make a stop in case things are running and make start. 01:07.210 --> 01:12.940 And we'll go back to our idea and reload this page, and you can see there's what used to be hidden, 01:12.940 --> 01:13.480 the idea. 01:13.780 --> 01:20.020 Now, if I put Ken in here or ten just by itself, close to a thousand perfect ten point zero zero should 01:20.020 --> 01:21.070 also go to a thousand. 01:21.070 --> 01:21.610 Perfect. 01:22.120 --> 01:28.510 But if I put in, say, thirty three dollars and forty five cents, look at what it changes the hidden 01:28.510 --> 01:29.220 input into. 01:29.950 --> 01:35.080 And that's going to cause an error on the back end because it's expecting to get something you can convert 01:35.080 --> 01:35.910 into an ant. 01:37.000 --> 01:42.610 So we could fix that really easily by going back to our ID and stopping our application. 01:45.080 --> 01:50.780 And hiding the terminal and making this I'll leave it, I'll leave it as a text for the moment, all 01:50.780 --> 01:58.010 we have to do is pass it and we'll give it the optional second parameter, which means I need to wrap 01:58.010 --> 02:00.740 all this in parentheses. 02:00.740 --> 02:03.680 And the optional second parameter says, what base system? 02:03.710 --> 02:04.250 I'm in base. 02:05.120 --> 02:06.250 So let's try that again. 02:07.730 --> 02:08.450 Make start. 02:11.760 --> 02:18.390 And go back to here, reload this page, and this time I'll put three dollars and forty five cents in 02:18.810 --> 02:21.840 and now it gets converted to an integer, which is what it needs to be. 02:22.560 --> 02:24.970 OK, so let's get started with some changes. 02:25.020 --> 02:32.370 The first thing is, I know that in this virtual terminal page, terminal dot page HTML, if I look 02:32.370 --> 02:36.840 at the function definition for this, I'm no longer going to call payment succeeded. 02:37.350 --> 02:40.430 Instead, I want to call a route that doesn't exist yet, but we'll add it in a minute. 02:40.770 --> 02:45.630 Virtual dash terminal dash payment succeeded because we want to call a different handler. 02:46.650 --> 02:53.040 So let's go over the routes and setup our routes and we'll make the routes point to handlers that don't 02:53.040 --> 02:53.630 exist yet. 02:53.640 --> 02:57.330 So the home page is fine and so is virtual terminal. 02:57.360 --> 02:58.680 That's going to the correct handler. 02:59.070 --> 03:04.050 This one is going to go to a different handler, but I'm still going to need this for widgets, so I'll 03:04.050 --> 03:08.160 copy that and paste it down here so we don't lose it. 03:08.970 --> 03:15.870 And I'll make this post to the URL we just added to our form, which was virtual dush terminal dash 03:15.870 --> 03:22.940 payment succeeded and we'll create a new handler called Virtual Terminal Payment succeeded. 03:23.610 --> 03:27.840 And I'm also going to just because I can give it a different receipt page, because you may want to 03:27.840 --> 03:34.390 have different receipts for widgets and for just paying a credit card using a virtual terminal. 03:34.410 --> 03:44.940 And again, I'll just prepend virtual terminal dash receipt to this and virtual terminal here. 03:45.210 --> 03:46.700 Now, those two handlers don't exist. 03:47.310 --> 03:55.560 And by the way, while I'm on the topic, in reality, if we had one application running our front end 03:55.560 --> 04:01.260 and one application running our back end, if you wanted to be a purist, you wouldn't actually use 04:01.260 --> 04:03.440 post on the front end at all. 04:03.450 --> 04:06.110 You'd handle everything using your backend API. 04:06.630 --> 04:07.580 And don't worry about that. 04:07.590 --> 04:08.700 We'll do that as well. 04:08.730 --> 04:14.100 I just think it's important to do both methods because some of you may not want to create a distributed 04:14.100 --> 04:18.780 application or a service oriented application where you have multiple things running for the front end, 04:18.780 --> 04:21.630 in the back end, and maybe even other ones running at the same time. 04:21.990 --> 04:26.180 You may want to write a monolithic application and this approach would work fine for that. 04:26.880 --> 04:29.730 So don't worry, we'll make some on the back end before we're done. 04:29.790 --> 04:32.160 But right now, let's go and create our payment. 04:32.160 --> 04:34.230 Succeeded Handler for Virtual Terminal. 04:34.440 --> 04:40.890 Now this one payment succeeded and this one virtual terminal terminal payment succeeded. 04:40.920 --> 04:42.070 We'll have a lot of commonality. 04:42.120 --> 04:43.280 This one is going to be shorter. 04:43.290 --> 04:49.650 So what I'll do is open this up, copy this entire function and modify it. 04:51.210 --> 04:58.860 So copy the whole function payment, succeed and paste it right here and scroll back up and rename it 04:58.860 --> 05:01.950 to Virtual Terminal. 05:02.610 --> 05:04.530 Copy the same, fix the comment 05:08.250 --> 05:10.470 for a virtual terminal 05:13.470 --> 05:14.240 transactions. 05:16.470 --> 05:19.180 Now here, we don't even need to pass the form at all. 05:19.860 --> 05:22.850 We're going to get rid of this because we're not actually doing anything with it. 05:22.860 --> 05:27.120 We're not actually handling any any of the posted form data. 05:27.120 --> 05:29.340 So we don't have a widget ID so that can go away. 05:31.380 --> 05:36.470 All of our post or all of our purchasing of the post is going to be handled by get transaction data. 05:36.480 --> 05:37.580 So we still need that call. 05:38.370 --> 05:41.010 We don't need to create a customer because I don't want to store in. 05:41.010 --> 05:43.010 Here is one transaction. 05:43.680 --> 05:46.800 I do need to create the transaction, no question about that. 05:47.070 --> 05:50.190 But I don't actually need the transaction ID because I'm not going to do anything with it. 05:50.190 --> 05:55.530 So I'll use the blank identifier and change this to an equal sign since we already defined error back 05:55.530 --> 05:58.640 on line one sixty four and we'll save the transaction. 05:59.730 --> 06:01.800 I don't want to create an order that goes away. 06:05.270 --> 06:10.990 And the only other change here is I'm going to go to the URL for Virtual Terminal Receipt's virtual 06:11.810 --> 06:16.280 terminal dash receipt, which means I need to have a handler for that. 06:16.280 --> 06:20.090 So I'll copy the receipt handler and paste it right below. 06:25.100 --> 06:27.950 And we're going to call this virtual 06:30.680 --> 06:37.430 terminal receipt and it's going to display a nonexistent template that we'll create in a minute called 06:37.430 --> 06:40.930 virtual terminal dash receipt. 06:42.500 --> 06:51.400 So let's go over to our templates folder, create a new file and I'll call it virtual terminal receipt, 06:51.590 --> 06:54.310 dot page, dot go HTML. 06:55.850 --> 06:59.110 And it will be almost exactly the same as our receipt we're using now. 06:59.120 --> 07:06.440 So I'll just open the receipt page and select all and copy and then open the virtual terminal receipt 07:06.440 --> 07:10.910 page and paste it in there and just to show that it's actually using a different template. 07:10.940 --> 07:18.740 I'll change the title to Virtual Terminal Payment succeeded and copy this and paste it in the title 07:18.740 --> 07:19.280 here as well. 07:19.940 --> 07:26.390 Now you may notice I didn't bother adding a first name and last name field to our virtual terminal page 07:26.390 --> 07:32.270 to the template, even though get transaction data expects to find those, because if it doesn't find 07:32.270 --> 07:35.360 them, it's just going to use blank strings and we're not doing anything with them anyway. 07:35.390 --> 07:38.840 So it's fine the way that it is now. 07:38.840 --> 07:42.470 If we did everything right, if we didn't forget anything, I should be able to stop my application 07:43.220 --> 07:47.390 next stop, start my application, make start. 07:47.630 --> 07:52.080 I may have left that hidden field as a text area, but I'll change that in a moment. 07:54.020 --> 07:54.690 Yeah, I did. 07:54.850 --> 07:59.380 Let's reload this and I'll put in thirty three dollars and forty five cents. 08:00.210 --> 08:04.520 Jones is the cardholder name on the credit card and the email is J. 08:04.790 --> 08:07.820 Jones dot com and our standard for TEUs. 08:11.490 --> 08:18.840 Zero five twenty nine four, five, six, and if we did everything right, we should get redirected 08:18.840 --> 08:22.410 to the correct page and see the correct template displayed. 08:27.060 --> 08:32.010 And there it is, virtual terminal payments exceeded the correct amount, which I put thirty three dollars 08:32.010 --> 08:34.170 in for, so that all seems to work fine. 08:35.100 --> 08:37.000 OK, there's still some work to do. 08:37.500 --> 08:41.300 For example, we haven't protected the virtual terminal page at all. 08:41.310 --> 08:46.850 So if I was to put this in production with live stripe keys, anybody could charge a credit card. 08:46.900 --> 08:47.620 That's not good. 08:47.640 --> 08:50.810 So we're going to have to do some authentication and we'll get to that before too long. 08:51.420 --> 08:57.800 And we also need to do things like allowing people to buy not just one item, but instead to buy a subscription. 08:57.810 --> 09:01.090 And we have this subscription menu item, so we'll need to set that up. 09:01.620 --> 09:04.280 So what we'll do is we'll assume that business has been good. 09:04.290 --> 09:10.110 We've been selling lots of one off widgets, and now we want to allow people to buy a subscription to 09:10.110 --> 09:15.810 widgets where they just pass a certain number of dollars every month and we send them widgets that they 09:15.810 --> 09:16.350 can look at. 09:16.350 --> 09:20.790 Kind of the old people of a certain age will recognize this Columbia house. 09:21.030 --> 09:25.400 They used to send you eight track cassettes or DVDs or CDs. 09:25.410 --> 09:28.050 I was never a member, but apparently they were very popular. 09:28.050 --> 09:32.730 You got you got music in the mail every month and now you'll be able to get widgets in the mail every 09:32.730 --> 09:32.970 month. 09:33.030 --> 09:35.640 And we'll get started on that in the next section.