WEBVTT 00:01.690 --> 00:07.390 So this time around, we want to modify this virtual terminal page to instead of calling a route on 00:07.390 --> 00:08.060 the front end. 00:08.080 --> 00:13.070 We want to use fetch and call our route on the back end and save our transaction information that way. 00:13.840 --> 00:18.250 So before we do that, there's a couple of little typos that we have to take care of, or at least I 00:18.250 --> 00:19.060 have to take care of. 00:19.420 --> 00:24.450 So I go back to my ID and I'm looking at handler Stasch API Dutko. 00:24.460 --> 00:29.440 And as you can see, and you probably saw me type this, I have some typos here in the JSON tags. 00:30.040 --> 00:36.490 So this one should look like that and this one should have a closing quotation mark and that takes care 00:36.490 --> 00:36.820 of that. 00:37.420 --> 00:41.950 OK, so let's get started by going to a terminal page and go HTML. 00:42.580 --> 00:46.780 And the first thing I'll do is get rid of this action in the form because we're not actually going to 00:46.780 --> 00:47.970 submit this form at all. 00:48.100 --> 00:50.980 So I'll just leave it empty and we're never going to call it. 00:50.990 --> 00:51.880 So that's fine. 00:52.930 --> 00:56.950 And the next thing I need to do is to go to the handler and go file. 00:57.280 --> 01:00.130 And we're not going to include right down here. 01:00.730 --> 01:03.040 We're not going to include striped bass. 01:04.000 --> 01:08.500 So I'll delete that, OK, and go over to handlers. 01:08.500 --> 01:18.400 Don't go, which are right here and will find the part that renders that virtual terminal. 01:19.760 --> 01:20.990 Which is. 01:25.930 --> 01:31.240 Right there, and we'll we want passed straight to it, the partial we're not using that at all. 01:31.300 --> 01:34.940 We're going to simply recreate JavaScript right in that template itself. 01:35.920 --> 01:38.170 So now we'll go back to the terminal page. 01:38.300 --> 01:41.900 And what we want to put in here is code that's very similar to Stripe Geospatial. 01:41.980 --> 01:50.910 So I'll just open that file and I will copy everything in between the defined tags and we'll just modify. 01:52.060 --> 01:52.860 So I'll copy that. 01:54.340 --> 02:00.400 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 02:00.400 --> 02:01.570 to see what's going on. 02:03.310 --> 02:08.320 So right at the top of this, we still want our import of the stripe JavaScript. 02:08.860 --> 02:12.760 We still want our KO'd stripe in all of this stuff that all stays the same. 02:13.360 --> 02:15.220 So let's go on down to. 02:18.410 --> 02:23.240 We want to get the payment intent, and that's fine, and here we actually don't want to submit the 02:23.240 --> 02:25.460 form on this line one sixty seven. 02:26.480 --> 02:30.290 Instead we'll call a function which will write in a minute. 02:30.290 --> 02:35.960 And I'm going to call save a transaction and I'm going to pass it. 02:36.110 --> 02:41.530 The result that we have here so we can comment this submit. 02:44.150 --> 02:49.790 We don't need any of these things setting these hidden fields so we can simply delete those. 02:52.490 --> 02:54.650 And we'll just write a safe transaction function 02:59.270 --> 03:01.910 and it will take one argument, the result that we're passing out. 03:05.210 --> 03:13.300 OK, so what we want to do in here is to actually call that route we defined on our route stash API. 03:13.970 --> 03:16.460 So the first thing we need to do is to find a payload. 03:16.490 --> 03:17.440 What are we going to send that? 03:17.450 --> 03:19.240 And this is going to go in the form of Jason. 03:19.250 --> 03:25.580 So I'll define a variable called payload and it will be a JavaScript object and I'll put in the information 03:25.580 --> 03:26.140 that I want. 03:26.240 --> 03:27.620 The first thing we need is the amount. 03:29.220 --> 03:34.500 And that needs to go in the form of an integer, so a call pass into the JavaScript person function 03:35.040 --> 03:45.570 and I'll simply call document dot get element my ID amount, which is still there, its value and we're 03:45.570 --> 03:46.100 using base. 03:47.040 --> 03:49.730 OK, the next thing is the currency. 03:50.940 --> 03:58.940 And that's going to be in the form of result, not payment intent, not currency. 04:00.720 --> 04:02.160 And we give ourselves some room here. 04:04.360 --> 04:08.440 We also want first name and last name, but we don't have those and we're not actually doing anything 04:08.440 --> 04:10.240 with them, but I'll put them in any way as empty string. 04:10.930 --> 04:16.430 First name to the empty string, last name will be an empty string. 04:18.010 --> 04:22.810 We do want to email and that's document Dutkiewicz Element by Edem. 04:23.230 --> 04:27.040 And we're going for card holder Dushka email. 04:27.220 --> 04:29.560 That's the idea in the form it's value. 04:31.880 --> 04:39.910 We also want a payment intent in the payment method and payment intent that comes from result, not 04:40.040 --> 04:40.520 payment. 04:41.120 --> 04:54.290 Intent and payment method comes from result, payment intent, not payment, underscore method. 04:56.330 --> 04:57.680 OK, so that's our. 04:58.430 --> 05:00.230 So we have that now. 05:00.230 --> 05:05.360 We need to get our token because we're going to use that and add an authorization header when we make 05:05.360 --> 05:13.350 her call to fetch so we can get our token rate from local storage, let token equal local storage and 05:14.140 --> 05:16.200 get item and it's called token. 05:17.660 --> 05:18.590 So now we have our token. 05:19.190 --> 05:24.410 Now, since we're calling fetch, let's make a request to options object concert request options. 05:26.370 --> 05:36.450 That will be equal to a JavaScript object, and our method is post and our headers, and here's where 05:36.450 --> 05:39.570 we set the necessary headers for authorisation and so forth. 05:41.610 --> 05:44.220 So the first header will be set. 05:46.260 --> 05:48.570 And that, as usual, is just application 05:52.770 --> 05:53.880 and the content type 05:58.140 --> 06:02.040 is also applications and chasten. 06:03.540 --> 06:05.250 And then we want our authorization header. 06:06.690 --> 06:09.750 And again, make sure you spell this right or you're going to have problems. 06:10.650 --> 06:17.580 And this has to be in the form of the word barer, followed by a space followed by our token, which 06:17.580 --> 06:18.340 we call token. 06:21.120 --> 06:24.900 And finally, we want to add the body to our request options. 06:26.250 --> 06:30.140 And the body is just our Jason Stringfellow. 06:31.410 --> 06:32.610 And we're stratifying our. 06:36.660 --> 06:37.740 So now that we have that. 06:39.300 --> 06:47.250 We can actually call fetch, so we're going to fetch and again, we're going to be using our API variable 06:47.250 --> 06:53.070 that's passed to this template and then let's go find our API roots and make sure we have the right 06:53.070 --> 06:53.510 ones. 06:54.780 --> 07:00.420 So Route's API, OK, we can get rid of this testing because we're not using that anymore. 07:03.920 --> 07:10.130 So we're posting to slash API, slash, it means virtual terminal succeeded, so I'll copy this part. 07:12.940 --> 07:20.390 And go back to the terminal page and put in that you world, which is API slash admin and then slash 07:20.420 --> 07:22.090 virtual terminal succeeded. 07:23.260 --> 07:34.210 And I think I have a did move that curly bracket back where it belongs, that's better and close this 07:35.290 --> 07:36.940 and we pass it our request options, 07:40.780 --> 07:49.260 then we get our response, which is response turned into Jason's response to Jason. 07:52.330 --> 07:54.400 Then we actually do something with that response. 07:54.430 --> 07:57.430 So we'll go with function data, as we normally do. 07:59.980 --> 08:02.890 And I'll put in a console logged in so we can see what's going on. 08:08.980 --> 08:11.830 And then we want to hide our processing indicator. 08:11.830 --> 08:21.490 So processing that class list, DOT and Dean, so we're hiding that processing indicator. 08:22.600 --> 08:28.000 We want to show current success because we've actually managed to charge the credit card. 08:28.300 --> 08:32.710 And now the last time we did this sort of thing, we actually stored information in the session and 08:32.710 --> 08:35.470 took the user to a another page. 08:35.470 --> 08:41.200 But this is a virtual terminal, and I'm going to imagine that the person using this is probably running 08:41.230 --> 08:45.860 one or more transactions and doesn't want to be taken to a separate page every time this happens. 08:46.600 --> 08:50.800 So what I'm going to do is go up to where that form closes. 08:53.270 --> 09:00.680 Right here the last year, and I'll put another DeQuan here, class equals row and then I'll put in 09:00.680 --> 09:14.090 a deal class equals call MDX offsetting three offset and three and I'll make it hidden and also give 09:14.090 --> 09:14.770 it an ID. 09:14.870 --> 09:18.620 Heidi equals receipt and we'll just unhide this deal 09:21.830 --> 09:25.260 and show the receipt as soon as this is done. 09:25.490 --> 09:36.150 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 09:36.370 --> 09:45.580 center and I'll just say receipt and close the three and put an H are there just to make it look nice. 09:46.100 --> 09:51.500 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 09:51.500 --> 09:52.460 generate this receipt. 09:52.460 --> 09:55.940 So I'll put it in strong bank return code 10:01.160 --> 10:10.340 colon and then expand with 90 equals bank dash return dash code and close spam and I'll leave that empty. 10:10.460 --> 10:18.020 OK, and I'll put another paragraph tagging and I'll put in a button that allows us to charge the card 10:18.020 --> 10:18.330 again. 10:18.350 --> 10:27.050 So a class equals button button dash primary nature of equals and I'll just take them back to the virtual 10:27.050 --> 10:34.660 terminal page virtual terminal and that's how to put quotes around it. 10:40.960 --> 10:44.470 And label the Boston church 10:46.840 --> 10:51.260 another pair and close the attack. 10:52.140 --> 10:57.290 OK, so now we have this nice receipt, Divx, which initially is hidden. 10:57.430 --> 11:04.710 So if we go back down to where we're actually processing things that say transaction after we show this 11:04.720 --> 11:09.400 card success, we can simply say document, don't get element by it. 11:10.060 --> 11:13.660 And we're looking for bank dash, return, dash code. 11:15.880 --> 11:18.250 So it's in our HTML two 11:21.130 --> 11:23.950 data, the JavaScript or the JSON. 11:23.950 --> 11:29.070 We're getting back from the backend bank, underscore return, underscore code. 11:29.090 --> 11:33.430 And of course you can put whatever else you want in that receipt and then we just unhide the receipt 11:34.150 --> 11:44.680 document element idy receipt class list dot remove de daschner. 11:46.360 --> 11:49.250 OK, so let's give this a try, see what we left it. 11:49.450 --> 11:52.060 So I'll make sure my application is stopped next. 11:53.500 --> 11:55.480 And started like start. 11:59.270 --> 12:00.150 OK, it's running. 12:00.170 --> 12:07.700 Let's go to our Web browser, reload this page, no error so far, but let's open the JavaScript terminal 12:07.700 --> 12:09.490 just to be safe, OK? 12:10.310 --> 12:11.240 And we'll charge your credit card. 12:11.330 --> 12:19.370 So we'll say this is for twelve dollars and thirty four cents to someone named Sally Smith. 12:20.060 --> 12:28.850 And Sally's email is Sally and Sally dot com and our standard for two credit card number and expiries, 12:28.850 --> 12:33.020 zero for say twenty nine with the CBC of five, six, seven. 12:33.830 --> 12:36.110 All right, let's see what we got right or wrong. 12:40.500 --> 12:45.360 Looks good and there is a receipt and of course, if I want to charge another card at this point, I 12:45.360 --> 12:49.700 just click this button and that takes me back to the blank virtual terminal form. 12:50.220 --> 12:53.340 So that seems to be working exactly the way we want. 12:53.340 --> 12:59.070 And the nice thing about this, of course, is now charging that back end or saving the transaction. 12:59.340 --> 13:04.170 It's actually protected by our token, and that's exactly what we want. 13:04.680 --> 13:05.840 OK, let's move on.