WEBVTT 00:01.890 --> 00:08.400 So this time around, we want to actually submit our form and I'm looking at the terminal page go HTML 00:08.400 --> 00:13.400 file right now and the action for that form is payment succeeded. 00:13.410 --> 00:20.190 So we actually want to submit this form with the idea of charge, underscore form, handle that on our 00:20.190 --> 00:23.700 front end and generate a receipt page and we'll be done. 00:23.790 --> 00:26.670 We'll be able to charge credit cards using our virtual terminal. 00:27.450 --> 00:28.450 So let's get started with that. 00:28.470 --> 00:38.730 So the first thing I'll do is open my routes file and I will create a new route start post and it will 00:38.730 --> 00:50.550 be what I call it, payment dash succeeded, payment Dash succeeded, and that will go to a handler 00:50.550 --> 00:51.630 that doesn't exist yet. 00:52.450 --> 00:57.000 I'll just call it a quote payment succeeded. 00:57.030 --> 01:01.140 You can call it a receipt or whatever you want, but I want to call mine payment succeeded. 01:03.120 --> 01:04.910 OK, so let's go create that handler. 01:05.010 --> 01:13.320 So I've got a handlers and I'll create a new handler function, have a pointer to application and it's 01:13.320 --> 01:15.000 called payment succeeded. 01:15.670 --> 01:20.310 And it takes the two things that every handler does a response writer 01:23.310 --> 01:24.750 and a pointer to a request. 01:27.630 --> 01:31.320 OK, so now that I've created that back in routes, the error should be gone. 01:31.620 --> 01:32.580 And it is. 01:34.350 --> 01:37.200 So let's write this handler now, because this is a post. 01:37.350 --> 01:43.050 The first thing I have to do is handle the pass form well, check for error and call person form. 01:46.990 --> 01:58.300 And if there's an error, then I'll just log it after error log, print, line the error and I'll return, 01:58.630 --> 02:01.410 which isn't very polite, but it's sufficient for our purposes right now. 02:02.680 --> 02:04.080 And I will read the posted data. 02:08.800 --> 02:19.750 So cardholder will be a variable I declare is assigned the value of our farmgate and we're looking for 02:19.750 --> 02:22.790 cardholder underscored name. 02:22.810 --> 02:24.750 I better make sure that's actually what I called it. 02:24.760 --> 02:30.530 So let's go back to the terminal page and make sure it's cardholder name and it is good. 02:30.740 --> 02:33.750 OK, so that's the first one. 02:33.970 --> 02:39.910 I want to get the payment intent, so I'll just duplicate this and call this payment intent. 02:43.560 --> 02:51.630 And the parameter is named PT. To underscore intent, I'll duplicate that, and now I want to get the 02:51.630 --> 02:52.290 payment method. 02:56.620 --> 02:57.760 Which is payment method, 03:01.390 --> 03:08.380 and I'll duplicate that payment amount, which is payment amount. 03:13.000 --> 03:16.690 And the currency payment currency. 03:19.060 --> 03:20.350 We'll be payment currency. 03:24.480 --> 03:34.240 Now, let's create a data variable data is assigned the value of make a map string and I'll just put 03:34.240 --> 03:38.280 it in your face because this is what I'm going to be passing to my template and I'll take advantage 03:38.280 --> 03:41.430 of the type in our template data called data. 03:42.690 --> 03:43.620 Interface. 03:44.870 --> 03:49.580 OK, and let's add the information data cardholder 03:52.550 --> 03:56.870 is equal to cardholder, and I know I could do this all online, but I'm trying to make it as readable 03:56.870 --> 03:57.500 as possible. 03:58.280 --> 03:59.160 Data email. 04:00.710 --> 04:02.770 She didn't get so I have to grab that, too. 04:03.290 --> 04:07.220 That will be equal to email and up here I have to grab that. 04:07.670 --> 04:13.400 So I'll call the email and email, which is what I called it on the form. 04:16.420 --> 04:22.380 And data payment intent, which I'll just call part, is payment intent. 04:25.400 --> 04:34.670 And duplicate the payment method, which I'll call PM because I'm lazy payment method and duplicate 04:34.670 --> 04:38.660 that pay for payment amount 04:43.550 --> 04:47.150 and PC for payment Cursi currency. 04:50.630 --> 04:53.660 OK, so I have that now. 04:53.660 --> 04:57.590 I'm going to render a template and I'll use the same syntax I did for other handler. 04:57.710 --> 05:07.940 If error is not if error is assigned the value of apt render template and I want to pass it the response 05:07.940 --> 05:09.290 rate or the request. 05:10.070 --> 05:11.630 A template that doesn't exist yet. 05:11.630 --> 05:20.360 But we will in a minute I'll call it succeeded and we'll create a template data and we'll populate that 05:21.200 --> 05:25.610 with the one thing that we need in there, which is data data. 05:29.060 --> 05:36.560 And then we'll put a semicolon and say if error is not equal to nil and we'll do the same thing I did 05:36.560 --> 05:42.500 before after analog print, one error. 05:42.500 --> 05:44.960 And of course, you probably want to do something else. 05:45.180 --> 05:47.750 But for our purposes, we're focusing on stripe. 05:47.930 --> 05:49.240 This is quite sufficient. 05:49.670 --> 05:51.560 So now we actually need to go create that template. 05:51.800 --> 05:59.390 So I'll go to my command web templates folder and I'll create a new file in there called 06:02.000 --> 06:07.130 This You Page Go HTML. 06:09.580 --> 06:12.840 And this will be a very simple receipt, I'm not going to make any effort to make a pretty. 06:13.010 --> 06:17.090 So we'll put up here template, base letter spell template, right. 06:18.500 --> 06:19.450 And hand it data. 06:21.650 --> 06:25.520 And in the first block, which I call title, all define title. 06:27.700 --> 06:34.960 And just override the default value and put in payment succeeded and the. 06:38.160 --> 06:42.030 And then we'll have our content block to find content. 06:45.430 --> 06:46.020 And it. 06:50.160 --> 06:59.910 And in here, I'll just say to say class equals MTW five to push it down a bit, the payments exceed. 07:03.820 --> 07:07.990 And of course, you could put whatever you want in here, this is just a receipt, so I'll put in H.R. 07:07.990 --> 07:14.890 and just to make it a little cleaner picture and I'll simply say I'll put the information that we've 07:14.890 --> 07:15.430 passed here. 07:15.430 --> 07:20.740 So you obviously don't want to put payment intent in a final receipt, but we're just passing data. 07:21.430 --> 07:26.140 So index data and we're looking for. 07:26.620 --> 07:27.400 That's what I called it. 07:27.400 --> 07:35.860 And then I'll duplicate this a few times and I'll put payment or cardholder name cardholders enough 07:36.820 --> 07:38.470 that I call that cardholder. 07:40.090 --> 07:41.410 And then we had their email. 07:46.060 --> 07:47.110 Which I called the email. 07:51.660 --> 07:53.850 And then we have the payment method. 07:57.580 --> 08:04.180 Which I called him, not great naming there, but anyway, it's showing what how we pass data to this 08:04.180 --> 08:08.520 template and what you might do for a receipt that I'm sure you can figure this out amount. 08:08.590 --> 08:13.230 I'm going to print it out exactly in the way that we received it, which is pay for payment amount. 08:13.260 --> 08:16.980 So it'll show what's being passed to our handler. 08:17.230 --> 08:18.730 And of course, that won't be a decimal. 08:18.730 --> 08:20.830 No currency 08:23.620 --> 08:29.550 index, the PC for currency, and that should be enough. 08:29.560 --> 08:34.140 So let's make sure everything compiled it did. 08:34.190 --> 08:35.620 Let's go back to our Web browser. 08:38.840 --> 08:43.100 And reload this just to make sure it's current and I'll put a transaction through this time, I'll make 08:43.100 --> 08:45.830 it four twenty five dollars and thirty four cents. 08:46.250 --> 08:49.190 And the cardholder name is Jack Jones. 08:49.700 --> 08:52.670 And Jack's email is Jack at Jones dot com. 08:52.670 --> 08:58.610 And we'll make this a transaction that passes by using the tax credit card number that always passes 08:59.300 --> 09:04.620 and zero three twenty seven with four or five six. 09:05.630 --> 09:11.210 So what should happen now is we should very briefly see that green success message and then this form 09:11.210 --> 09:11.850 will get submitted. 09:11.900 --> 09:16.120 Actually, no, it won't, because they need to go back to my template and submit form. 09:17.180 --> 09:18.430 I'm glad I thought of that now. 09:18.440 --> 09:22.480 So terminal page means I need to re-enter all that information, but that's OK. 09:26.070 --> 09:34.440 So in the statement would submit the form becomes a document get element, but ID and I'm going to get 09:34.440 --> 09:38.280 the idea of charge, underscore form, not submit. 09:41.190 --> 09:42.870 They're all right there. 09:42.900 --> 09:43.500 Recompile. 09:44.820 --> 09:45.950 There it is, a recompile. 09:47.310 --> 09:53.350 So let's go back to our browser, reload this page one page one more time and try it again. 09:53.910 --> 09:56.040 Twenty four dollars and fifty six cents. 09:56.040 --> 10:07.080 This time Jack is the name Jack Jones dot com and our test credit card number zero one twenty seven 10:07.590 --> 10:09.390 for four for now. 10:09.390 --> 10:13.710 We should see that little green thing flash at the top of the page and we should be taken to our receipt 10:13.710 --> 10:14.160 page. 10:18.510 --> 10:19.020 And we did. 10:19.170 --> 10:23.800 There it is now, you obviously could make that as good as you want. 10:23.840 --> 10:24.110 I see. 10:24.120 --> 10:25.200 I missed email here. 10:25.330 --> 10:32.270 What I miss email back here was that I call it on the form, probably didn't call it email. 10:32.400 --> 10:38.280 So card hold email type email and name is card holder email. 10:38.280 --> 10:43.620 So I can I can just change this to email and the next time I run that it'll work just fine. 10:44.340 --> 10:49.560 OK, apart from that one typographical error, which I seem to be making a lot of these days, that 10:49.560 --> 10:51.580 should all work as expected. 10:52.620 --> 11:00.330 So now we know how to charge a credit card to check for errors to handle the posted data that's sent 11:00.330 --> 11:02.550 to our our our front end handler. 11:03.180 --> 11:05.970 And of course, we want to do more than just generate a receipt. 11:06.000 --> 11:10.200 We actually want to write some information to the database and we're going to do that. 11:10.200 --> 11:15.030 But we're going to do it in the next section of the course where we actually put a product, a virtual 11:15.030 --> 11:19.690 product or some fake product up on a Web page and allow people to buy it. 11:19.710 --> 11:26.520 And we're also going to, in the following section, put up a subscription where people can buy something 11:26.520 --> 11:30.990 and get charged once a month or once a week or whatever interval you decide is the appropriate one. 11:31.380 --> 11:36.000 In other words, we're going to implement recurring payments and during those two sections of the course 11:36.020 --> 11:41.880 will expand both our front and our back end to write information to a database, to read information 11:41.880 --> 11:46.500 from a database and all of the things you would have to do in a typical e-commerce site. 11:46.830 --> 11:49.050 And we'll take care of those in the next few sections.