WEBVTT 00:00.780 --> 00:06.300 So the last step with respect to plans, at least for now, is to display a receipt page to the end 00:06.300 --> 00:06.650 user. 00:06.660 --> 00:13.500 And since we're trying to do this using the front end just to display the page and nothing else, there's 00:13.500 --> 00:15.170 a little bit more work to make this happen. 00:15.180 --> 00:16.210 But it's not that hard. 00:16.230 --> 00:22.230 So I'm looking at Brons Dash Planned Page Dutko HTML and I'm looking at the function stripe payment 00:22.230 --> 00:23.180 method handler. 00:23.190 --> 00:28.860 And if you scroll down to the fetch part, we have these two comments set hidden VARs and submit the 00:28.860 --> 00:29.240 form. 00:29.250 --> 00:33.900 And of course we're not actually doing either of those things because we're trying to separate our front 00:33.900 --> 00:36.390 end and our back in logic for this particular page. 00:36.840 --> 00:38.040 So we'll delete those comments. 00:38.040 --> 00:42.130 And the first thing I'll do is just say Shoket success, which is always nice. 00:42.390 --> 00:46.350 So the user gets some feedback after we successfully subscribed them to a plan. 00:47.760 --> 00:54.150 Now, how are we going to save all of the information we want on the receipt between this page and the 00:54.150 --> 00:54.830 receipt page? 00:54.870 --> 00:56.250 Well, there's a number of ways of doing it. 00:56.250 --> 00:58.200 But I'm going to take a really simple approach. 00:58.230 --> 01:03.570 I'm going to store some values in the JavaScript session, redirect the user to another page, and then 01:03.570 --> 01:05.360 just read those values from the session. 01:05.880 --> 01:12.210 So we do that like this session storage, which is a built in function available to us from JavaScript. 01:12.480 --> 01:21.390 And I'm going to store first name like that in the storage by calling document element by ID, and we're 01:21.390 --> 01:26.340 looking for first name dot value and that puts it in the session. 01:26.350 --> 01:28.530 And I'll just duplicate this and do the last name. 01:32.450 --> 01:36.510 And we'll store that in a variable called Last Underscore Name. 01:37.730 --> 01:41.360 And next, we want the amount and the amount of money to handle a little bit differently. 01:41.570 --> 01:49.250 I'll say session storage amount is equal to and I'll just take advantage of the Rapidan string tags. 01:50.030 --> 01:58.250 I'll just take advantage of format, currency or function available to this template and widget Dorson 01:58.250 --> 02:05.480 widget price with a capital P and close that with another quote and now will be formatted properly to 02:05.480 --> 02:08.320 display on the receipt the next one. 02:08.360 --> 02:09.770 I'll just do a few of these sessions. 02:09.770 --> 02:19.970 Storage say last four is equal to then I'll just put in the result payment method that occurred last 02:19.980 --> 02:22.070 for now. 02:22.070 --> 02:26.420 We could do all of them, but this is sufficient for our purposes just to show you how it works. 02:26.450 --> 02:33.710 So once those are in the storage, I just say location ATRA and I'll redirect to a non-existent route 02:33.710 --> 02:36.990 which I'll call receipt slash bronze like that. 02:37.790 --> 02:43.000 So what we need to do now is to set up this route on the front end to create a template, a handler, 02:43.040 --> 02:44.150 and that's really straightforward. 02:44.180 --> 02:47.750 So let's go to our roots file and these are the front end routes. 02:48.230 --> 02:57.320 And after this, I'll just say Mux doGet and I called it receipt Seagrams and I will go to oh, let's 02:57.320 --> 03:01.880 call it after the bronze plan receipt, which doesn't exist, but we'll go. 03:02.690 --> 03:04.190 So I'll go over to bronze plan. 03:04.970 --> 03:09.670 And to make things really simple, just copy this function and delete the things we don't need. 03:11.120 --> 03:13.510 So we'll call this bronze plan receipt. 03:14.630 --> 03:18.980 We'll get rid of all this widget stuff because we don't need we could do it that way. 03:18.980 --> 03:21.310 But the way we're doing it now will work for our purposes. 03:22.190 --> 03:24.320 There will be no data in the template. 03:24.320 --> 03:26.240 So I'll delete the template data stuff. 03:26.240 --> 03:35.290 Initially, those is empty curly brackets and we'll change this to say receipt ERP dash plant. 03:35.330 --> 03:40.030 So now we need to create a receipt dash planned on page HTML in our templates folder. 03:40.040 --> 03:40.760 So let's do that. 03:41.480 --> 03:48.920 New file receipt dash plan page Dorton go html receipt dash plan. 03:49.310 --> 03:50.790 Yes, there we are. 03:51.230 --> 03:57.080 And since this will be almost identical to the receipt, I'll just copy receipts, page storage, html, 03:58.160 --> 04:00.170 paste it into the new file I just created. 04:00.920 --> 04:09.500 Give it a JavaScript section, a block in the and I'll put some script tags in there 04:13.790 --> 04:17.030 and we're not going to have payment contents all delete that. 04:17.030 --> 04:18.440 We have very few things in here. 04:18.830 --> 04:26.480 So we didn't bother with the email or the payment method, we just had the amount and the last four. 04:26.480 --> 04:28.430 And I think that's all that we bothered passing. 04:28.430 --> 04:29.870 And you can pass as many as you want. 04:29.900 --> 04:30.340 Of course. 04:31.400 --> 04:37.590 So up here, rather than having it as a template tag for it, as a template tag, we'll just put in 04:37.610 --> 04:44.360 spane, Heidi equals first underscore name and close that span and then put a space and have another 04:44.360 --> 04:45.180 span with an idea. 04:45.350 --> 04:51.800 Heidi equals last underscore name and close that Symantec and the same thing here. 04:54.300 --> 05:01.530 Span, it equals amount and close the span and here. 05:03.900 --> 05:08.520 Span, it equals last underscore for and close the span. 05:10.170 --> 05:13.810 OK, and down here in the JavaScript, it's really straightforward. 05:14.250 --> 05:17.600 First of all, let's make sure there's something in the session, so I'll check for something. 05:17.610 --> 05:26.010 I expect to be there if session storage first underscore name if there's a first name and execute all 05:26.010 --> 05:27.690 the code inside this if statement. 05:27.990 --> 05:36.840 So we'll say document, get element ID and we're looking for first underscore name and it's inner HTML 05:36.960 --> 05:39.510 is equal to session storage. 05:39.750 --> 05:44.550 First underscore and we'll just duplicate that a few times with the last name 05:47.790 --> 05:55.760 and amount in the last one we bothered passing was last for and of course we have to change the IDs. 05:55.770 --> 06:03.960 So this would be the last for this will be amount and this will be left under underscore name. 06:04.830 --> 06:10.120 And once all of that's done, of course we want to clear the session session storage. 06:10.120 --> 06:10.890 Not clear. 06:12.340 --> 06:20.070 OK, so if we stop our application, so make stop and I'll just go make start to compile and run everything. 06:23.090 --> 06:27.230 And let me go back to our Web browser and we go to the products page. 06:27.470 --> 06:29.980 Our products menu subscription and fill this out. 06:29.990 --> 06:39.350 So we'll put in, say, Jerry Jones, Jerry Jones, dot com, Jerry Jones and our standard test credit 06:39.350 --> 06:39.950 card number. 06:42.410 --> 06:49.400 With an expiry in the future and any CVC and this should redirect us to the receipt page. 06:54.800 --> 06:55.200 Good. 06:55.220 --> 06:59.390 And that's it, we're only displaying four pieces of information, but of course you can display as 06:59.390 --> 07:04.040 many as you want and as soon as this page renders it clears the JavaScript session. 07:04.160 --> 07:07.580 So we don't have any extra data laying around and that's all there is to it. 07:08.510 --> 07:10.190 So that's enough for this time around. 07:10.430 --> 07:14.540 And we're certainly not done, but we'll pick it up in the next section of the course.