So this time around, I want to take the JavaScript on this page that we're looking at right now, terminal
dot page Dudko HTML and I want to extract it to its own template, a partial that I can use wherever
I need to.
So what I'll do, first of all, is go to my templates folder and I'll create a new file and I will
call that stripe dash just dot partial dot Goerge HTML.
And that file will have to define block, of course, define and I'll call it stripe dash just for Stripe
JavaScript and I'll give it its closing tag.
And I'll go back to the terminal page and I'll copy all of this JavaScript, everything inside this
blog, which we may have to modify, but we need to get it copied anyway.
So I copy that or cut it.
Actually, I want it out of here and get rid of the script tag, which I'll have to put in manually
and go back to my stripe.
Just partial paste that in and give it the closing script, which I accidentally did not copy.
OK, so that gives us this JavaScript file, which we can reuse anywhere we want.
And I'm going to indent this a little bit.
It just looks nicer that way.
So now I have this template and if I go back to, say, the terminal page and I wanted to use that,
all I really need to do is say the template stripe dash jazz and you need to put the dot in.
You got to hand data to that.
Otherwise we won't get our straight publishable key or the Eurail for the API.
Now there's one more change we'll have to make, and I'm going to find that by going to my roots file
and finding the virtual terminal handler.
And I'll just click on this to go straight to that.
And we need to change the way that we call render render template.
And I'll show you why in a moment.
So right now we're passing at the response Frater Our pointer to our request, the name of the template
we want to render and some template data.
And after that template data right here, just before the closing parentheses, I need to pass it.
The name of the partial I want to include when I build that, I call that stripe SJS.
So if we go look at the render template function right here, it actually has this Hershel's dot, dot,
dot string, which means I can include as many partials as I need to when I render that template.
So in theory, if I open my terminal to make sure this re compiled and it did and go back to my Web
browser and go to a virtual terminal, it should still work and it does no JavaScript errors.
I may not be perfect yet, but it's at least what we need it to be.
So it's rendering this right now.
And if I open the JavaScript terminal at or any extra errors.
Nope, looks good so far.
And of course that means we can use the same logic for this page by one widget.
OK, and again, we're going to have to change this amount to make it a fixed amount, but we'll take
care of that shortly.
Let's go see if we can pass the partial to that one and modify its template accordingly.
So back to our ID and Heider terminal window and go back to the terminal page and I'll just copy this
last part.
This define just open up my pylons, find its JavaScript log, which is not there.
So I'll put it right here.
Oops, wrong spot.
Right there.
And then finally render for that, so I'll go back to the roots, go back to charge once, find the
charge once handled and hand it that same information.
So we're not having any data right now that's going to change before too long.
But let's hand it straight, Dash.
Just make sure this recompile there it is building and let's go see if that stripe entry field looks
the way that it should.
The credit card entry field.
So let's reload this page and there it is.
So now we have reusable JavaScript.
So the next step, of course, is to actually get rid of that amount field and replace it with some
hidden field.
And of course, the hidden field is not enough because someone could go in with their JavaScript tools,
change the price to whatever they wanted and order it for one cent.
But we'll take care of that before too long.
So let's move on.