So let's get started trying to connect our front end application to our backend application and actually
run a transaction.
So first of all, I'm going to open my terminal and I'm going to start my back and make start back.
And that gets it going.
And then I'll use air to run everything else in front of it.
So it's all running.
So now I'm looking at Terminal Page Go HTML, which is inside the templates folder, inside the web
folder, inside the CMD folder.
And I'm looking at this form and the first thing I'm going to do is come down to the very bottom of
this form before the closing form tag.
And I'm going to add a few hidden fields because there are things we're going to want to say.
So No.
One, I'll put an input type equals hidden and I'll give it the name of payment intent, because that's
what I need to get from the back end.
And I'll also give it the idea of payment, underscore content that will duplicate that.
And the next thing I'm going to want to save is the payment method.
Always nice to know how people paid for things.
Payment method and payment method.
I'll duplicate that one more time and I'll say payment amount.
How much is actually getting paid?
Payment amount.
And finally, nice to know what currency is used, because you might be using more than one currency
payment, currency payment currency, even though in my case I'm only going to be using Canadian dollars
and you can use US dollars or whatever currency you want, but it's nice to keep track of what currency
the transaction actually used.
So I've added those four hidden fields.
Now we're going to take advantage of those for hidden fields down here in the valley function.
So the first thing I need to figure out is how much is actually being charged.
And in our case, if I go to the website.
And go to localhost four thousand virtual terminal.
We can actually specify whatever amount we want here in this textbooks.
Let's go back to our code and let's get the amount so we'll say let amount to charge, which seems like
a meaningful name.
First of all, when I send this to the back end, I need this to be in string format.
If you recall, I'm expecting amount to be in string format on the back end.
And secondly, if someone enters a decimal number, say, ten dollars and fifty cents, that's going
to be typed in as one zero point five zero.
But I need it to be a whole number on the back end so we can do that conversion right here.
First of all, will cast everything to a string, then we'll pass a float in case it's entered as a
decimal number.
And we're going to get the amount that's in that box document elements by ID and the ID is amount.
So I'll get the value of that and multiply the whole thing by one hundred and that should do it.
That should give me the amount to charge.
So let's just try that.
First of all, console dialog amount to charge.
So I'll save this and open my terminal to make sure recompile and it looks like it did.
Let's go back here, open the console, clear the screen, refresh the page just to make sure everything's
current.
I'll clear the screen again and I'll put an amount to, say, ten point fifty and a name and an email.
And that's all I need to test this.
So I'll click charge card and it gives me a thousand and fifty.
Perfect.
That's exactly what I want.
So I reload the page, then I'll come back here.
Now we have the amount to charge in the correct format, so I'll get rid of this console log line.
The next thing I need to do is to call fetch with my back end and I actually need to set up the kind
of information that Fetch is going to be sending to our back end.
So I'll declare a variable, we'll call it payload and that will be equal to in curly brackets the amount
which is amount to charge and the currency.
And I'll just hard code that in my case to code to Canadian dollars, you can use whatever currency
you want.
So that gives me my payload.
Now I want my request options that I'm going to use in fetch.
So consed request options just a constant and that will be equal to in curly brackets the kinds of things
I need to pass this first of all, method equals or method column post.
Secondly, the headers which will be close my curly brackets there.
So I don't forget except I'll set that to application Jason.
And content.
Which again, will be application, Jason and I better spell application, right?
And the body of my request.
Simply string ify my payload, Jason, dot string of high.
Hello.
And the next step is to actually call fish, so we'll use a standard fetch Syntex fetch, we're going
to fetch to HGP close.
And again, we're going to get rid of this API, hardcoded this way and do it using go templates later
on.
But for now, let's see if we can get this working HTP Colon's localhost.
Haught four thousand and one slash payment Dasch content.
And I want to passa also the argument of request options.
Again, request options.
Then I want to get the response and convert that to response text.
I'm doing it as text for a reason and I'll explain why in a moment, then.
The response and we'll use an arrow function and close off down here, inside of that, I'll declare
a variable, which I'll call data, and it's here that I'm going to try something just to make sure
that I'm getting everything in the correct format.
So I'll put it in a try statement and also put in a catch statement, the end of the try and I'll catch
the error.
OK, so I'm getting the response as text because I want to make sure that what we're getting is actual
valid JSON and that Trich statement will let me do that.
So inside of this, let's try, first of all, passing our response into JSON.
So data equals Jason Persse.
Response.
And for right now, I'll simply say console log data down here, I'll just say console blog error.
OK, now if I try to run this at the moment, what's going to happen is I got an error because if you
recall, back here in rootstock Stasch API, this is still a get request.
It's still looking for a get request.
So let's change that to post.
OK, that means I need to stop my back end, so I'll stop error and say make stop, which will stop
everything and then make start back.
And then I'll run air.
OK, so everything is running, and we're actually at the point now where I should be able to go to
that Web page and enter some valid information and a test credit card number and try to run a transaction.
So we'll do that in the next lesson.
And then we'll also see how we actually complete the transaction and make sure that everything works
the way that it should.
And then we'll continue along and finish up our virtual terminal.