So we have a virtual terminal form displaying properly with the exception of this credit card area,
and of course, that is what's going to be populated with Stripe's credit card entry functionality.
So let's get started doing that.
So back in my ID, let's go down to the bottom of the terminal page orrego HTML and inside this second
script tag, the first one, of course, is loading the striped bass.
So we have access to it.
I'm going to create a variable.
I shall create a couple of variables.
So I'll create one called card check card and I'll create one called Stripe Stripe.
OK, now the first thing I need to do is to initialize that stripe variable with my publishable key.
I do it like this stripe equals stripe string stripe which is available because we imported that stripe
J.S. on line fifty two in my code and I just put my publishable.
Now a word of caution.
This is my publishable key.
It is not yours.
If you try to use this one, it simply won't work because before I make this course alive, I'm going
to reset my private and publishable test keys.
So this is just to get it working on my end.
You'll have to use your own key there.
Of course.
Just go to your stripe dashboard, copy your publishable key, your test key control of key and put
it where I put it in this line on line 58.
OK, so that sets up my stripe variable, which is now available to me.
So now I'm going to scroll down a bit after my valve function and I'm going to create an anonymous function
which will make use that stripe variable we just created and also the current variable we created.
So I created an anonymous function function and the opening and closing curly brackets.
And inside of that I'm going to create a stripe and its elements.
OK, so I'll create a constant contact elements and that's going to be equal to using the straight variable
we just initialized a moment ago elements.
And I'm also going to create a style that I'll use with that element.
And that's because I don't want to use Stripe's default styling.
I actually want it to match boot straps.
And that's pretty straightforward.
So we'll create another concept which I'll call style, which are better spelled right.
And that's going to be equal to in curly brackets, some success, but it's not pure success, it's
Stripes version of success.
So we're going to override the style and we're going to give it to directive's.
The first one is the fault size.
But you can't use font size.
You have to use font size like that, is it?
I'm going to set that to 16 pixels, which I verified before.
This lecture is pretty much what I want.
And we also want to change the line height of it, line height and again use stripes syntax which will
set to twenty four pixels.
OK, so that's defined.
So now I'll create the card entry.
In other words, we're going to change that div in our form to be an actual formula.
So KO'd.
And that's a variable defined up on line fifty five.
I'm now I'm initializing its value to elements dot create and I'm going to create a card and it has
a few parameters.
And the first one is going to be style, which will set to that variable style we just created a moment
ago, and I still spelled it wrong, so I better fix Stevi out.
And I'm also going to take advantage of another attribute available to me.
Let's hide the postal code.
I want postal code to be available in production.
But for right now, I'm going to set the false just to show you that you can override things in the
elements were created.
So that creates the card variable.
Now let's mount it card dot mount and I'm going to mount it in the div with the idea of card dash element,
which you have to spell right or won't work.
Now I also want to check for errors, so let's check for input errors.
And this is one of the really nice things about using Stripe is we can do that as the card is being
typed in.
So we'll add an event listener card add event listener and I want to add it on change.
Whenever that element changes, I'll fire this function passing at an event.
And what I want to have happen is let's first of all get a place to display errors.
What we already have that we scroll up here, we created this input right here on line thirty eight
in my code and that is that has the ID of Kurdish errors.
So we'll use that.
So we'll get a reference to it for display error, which is just the name I'm choosing.
That's going to be equal to document get element for ID and it's ID, which is card errors.
So now I have a reference to it, so I'll just fire it.
If, if there is an error event, the error that exists that is populated, do something otherwise,
else do something else.
And what I want to do, if there's an error is first of all I will say display error, dot class list,
class list.
I'm going to remove something that might be there, which is not Daschner, which comes straight out
of bootstrap and that hides things.
And I also want to populate that div with the error message.
So display or dot text content.
It's going to be equal to the error message, event, error message, and that's what we're getting
from strike.
Otherwise there if there is no error, we want to remove one, if there is one.
So we'll just hide that.
So display our classless ad does not and will set its error or the message content to be an empty strength
display or text content equals an empty string.
OK, now we need to come down here to the very end of this anonymous function and of course, put those
opening and closing parentheses.
And I think we have everything right here.
So let's find out.
Make sure that air is running.
It is.
And I'm getting an air behind the address already in use.
That happens once in a while.
So I'll stop air start there and there it goes.
So let's go back to our Web browser and see if we got anything wrong.
Reload and there's something wrong with our console.
Let's clear this, reload it and see if we have any typos.
And we do so missing a closing bracket after property, this virtual terminal.
Eighty seven.
Let's see if it'll show it to me.
One eighty seven right there.
So something wrong in my style definition.
So let's go fix that.
So we shouldn't be semicolons.
Let's get rid of that.
And here, that looks better, see if that fixed back over here, clear the console, reload this.
And then we have occurred no good.
Now, you might notice here you get some error messages in your JavaScript console and that's to be
expected in development because we're actually using a non encrypted connection, localhost four thousand
to connect to Stripe's back end, which expects things to come in HD.
So when it goes live, of course, we're going to be serving this over https.
But don't worry about those errors.
That's to be expected at this point.
So I'm going to close this and let's see how it works.
So I'll type in a card number.
Let's try one, two, three, four, five, six seven eight nine zero one, two, and then three more
digits.
And it says your card number is invalid.
Perfect.
Now, I could type a legitimate credit card in there, but I don't want to because that's a really bad
idea to be giving my credit card to the entire planet.
So instead, we'll use one to Stripe's test credit card numbers for two four two four to four to four
to four to four to four to just a bunch of fours and twos.
And now you can see that my focus has already changed to the month.
So let me put zero one and let me put something in the past ninety nine.
And it says, your cards, your cards expiration, your expiration year is invalid.
It's also added to the future.
Twenty nine that's better.
And any three digit security code and then some valid zip code.
Now in development, I really don't want to be entering zip codes all the time and that's a very smart
zip code.
It will change the postal code for Canada or countries that use postal codes or zip code for the US.
So it's very intelligent, but it's also irritating because I kind of remember American postal codes.
So I'm going to go back to my code and I'm going to change this postal code.
False to be true.
OK, let's do that again.
True.
Say that it recompile.
Let's go back to our Web browser, reload this page and now I'll put four to four to four to four to
all the way.
And now when I get in here, I don't have to enter the postal code.
Now, in production, you always want to have that postal code check, of course, but in development,
it's fine to leave it turned off.
OK, so we have our credit card displaying properly and it's almost time to start trying to run a test
transaction to fire off an actual amount and so forth.
We have a little bit of work to do yet.
We want to put some client side JavaScript validation on the form to make sure we have an amount, that
we have a cardholder's name and a valid email address.
But we'll take care of that and get started on the next steps in the next lecture.