WEBVTT 00:01.750 --> 00:07.930 So we've managed to subscribe a user to a plan, and that works really well, but of course, we need 00:07.930 --> 00:09.470 to save some information locally. 00:09.490 --> 00:13.630 And right now I'm looking at Brons Dash planned on page HTML. 00:14.380 --> 00:18.510 And of course, what we want to do is we want to save the transaction locally. 00:18.550 --> 00:22.020 We want to save the customer locally, and we want to save the order locally. 00:22.690 --> 00:28.600 So in order to do that, we're going to do a lot of work here in the strip payment method handler. 00:29.350 --> 00:32.670 And this form is actually only going to communicate with the back end. 00:32.710 --> 00:37.150 We're not actually going to post to the front end and do a redirect and all that will handle everything 00:37.150 --> 00:37.960 from the back end. 00:38.290 --> 00:40.780 As I suggested, we'd be doing a few lectures ago. 00:41.680 --> 00:45.880 So right here in function strip payment method handler, we check for an error. 00:45.880 --> 00:47.920 If we get an error, we display it and that's fine. 00:48.430 --> 00:51.940 And we also create a customer and subscribed to plan and that's fine. 00:51.940 --> 00:56.600 And then we post to API, create customer and subscribe to plan. 00:57.250 --> 01:02.710 Now, since we want to save a transaction and we want to save an order and create a customer and all 01:02.710 --> 01:07.300 that sort of thing, we actually need more information in the payload that we're sending to the back 01:07.300 --> 01:07.570 end. 01:08.230 --> 01:15.130 So to do that, of course, we're going to have to go back to our handlers API and add some information 01:15.130 --> 01:16.960 up here in straight payload. 01:16.960 --> 01:21.420 So let's add it in here first and then we'll keep going on the front end. 01:22.180 --> 01:26.200 So we have currency and amount payment method email. 01:26.770 --> 01:27.880 We don't have card brand. 01:28.120 --> 01:37.660 We can actually put that in here if we want to card brand string and in JSON we'll call that card grant, 01:37.660 --> 01:40.060 which will be Visa or American Express or whatever. 01:41.110 --> 01:45.010 And we have lost four, but we also want expiry month and expiry year. 01:45.010 --> 01:45.940 So let's put that in there. 01:47.830 --> 01:52.000 Expiry month, which will be a string for right now. 01:52.840 --> 01:56.470 And in JSON, we'll call that expiry month. 01:57.310 --> 02:01.240 And the reason I'm putting in a string is because that's how we're going to receive it from the Jerusalem 02:01.240 --> 02:01.720 Post. 02:02.650 --> 02:06.460 And we want experience all duplicate that and change this to expiry year. 02:09.600 --> 02:11.220 And change this to Xperia. 02:13.550 --> 02:16.060 So last foreign plan, we also want the product. 02:16.670 --> 02:17.570 What are we selling? 02:17.600 --> 02:21.590 And of course, that's the idea of the entry in the widgets table. 02:21.600 --> 02:28.820 So we'll call that product and we'll make that a string for now as well, because that's how we're going 02:28.820 --> 02:29.450 to receive it. 02:33.920 --> 02:37.310 And we want the customers first name, which will be a string. 02:44.940 --> 02:46.050 And we want their last name. 02:53.560 --> 02:58.360 So let's format this to come back and make some more changes here shortly, but let's go back to our 02:58.360 --> 03:00.250 bronze dash plan page. 03:03.580 --> 03:06.270 So let's see what we can put in here. 03:07.840 --> 03:09.480 It's all going to go in our payload. 03:09.910 --> 03:11.420 So we want the product ID. 03:11.470 --> 03:13.720 And what do we call that the top here? 03:13.730 --> 03:14.470 I believe it is. 03:14.930 --> 03:20.170 So we have an input type equals hidden name equals product I.D. We better give that an I.D., which 03:20.170 --> 03:22.900 I'll call ID equals product I.D.. 03:27.040 --> 03:29.840 OK, so we have an I.V. now so we can grab that value. 03:29.870 --> 03:33.870 So let's go back down to our payload right here. 03:34.810 --> 03:45.730 So I will put in product ID and that will be equal to document target element by ID product, underscore 03:45.730 --> 03:47.260 ID value. 03:49.030 --> 03:52.870 And we have the plan and the payment method in the email in the last four. 03:52.870 --> 03:54.030 So let's get the card brand. 03:54.040 --> 03:54.880 I think that's the next one. 03:54.880 --> 03:57.020 We added her brand. 03:58.360 --> 03:59.500 Now where do we get that? 03:59.520 --> 04:02.200 Where do we actually get the card brand and the expiry date? 04:02.260 --> 04:08.800 Well, it's actually all in the result that's passed to the function stripe payment method handler. 04:08.830 --> 04:14.890 After we make that first call up here in Stripe create payment method. 04:15.070 --> 04:20.770 That's what gives us our necessary information for the card brand, for example, it's a card brand 04:21.550 --> 04:30.310 that will be equal to result DOS payment method DOT card, the card that was used to make this subscription 04:30.310 --> 04:30.910 to the plan. 04:31.720 --> 04:32.650 And we're looking for brand 04:35.530 --> 04:37.560 and in the same way next month. 04:38.290 --> 04:43.360 Is that what I called it in handler's API expiry, I better call it. 04:44.260 --> 04:45.220 Let's be consistent. 04:47.090 --> 04:57.560 And next year, next year, it's hard to say back to bronze plan that will be equal to result payment 04:57.560 --> 05:05.900 method, dot card, dot exp underscore month and then I'll just duplicate that and change it a year 05:07.790 --> 05:10.040 because we get that the same way from our result. 05:13.760 --> 05:15.350 And we want the first name and last name. 05:17.980 --> 05:27.340 First, underscore name is what I called it, and that will be document get element by ID, dot, first 05:27.770 --> 05:32.620 name, I believe, dot value and then we'll duplicate that in the last name. 05:36.280 --> 05:37.390 And last name. 05:40.940 --> 05:46.400 And the last thing I want to include in there, let's make sure we have it in our handlers, is the 05:46.400 --> 05:47.590 amount of the transaction. 05:47.600 --> 05:51.110 Yes, we have an amount and we called it amount, so amount. 05:52.130 --> 05:55.130 And that will be able to document that element by ID. 05:55.970 --> 05:59.710 And we're looking for amount will verify that in a moment value. 05:59.750 --> 06:06.620 Now, I believe it's called amount, so let's scroll up and make sure amount it equals amount and that 06:06.620 --> 06:09.410 gives us the price in the correct format with no decimals. 06:11.240 --> 06:11.650 All right. 06:11.900 --> 06:16.310 So we now have a new payload that we're sending off to our back end. 06:16.320 --> 06:21.300 And of course, that happens when we call API, create customer unsubscribe to plant. 06:21.320 --> 06:26.270 So let's go over to our handlers API and find that method. 06:27.920 --> 06:28.800 Here it is right here. 06:29.420 --> 06:35.450 So what I'm going to do, first of all, is we need to handle our errors a little bit better than we're 06:35.450 --> 06:40.530 doing right now, because all we're doing is saying app error on print, print line error and return 06:40.580 --> 06:40.660 it. 06:41.360 --> 06:43.840 And I want to make this a little more useful. 06:44.660 --> 06:46.700 So there's a couple of changes I'm going to make here. 06:47.120 --> 06:50.750 The first one is to get rid of this, OK, is assigned a true down here. 06:53.020 --> 07:00.970 And instead, I'll create a variable called OK, right here, it doesn't matter where I put it, ver, 07:01.090 --> 07:06.040 I'll just say OK is a sign the value of truth. 07:06.970 --> 07:07.790 So I'm just moving it. 07:07.810 --> 07:10.780 So we have it a little bit earlier in the function. 07:11.350 --> 07:14.650 And I'm also going to create a variable called subscription 07:18.190 --> 07:22.040 and I'll make that a pointer to straight dot subscription. 07:24.250 --> 07:29.680 And the reason I'm doing that is down here, when I'm calling card subscribed to plan, I'm getting 07:29.680 --> 07:34.690 back the subscription ID and I want to I want to modify this function and instead make this as a full 07:34.690 --> 07:35.410 subscription. 07:36.040 --> 07:40.460 What I'll do is make this subscription subscribed to plan. 07:41.320 --> 07:47.980 So right here we'll make this return instead of a string will return a pointer to stripe subscription 07:49.390 --> 07:54.790 and down here we'll return the full subscription instead because we might need that a little bit later 07:54.790 --> 07:55.070 on. 07:55.120 --> 08:00.610 And that means this becomes anneal because you can't return an empty string for a pointer to stripe 08:00.620 --> 08:01.150 subscription. 08:01.330 --> 08:08.200 OK, back to our handlers, and this becomes an assignment to an equal sign that takes care of that. 08:09.070 --> 08:12.960 And this becomes subscription ID if we want to keep that for long. 08:13.170 --> 08:14.390 OK, so that takes care of that. 08:14.410 --> 08:16.030 So now I created the OK variable. 08:16.030 --> 08:17.610 I've created the subscription variable. 08:18.340 --> 08:23.380 The first thing I try to do is to get the customer and instead of saying return here, I'll just set, 08:23.420 --> 08:25.840 OK, false. 08:27.580 --> 08:34.540 And down here I will say if ok then I want to do all this stuff, 08:37.820 --> 08:40.810 get rid of this format. 08:40.810 --> 08:42.280 Everything OK. 08:43.000 --> 08:47.200 So now if we have an error, when we try to get a straight customer, we'll print the error to the log, 08:47.200 --> 08:47.890 which is fine. 08:48.100 --> 08:53.620 We'll set OK default and we won't execute this if this didn't work the way that it was supposed to. 08:53.950 --> 08:59.890 Now, in the same way, once I try to subscribe the customer to a particular plan, if there's an error, 09:00.460 --> 09:03.880 I'm just going to say OK equals false. 09:04.630 --> 09:11.800 OK, so this is a new way of making sure that we're going to have valid information before we go any 09:11.800 --> 09:12.140 further. 09:12.160 --> 09:17.200 First of all, we check to see if we can create a customer, if not said OK, to if we manage to do 09:17.200 --> 09:20.100 that, we try to subscribe that customer to a particular plan. 09:20.350 --> 09:24.120 And if that doesn't work, then we said, OK, default again. 09:25.270 --> 09:28.170 And if all of those worked, OK, we'll still be true. 09:28.180 --> 09:30.270 So we can say if OK. 09:32.200 --> 09:38.350 And here is where we're going to take care of creating a transaction, creating a customer locally, 09:39.190 --> 09:41.790 creating an order and saving all of that information. 09:42.280 --> 09:46.390 And if not, then, of course, we're going to send back OK, which would be false. 09:46.390 --> 09:49.410 And the message to whatever we want it to be some kind of error message. 09:49.960 --> 09:54.730 So we'll take care of the creating a customer and saving it, creating a transaction and saving it and 09:54.730 --> 09:57.940 creating an order and saving it in the next lecture.