WEBVTT 00:02.160 --> 00:08.040 So we've written the code on the front end that's supposed to go and get a payment intent for us and 00:08.040 --> 00:10.940 the payment attempt will be getting doesn't actually charge the credit card. 00:11.490 --> 00:17.250 It is the first instance of payment intent which will change its status throughout the life cycle of 00:17.250 --> 00:18.020 a transaction. 00:18.450 --> 00:22.620 So initially, we're just making sure that everything is valid, that we have a credit card, that we 00:22.620 --> 00:26.820 can charge that credit card and we get an ID back our payment intent ID. 00:27.750 --> 00:32.460 So now we want to actually try charging a credit card and also take care of the situation where we're 00:32.460 --> 00:33.330 charging a card. 00:33.330 --> 00:34.400 But something goes wrong. 00:34.440 --> 00:37.440 Maybe the card doesn't have enough room on it. 00:37.440 --> 00:39.480 So it's being declined, whatever the case may be. 00:39.700 --> 00:43.860 But before we do that, I had a couple of typographical errors, which I often do. 00:44.310 --> 00:49.950 So I'm looking at terminal dot page HTML and I'm looking at line fifty four in my code and that's the 00:50.100 --> 00:55.080 hidden field with the name of payment currency and the idea of payment currency. 00:55.260 --> 00:56.040 I left a letter. 00:56.220 --> 00:57.210 So it's a C in there. 00:58.140 --> 01:01.380 And the second typographical errors a little bit further down. 01:04.170 --> 01:09.720 Right here on request options, I have to have a comma after headers, otherwise I'm going to get a 01:09.720 --> 01:10.530 JavaScript error. 01:10.830 --> 01:12.450 So I made these changes. 01:12.480 --> 01:14.900 Let's make sure that er in fact has reloaded. 01:14.910 --> 01:15.870 It looks like it has. 01:16.440 --> 01:20.030 Let's reload our terminal and I should be able to see that. 01:20.040 --> 01:20.590 Perfect. 01:20.640 --> 01:22.720 OK, so that takes care of those errors. 01:23.310 --> 01:30.430 Now let's Heider terminal and let's get started back down here in the call to fetch. 01:31.590 --> 01:36.300 So in the first part, all we're doing right now is we're getting a response as text. 01:36.300 --> 01:38.250 We're trying to pass it into JSON. 01:38.250 --> 01:43.380 And if we succeed, then we actually write this information to the console. 01:44.220 --> 01:47.590 We get our payment content and write it to the console, and we want to do more than that. 01:47.610 --> 01:54.840 So right here, I'll get rid of this console log data and instead I will call from the strike package. 01:54.840 --> 02:01.650 I'm calling confirm card payment, and that's built right into straight. 02:01.700 --> 02:05.280 And what that's going to do is actually make the transaction for us. 02:05.310 --> 02:07.640 It'll in other words, it will charge the credit card. 02:08.310 --> 02:09.930 So it requires a parameter. 02:09.930 --> 02:12.380 And the first one we're getting back from our data object. 02:12.390 --> 02:18.780 There's something in there called client underscore secret and that is absolutely critical or nothing 02:18.780 --> 02:19.290 will work. 02:19.830 --> 02:21.090 Then we have some things. 02:21.090 --> 02:23.610 We're passing it in curly brackets. 02:24.030 --> 02:29.190 First of all, we're going to pass the card, which in our case is the variable called Kirt. 02:29.880 --> 02:32.730 Second, we're going to pass billing details. 02:33.960 --> 02:34.930 Who is this person? 02:35.580 --> 02:37.010 So a colon. 02:37.020 --> 02:45.890 And then in curly brackets I put in their name and that just comes from my form document get element 02:45.900 --> 02:49.290 by ID and I'm looking for a card holder. 02:49.380 --> 02:50.430 Dasch named. 02:53.680 --> 02:54.280 It's value. 02:55.140 --> 03:03.910 OK, so we call that then after the closing parentheses for the first entry we use, then we're dealing 03:03.910 --> 03:10.000 with JavaScript promises and we're just going to have a function which takes a result while we're getting 03:10.000 --> 03:10.390 back. 03:11.020 --> 03:15.430 And inside of that, we want to make a few tests. 03:15.440 --> 03:17.180 We want to make a few decisions, first of all. 03:17.710 --> 03:18.730 Was there an error? 03:19.300 --> 03:22.810 And in this case, the error isn't a JavaScript error or something like that. 03:22.820 --> 03:24.430 It's actually an error for the card. 03:24.430 --> 03:25.630 So we check for it. 03:26.440 --> 03:27.610 Result error. 03:27.620 --> 03:32.130 If that exists, then the card was declined or something went wrong. 03:34.030 --> 03:35.350 So I'll just put a comment in there. 03:36.460 --> 03:43.890 In most cases, Card declined or something went wrong with the card. 03:45.280 --> 03:47.230 Maybe it's a stolen card, for example. 03:47.710 --> 03:51.730 And in that case, I actually want to show an error and I'm going to call a function that doesn't exist 03:51.730 --> 03:54.970 yet show error and it will exist shortly. 03:55.000 --> 04:00.410 And I'm going to pass that the error message I get back from Stripe, which is just result. 04:00.790 --> 04:02.170 Error message. 04:03.220 --> 04:03.610 OK. 04:07.410 --> 04:13.080 And then I want to show the Pemberton's again, again, a function that doesn't exist, but it will 04:13.080 --> 04:15.620 shortly show Pemberton's plural. 04:16.050 --> 04:19.280 So we'll have to create these two functions in a minute, but we'll get to that in a moment. 04:20.670 --> 04:24.810 And I have to have an error on error or I want to have a JavaScript error. 04:26.010 --> 04:28.770 Now, the other situation, of course, is ELT's. 04:29.520 --> 04:40.530 In this case, I want to check to make sure if LGF result payment intent, make sure we have that 04:43.320 --> 04:44.400 intent. 04:45.180 --> 04:49.890 If that exists at this point, I'm going to write another test. 04:50.070 --> 04:58.170 OK, so I'm going to make sure that I actually have the correct response if result payment, intent, 05:00.960 --> 05:09.060 that status, if that's exactly equal to as you did and you got to spell that right. 05:09.090 --> 05:09.990 You're going to have problems. 05:11.190 --> 05:13.850 This means that we have charged the card, 05:18.840 --> 05:19.060 OK? 05:19.230 --> 05:22.890 And there are things we want to do at this point to start with. 05:23.040 --> 05:29.940 Remember those four hidden fields we have up here, we add a little while ago, I need to populate those 05:29.940 --> 05:35.070 with information because I'm going to be submitting this form at some point and probably saving information 05:35.070 --> 05:36.700 to the database, whatever the case may be. 05:36.730 --> 05:41.040 Let's come back down here and let's actually set the values for those. 05:41.670 --> 05:46.860 So document get element by ID and I'm going to get the element named, first of all, payment method 05:49.800 --> 05:50.490 value. 05:50.910 --> 05:58.080 And that's going to be equal to what we get back from straight result dot payment intent 06:00.690 --> 06:01.140 dot. 06:01.230 --> 06:08.110 And I'm looking for payment, underscore method, underscore types. 06:08.390 --> 06:11.730 It's an array and I'm looking for the first entry in that array. 06:11.730 --> 06:13.040 So index zero. 06:13.710 --> 06:14.850 So let's make sure we spell this. 06:14.850 --> 06:15.330 All right. 06:15.750 --> 06:17.040 Payment method. 06:18.210 --> 06:19.090 Payment method types. 06:19.170 --> 06:19.550 Looks good. 06:20.220 --> 06:27.900 Next document Dockett Element by ID and this time I'm looking for payment intent and we're not storing 06:27.900 --> 06:30.390 the entire payment intent but I do want it to ID. 06:30.960 --> 06:38.970 So value is equal to result payment intent id now the amount. 06:39.000 --> 06:43.410 So I'll just duplicate this line and change this to amount. 06:46.990 --> 06:49.930 And I want result on payment in that amount. 06:50.140 --> 06:51.520 And finally, the currency. 06:54.030 --> 07:04.530 So you are in SeeWhy and this is Currence, you are in SeeWhy, so I set all of those values. 07:05.310 --> 07:09.150 Now I want to hide the Spiner, so I'll just save processing because we already have a reference to 07:09.150 --> 07:13.370 our Spiner processing class list ad. 07:13.540 --> 07:17.160 And I'll add Demon Bootstraps. 07:17.160 --> 07:18.660 Hide this class. 07:20.600 --> 07:25.430 And then I'm going to call a function that doesn't exist yet, we have to write the show error function 07:25.430 --> 07:33.320 and we also have to write the show Pemberton's function and we'll also have to write a show card success 07:35.360 --> 07:35.830 like that. 07:36.320 --> 07:44.060 And at this point, I would submit the form, our actual form that will generate a receipt. 07:44.130 --> 07:47.900 We want to submit that and we want to do something with the information in that form and we'll take 07:47.900 --> 07:49.100 care of that a bit later on. 07:49.370 --> 07:52.210 Right now, let's see if we could actually charge this card. 07:52.380 --> 07:59.750 OK, so down here, the last thing I want to do is in this tri statement right now, we're just logging 07:59.750 --> 08:00.140 in air. 08:00.170 --> 08:04.840 But if something goes wrong, writing to the console isn't very helpful for our end users. 08:04.840 --> 08:08.240 So instead we'll say show card error. 08:08.240 --> 08:10.760 That function we haven't written yet, but we will before too long. 08:11.030 --> 08:20.330 And I'll just put in a generic response, invalid response from Payment Gateway, which is suitable 08:20.330 --> 08:21.710 for our purposes at the moment. 08:22.100 --> 08:24.150 And again, we'll show the PAYBOX show. 08:24.200 --> 08:28.460 Hey, so we have a few functions. 08:28.460 --> 08:29.150 We have to write. 08:29.690 --> 08:32.870 We have to write, first of all, show error, show pay buttons. 08:34.400 --> 08:39.060 And Shoket success, so let's get started doing that and I can just put them right at the top. 08:40.250 --> 08:42.860 They already have a high pay button. 08:44.740 --> 08:54.110 So let's create a show paper, although I think I had an excellent show today, but yes, I did OK. 08:54.490 --> 09:02.920 And in this case, I want to remove Nun from the pay button and I want to add Denon to the processing 09:02.920 --> 09:03.250 center. 09:04.210 --> 09:05.380 We also want to function 09:08.260 --> 09:10.390 show KO'd error. 09:12.760 --> 09:18.250 And it will take a message, some kind of strength, and, of course, what we want to deal with here, 09:19.090 --> 09:25.990 if we go to the very top of our form, is we have this hidden divx with a class of alert, alert, danger 09:25.990 --> 09:27.670 tech center and currently Dinon. 09:27.670 --> 09:30.500 And it has the idea of card messages, and that's what I want to show. 09:31.150 --> 09:38.350 So in the instance where there's an error right here or we have a card error, we need to make sure 09:38.470 --> 09:45.070 that it has the class of alert danger, that it does not have the class of alert success because we'll 09:45.070 --> 09:50.830 also be using that same device to display success messages and we need to remove nut and then said it's 09:50.830 --> 09:51.460 in our text. 09:51.460 --> 09:57.190 So we already have a reference to card messages we made that a couple of years ago, card messages. 09:57.790 --> 10:07.390 And we want to add to its class list, class list and alert that danger, which it might already have. 10:07.390 --> 10:10.420 But we need to make sure and then I'll duplicate this. 10:10.930 --> 10:23.160 We want to remove the class list, the class alert success, and we want to remove Dean on Dash and 10:23.210 --> 10:23.380 on. 10:24.100 --> 10:27.460 And finally, we want to set its inter text card messages. 10:27.850 --> 10:36.430 Dot inter text equals whatever we got as a message when we call this function that show card error. 10:37.180 --> 10:38.710 And we also need to create a function 10:42.550 --> 10:44.790 show card success right there. 10:45.260 --> 10:46.840 And that doesn't take any parameters. 10:48.250 --> 10:52.690 And basically we want to do pretty much the same thing we do here, but just reversing things. 10:52.690 --> 11:03.970 So I copy this and paste it in here and we want to remove alert danger and alert success removed none 11:03.970 --> 11:06.760 and set its message to I'll just say. 11:08.690 --> 11:10.880 Transaction successful. 11:16.140 --> 11:23.940 OK, so we have our high pay button show buttons, show air show cards, success, I think that's it. 11:24.120 --> 11:25.420 Let's come down here, make sure. 11:26.790 --> 11:29.630 So we're calling show card success. 11:29.760 --> 11:31.920 Show pay buttons, show error. 11:33.990 --> 11:36.760 Show error, that should be show card error. 11:39.000 --> 11:39.630 That's better. 11:42.480 --> 11:47.820 And I think that's enough to get this going, so let's make sure everything compiled and er got confused 11:47.820 --> 11:54.990 as it sometimes does, as it says binde address already in use, so I'll just restart er and you should 11:54.990 --> 11:59.220 check that if you're running into problems where things don't seem to be showing up changed on your 11:59.220 --> 12:02.760 webpage, just make sure er didn't get confused because it does sometimes. 12:03.970 --> 12:10.980 Let's go back to a web browser and I'll open the JavaScript console and I'll reload this page. 12:13.750 --> 12:16.630 I don't see any JavaScript errors yet, but there might be some. 12:16.660 --> 12:19.600 So let's just clear the console so we can see what's going on. 12:19.870 --> 12:24.220 And first of all, I'll try to actually make a transaction that fails. 12:24.310 --> 12:28.390 Now, I have opened in my Web browser another tab, and there's a link to this in the course. 12:28.390 --> 12:32.530 Resources for this lecture stripes test your integration page. 12:32.530 --> 12:38.200 And if you scroll down on the page, you'll see this entry testing for specific responses and errors. 12:38.650 --> 12:42.520 And then one I want to use is where the charge is declined. 12:42.610 --> 12:47.440 And here's the credit card number four with a bunch of zeroes ending in a two charges declined with 12:47.440 --> 12:48.240 a card declined. 12:48.580 --> 12:49.270 That's what I want. 12:49.780 --> 12:52.840 So let's go back to our virtual terminal and I'll put it out. 12:52.840 --> 12:53.980 Mountain doesn't matter what it is. 12:54.820 --> 13:00.250 And the cardholder name is Jack and the email is Jack at JD.com. 13:00.400 --> 13:03.460 And I'll put in that credit card number that will always fail. 13:03.460 --> 13:11.260 Four zero zero zero zero zero zero zero zero zero zero zero zero zero zero two with an expiry in the 13:11.260 --> 13:13.720 future, say twenty nine and three three three. 13:14.050 --> 13:18.670 And hopefully this will display the message up here unless we have a typo, which I often do. 13:21.600 --> 13:28.290 So I did get an error card message, but it displayed this so there is a typo card message is not defined 13:28.300 --> 13:29.900 and I know exactly where that is. 13:30.360 --> 13:39.060 So let's go back in to here, our terminal and find card message card messages not to fund virtual terminal 13:39.060 --> 13:39.570 one for. 13:39.570 --> 13:44.100 Let's see if it'll show me that line card message. 13:44.110 --> 13:46.310 I have an E missing in show card error. 13:46.320 --> 13:47.640 So let's go back and fix the. 13:49.500 --> 13:56.340 Shoket error card messages, and that means because I copied and pasted, it's also here, so I'll save 13:56.340 --> 14:04.740 that, make sure that er we compiled it did go back and I'll go to the console, reload this page. 14:06.920 --> 14:08.600 Clear this out and try that again. 14:09.140 --> 14:17.300 So amount one hundred dollars, cardholder name, Jack Carthew, email Jack at Jack dot com and again 14:17.300 --> 14:25.040 for three zeros and four zeros than four zeros than zero zero zero to any date in the future. 14:25.910 --> 14:30.920 So long in the future, but in the future and our CDC. 14:30.920 --> 14:33.800 And let's hope we get the correct error message at the top. 14:35.900 --> 14:39.650 Received unknown parameters, curdling details. 14:39.680 --> 14:41.210 Well, that's my second typo. 14:41.300 --> 14:45.050 As I said, I do this sometimes, so we have the wrong parameters in there. 14:45.500 --> 14:51.050 And that would be here in the val method billing details. 14:53.570 --> 14:58.130 Stupid me, this entire thing has to be wrapped in payment. 14:59.960 --> 15:01.670 Underscore method. 15:02.450 --> 15:03.440 I don't know why I do that. 15:03.440 --> 15:04.900 I tend to do that all the time. 15:07.610 --> 15:12.140 And then I need a closing curly bracket and I need a colon. 15:14.880 --> 15:20.350 And then I just indent all of this and it did rebuild. 15:20.370 --> 15:22.470 Yes, OK, third time's the charm. 15:23.580 --> 15:31.490 Let's go back to our Web browser, reload this page, clear the console, and we'll put in a mountain, 15:31.510 --> 15:36.360 say, ten dollars, Jack, Jack, Jack, dot com. 15:37.530 --> 15:38.670 And then our number. 15:38.670 --> 15:40.110 That should fail every time. 15:44.520 --> 15:48.270 Two zero one twenty nine three three three. 15:49.710 --> 15:50.870 All right, third time's a charm. 15:53.720 --> 16:00.230 My card was declined, that may be the first time in my entire life I have been happy to see that message, 16:00.530 --> 16:01.850 but that's exactly what we wanted. 16:02.390 --> 16:04.890 Now, what happens if the card succeeds? 16:04.910 --> 16:08.480 Let's go back and check our code and make sure that there are no typos in there, because seem to be 16:08.480 --> 16:13.790 making a lot of those today show card error, show pay buttons. 16:13.970 --> 16:15.260 That all looks good. 16:15.490 --> 16:22.280 OK, so it did exactly what it should have declined our card and took us back to this screen with the 16:22.280 --> 16:24.100 charge card button enabled. 16:24.110 --> 16:32.750 And now I should be able to change this to one that always passes for to delete the four to four to 16:32.750 --> 16:36.640 four to four to four to four to four to four two. 16:37.580 --> 16:40.100 And I actually have my stripe test terminal open. 16:40.100 --> 16:45.860 So let's look at that and you can see my gross volume on my test data and make sure your viewing test 16:45.860 --> 16:49.910 data here on the left hand side, it's four hundred dollars and six cents. 16:49.910 --> 16:57.020 So let's go back here to the virtual terminal and try running this transaction for ten dollars and see 16:57.020 --> 16:57.890 if we get everything right. 16:57.980 --> 17:00.950 So I'll clear the console and click the charge card button. 17:04.770 --> 17:09.870 Transaction successful, so it looks like we charge the card, so let's go back to our straight terminal 17:09.870 --> 17:16.290 here, our actual dashboard, and you can see it's now four hundred and ten dollars and six cents that 17:16.290 --> 17:17.500 just went through. 17:17.850 --> 17:20.710 So now we've successfully charged a credit card, which is great. 17:21.750 --> 17:24.000 So we seem to have handled most of the cases. 17:24.010 --> 17:30.380 The next step is to actually submit the form and generate a receipt and display that to the end user. 17:30.390 --> 17:32.460 And we'll take care of that in the next lecture.