So this time around, we want to modify this virtual terminal page to instead of calling a route on
the front end.
We want to use fetch and call our route on the back end and save our transaction information that way.
So before we do that, there's a couple of little typos that we have to take care of, or at least I
have to take care of.
So I go back to my ID and I'm looking at handler Stasch API Dutko.
And as you can see, and you probably saw me type this, I have some typos here in the JSON tags.
So this one should look like that and this one should have a closing quotation mark and that takes care
of that.
OK, so let's get started by going to a terminal page and go HTML.
And the first thing I'll do is get rid of this action in the form because we're not actually going to
submit this form at all.
So I'll just leave it empty and we're never going to call it.
So that's fine.
And the next thing I need to do is to go to the handler and go file.
And we're not going to include right down here.
We're not going to include striped bass.
So I'll delete that, OK, and go over to handlers.
Don't go, which are right here and will find the part that renders that virtual terminal.
Which is.
Right there, and we'll we want passed straight to it, the partial we're not using that at all.
We're going to simply recreate JavaScript right in that template itself.
So now we'll go back to the terminal page.
And what we want to put in here is code that's very similar to Stripe Geospatial.
So I'll just open that file and I will copy everything in between the defined tags and we'll just modify.
So I'll copy that.
Close this file and I'll put it right here and we'll leave it in its own script tag just so it's easier
to see what's going on.
So right at the top of this, we still want our import of the stripe JavaScript.
We still want our KO'd stripe in all of this stuff that all stays the same.
So let's go on down to.
We want to get the payment intent, and that's fine, and here we actually don't want to submit the
form on this line one sixty seven.
Instead we'll call a function which will write in a minute.
And I'm going to call save a transaction and I'm going to pass it.
The result that we have here so we can comment this submit.
We don't need any of these things setting these hidden fields so we can simply delete those.
And we'll just write a safe transaction function
and it will take one argument, the result that we're passing out.
OK, so what we want to do in here is to actually call that route we defined on our route stash API.
So the first thing we need to do is to find a payload.
What are we going to send that?
And this is going to go in the form of Jason.
So I'll define a variable called payload and it will be a JavaScript object and I'll put in the information
that I want.
The first thing we need is the amount.
And that needs to go in the form of an integer, so a call pass into the JavaScript person function
and I'll simply call document dot get element my ID amount, which is still there, its value and we're
using base.
OK, the next thing is the currency.
And that's going to be in the form of result, not payment intent, not currency.
And we give ourselves some room here.
We also want first name and last name, but we don't have those and we're not actually doing anything
with them, but I'll put them in any way as empty string.
First name to the empty string, last name will be an empty string.
We do want to email and that's document Dutkiewicz Element by Edem.
And we're going for card holder Dushka email.
That's the idea in the form it's value.
We also want a payment intent in the payment method and payment intent that comes from result, not
payment.
Intent and payment method comes from result, payment intent, not payment, underscore method.
OK, so that's our.
So we have that now.
We need to get our token because we're going to use that and add an authorization header when we make
her call to fetch so we can get our token rate from local storage, let token equal local storage and
get item and it's called token.
So now we have our token.
Now, since we're calling fetch, let's make a request to options object concert request options.
That will be equal to a JavaScript object, and our method is post and our headers, and here's where
we set the necessary headers for authorisation and so forth.
So the first header will be set.
And that, as usual, is just application
and the content type
is also applications and chasten.
And then we want our authorization header.
And again, make sure you spell this right or you're going to have problems.
And this has to be in the form of the word barer, followed by a space followed by our token, which
we call token.
And finally, we want to add the body to our request options.
And the body is just our Jason Stringfellow.
And we're stratifying our.
So now that we have that.
We can actually call fetch, so we're going to fetch and again, we're going to be using our API variable
that's passed to this template and then let's go find our API roots and make sure we have the right
ones.
So Route's API, OK, we can get rid of this testing because we're not using that anymore.
So we're posting to slash API, slash, it means virtual terminal succeeded, so I'll copy this part.
And go back to the terminal page and put in that you world, which is API slash admin and then slash
virtual terminal succeeded.
And I think I have a did move that curly bracket back where it belongs, that's better and close this
and we pass it our request options,
then we get our response, which is response turned into Jason's response to Jason.
Then we actually do something with that response.
So we'll go with function data, as we normally do.
And I'll put in a console logged in so we can see what's going on.
And then we want to hide our processing indicator.
So processing that class list, DOT and Dean, so we're hiding that processing indicator.
We want to show current success because we've actually managed to charge the credit card.
And now the last time we did this sort of thing, we actually stored information in the session and
took the user to a another page.
But this is a virtual terminal, and I'm going to imagine that the person using this is probably running
one or more transactions and doesn't want to be taken to a separate page every time this happens.
So what I'm going to do is go up to where that form closes.
Right here the last year, and I'll put another DeQuan here, class equals row and then I'll put in
a deal class equals call MDX offsetting three offset and three and I'll make it hidden and also give
it an ID.
Heidi equals receipt and we'll just unhide this deal
and show the receipt as soon as this is done.
So inside of this, I'll put in a H three with a class of say, empty dash three and I'll send a text
center and I'll just say receipt and close the three and put an H are there just to make it look nice.
And I will put a paragraph in here and I'll just put one or two items in to show the way that we can
generate this receipt.
So I'll put it in strong bank return code
colon and then expand with 90 equals bank dash return dash code and close spam and I'll leave that empty.
OK, and I'll put another paragraph tagging and I'll put in a button that allows us to charge the card
again.
So a class equals button button dash primary nature of equals and I'll just take them back to the virtual
terminal page virtual terminal and that's how to put quotes around it.
And label the Boston church
another pair and close the attack.
OK, so now we have this nice receipt, Divx, which initially is hidden.
So if we go back down to where we're actually processing things that say transaction after we show this
card success, we can simply say document, don't get element by it.
And we're looking for bank dash, return, dash code.
So it's in our HTML two
data, the JavaScript or the JSON.
We're getting back from the backend bank, underscore return, underscore code.
And of course you can put whatever else you want in that receipt and then we just unhide the receipt
document element idy receipt class list dot remove de daschner.
OK, so let's give this a try, see what we left it.
So I'll make sure my application is stopped next.
And started like start.
OK, it's running.
Let's go to our Web browser, reload this page, no error so far, but let's open the JavaScript terminal
just to be safe, OK?
And we'll charge your credit card.
So we'll say this is for twelve dollars and thirty four cents to someone named Sally Smith.
And Sally's email is Sally and Sally dot com and our standard for two credit card number and expiries,
zero for say twenty nine with the CBC of five, six, seven.
All right, let's see what we got right or wrong.
Looks good and there is a receipt and of course, if I want to charge another card at this point, I
just click this button and that takes me back to the blank virtual terminal form.
So that seems to be working exactly the way we want.
And the nice thing about this, of course, is now charging that back end or saving the transaction.
It's actually protected by our token, and that's exactly what we want.
OK, let's move on.