WEBVTT 00:01.470 --> 00:06.750 So this time around, I want to take the JavaScript on this page that we're looking at right now, terminal 00:06.750 --> 00:13.260 dot page Dudko HTML and I want to extract it to its own template, a partial that I can use wherever 00:13.260 --> 00:13.830 I need to. 00:14.400 --> 00:19.230 So what I'll do, first of all, is go to my templates folder and I'll create a new file and I will 00:19.230 --> 00:25.980 call that stripe dash just dot partial dot Goerge HTML. 00:28.670 --> 00:35.330 And that file will have to define block, of course, define and I'll call it stripe dash just for Stripe 00:35.330 --> 00:38.150 JavaScript and I'll give it its closing tag. 00:40.340 --> 00:46.760 And I'll go back to the terminal page and I'll copy all of this JavaScript, everything inside this 00:46.760 --> 00:50.060 blog, which we may have to modify, but we need to get it copied anyway. 00:51.650 --> 00:53.600 So I copy that or cut it. 00:53.600 --> 00:59.630 Actually, I want it out of here and get rid of the script tag, which I'll have to put in manually 01:00.530 --> 01:01.730 and go back to my stripe. 01:01.730 --> 01:09.030 Just partial paste that in and give it the closing script, which I accidentally did not copy. 01:09.980 --> 01:14.780 OK, so that gives us this JavaScript file, which we can reuse anywhere we want. 01:15.560 --> 01:17.460 And I'm going to indent this a little bit. 01:18.680 --> 01:20.000 It just looks nicer that way. 01:21.800 --> 01:27.440 So now I have this template and if I go back to, say, the terminal page and I wanted to use that, 01:27.650 --> 01:35.540 all I really need to do is say the template stripe dash jazz and you need to put the dot in. 01:35.570 --> 01:36.940 You got to hand data to that. 01:36.950 --> 01:40.580 Otherwise we won't get our straight publishable key or the Eurail for the API. 01:41.900 --> 01:46.430 Now there's one more change we'll have to make, and I'm going to find that by going to my roots file 01:47.180 --> 01:50.620 and finding the virtual terminal handler. 01:50.780 --> 01:53.480 And I'll just click on this to go straight to that. 01:54.140 --> 01:57.550 And we need to change the way that we call render render template. 01:57.560 --> 01:58.670 And I'll show you why in a moment. 01:59.030 --> 02:03.950 So right now we're passing at the response Frater Our pointer to our request, the name of the template 02:03.950 --> 02:05.900 we want to render and some template data. 02:07.280 --> 02:13.880 And after that template data right here, just before the closing parentheses, I need to pass it. 02:13.880 --> 02:18.310 The name of the partial I want to include when I build that, I call that stripe SJS. 02:19.250 --> 02:26.960 So if we go look at the render template function right here, it actually has this Hershel's dot, dot, 02:26.960 --> 02:32.220 dot string, which means I can include as many partials as I need to when I render that template. 02:32.870 --> 02:39.800 So in theory, if I open my terminal to make sure this re compiled and it did and go back to my Web 02:39.800 --> 02:47.350 browser and go to a virtual terminal, it should still work and it does no JavaScript errors. 02:47.360 --> 02:51.100 I may not be perfect yet, but it's at least what we need it to be. 02:51.110 --> 02:52.650 So it's rendering this right now. 02:52.650 --> 02:55.790 And if I open the JavaScript terminal at or any extra errors. 02:56.150 --> 02:57.370 Nope, looks good so far. 02:57.950 --> 03:02.750 And of course that means we can use the same logic for this page by one widget. 03:02.920 --> 03:06.890 OK, and again, we're going to have to change this amount to make it a fixed amount, but we'll take 03:06.890 --> 03:07.760 care of that shortly. 03:07.790 --> 03:12.030 Let's go see if we can pass the partial to that one and modify its template accordingly. 03:12.770 --> 03:20.660 So back to our ID and Heider terminal window and go back to the terminal page and I'll just copy this 03:20.660 --> 03:21.230 last part. 03:21.230 --> 03:28.910 This define just open up my pylons, find its JavaScript log, which is not there. 03:28.940 --> 03:30.200 So I'll put it right here. 03:31.470 --> 03:32.930 Oops, wrong spot. 03:35.650 --> 03:36.320 Right there. 03:36.970 --> 03:42.700 And then finally render for that, so I'll go back to the roots, go back to charge once, find the 03:42.700 --> 03:47.350 charge once handled and hand it that same information. 03:47.350 --> 03:50.330 So we're not having any data right now that's going to change before too long. 03:50.350 --> 03:52.010 But let's hand it straight, Dash. 03:52.250 --> 04:01.270 Just make sure this recompile there it is building and let's go see if that stripe entry field looks 04:01.270 --> 04:02.000 the way that it should. 04:02.380 --> 04:03.580 The credit card entry field. 04:03.670 --> 04:05.990 So let's reload this page and there it is. 04:06.250 --> 04:08.220 So now we have reusable JavaScript. 04:08.860 --> 04:15.250 So the next step, of course, is to actually get rid of that amount field and replace it with some 04:15.250 --> 04:15.930 hidden field. 04:15.940 --> 04:20.350 And of course, the hidden field is not enough because someone could go in with their JavaScript tools, 04:20.680 --> 04:24.070 change the price to whatever they wanted and order it for one cent. 04:24.070 --> 04:25.600 But we'll take care of that before too long. 04:25.930 --> 04:26.740 So let's move on.