So this time around, we want to actually make this refund order button, do something, and there's
quite a few steps required to make that happen in a safe fashion.
But let's get started.
So we'll go over to my editor visual studio code and I'm looking at Sahlberg Page Go HTML.
And the first thing I'll do is go way down here, the JavaScript, OK, and lets me do a little bit
of cleanup, first of all.
Right.
Now I have this function format currency as part of this document, add event listener dom content loading
and it's fine, it works there and I'm going to pull it out of there because that's really not where
it belongs.
I'll put it myself just inside the script tag at the same level as that listener.
OK, that's a little cleaner.
Now, the next thing I'm going to do is when I click on that button, which is called refund order,
I want a confirmation dialog to show up.
So here's the logic for that right now are the code for that.
And I'm going to give it an ID and I'll make that ID refund, dash it here, OK?
And then down here, I'll put a listener on that.
So right after the function format currency, I'll just add a listener document douget element by idee
and I called it refund.
PTM, I will add an event listener on click when someone clicks on it, execute this function and just
to make sure it works, I'll just say console don't log clicked refund.
OK, and I'll see how my code is running or not.
It's running front and back end.
So let's say mixed up a start dash back.
And I'll run their.
So let's go back there and reload this and open the JavaScript console and click Refunder clicked refund
it shows up perfect.
OK, so that listener is working.
So let's go back there and decide what we want to do here.
When someone clicks on this, I don't want to write to the console.
What I really want to do is to have a confirmation dialogue pupper that says, are you sure you want
your refunders?
So there's lots of ways I could do that.
I could use the standard JavaScript, the built in vanilla JavaScript, but it's not very attractive.
Or I could use bootstraps, middle class and build a model and put two buttons on it.
That's a lot of work.
So what I'm going to do instead is use something I use a lot and it's this package and I'll put a link
to this in the course resources for this lecture.
It's called Sweet Alert and it's a really useful package that gives us all kinds of models.
So the first thing I'll do is copy its installation script.
I got there by clicking on at the top here installation.
OK, so I'm going to copy this, go back to my code and at the top of my JavaScript block outside of
this script block.
I'll pass that in there.
So now I have access to it.
Let's see how it works.
So I'll go back to the examples here and I'll click on examples and I will scroll down to a confirmation
say here it is, a confirmed dialogue.
Let's try that.
That's exactly what I want, so I cancel that, I will copy this code.
I'll go back to my editor.
And at the very bottom, first thing that's going to happen when somebody clicks on this, it will display
a sweet alert.
Swoll is the name that we used to call that indent everything and make it a little more attractive.
OK, and I'm not going to fire this.
I'll delete that little bit that says your file has been deleted because I'm not deleting a file.
And I'll change the confirm button text from yes, delete it to refund.
And I'll just say you won't be able to undo this.
And are you sure?
OK, so let's see if that works and get this.
So it looks good.
Save and see if air is doing its thing.
It is.
Go back.
Reload my page.
And see if we get refund orders, confirmed dialogue.
Are you sure?
And I'll click cancel.
Perfect.
That's exactly what I want now.
What happens when we click refund order?
Well, let's think about it.
Let's go back to our code and hide her terminal.
What I want to have happen when somebody clicks.
Yes, refund this or CLECs the refund button.
I actually need to fire off a request to my API root API slash admin slash refund and give it a JSON
payload.
Well, that's not her at all.
So let's start this.
Let's create a variable called payload let payload and that's going to be equal to a JavaScript object.
And we just populated with the thing that needs.
And if we go back to our handlers API, let's see what we're looking for.
We're looking for ID, which is an IT payment intent, which is a string amount, which is an end and
currency, which is a string.
So we need to put four things in there at least.
So let's go back to our sales page and populate our pallet.
So PI is what we're looking for and it's going to be a payment intent.
Where am I going to get that?
I actually don't have a means of getting that right now up here.
I get it in this when the with a DOM content is loaded, I have access to it here, but I don't have
access to it down here, so I need to put it somewhere so I can get that information.
Now, there's lots of ways of doing this.
I could actually just change my handler to accept only the order ID then do the look up in the database
and get the payment intent that way and that would work just fine.
And in fact, that's probably more secure.
But I want to make this really readable code because this is of course not production code.
So what I'll do instead is come up here and add a few hidden fields.
Even though this is in the form, I can still put input type equals hidden and I'll get the first one
an idea of payment content, OK?
And it will have a value of nothing.
And then I'll have another one.
Input type equals Kidane.
This one will be an ID of charge charge dush amount because I already have an idea of an amount earlier
up there in a spam and it's initial value will be nothing as well.
And I'll have a third one.
Input type equals hidden ID equals currency and its value is also nothing to start with.
So now I have three hidden fields, p charge amount and currency and down here I'm actually going to
populate those.
So I will say document git element buiding and the first one is P and its value will be set to data
dot transaction dot p payment intent.
I think it is
in the next one is document dockett element by ID and this time I'm looking for charge.
Dasch amount the hidden field we just added.
Its value is equal to DataDot transaction amount and the final one for right now is the currency document.
Don't get element by adding currency value is equal to DataDot transaction currency.
OK, so now those are available to me.
So let's go back down to our payload and now the pie is equal to document.
Got get on it by idee.
PR value and we need currency, and that's going to be equal to document Thorngate Element by ID
currency value and the third one is the amount document get element by ID
charge amount
value.
And we also need the ID and of course that we get up here in our initial ADD event, listener dom content
loaded.
We have token and ID and what I'm going to do because those are only scoped for this section for document
at event listener dom content loaded.
I can simply pull these out of here
and put them right here.
So when the program loads this page, when our browser loads this page, we'll grab the token from local
storage and we'll get the ID from the URL and now they're available everywhere.
So I should be able to come down here now and say it now.
The only thing about this, of course, is that back in our handler, our API handler, we're looking
for an Int for ID and we're looking for an entire amount.
So that means we need to cast these to an end.
And that's really easy.
So the amount will be passing it.
Base 10 and the ID will also be percent
base 10, OK, so there's our payload.
We also need because we're going to use fetch our request options.
So consed quest options.
Equals and we have the standard stuff and I can actually save a little bit of time by coming up here
and getting this information like that.
And coming down to here and pasting it in here and formatted things properly, and I also need to add
a body which is chasing string of fire, and it's Paillot.
OK, so let's just save this, make sure that everything is running here, Ariga confused or restart
here.
He was already listening on part 4000, so something got confused, as air does once in a while, and
I'll go back and just make sure there's no JavaScript errors.
So let's clear the screen and clear the console and reload this page.
OK, no JavaScript errors so far, so let's go back here.
See, this needs to fire, so let's confirm the result and see if we have any JavaScript errors there.
I'll see a refund.
No errors.
OK, so now we can actually call, fetch and see what we get wrong.
So we're going to fetch and we're going to fetch to as usual, in double curly brackets dot API, which
gives us the euro for our back end.
And we want to call slash API admin slash refund.
We want to hand at our request options, then we want to get a response and convert that JSON.
Then we'll call function passive data which is now in JSON format or in a format we can use and offset
console log data.
OK, now that's all I'm going to do right now.
Let's try running this and see what happens.
So just to make sure everything is current, I'm going to say stop error, make stop make start that
will compile and run both the back and front end.
There it goes on reload this.
First of all, a quick refund order and say cancel.
OK, so that worked.
All right.
Now I'll say refund order and try to refund it and see if we have everything right.
And we got air false message charge refunded.
That's great.
OK, so if I go to my payments on stripe, this is the one I was trying to refund.
OK, Bruce Wayne, let's reload it and see what it looks like now.
And it has, in fact, been refunded.
OK, that's a really good start.
We've actually managed to refund the charge properly.
The thing is, of course, if I go back to my Web browser and say, reload this page, the refund button
is still there.
And I have no way of telling whether or not this has been refunded in the same way.
If I look at the list, it still shows up as a normal order.
So I can go back to Bruce Wayne and I can try to refund this order.
And if I watch the JavaScript console, I'll say refund.
We get an object with an air equal to true and the long message telling me what went wrong and of course,
what went wrong is you can't refund a single charge twice.
So clearly we have some more work to do on the front end.
If a charge has been refunded, I should never even see that refund order button.
And I probably I should have some kind of error message showing up here.
Something goes wrong.
And back here, when I go to say the list, all charges page, I should be able to tell if a charge
is current or a charge has been refunded at a glance.
So we'll get started on that sort of thing in the next lesson.