So the last step with respect to plans, at least for now, is to display a receipt page to the end
user.
And since we're trying to do this using the front end just to display the page and nothing else, there's
a little bit more work to make this happen.
But it's not that hard.
So I'm looking at Brons Dash Planned Page Dutko HTML and I'm looking at the function stripe payment
method handler.
And if you scroll down to the fetch part, we have these two comments set hidden VARs and submit the
form.
And of course we're not actually doing either of those things because we're trying to separate our front
end and our back in logic for this particular page.
So we'll delete those comments.
And the first thing I'll do is just say Shoket success, which is always nice.
So the user gets some feedback after we successfully subscribed them to a plan.
Now, how are we going to save all of the information we want on the receipt between this page and the
receipt page?
Well, there's a number of ways of doing it.
But I'm going to take a really simple approach.
I'm going to store some values in the JavaScript session, redirect the user to another page, and then
just read those values from the session.
So we do that like this session storage, which is a built in function available to us from JavaScript.
And I'm going to store first name like that in the storage by calling document element by ID, and we're
looking for first name dot value and that puts it in the session.
And I'll just duplicate this and do the last name.
And we'll store that in a variable called Last Underscore Name.
And next, we want the amount and the amount of money to handle a little bit differently.
I'll say session storage amount is equal to and I'll just take advantage of the Rapidan string tags.
I'll just take advantage of format, currency or function available to this template and widget Dorson
widget price with a capital P and close that with another quote and now will be formatted properly to
display on the receipt the next one.
I'll just do a few of these sessions.
Storage say last four is equal to then I'll just put in the result payment method that occurred last
for now.
We could do all of them, but this is sufficient for our purposes just to show you how it works.
So once those are in the storage, I just say location ATRA and I'll redirect to a non-existent route
which I'll call receipt slash bronze like that.
So what we need to do now is to set up this route on the front end to create a template, a handler,
and that's really straightforward.
So let's go to our roots file and these are the front end routes.
And after this, I'll just say Mux doGet and I called it receipt Seagrams and I will go to oh, let's
call it after the bronze plan receipt, which doesn't exist, but we'll go.
So I'll go over to bronze plan.
And to make things really simple, just copy this function and delete the things we don't need.
So we'll call this bronze plan receipt.
We'll get rid of all this widget stuff because we don't need we could do it that way.
But the way we're doing it now will work for our purposes.
There will be no data in the template.
So I'll delete the template data stuff.
Initially, those is empty curly brackets and we'll change this to say receipt ERP dash plant.
So now we need to create a receipt dash planned on page HTML in our templates folder.
So let's do that.
New file receipt dash plan page Dorton go html receipt dash plan.
Yes, there we are.
And since this will be almost identical to the receipt, I'll just copy receipts, page storage, html,
paste it into the new file I just created.
Give it a JavaScript section, a block in the and I'll put some script tags in there
and we're not going to have payment contents all delete that.
We have very few things in here.
So we didn't bother with the email or the payment method, we just had the amount and the last four.
And I think that's all that we bothered passing.
And you can pass as many as you want.
Of course.
So up here, rather than having it as a template tag for it, as a template tag, we'll just put in
spane, Heidi equals first underscore name and close that span and then put a space and have another
span with an idea.
Heidi equals last underscore name and close that Symantec and the same thing here.
Span, it equals amount and close the span and here.
Span, it equals last underscore for and close the span.
OK, and down here in the JavaScript, it's really straightforward.
First of all, let's make sure there's something in the session, so I'll check for something.
I expect to be there if session storage first underscore name if there's a first name and execute all
the code inside this if statement.
So we'll say document, get element ID and we're looking for first underscore name and it's inner HTML
is equal to session storage.
First underscore and we'll just duplicate that a few times with the last name
and amount in the last one we bothered passing was last for and of course we have to change the IDs.
So this would be the last for this will be amount and this will be left under underscore name.
And once all of that's done, of course we want to clear the session session storage.
Not clear.
OK, so if we stop our application, so make stop and I'll just go make start to compile and run everything.
And let me go back to our Web browser and we go to the products page.
Our products menu subscription and fill this out.
So we'll put in, say, Jerry Jones, Jerry Jones, dot com, Jerry Jones and our standard test credit
card number.
With an expiry in the future and any CVC and this should redirect us to the receipt page.
Good.
And that's it, we're only displaying four pieces of information, but of course you can display as
many as you want and as soon as this page renders it clears the JavaScript session.
So we don't have any extra data laying around and that's all there is to it.
So that's enough for this time around.
And we're certainly not done, but we'll pick it up in the next section of the course.