So let's get started working on the form for a virtual terminal.
And of course, we're going to do that in the file terminal page go HTML.
And that file exists inside the templates folder, inside the web folder, inside the systemd folder.
And most of our work this time around will be done inside of this defined content block.
We'll take care of the JavaScript in a later lecture.
So I have error running, which will automatically recompile my code as I make changes.
And you would think that if I put an H.R. tag here, for example, and save that and go back to my Web
browser and reload this page, that you'd see the change, but you don't.
And that's because we change the extension on our templates.
So we'll stop error to make this work properly.
Just open up the dot er html file and go down the line 15 and 16.
And the comment on line 15 says watch these file name extensions.
And of course what we need to do is to add to this array on line 16, a comma and then in quotes go
HTML and save that and close it.
And now when I start er starts up properly and if I say at a class here to the to say I take advantage
of bootstraps classes and put class equals oh give it a margin top of three and center it text dash
center.
I save that it should recompile and it did.
You can see that down here in the bottom.
So when I go back and look at this page and reload it there, there are the changes.
So let's go back and start building our form.
So right off the tag I'll put an opening form tag and I'll give it an action, something that doesn't
exist.
You just say slash payment dash succeeded.
Now we'll have to create that route and that will effectively be a receipt page because when we attempt
to charge a credit card, we're never going to leave this page.
It'll be making a call to our back end to get something called a payment intent from Stripe.
And we'll have to write that yet.
And then we don't leave this page unless the card is charged successfully.
So the payment dash succeeded route will probably lead to a receipt page and the method for this form
will be post.
And then I'll just go to the next line.
I'll give it a name.
Name equals charge, underscore formal ID, same thing, charge, underscore form.
And I'll also give it a class and we'll use one of bootstraps classes.
Dash blog and I'll also add needs validation needs dash validation which isn't actually a class, but
we'll use that to take advantage of bootstraps client side form validation.
And finally I'll add another one charge dush for now that doesn't exist.
But a bit later on we'll add some styling to this in an external stylesheet.
OK, now I'll add this auto complete equals off.
And what I'm doing, and this is one of several things I'm going to have to do, is I'm trying to prevent
the browser from suggesting completion when I start typing things in, because I don't want, for example,
to start typing a credit card number, have the browser say, oh, here's a different credit card number
that's already been entered into this form.
That sort of information should be suppressed.
And this is one thing, one one of several things will have to do to take advantage of that or to stop
that from happening.
So completely goes off.
And finally, I'll put no validate, which I have to do if I'm going to use bootstraps validation.
I closed this form tag like that and I'll put my first text and put it.
And again, I'm going to use the standard bootstrap way of doing it.
So I'll make it in the class of m.b three emergen on the bottom of three and I'll close that do so I
don't forget.
And inside of this I'll put a label in and it will be for I'll do the amount for the amount I want to
charge the credit card for is equals amount and the class equals form dash label.
And then I put out and closed the label tag that I will have, my input type will be equal to text.
The class will be able to form dush control Strader to bootstrap
the ID will be equal to the amount.
This is what I'm going to charge.
The name will be equal to the amount it is required.
Can't charge it with the credit without the amount to charge.
And here's another autocomplete directive.
Autocomplete is equal to.
And this is something that's caused headaches for browsers for the last several years, particularly
with Chrome, which seems to be determined to give you autocomplete.
But as I record this, this is the method that seems to work really well across every browser.
Give the autocomplete a unique name, a unique name that is different from the name of this particular
form element.
So I'll call it simply amount Fashanu.
And that's the format I'll use for all of the autocomplete directives where I don't want the browser
to suggest changes.
So let's save that and see if we got it right.
So I'll switch back to my Web browser, reload the page and there is my amount field.
Now, it's not styled the way I want, but I'll take care of that a bit later on.
Right now, let's come back in here.
So I want the amount to charge.
I'm going to copy and paste it here.
I also want the cardholder name and this will be for card holder Dasch name like that.
So it has an idea of and I'll just copy this.
Cardholder Dasch name and the name itself, I'll use a slightly different syntax just so I know which
one's the idea and which one's not, I'll make a card holder underscore name and I'll call this autocomplete
card holder named Dash and it is required.
Looks like everything is right there.
So let's see how that looks.
Reload amount, cardholder name.
Good.
We're also going to need an email.
So let me copy this, paste it down and change this to email type is equal to email in this case and
the card holder email and the card holder underscore email and down here, change this to email.
OK, go have a look at it.
There it is.
Change the label per holder email.
Here we go.
Reload the moment to start up.
There it is.
OK, so now I have those three things, but of course I also need say a place to enter a credit card.
Now, you might think you could just copy this and put it in a directive for a credit card number,
but we're not going to do that.
Instead, we're going to let Stripe take care of that information for us.
OK, so down here in the JavaScript locked, let's include the necessary script directly from Stripe,
which is pretty easy.
Script source equals https, colon slash, slash just dot stripe, dot com slash the three slash and
then just close your script.
OK, so that's what we're going to be using to build the necessary place to enter the information and
we'll take care of that in the next lecture.
But just bear in mind that right here.
But commenting card number will be built straight.
OK, so we're going to take care of that in a little bit, but we can get started with the actual HTML
by putting something like this in div class equals M.V. three, same as before, and we'll close that
div and inside of this we'll put in a label labeled for equals.
And I'm going to call this Kurdish element and that's how I'll be referring to the part that's built
by stripe and controlled by straight and the class equals form the label and I'll give it a name credit
card
slash label
and then I'm going to put a div with an ID equals Kurdish element.
And that's what our label refers to.
OK, and it's class will be formed control.
It's not an input, but it will be by the time we're done.
OK, so let's close that div.
And I'm going to put two more divs in here, OK, div class equals alert dash danger.
Even though Bootstrap Five uses a different syntax, Stripe expects us to use this syntax.
This will be four error messages div classic with alert danger and I'll send it text dash center and
I'll give it an ID.
ID equals car dash errors so we can find it or so Stripe can find it and the roll equals alert.
And I'll close that div and I'll duplicate that line and I'll give the second one alert.
Success is just for success.
Messages from Stripe and it's called car dash success.
That's its ID and its role is alert.
OK.
Now, after that, let's just put it nature in and let's have a button to submit the form.
So I'm actually going to use a link that looks like a button because I want to call some JavaScript
to do some validation before I try to charge the credit card.
So I'll put in a and I'll give it an ID equals, say, Hadash Button.
And I'll give it an equal to JavaScript void zero, so nothing happens.
I don't give a class of BTL from bootstrap and button primary.
And unclick, I'll give it an unclick handler, which is equal to Val Revalidation.
OK, I'll just say charge card
like that.
And of course that means down here in my script section, I better have a valve function, which I'll
just create stub one for now.
The script function, Val, that does nothing yet
and that should give us a good start.
So let's go back, close our script tag script.
Let's go back, make sure that everything renders the way we expect it to.
And again, we'll see a label for the credit card and we see an empty div and that is the div that will
get populated with Stripe's credit card entry functionality.
So this is a good start.
So in the next lecture will begin putting in the logic, the JavaScript logic that actually displays
that field for the credit card number and we'll get started on that in the next lecture.