WEBVTT 00:01.440 --> 00:06.390 All right, now that we're no longer accidentally charging a thousand dollars for a ten dollar widget, 00:06.720 --> 00:11.460 let's start implementing some changes on the front end to take advantage of the kinds of things we want 00:11.460 --> 00:12.330 to accomplish. 00:12.360 --> 00:18.990 And right now, I'm looking at Stripe Dash, just partial HTML, and I'm looking at the fetch statement 00:18.990 --> 00:25.560 that calls upon payment intent and down here where the charge charges actually succeeded. 00:26.130 --> 00:30.480 I'm going to make a slight change right here on what's line eighty five in my code. 00:30.900 --> 00:38.070 I'm calling, I'm getting payment, underscore method, underscore types and the first index of an array 00:38.070 --> 00:39.040 and I'm going to change that. 00:39.060 --> 00:40.200 That's useful information. 00:40.740 --> 00:43.870 But there's actually one piece of information that's a little more useful. 00:43.890 --> 00:46.800 Let's change that to payment method. 00:48.030 --> 00:53.850 And the reason I'm doing that is that if you look at our models, dot go file and you look at transaction, 00:54.180 --> 00:59.030 I want to store the last four digits of the credit card and I can't get that from the payment content. 00:59.310 --> 01:02.910 I actually have to get that a different way, which will be taken care of shortly. 01:03.360 --> 01:06.080 So that's our first change in Stripe Dash. 01:06.090 --> 01:10.680 Just partial Dudko html make that on line eighty five and my code. 01:11.490 --> 01:18.270 Make the document get element id payment underscore method equal to result not payment intent payment 01:18.270 --> 01:19.530 underscore method. 01:19.560 --> 01:21.090 So that's the first change I want to make. 01:21.270 --> 01:24.810 OK, now let's go over to our handlers. 01:25.200 --> 01:26.430 So handlers dutko. 01:27.870 --> 01:31.110 And what I'm going to look at is this method payment succeeded. 01:31.170 --> 01:36.900 That's the one that we call when we submit the form after the credit card has been charged, when we 01:36.900 --> 01:41.970 submit the form either on virtual terminal or when buying a single widget. 01:42.000 --> 01:43.830 And right now, we're just parsing the form. 01:43.830 --> 01:46.800 We're getting the past values and we're doing something with them. 01:46.800 --> 01:48.180 We're just printing them on the screen. 01:48.300 --> 01:50.100 And let's make this a little bit better. 01:50.940 --> 01:57.180 As I said a moment ago, one of the things that I want to get from Stripe is I want the last four digits 01:57.180 --> 01:58.050 of that credit card. 01:58.350 --> 02:04.920 And in order to do that, I have to make some changes to our code, both the front end and the back 02:04.920 --> 02:05.190 end. 02:05.250 --> 02:09.120 OK, because we don't have those last four digits. 02:09.120 --> 02:11.040 They're not available to us by default. 02:11.700 --> 02:15.630 The other thing that might be useful to have is the expiry date of the credit card. 02:15.810 --> 02:22.230 Under no circumstances will I ever store a credit card number, but it's useful to be able to verify 02:22.230 --> 02:26.850 that you're looking at the right transaction by saying do the last four digits match the ones I'm looking 02:26.850 --> 02:27.210 for? 02:27.210 --> 02:28.800 And is the expiry date the same? 02:29.070 --> 02:33.900 And that's enough information to verify that you have the right transaction, but not enough for someone 02:33.900 --> 02:37.650 to actually charge that credit card should our database ever get compromised. 02:38.280 --> 02:39.810 So let's get started doing that. 02:40.350 --> 02:44.250 What I'm what I'm going to do, first of all, is go to cards, go. 02:44.250 --> 02:46.860 And that's in the internal folder, the cards folder. 02:46.860 --> 02:48.000 Then cards don't go. 02:48.030 --> 02:51.990 I'm going to open that up and I'm going to create a couple of new methods here. 02:52.260 --> 02:57.360 OK, so right here, just before my card error messages, I'm going to write two new functions. 02:57.570 --> 03:01.710 The first one is a function and again, it has the receiver of a pointer to card. 03:01.860 --> 03:07.170 So we have access to the things we need and I'll call this one get payment method. 03:07.320 --> 03:12.420 And this is where I'm going to be able to get the last four digits of the credit card and it's expiry 03:12.420 --> 03:12.630 date. 03:12.750 --> 03:19.080 And that takes one argument, which I'll just call ESS because it's the string and it returns a pointer 03:19.080 --> 03:26.010 to stripe dot payment method right there and potentially an error. 03:26.820 --> 03:33.240 OK, so first thing we need to do because we're dealing with a credit card and dealing with Stripe is 03:33.240 --> 03:41.130 we have to set our stripe, the key equal to see top secret, which is our stripe, non publishable 03:41.130 --> 03:43.020 key, our secret key. 03:43.710 --> 03:47.160 And then we just call a built in functionality available to us from the stripe package. 03:47.550 --> 03:50.160 And I want to stored in PM, which is payment method. 03:50.280 --> 03:56.700 I'm going to check for an error and that's a sign the value of payment method from Stripe and sometimes 03:56.700 --> 04:00.300 for some reason Visual Studio Code can't find this. 04:00.300 --> 04:01.800 So I might have to add it manually. 04:02.190 --> 04:06.410 And the method is called get and it takes one argument. 04:06.420 --> 04:07.500 I'll take two arguments. 04:07.530 --> 04:07.980 Yes. 04:07.980 --> 04:11.970 Which is the thing we're going to look up and not OK. 04:12.420 --> 04:13.860 And no, it didn't import it for me. 04:13.860 --> 04:21.370 So let's go right up at the top and let's just duplicate this line and change the last bit to payment. 04:22.230 --> 04:22.800 Spell it right. 04:22.860 --> 04:24.000 The payment method. 04:25.720 --> 04:35.110 I should fix that error, so come down here, we'll check for an error if error is not equal to nil 04:36.010 --> 04:44.510 or return nil and the error otherwise we'll return the payment method and no. 04:45.160 --> 04:46.660 OK, let's give this a comment. 04:52.030 --> 04:57.760 It gets the payment method by payment content ID. 05:01.480 --> 05:02.490 And that's enough for that one. 05:02.530 --> 05:08.830 OK, so that's my first one that will allow me to get the information I need in order to retrieve the 05:08.830 --> 05:11.770 last four digits and the expiry date of a credit card and more things. 05:11.770 --> 05:13.280 But that's all I'm interested in right now. 05:13.810 --> 05:21.670 The second thing I want to do is I've been saying off and on that payment, intent changes during its 05:21.670 --> 05:22.290 life cycle. 05:22.300 --> 05:25.360 So when you get it initially, you have one bit of information. 05:25.570 --> 05:28.400 When you get it later on, you might have a different bit of information. 05:28.630 --> 05:34.440 So we occasionally we're going to need to be able to get an existing payment and not create a new one. 05:34.900 --> 05:38.770 So I'll call this one get payment intent, which seems logical. 05:39.250 --> 05:45.760 And it takes one argument, which I'll call it in this case, and a string, and it returns a pointer 05:45.760 --> 05:50.200 to strike payment intent and potentially in error. 05:52.120 --> 05:53.200 Same thing we did last time. 05:53.200 --> 05:56.230 Was that stripped out key equal to 05:59.530 --> 06:00.630 see the secret. 06:02.380 --> 06:04.090 And now it's very straightforward to do this. 06:04.090 --> 06:07.290 We're going to get a p a payment intent and potentially an error. 06:08.200 --> 06:11.800 And those are assigned the value of payment intent 06:14.590 --> 06:15.020 not. 06:18.080 --> 06:23.870 And we pursued the idea that, no, we're not going to do anything with the second parameters, we'll 06:23.870 --> 06:24.500 check for an error. 06:24.590 --> 06:35.770 If error is not equal to nil, return nil nil and the error otherwise returned and nil, no air. 06:36.080 --> 06:37.250 And let's give this a comment. 06:41.660 --> 06:45.560 Actually, I want to change the name to retrieve payment intent because I think that's clearer. 06:46.670 --> 06:49.400 Retrieve payment at 10 because we're getting an existing one. 06:53.210 --> 06:57.020 Retrieve payment intent gets an existing. 07:03.150 --> 07:05.810 Payment intent by ID. 07:06.600 --> 07:08.830 OK, so those are available to us now. 07:08.850 --> 07:11.310 So let's go back to our handlers and let's use them. 07:12.870 --> 07:19.830 So what I'm going to do now, remember that handlers ago is on the front end and Kurds don't go is actually 07:19.830 --> 07:22.460 available to us on the front end as well. 07:22.470 --> 07:25.230 But we still need to instantiate the card. 07:25.230 --> 07:30.150 We need to give the secret and the key to a card variable before we can use any methods in there. 07:30.810 --> 07:34.400 And we're not going to do that very often in handlers for the front end. 07:34.620 --> 07:36.030 But in this instance, I'm going to. 07:36.540 --> 07:44.760 So let's come down here after we get all these values from our form and let's create a card, variable 07:44.940 --> 07:48.600 card as a sign the value of from the cards package card. 07:49.890 --> 07:52.590 And we're going to give it a secret, which it needs. 07:52.590 --> 07:57.320 And that comes from Aptos configured stripe dot secret. 07:58.320 --> 08:06.820 And we're also going to give it its key, which is from after config, straight key. 08:07.950 --> 08:12.970 OK, so now we have this card variable and we have access to all of the methods associated with it. 08:13.950 --> 08:16.520 The first thing I'm going to do is get my payment intent. 08:16.530 --> 08:22.350 All I have right now from the form is the payment intent ID and I actually want to retrieve the existing 08:22.350 --> 08:23.150 payment intent. 08:23.460 --> 08:25.770 So keep an error or a sign. 08:25.770 --> 08:32.850 The value of from my card variable will go to retrieve payment intent and will hand it payment intent, 08:33.000 --> 08:34.050 which we got from the form. 08:34.170 --> 08:38.520 The hidden field will check for an error and I'll just do some simple error. 08:38.520 --> 08:39.150 Checking here. 08:39.180 --> 08:49.140 If errors are not equal to nil, then I'll just say dot error log print line the error and I'll return 08:49.500 --> 08:49.860 again. 08:49.860 --> 08:52.500 Not very friendly, but sufficient for our purposes right now. 08:53.670 --> 08:54.990 So now I have the payment intent. 08:55.080 --> 08:59.970 I also want to get the payment in payment method, which is pretty much the same syntax, just a different 08:59.970 --> 09:00.330 method. 09:00.930 --> 09:08.430 PM for payment method and again error or assign the value of the card, not get payment method right 09:08.430 --> 09:08.760 there. 09:09.030 --> 09:17.010 And we hand it payment method, which is the new ID we put into our form in that statement. 09:17.070 --> 09:22.050 OK, the last one was the first index of an array and we changed that to payment underscore method and 09:22.080 --> 09:26.460 that's what we need to retrieve a payment method and again, error checking. 09:26.460 --> 09:27.630 So I'll just copy and paste. 09:30.540 --> 09:34.740 Now I have this pie and this PMB, the payment intent and the payment method. 09:34.860 --> 09:36.060 What am I going to do with them? 09:36.480 --> 09:37.830 Let's start with the payment method. 09:38.150 --> 09:43.260 I'll create a new variable called Last Four, which will be the last four digits of the credit card 09:43.620 --> 09:46.710 that's assigned the value of PMW card. 09:46.860 --> 09:49.320 What card was used for this particular transaction? 09:49.710 --> 09:57.180 And last for and I also want the expiry month I'm going to grab that expiry month is a sign the value 09:57.180 --> 10:05.910 of PMed card, dot expiry month, month and expiry year, not surprisingly, is a sign the value of 10:05.910 --> 10:10.370 PMI card dot expiry year expire. 10:11.010 --> 10:11.970 Now I have those. 10:12.270 --> 10:17.070 That means I can actually put them in the data I'm passing to my receipt or duplicate this three times 10:17.070 --> 10:30.900 one to three and I'll call the first one last underscore for the next one expiry month and last four 10:30.900 --> 10:39.890 is going to be able to last for and this will be equal to expiry month and then expire, 10:42.810 --> 10:46.080 which is expiry year. 10:47.250 --> 10:49.050 And also add one more. 10:49.170 --> 10:53.130 And this is why I retrieve the payment intent up here on line thirty nine. 10:53.590 --> 11:00.150 And what I want to put in here is the bank return her bank, underscore, return underscore code, not 11:00.150 --> 11:02.340 Kord code. 11:03.210 --> 11:06.540 And that comes from the payment intent. 11:06.540 --> 11:16.650 We just retrieved the charges, the data, the first index of the array in that data, the ID, and 11:16.650 --> 11:20.010 that gives me something I can use as a bank return code. 11:20.020 --> 11:25.230 Now that's not necessarily information I'll ever show to the end user, but it's information that might 11:25.230 --> 11:29.070 be useful for me at some point, perhaps in a dispute or whatever the case may be. 11:29.610 --> 11:32.100 But in any case, I'm getting it back and I'm going to save it. 11:32.820 --> 11:34.620 So now I have all this information. 11:35.130 --> 11:37.620 Let's display it and that'll be enough for this lecture. 11:37.620 --> 11:40.620 So let's go over to the succeeded page go HTML. 11:41.520 --> 11:47.820 And here I'll duplicate this one, two, three, four times and we're going to go with, say, last 11:47.820 --> 11:50.130 for just the last four digits. 11:50.460 --> 11:57.210 I called last underscore four and say bank return code. 11:58.790 --> 12:06.080 Which is like underscore, return, underscore code, and I'll actually do the data on one line, just 12:06.080 --> 12:20.120 a little cleaner expiry date, which would be expiry underscore month slash 12:22.520 --> 12:23.950 index data. 12:26.810 --> 12:32.690 And we're looking for expiry for a year and close by double curly brackets. 12:32.840 --> 12:39.650 OK, so let's stop our application of it's running mixed up and I'll start it like start. 12:43.850 --> 12:44.590 Everything is running. 12:44.630 --> 12:46.000 Let's see if we can get this to work. 12:48.260 --> 12:52.580 So I'll go back here and I'll go to products and I'll try buying one widget. 12:54.290 --> 13:03.500 So this is from, let's say, Sam Smith, Sam at Sam Dotcom, and his credit card is the standard for 13:03.500 --> 13:10.910 to the expiry of 04, say, twenty nine and some some Coke. 13:11.150 --> 13:14.810 OK, let's see what we get for a receipt page and see if we got everything right. 13:20.240 --> 13:26.540 And there it is, so the expiry date, we have that information right here, this is the bank return 13:26.540 --> 13:30.060 code generated by Stripe, which might be useful for us in the future. 13:30.110 --> 13:35.090 We have the last four digits and everything else remains the same except for the payment method. 13:35.330 --> 13:41.000 That's a new kind of payment method, and that's one that we use to retrieve the last four digits and 13:41.000 --> 13:41.960 the expiry date. 13:42.590 --> 13:44.330 OK, that's enough for this time around. 13:44.330 --> 13:46.310 We'll pick it up in the next lecture.