WEBVTT 00:02.630 --> 00:08.420 So let's get started trying to connect our front end application to our backend application and actually 00:08.420 --> 00:09.230 run a transaction. 00:09.350 --> 00:14.570 So first of all, I'm going to open my terminal and I'm going to start my back and make start back. 00:15.530 --> 00:16.360 And that gets it going. 00:17.030 --> 00:19.750 And then I'll use air to run everything else in front of it. 00:21.020 --> 00:21.830 So it's all running. 00:21.860 --> 00:28.490 So now I'm looking at Terminal Page Go HTML, which is inside the templates folder, inside the web 00:28.490 --> 00:30.430 folder, inside the CMD folder. 00:30.890 --> 00:34.400 And I'm looking at this form and the first thing I'm going to do is come down to the very bottom of 00:34.400 --> 00:36.770 this form before the closing form tag. 00:37.130 --> 00:41.390 And I'm going to add a few hidden fields because there are things we're going to want to say. 00:41.420 --> 00:41.870 So No. 00:41.870 --> 00:50.450 One, I'll put an input type equals hidden and I'll give it the name of payment intent, because that's 00:50.450 --> 00:52.180 what I need to get from the back end. 00:52.580 --> 00:58.540 And I'll also give it the idea of payment, underscore content that will duplicate that. 00:58.910 --> 01:02.330 And the next thing I'm going to want to save is the payment method. 01:02.990 --> 01:04.910 Always nice to know how people paid for things. 01:06.230 --> 01:09.350 Payment method and payment method. 01:12.400 --> 01:17.260 I'll duplicate that one more time and I'll say payment amount. 01:18.310 --> 01:19.460 How much is actually getting paid? 01:20.380 --> 01:21.550 Payment amount. 01:25.670 --> 01:29.840 And finally, nice to know what currency is used, because you might be using more than one currency 01:31.700 --> 01:37.610 payment, currency payment currency, even though in my case I'm only going to be using Canadian dollars 01:37.610 --> 01:43.160 and you can use US dollars or whatever currency you want, but it's nice to keep track of what currency 01:43.160 --> 01:44.470 the transaction actually used. 01:44.990 --> 01:47.590 So I've added those four hidden fields. 01:47.720 --> 01:52.630 Now we're going to take advantage of those for hidden fields down here in the valley function. 01:53.270 --> 01:57.500 So the first thing I need to figure out is how much is actually being charged. 01:57.500 --> 01:59.870 And in our case, if I go to the website. 02:02.450 --> 02:09.510 And go to localhost four thousand virtual terminal. 02:11.360 --> 02:15.550 We can actually specify whatever amount we want here in this textbooks. 02:15.920 --> 02:24.440 Let's go back to our code and let's get the amount so we'll say let amount to charge, which seems like 02:24.440 --> 02:25.480 a meaningful name. 02:26.240 --> 02:30.070 First of all, when I send this to the back end, I need this to be in string format. 02:30.080 --> 02:34.000 If you recall, I'm expecting amount to be in string format on the back end. 02:34.130 --> 02:39.200 And secondly, if someone enters a decimal number, say, ten dollars and fifty cents, that's going 02:39.200 --> 02:42.080 to be typed in as one zero point five zero. 02:42.560 --> 02:46.310 But I need it to be a whole number on the back end so we can do that conversion right here. 02:47.450 --> 02:53.330 First of all, will cast everything to a string, then we'll pass a float in case it's entered as a 02:53.330 --> 02:54.110 decimal number. 02:54.500 --> 03:02.510 And we're going to get the amount that's in that box document elements by ID and the ID is amount. 03:03.020 --> 03:10.050 So I'll get the value of that and multiply the whole thing by one hundred and that should do it. 03:10.070 --> 03:11.540 That should give me the amount to charge. 03:11.570 --> 03:12.380 So let's just try that. 03:12.380 --> 03:17.060 First of all, console dialog amount to charge. 03:20.450 --> 03:25.220 So I'll save this and open my terminal to make sure recompile and it looks like it did. 03:26.240 --> 03:34.190 Let's go back here, open the console, clear the screen, refresh the page just to make sure everything's 03:34.190 --> 03:34.610 current. 03:34.880 --> 03:41.870 I'll clear the screen again and I'll put an amount to, say, ten point fifty and a name and an email. 03:42.710 --> 03:44.360 And that's all I need to test this. 03:44.360 --> 03:48.850 So I'll click charge card and it gives me a thousand and fifty. 03:48.920 --> 03:49.340 Perfect. 03:49.370 --> 03:50.440 That's exactly what I want. 03:50.450 --> 03:53.970 So I reload the page, then I'll come back here. 03:54.020 --> 03:59.680 Now we have the amount to charge in the correct format, so I'll get rid of this console log line. 04:02.060 --> 04:07.460 The next thing I need to do is to call fetch with my back end and I actually need to set up the kind 04:07.460 --> 04:10.850 of information that Fetch is going to be sending to our back end. 04:10.850 --> 04:22.340 So I'll declare a variable, we'll call it payload and that will be equal to in curly brackets the amount 04:23.300 --> 04:27.170 which is amount to charge and the currency. 04:27.590 --> 04:32.060 And I'll just hard code that in my case to code to Canadian dollars, you can use whatever currency 04:32.060 --> 04:32.540 you want. 04:33.650 --> 04:34.740 So that gives me my payload. 04:35.300 --> 04:39.020 Now I want my request options that I'm going to use in fetch. 04:39.050 --> 04:49.100 So consed request options just a constant and that will be equal to in curly brackets the kinds of things 04:49.100 --> 04:55.360 I need to pass this first of all, method equals or method column post. 04:56.660 --> 05:03.380 Secondly, the headers which will be close my curly brackets there. 05:03.380 --> 05:09.380 So I don't forget except I'll set that to application Jason. 05:13.980 --> 05:14.730 And content. 05:18.780 --> 05:23.900 Which again, will be application, Jason and I better spell application, right? 05:29.980 --> 05:31.750 And the body of my request. 05:34.430 --> 05:38.800 Simply string ify my payload, Jason, dot string of high. 05:41.130 --> 05:41.580 Hello. 05:45.800 --> 05:54.470 And the next step is to actually call fish, so we'll use a standard fetch Syntex fetch, we're going 05:54.470 --> 05:57.150 to fetch to HGP close. 05:58.220 --> 06:03.680 And again, we're going to get rid of this API, hardcoded this way and do it using go templates later 06:03.680 --> 06:03.830 on. 06:03.830 --> 06:09.320 But for now, let's see if we can get this working HTP Colon's localhost. 06:09.920 --> 06:15.230 Haught four thousand and one slash payment Dasch content. 06:16.910 --> 06:20.420 And I want to passa also the argument of request options. 06:22.360 --> 06:23.920 Again, request options. 06:26.780 --> 06:35.150 Then I want to get the response and convert that to response text. 06:35.180 --> 06:40.940 I'm doing it as text for a reason and I'll explain why in a moment, then. 06:43.180 --> 06:52.180 The response and we'll use an arrow function and close off down here, inside of that, I'll declare 06:52.180 --> 06:58.480 a variable, which I'll call data, and it's here that I'm going to try something just to make sure 06:58.480 --> 07:00.910 that I'm getting everything in the correct format. 07:01.480 --> 07:08.950 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 07:08.950 --> 07:09.400 the error. 07:10.960 --> 07:18.700 OK, so I'm getting the response as text because I want to make sure that what we're getting is actual 07:18.700 --> 07:22.140 valid JSON and that Trich statement will let me do that. 07:22.780 --> 07:28.870 So inside of this, let's try, first of all, passing our response into JSON. 07:29.350 --> 07:32.170 So data equals Jason Persse. 07:35.260 --> 07:35.920 Response. 07:40.270 --> 07:53.100 And for right now, I'll simply say console log data down here, I'll just say console blog error. 07:54.490 --> 08:01.210 OK, now if I try to run this at the moment, what's going to happen is I got an error because if you 08:01.210 --> 08:10.030 recall, back here in rootstock Stasch API, this is still a get request. 08:10.030 --> 08:12.120 It's still looking for a get request. 08:12.130 --> 08:14.590 So let's change that to post. 08:15.860 --> 08:24.460 OK, that means I need to stop my back end, so I'll stop error and say make stop, which will stop 08:24.460 --> 08:28.030 everything and then make start back. 08:30.770 --> 08:32.150 And then I'll run air. 08:35.870 --> 08:41.030 OK, so everything is running, and we're actually at the point now where I should be able to go to 08:41.030 --> 08:48.040 that Web page and enter some valid information and a test credit card number and try to run a transaction. 08:48.530 --> 08:50.060 So we'll do that in the next lesson. 08:50.060 --> 08:55.310 And then we'll also see how we actually complete the transaction and make sure that everything works 08:55.310 --> 08:56.110 the way that it should. 08:56.270 --> 08:59.480 And then we'll continue along and finish up our virtual terminal.