So we're getting closer to having this as a functional terminal that will allow us to charge credit
cards.
There's a fair bit of work to do yet, but this time around, I'd like to have a look at client side
validation.
So in other words, when someone clicks charge card, I want to make sure that these three fields are
actually entered correctly.
And of course, this one will be handled by stripe.
So let's get started.
So I go back to my ID and I'm looking again at Terminal Page Dot Go HTML.
And I want to work on this valve function and there's a few things I want to set up first to start with.
Let's get some constants things that I know I'm going to want to have references to.
So I'm going to create a place for messages and there will be messages.
We get back from our back end when we go get a payment intent from Stripe, which will have to do yet,
but we'll get there eventually.
So I'm going to create a constant which I'll call card messages and that will be equal to document that
element ID.
And I'm going to be looking for something called card messages.
And that doesn't exist yet, but it will in a minute.
OK, and then we'll create another constant, which will be a link to the paper.
And the reason is back on our Web page, when someone clicks this, I want that button to go away and
to show a processing message or something that indicates that something is happening because I don't
want them to click that button twice because that my charge card twice.
So we'll create another one called pay button, another constant and that will be equal to document.
Don't get element by ID and I'll be looking for a pay button and we'll have to add that ID to our button
in a moment.
And finally, I'll have another one called Const Processing, and this will be the processing message
that's displayed when someone clicks the button, document that element by ID and I'll look for processing
payment.
All right, let's go create the necessary IDs to start with that.
The pay button already has an ID pay button, which is great.
Now let's make our card messages and I'll put that right at the top of the form and I'll I'll put in
here is a div class equals alert or use bootstrap alert and I'll make it an alert danger to make it
red and I'll center it textile center and initially it's hidden OK and has to have an ID and then ID
called card dash messages and initially I'll make it empty.
Nothing in it at all.
OK, so there's that now we want our processing bit and I'll put that down here just under the button
and I'll make it a div and I'll give it the ID of processing the payment and its class will be text
center to center it.
And again it's initially hidden.
So Dynon the dash and I'll close that deal so I don't forget about it and I'll just make it a standard
bootstrap spinner from bootstrap five.
So that's div class equals Spiner dashboard and you can get this right off the bootstrap documentation
text dash primary and its role will be equal to status like that.
And inside of that I have to have a span with the class of equal to visually dash hidden a standard
bootstrap class from Bootstrap five.
I'll just put loading so it has some content in there.
We'll never see it.
But there it is good for screenwriters and close that div and close that div.
So that's already close.
Good.
So let's make sure we've got them all.
So I have card messages, pay button and processing payment and there's processing payment and the other
two are, they're good.
All right.
So I can also get rid of this comment.
I may as well do that.
So there's some constants set up and they're pointing to the right place.
So now let's go work on our eval function.
And again, as I said, what I'm going to do is use the standard bootstrap client side validation,
which will work just fine for our purposes.
So I'll get a reference to the form let form equal document element ID and I called my form charge dash
for I think it was a dash of error.
Check that.
The charge underscore for OK, so change that to an underscore, I knew I had that wrong, so I have
a reference to it now.
I'll just check its validity.
And this, again, is just a variation on what Bootstrap gives you right from their documentation.
If form dot check validity, which I better spell right.
Valaida it wyo if that's exactly equal to false and I want to do something.
And what I want to do is just say this event dot prevent default any further.
This dot event dot stop prop arrogation form dot class list and, and I'm going to add bootstraps was
validated class to give it the appropriate look and feel and return.
I don't want to go any further.
OK, and after this, but before the closing of the valve function and formed a class list, the ad
was validated and that'll give nice visual feedback saying that everything was entered properly.
And that's all I'll do for it now.
OK, so let's save that and go back to a Web browser and reload the page and see if it works.
This started to stop a misspelled propagation, let's go fix that.
Stop prop p a g a t i o f sloppy Debbie started again reload and charged the car and another stop prop.
I guess it probably just compiled before I got it done.
Try it again.
Charge her.
OK, so it's not compiler error is letting me down stop the.
And start air again.
OK, third time is the charm, let's clear the console, reload this.
Good charge the card, and that's exactly what I wanted, but if I put something in here, say ten for
ten dollars, it turns green.
And if I put it in a cardholder name and my email, Trever here, everything changes the way that it
wants.
So the next step, of course, is to actually process, to go call our back and to get the necessary
payment intent, which I'll be talking about shortly, and to do all of the things necessary to actually
process the card and generate a receipt.
And we'll get started on that in the next lecture.