So we have our by one widget functionality working more or less the way that we want, and now it's
time to fix our virtual terminal, which simply doesn't work and it doesn't work because the handlers
have changed and it doesn't work also because I was a little sloppy.
I'm looking at the terminal dot page go html file right now.
And if you recall quite some time ago we added this document get element ID bit at the bottom and I
was really sloppy here.
This actually should be document get element by ID charge amount and then dot add event listener.
You never actually tested that and we want to add the event on change, then we want to run this function
and this is almost right.
So what I'm going to do just to show you why it's almost right, is to change the input type equals
hidden for ID amount to input type equals text.
Now I open my terminal and I'll show you why I'm doing this.
So let's say make a stop in case things are running and make start.
And we'll go back to our idea and reload this page, and you can see there's what used to be hidden,
the idea.
Now, if I put Ken in here or ten just by itself, close to a thousand perfect ten point zero zero should
also go to a thousand.
Perfect.
But if I put in, say, thirty three dollars and forty five cents, look at what it changes the hidden
input into.
And that's going to cause an error on the back end because it's expecting to get something you can convert
into an ant.
So we could fix that really easily by going back to our ID and stopping our application.
And hiding the terminal and making this I'll leave it, I'll leave it as a text for the moment, all
we have to do is pass it and we'll give it the optional second parameter, which means I need to wrap
all this in parentheses.
And the optional second parameter says, what base system?
I'm in base.
So let's try that again.
Make start.
And go back to here, reload this page, and this time I'll put three dollars and forty five cents in
and now it gets converted to an integer, which is what it needs to be.
OK, so let's get started with some changes.
The first thing is, I know that in this virtual terminal page, terminal dot page HTML, if I look
at the function definition for this, I'm no longer going to call payment succeeded.
Instead, I want to call a route that doesn't exist yet, but we'll add it in a minute.
Virtual dash terminal dash payment succeeded because we want to call a different handler.
So let's go over the routes and setup our routes and we'll make the routes point to handlers that don't
exist yet.
So the home page is fine and so is virtual terminal.
That's going to the correct handler.
This one is going to go to a different handler, but I'm still going to need this for widgets, so I'll
copy that and paste it down here so we don't lose it.
And I'll make this post to the URL we just added to our form, which was virtual dush terminal dash
payment succeeded and we'll create a new handler called Virtual Terminal Payment succeeded.
And I'm also going to just because I can give it a different receipt page, because you may want to
have different receipts for widgets and for just paying a credit card using a virtual terminal.
And again, I'll just prepend virtual terminal dash receipt to this and virtual terminal here.
Now, those two handlers don't exist.
And by the way, while I'm on the topic, in reality, if we had one application running our front end
and one application running our back end, if you wanted to be a purist, you wouldn't actually use
post on the front end at all.
You'd handle everything using your backend API.
And don't worry about that.
We'll do that as well.
I just think it's important to do both methods because some of you may not want to create a distributed
application or a service oriented application where you have multiple things running for the front end,
in the back end, and maybe even other ones running at the same time.
You may want to write a monolithic application and this approach would work fine for that.
So don't worry, we'll make some on the back end before we're done.
But right now, let's go and create our payment.
Succeeded Handler for Virtual Terminal.
Now this one payment succeeded and this one virtual terminal terminal payment succeeded.
We'll have a lot of commonality.
This one is going to be shorter.
So what I'll do is open this up, copy this entire function and modify it.
So copy the whole function payment, succeed and paste it right here and scroll back up and rename it
to Virtual Terminal.
Copy the same, fix the comment
for a virtual terminal
transactions.
Now here, we don't even need to pass the form at all.
We're going to get rid of this because we're not actually doing anything with it.
We're not actually handling any any of the posted form data.
So we don't have a widget ID so that can go away.
All of our post or all of our purchasing of the post is going to be handled by get transaction data.
So we still need that call.
We don't need to create a customer because I don't want to store in.
Here is one transaction.
I do need to create the transaction, no question about that.
But I don't actually need the transaction ID because I'm not going to do anything with it.
So I'll use the blank identifier and change this to an equal sign since we already defined error back
on line one sixty four and we'll save the transaction.
I don't want to create an order that goes away.
And the only other change here is I'm going to go to the URL for Virtual Terminal Receipt's virtual
terminal dash receipt, which means I need to have a handler for that.
So I'll copy the receipt handler and paste it right below.
And we're going to call this virtual
terminal receipt and it's going to display a nonexistent template that we'll create in a minute called
virtual terminal dash receipt.
So let's go over to our templates folder, create a new file and I'll call it virtual terminal receipt,
dot page, dot go HTML.
And it will be almost exactly the same as our receipt we're using now.
So I'll just open the receipt page and select all and copy and then open the virtual terminal receipt
page and paste it in there and just to show that it's actually using a different template.
I'll change the title to Virtual Terminal Payment succeeded and copy this and paste it in the title
here as well.
Now you may notice I didn't bother adding a first name and last name field to our virtual terminal page
to the template, even though get transaction data expects to find those, because if it doesn't find
them, it's just going to use blank strings and we're not doing anything with them anyway.
So it's fine the way that it is now.
If we did everything right, if we didn't forget anything, I should be able to stop my application
next stop, start my application, make start.
I may have left that hidden field as a text area, but I'll change that in a moment.
Yeah, I did.
Let's reload this and I'll put in thirty three dollars and forty five cents.
Jones is the cardholder name on the credit card and the email is J.
Jones dot com and our standard for TEUs.
Zero five twenty nine four, five, six, and if we did everything right, we should get redirected
to the correct page and see the correct template displayed.
And there it is, virtual terminal payments exceeded the correct amount, which I put thirty three dollars
in for, so that all seems to work fine.
OK, there's still some work to do.
For example, we haven't protected the virtual terminal page at all.
So if I was to put this in production with live stripe keys, anybody could charge a credit card.
That's not good.
So we're going to have to do some authentication and we'll get to that before too long.
And we also need to do things like allowing people to buy not just one item, but instead to buy a subscription.
And we have this subscription menu item, so we'll need to set that up.
So what we'll do is we'll assume that business has been good.
We've been selling lots of one off widgets, and now we want to allow people to buy a subscription to
widgets where they just pass a certain number of dollars every month and we send them widgets that they
can look at.
Kind of the old people of a certain age will recognize this Columbia house.
They used to send you eight track cassettes or DVDs or CDs.
I was never a member, but apparently they were very popular.
You got you got music in the mail every month and now you'll be able to get widgets in the mail every
month.
And we'll get started on that in the next section.