WEBVTT 00:02.600 --> 00:07.970 So we have a forum displaying and let's get started working on the JavaScript to subscribe a customer 00:07.970 --> 00:09.300 to a strike plan. 00:09.560 --> 00:13.070 So I'm looking at a dash planned page, goyish HTML. 00:13.490 --> 00:17.360 And if we go over to our Web browser, you'll see that I've made a slight change. 00:17.360 --> 00:19.610 I just got rid of the duplication up here at the top. 00:19.610 --> 00:20.400 But that's trivial. 00:21.410 --> 00:28.520 So what I'm going to do is go to the very bottom and I'm going to create a user, just define define 00:30.380 --> 00:30.960 jazz. 00:32.720 --> 00:38.600 And then and now things were obviously going to need we're going to, first of all, probably need to 00:38.600 --> 00:40.520 get the widget in this block. 00:40.520 --> 00:49.370 So go to the very top here and just copy this line and come back down here and paste it in the JavaScript 00:49.370 --> 00:53.960 block because variables are specific to a given block on go templates. 00:54.650 --> 00:57.830 And then I know I'm going to need the stripe just so I'll put in script. 00:59.150 --> 01:10.730 Source equals from a colon's just a straight dot com slash v three slash and close my script just like 01:10.730 --> 01:13.320 we did on the violence page and on the virtual terminal page. 01:14.840 --> 01:19.700 Now there is some commonality between the JavaScript that we're going to see here and the JavaScript 01:19.700 --> 01:21.470 we have in this file. 01:22.910 --> 01:27.650 And I'm going to copy, first of all, all of this stuff, because we're going to need everything from 01:27.650 --> 01:31.010 the letter card all the way down to the VAL copy. 01:31.010 --> 01:32.000 That is a starting point. 01:32.040 --> 01:36.280 OK, and we'll get some more in a moment and I'll paste that here. 01:36.410 --> 01:45.010 So script paste closed the script and those functions are all going to be identical. 01:45.020 --> 01:48.770 And of course, you could extract those to their own file and make it reusable. 01:48.770 --> 01:51.200 But I'm just going to copy and paste them for our purposes right now. 01:51.210 --> 01:51.990 That is sufficient. 01:52.760 --> 01:58.830 The other thing that's going to stay pretty much the same is down here at the very bottom of striped 01:58.850 --> 02:05.510 bass striped SJS, partial to HTML is this anonymous function that initiates and displays the credit 02:05.510 --> 02:06.720 card feel the way it's supposed to. 02:06.750 --> 02:07.520 So let me copy that. 02:08.600 --> 02:14.000 Go back here and I'll just give myself some blank lines and the paste idea. 02:14.570 --> 02:20.370 Now, if I save that and go back, let's see if that works and formats the credit card page properly. 02:21.080 --> 02:22.820 So back here, reload. 02:23.750 --> 02:24.410 And there it is. 02:24.440 --> 02:25.570 So now we see the credit card. 02:25.580 --> 02:27.120 So we know that's working properly. 02:28.640 --> 02:35.300 Now, the way that you actually charge a user for a recurring subscription in Stripe is a little bit 02:35.300 --> 02:35.740 different. 02:35.750 --> 02:39.800 If you recall, all we did on the buy one page was get a payment intent. 02:39.830 --> 02:41.260 Same thing on the virtual terminal. 02:41.840 --> 02:46.640 But here we actually need to create a stripe customer first. 02:46.640 --> 02:48.910 And this is the documentation for this customer. 02:48.920 --> 02:52.370 And you can read it at your leisure and the link to it in the course resources for this lecture. 02:53.040 --> 02:55.070 But first of all, we need to create a customer. 02:55.310 --> 02:58.670 Then we need to subscribe that stripe customer to a plan. 02:58.700 --> 03:02.890 Now, when I say create a customer, I don't mean create one and stored in our local database. 03:03.350 --> 03:09.410 I mean to create a customer on the stripe back end and then use the customer ID from that or the customer 03:09.410 --> 03:10.130 object from that. 03:10.130 --> 03:14.040 I'm that customer to some plan and it's not that difficult. 03:14.060 --> 03:14.720 So let's get started. 03:15.150 --> 03:18.110 We're not going to finish in this lecture, but we'll absolutely get started. 03:19.670 --> 03:24.470 So the first thing we'll do is just like we did last time, this will have the valve function function 03:24.680 --> 03:25.140 well. 03:25.190 --> 03:30.830 And this is what's called when someone clips on the clicks on the button or whatever we labeled it and 03:30.830 --> 03:35.120 what we're going to have here, I can just go back to strike just partial and copy it from Val. 03:35.150 --> 03:36.590 So let's find the Val function. 03:38.160 --> 03:45.960 Right here, since our form is named the same, we can do all of this and copy that and come back to 03:45.960 --> 03:53.790 our bronze page Poseidon and now make sure that we have the correct amount in our document or document 03:54.000 --> 03:55.620 get by ID amount. 03:55.710 --> 03:59.300 We find that so amount. 03:59.940 --> 04:00.500 It's hidden. 04:00.510 --> 04:01.490 It's right at the top. 04:01.920 --> 04:06.050 Yes, it's widget price, but that's our monthly fee that's going to be charged. 04:06.990 --> 04:08.510 So that's not going to change. 04:08.970 --> 04:15.140 But what's going to happen next is we're actually going to on this function after we have the amount 04:15.150 --> 04:16.620 of charge we'll get to that sooner or later. 04:16.620 --> 04:18.200 We may not even use that, actually. 04:18.210 --> 04:20.460 But right now, let's just leave it there because it's not heard anything. 04:21.750 --> 04:28.140 We're actually calling strike dot create payment method, which is available to us because we imported 04:28.140 --> 04:29.610 stripe at the top stripe. 04:29.610 --> 04:34.800 Don't create payment with a capital P method. 04:35.070 --> 04:40.830 And this is available because we're using the strike package and in curly brackets we're going to put 04:40.840 --> 04:41.730 in a few values. 04:41.760 --> 04:43.800 First of all, what type of charges this? 04:43.800 --> 04:48.840 Well, it's going to be a card and you can look up this method on the stripe documentation, but it 04:48.840 --> 04:50.220 requires a few things. 04:50.520 --> 04:51.770 First of all, type is card. 04:52.500 --> 04:58.470 Second card is our local variable card, which is declared right at the top of this script tag, same 04:58.470 --> 04:59.700 as it was in the last two times. 04:59.700 --> 05:07.770 We charge credit cards, then we need some billing details and a colon and then I'm going to put it 05:07.770 --> 05:08.250 like this. 05:08.250 --> 05:11.430 So it's very readable in curly brackets. 05:12.870 --> 05:20.280 The first and only item is email, which is document doget element by ID and we're looking for a card 05:20.430 --> 05:25.020 holder dush email, which which is what it's called in the form value. 05:25.680 --> 05:30.570 OK, so we're going to create that payment method then. 05:30.630 --> 05:33.660 Once that's done dot then spell it right. 05:34.320 --> 05:36.420 We're going to call a function that doesn't exist yet. 05:36.660 --> 05:39.660 Stripe payment method. 05:40.260 --> 05:47.160 Kendler This is just a simple change after the first part executes after we call stripe dot create payment 05:47.160 --> 05:52.680 method we actually call a handler which we have to define ourselves and this takes the result of that 05:52.680 --> 05:54.410 stripe dot create payment method. 05:54.420 --> 06:04.140 So let's create a function which we'll call strike payment method handler and it takes a result. 06:06.710 --> 06:14.660 And close that, so don't forget, we checked to see if there's an error, if result of error, and 06:14.660 --> 06:19.580 that result comes from this call right here, striped create payment method. 06:19.910 --> 06:24.110 It's passed to this function, which we call using them. 06:24.560 --> 06:27.200 So if there's an error, we'll do exactly what we did the last time around. 06:27.230 --> 06:33.920 We'll just say show KO'd error and we'll hand it result, error message, which comes from straight. 06:36.020 --> 06:39.470 Otherwise, here's where we create a customer 06:43.040 --> 06:46.800 and subscribe to plant. 06:47.690 --> 06:49.730 OK, we'll take care of this part. 06:49.940 --> 06:52.010 We'll just write the JavaScript this time around. 06:52.310 --> 06:53.600 We'll take care of this part. 06:53.600 --> 06:58.910 The ELT's part of this if statement in the next lecture and the one after that, we'll get started writing 06:58.910 --> 07:01.430 the necessary code on our back end.