WEBVTT 00:01.270 --> 00:06.730 So this time around, we want to actually make this refund order button, do something, and there's 00:06.730 --> 00:09.840 quite a few steps required to make that happen in a safe fashion. 00:10.030 --> 00:10.790 But let's get started. 00:10.990 --> 00:16.840 So we'll go over to my editor visual studio code and I'm looking at Sahlberg Page Go HTML. 00:17.290 --> 00:22.420 And the first thing I'll do is go way down here, the JavaScript, OK, and lets me do a little bit 00:22.420 --> 00:23.410 of cleanup, first of all. 00:23.560 --> 00:23.740 Right. 00:23.740 --> 00:29.950 Now I have this function format currency as part of this document, add event listener dom content loading 00:30.010 --> 00:33.550 and it's fine, it works there and I'm going to pull it out of there because that's really not where 00:33.550 --> 00:34.090 it belongs. 00:36.210 --> 00:41.710 I'll put it myself just inside the script tag at the same level as that listener. 00:42.040 --> 00:43.320 OK, that's a little cleaner. 00:44.080 --> 00:49.450 Now, the next thing I'm going to do is when I click on that button, which is called refund order, 00:49.660 --> 00:51.890 I want a confirmation dialog to show up. 00:51.910 --> 00:55.030 So here's the logic for that right now are the code for that. 00:55.330 --> 01:00.550 And I'm going to give it an ID and I'll make that ID refund, dash it here, OK? 01:01.390 --> 01:04.780 And then down here, I'll put a listener on that. 01:04.990 --> 01:10.900 So right after the function format currency, I'll just add a listener document douget element by idee 01:11.440 --> 01:12.840 and I called it refund. 01:13.090 --> 01:22.900 PTM, I will add an event listener on click when someone clicks on it, execute this function and just 01:22.900 --> 01:27.190 to make sure it works, I'll just say console don't log clicked refund. 01:28.210 --> 01:31.150 OK, and I'll see how my code is running or not. 01:31.150 --> 01:32.610 It's running front and back end. 01:32.620 --> 01:38.020 So let's say mixed up a start dash back. 01:39.970 --> 01:40.750 And I'll run their. 01:43.130 --> 01:53.080 So let's go back there and reload this and open the JavaScript console and click Refunder clicked refund 01:53.090 --> 01:54.590 it shows up perfect. 01:54.610 --> 01:56.110 OK, so that listener is working. 01:56.120 --> 01:59.140 So let's go back there and decide what we want to do here. 01:59.930 --> 02:03.030 When someone clicks on this, I don't want to write to the console. 02:03.290 --> 02:09.140 What I really want to do is to have a confirmation dialogue pupper that says, are you sure you want 02:09.140 --> 02:10.020 your refunders? 02:11.000 --> 02:12.620 So there's lots of ways I could do that. 02:12.620 --> 02:17.480 I could use the standard JavaScript, the built in vanilla JavaScript, but it's not very attractive. 02:17.720 --> 02:21.880 Or I could use bootstraps, middle class and build a model and put two buttons on it. 02:22.250 --> 02:23.010 That's a lot of work. 02:23.210 --> 02:28.190 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 02:28.190 --> 02:31.600 to this in the course resources for this lecture. 02:31.610 --> 02:38.120 It's called Sweet Alert and it's a really useful package that gives us all kinds of models. 02:38.150 --> 02:41.360 So the first thing I'll do is copy its installation script. 02:41.430 --> 02:44.360 I got there by clicking on at the top here installation. 02:44.390 --> 02:54.020 OK, so I'm going to copy this, go back to my code and at the top of my JavaScript block outside of 02:54.020 --> 02:55.010 this script block. 02:55.190 --> 02:56.000 I'll pass that in there. 02:56.090 --> 02:57.340 So now I have access to it. 02:57.380 --> 02:58.460 Let's see how it works. 02:59.360 --> 03:07.610 So I'll go back to the examples here and I'll click on examples and I will scroll down to a confirmation 03:07.610 --> 03:10.910 say here it is, a confirmed dialogue. 03:13.020 --> 03:13.690 Let's try that. 03:14.850 --> 03:20.070 That's exactly what I want, so I cancel that, I will copy this code. 03:21.330 --> 03:22.680 I'll go back to my editor. 03:24.550 --> 03:29.680 And at the very bottom, first thing that's going to happen when somebody clicks on this, it will display 03:29.680 --> 03:30.820 a sweet alert. 03:31.120 --> 03:37.150 Swoll is the name that we used to call that indent everything and make it a little more attractive. 03:37.590 --> 03:39.760 OK, and I'm not going to fire this. 03:39.770 --> 03:43.900 I'll delete that little bit that says your file has been deleted because I'm not deleting a file. 03:44.710 --> 03:49.870 And I'll change the confirm button text from yes, delete it to refund. 03:51.010 --> 03:53.550 And I'll just say you won't be able to undo this. 03:54.790 --> 03:55.610 And are you sure? 03:55.750 --> 03:59.180 OK, so let's see if that works and get this. 03:59.200 --> 03:59.980 So it looks good. 04:00.670 --> 04:04.210 Save and see if air is doing its thing. 04:04.240 --> 04:04.900 It is. 04:05.440 --> 04:06.160 Go back. 04:06.490 --> 04:07.840 Reload my page. 04:10.860 --> 04:13.640 And see if we get refund orders, confirmed dialogue. 04:14.190 --> 04:14.970 Are you sure? 04:15.000 --> 04:15.870 And I'll click cancel. 04:16.170 --> 04:16.750 Perfect. 04:16.770 --> 04:19.870 That's exactly what I want now. 04:19.890 --> 04:22.140 What happens when we click refund order? 04:22.320 --> 04:23.440 Well, let's think about it. 04:23.550 --> 04:27.290 Let's go back to our code and hide her terminal. 04:28.080 --> 04:30.710 What I want to have happen when somebody clicks. 04:30.720 --> 04:33.140 Yes, refund this or CLECs the refund button. 04:33.480 --> 04:40.980 I actually need to fire off a request to my API root API slash admin slash refund and give it a JSON 04:40.980 --> 04:41.340 payload. 04:41.490 --> 04:42.490 Well, that's not her at all. 04:43.710 --> 04:44.870 So let's start this. 04:44.880 --> 04:52.590 Let's create a variable called payload let payload and that's going to be equal to a JavaScript object. 04:52.710 --> 04:54.600 And we just populated with the thing that needs. 04:55.530 --> 04:59.550 And if we go back to our handlers API, let's see what we're looking for. 04:59.550 --> 05:07.170 We're looking for ID, which is an IT payment intent, which is a string amount, which is an end and 05:07.170 --> 05:08.790 currency, which is a string. 05:09.070 --> 05:10.910 So we need to put four things in there at least. 05:11.190 --> 05:14.130 So let's go back to our sales page and populate our pallet. 05:15.210 --> 05:19.470 So PI is what we're looking for and it's going to be a payment intent. 05:19.950 --> 05:20.850 Where am I going to get that? 05:21.450 --> 05:25.770 I actually don't have a means of getting that right now up here. 05:25.980 --> 05:33.120 I get it in this when the with a DOM content is loaded, I have access to it here, but I don't have 05:33.120 --> 05:37.000 access to it down here, so I need to put it somewhere so I can get that information. 05:37.710 --> 05:39.240 Now, there's lots of ways of doing this. 05:39.270 --> 05:45.570 I could actually just change my handler to accept only the order ID then do the look up in the database 05:45.570 --> 05:48.480 and get the payment intent that way and that would work just fine. 05:48.480 --> 05:50.430 And in fact, that's probably more secure. 05:50.730 --> 05:54.900 But I want to make this really readable code because this is of course not production code. 05:55.020 --> 05:59.790 So what I'll do instead is come up here and add a few hidden fields. 06:00.900 --> 06:07.650 Even though this is in the form, I can still put input type equals hidden and I'll get the first one 06:07.650 --> 06:09.600 an idea of payment content, OK? 06:10.590 --> 06:12.570 And it will have a value of nothing. 06:14.190 --> 06:15.330 And then I'll have another one. 06:15.330 --> 06:17.270 Input type equals Kidane. 06:18.870 --> 06:26.070 This one will be an ID of charge charge dush amount because I already have an idea of an amount earlier 06:26.070 --> 06:30.300 up there in a spam and it's initial value will be nothing as well. 06:31.230 --> 06:32.340 And I'll have a third one. 06:32.550 --> 06:42.000 Input type equals hidden ID equals currency and its value is also nothing to start with. 06:42.180 --> 06:48.030 So now I have three hidden fields, p charge amount and currency and down here I'm actually going to 06:48.030 --> 06:48.840 populate those. 06:50.160 --> 07:02.070 So I will say document git element buiding and the first one is P and its value will be set to data 07:02.370 --> 07:07.890 dot transaction dot p payment intent. 07:07.890 --> 07:08.430 I think it is 07:12.780 --> 07:19.110 in the next one is document dockett element by ID and this time I'm looking for charge. 07:19.110 --> 07:22.470 Dasch amount the hidden field we just added. 07:23.220 --> 07:35.700 Its value is equal to DataDot transaction amount and the final one for right now is the currency document. 07:37.080 --> 07:46.040 Don't get element by adding currency value is equal to DataDot transaction currency. 07:48.020 --> 07:50.240 OK, so now those are available to me. 07:50.250 --> 07:55.700 So let's go back down to our payload and now the pie is equal to document. 07:56.220 --> 07:57.660 Got get on it by idee. 08:01.090 --> 08:10.950 PR value and we need currency, and that's going to be equal to document Thorngate Element by ID 08:13.470 --> 08:23.730 currency value and the third one is the amount document get element by ID 08:26.880 --> 08:27.600 charge amount 08:31.440 --> 08:31.790 value. 08:32.730 --> 08:41.280 And we also need the ID and of course that we get up here in our initial ADD event, listener dom content 08:41.280 --> 08:41.670 loaded. 08:41.820 --> 08:48.450 We have token and ID and what I'm going to do because those are only scoped for this section for document 08:48.450 --> 08:50.220 at event listener dom content loaded. 08:50.940 --> 08:52.470 I can simply pull these out of here 08:55.290 --> 08:56.170 and put them right here. 08:57.930 --> 09:04.080 So when the program loads this page, when our browser loads this page, we'll grab the token from local 09:04.080 --> 09:10.100 storage and we'll get the ID from the URL and now they're available everywhere. 09:10.140 --> 09:16.230 So I should be able to come down here now and say it now. 09:16.230 --> 09:22.410 The only thing about this, of course, is that back in our handler, our API handler, we're looking 09:22.410 --> 09:25.920 for an Int for ID and we're looking for an entire amount. 09:26.160 --> 09:28.320 So that means we need to cast these to an end. 09:28.380 --> 09:29.220 And that's really easy. 09:29.910 --> 09:33.840 So the amount will be passing it. 09:38.640 --> 09:44.710 Base 10 and the ID will also be percent 09:51.000 --> 09:53.980 base 10, OK, so there's our payload. 09:54.070 --> 09:57.170 We also need because we're going to use fetch our request options. 09:57.590 --> 09:59.990 So consed quest options. 10:01.650 --> 10:08.280 Equals and we have the standard stuff and I can actually save a little bit of time by coming up here 10:09.870 --> 10:12.630 and getting this information like that. 10:14.720 --> 10:25.130 And coming down to here and pasting it in here and formatted things properly, and I also need to add 10:25.970 --> 10:34.970 a body which is chasing string of fire, and it's Paillot. 10:37.790 --> 10:45.470 OK, so let's just save this, make sure that everything is running here, Ariga confused or restart 10:45.500 --> 10:45.860 here. 10:47.570 --> 10:53.500 He was already listening on part 4000, so something got confused, as air does once in a while, and 10:53.510 --> 10:55.670 I'll go back and just make sure there's no JavaScript errors. 10:55.850 --> 10:59.510 So let's clear the screen and clear the console and reload this page. 11:00.960 --> 11:04.630 OK, no JavaScript errors so far, so let's go back here. 11:05.910 --> 11:11.130 See, this needs to fire, so let's confirm the result and see if we have any JavaScript errors there. 11:12.420 --> 11:13.440 I'll see a refund. 11:14.490 --> 11:15.210 No errors. 11:15.270 --> 11:19.940 OK, so now we can actually call, fetch and see what we get wrong. 11:20.520 --> 11:29.070 So we're going to fetch and we're going to fetch to as usual, in double curly brackets dot API, which 11:29.070 --> 11:31.590 gives us the euro for our back end. 11:31.950 --> 11:37.200 And we want to call slash API admin slash refund. 11:37.860 --> 11:45.270 We want to hand at our request options, then we want to get a response and convert that JSON. 11:49.920 --> 11:59.480 Then we'll call function passive data which is now in JSON format or in a format we can use and offset 11:59.490 --> 12:03.150 console log data. 12:05.130 --> 12:09.500 OK, now that's all I'm going to do right now. 12:09.540 --> 12:11.820 Let's try running this and see what happens. 12:11.850 --> 12:19.200 So just to make sure everything is current, I'm going to say stop error, make stop make start that 12:19.200 --> 12:21.950 will compile and run both the back and front end. 12:23.010 --> 12:26.430 There it goes on reload this. 12:27.450 --> 12:30.330 First of all, a quick refund order and say cancel. 12:31.410 --> 12:32.370 OK, so that worked. 12:32.380 --> 12:32.760 All right. 12:33.210 --> 12:37.440 Now I'll say refund order and try to refund it and see if we have everything right. 12:41.030 --> 12:44.960 And we got air false message charge refunded. 12:44.990 --> 12:45.770 That's great. 12:45.860 --> 12:53.270 OK, so if I go to my payments on stripe, this is the one I was trying to refund. 12:53.300 --> 12:56.920 OK, Bruce Wayne, let's reload it and see what it looks like now. 13:01.670 --> 13:04.280 And it has, in fact, been refunded. 13:05.090 --> 13:06.620 OK, that's a really good start. 13:06.650 --> 13:09.170 We've actually managed to refund the charge properly. 13:09.350 --> 13:15.980 The thing is, of course, if I go back to my Web browser and say, reload this page, the refund button 13:15.980 --> 13:16.670 is still there. 13:16.790 --> 13:21.020 And I have no way of telling whether or not this has been refunded in the same way. 13:21.020 --> 13:24.590 If I look at the list, it still shows up as a normal order. 13:24.590 --> 13:28.190 So I can go back to Bruce Wayne and I can try to refund this order. 13:28.190 --> 13:32.210 And if I watch the JavaScript console, I'll say refund. 13:33.920 --> 13:39.590 We get an object with an air equal to true and the long message telling me what went wrong and of course, 13:39.590 --> 13:43.270 what went wrong is you can't refund a single charge twice. 13:44.240 --> 13:46.490 So clearly we have some more work to do on the front end. 13:46.790 --> 13:51.380 If a charge has been refunded, I should never even see that refund order button. 13:51.380 --> 13:54.240 And I probably I should have some kind of error message showing up here. 13:54.260 --> 13:55.190 Something goes wrong. 13:55.700 --> 14:01.220 And back here, when I go to say the list, all charges page, I should be able to tell if a charge 14:01.220 --> 14:05.290 is current or a charge has been refunded at a glance. 14:05.600 --> 14:08.780 So we'll get started on that sort of thing in the next lesson.