So we have a forum displaying and let's get started working on the JavaScript to subscribe a customer
to a strike plan.
So I'm looking at a dash planned page, goyish HTML.
And if we go over to our Web browser, you'll see that I've made a slight change.
I just got rid of the duplication up here at the top.
But that's trivial.
So what I'm going to do is go to the very bottom and I'm going to create a user, just define define
jazz.
And then and now things were obviously going to need we're going to, first of all, probably need to
get the widget in this block.
So go to the very top here and just copy this line and come back down here and paste it in the JavaScript
block because variables are specific to a given block on go templates.
And then I know I'm going to need the stripe just so I'll put in script.
Source equals from a colon's just a straight dot com slash v three slash and close my script just like
we did on the violence page and on the virtual terminal page.
Now there is some commonality between the JavaScript that we're going to see here and the JavaScript
we have in this file.
And I'm going to copy, first of all, all of this stuff, because we're going to need everything from
the letter card all the way down to the VAL copy.
That is a starting point.
OK, and we'll get some more in a moment and I'll paste that here.
So script paste closed the script and those functions are all going to be identical.
And of course, you could extract those to their own file and make it reusable.
But I'm just going to copy and paste them for our purposes right now.
That is sufficient.
The other thing that's going to stay pretty much the same is down here at the very bottom of striped
bass striped SJS, partial to HTML is this anonymous function that initiates and displays the credit
card feel the way it's supposed to.
So let me copy that.
Go back here and I'll just give myself some blank lines and the paste idea.
Now, if I save that and go back, let's see if that works and formats the credit card page properly.
So back here, reload.
And there it is.
So now we see the credit card.
So we know that's working properly.
Now, the way that you actually charge a user for a recurring subscription in Stripe is a little bit
different.
If you recall, all we did on the buy one page was get a payment intent.
Same thing on the virtual terminal.
But here we actually need to create a stripe customer first.
And this is the documentation for this customer.
And you can read it at your leisure and the link to it in the course resources for this lecture.
But first of all, we need to create a customer.
Then we need to subscribe that stripe customer to a plan.
Now, when I say create a customer, I don't mean create one and stored in our local database.
I mean to create a customer on the stripe back end and then use the customer ID from that or the customer
object from that.
I'm that customer to some plan and it's not that difficult.
So let's get started.
We're not going to finish in this lecture, but we'll absolutely get started.
So the first thing we'll do is just like we did last time, this will have the valve function function
well.
And this is what's called when someone clips on the clicks on the button or whatever we labeled it and
what we're going to have here, I can just go back to strike just partial and copy it from Val.
So let's find the Val function.
Right here, since our form is named the same, we can do all of this and copy that and come back to
our bronze page Poseidon and now make sure that we have the correct amount in our document or document
get by ID amount.
We find that so amount.
It's hidden.
It's right at the top.
Yes, it's widget price, but that's our monthly fee that's going to be charged.
So that's not going to change.
But what's going to happen next is we're actually going to on this function after we have the amount
of charge we'll get to that sooner or later.
We may not even use that, actually.
But right now, let's just leave it there because it's not heard anything.
We're actually calling strike dot create payment method, which is available to us because we imported
stripe at the top stripe.
Don't create payment with a capital P method.
And this is available because we're using the strike package and in curly brackets we're going to put
in a few values.
First of all, what type of charges this?
Well, it's going to be a card and you can look up this method on the stripe documentation, but it
requires a few things.
First of all, type is card.
Second card is our local variable card, which is declared right at the top of this script tag, same
as it was in the last two times.
We charge credit cards, then we need some billing details and a colon and then I'm going to put it
like this.
So it's very readable in curly brackets.
The first and only item is email, which is document doget element by ID and we're looking for a card
holder dush email, which which is what it's called in the form value.
OK, so we're going to create that payment method then.
Once that's done dot then spell it right.
We're going to call a function that doesn't exist yet.
Stripe payment method.
Kendler This is just a simple change after the first part executes after we call stripe dot create payment
method we actually call a handler which we have to define ourselves and this takes the result of that
stripe dot create payment method.
So let's create a function which we'll call strike payment method handler and it takes a result.
And close that, so don't forget, we checked to see if there's an error, if result of error, and
that result comes from this call right here, striped create payment method.
It's passed to this function, which we call using them.
So if there's an error, we'll do exactly what we did the last time around.
We'll just say show KO'd error and we'll hand it result, error message, which comes from straight.
Otherwise, here's where we create a customer
and subscribe to plant.
OK, we'll take care of this part.
We'll just write the JavaScript this time around.
We'll take care of this part.
The ELT's part of this if statement in the next lecture and the one after that, we'll get started writing
the necessary code on our back end.