So we've written the code on the front end that's supposed to go and get a payment intent for us and
the payment attempt will be getting doesn't actually charge the credit card.
It is the first instance of payment intent which will change its status throughout the life cycle of
a transaction.
So initially, we're just making sure that everything is valid, that we have a credit card, that we
can charge that credit card and we get an ID back our payment intent ID.
So now we want to actually try charging a credit card and also take care of the situation where we're
charging a card.
But something goes wrong.
Maybe the card doesn't have enough room on it.
So it's being declined, whatever the case may be.
But before we do that, I had a couple of typographical errors, which I often do.
So I'm looking at terminal dot page HTML and I'm looking at line fifty four in my code and that's the
hidden field with the name of payment currency and the idea of payment currency.
I left a letter.
So it's a C in there.
And the second typographical errors a little bit further down.
Right here on request options, I have to have a comma after headers, otherwise I'm going to get a
JavaScript error.
So I made these changes.
Let's make sure that er in fact has reloaded.
It looks like it has.
Let's reload our terminal and I should be able to see that.
Perfect.
OK, so that takes care of those errors.
Now let's Heider terminal and let's get started back down here in the call to fetch.
So in the first part, all we're doing right now is we're getting a response as text.
We're trying to pass it into JSON.
And if we succeed, then we actually write this information to the console.
We get our payment content and write it to the console, and we want to do more than that.
So right here, I'll get rid of this console log data and instead I will call from the strike package.
I'm calling confirm card payment, and that's built right into straight.
And what that's going to do is actually make the transaction for us.
It'll in other words, it will charge the credit card.
So it requires a parameter.
And the first one we're getting back from our data object.
There's something in there called client underscore secret and that is absolutely critical or nothing
will work.
Then we have some things.
We're passing it in curly brackets.
First of all, we're going to pass the card, which in our case is the variable called Kirt.
Second, we're going to pass billing details.
Who is this person?
So a colon.
And then in curly brackets I put in their name and that just comes from my form document get element
by ID and I'm looking for a card holder.
Dasch named.
It's value.
OK, so we call that then after the closing parentheses for the first entry we use, then we're dealing
with JavaScript promises and we're just going to have a function which takes a result while we're getting
back.
And inside of that, we want to make a few tests.
We want to make a few decisions, first of all.
Was there an error?
And in this case, the error isn't a JavaScript error or something like that.
It's actually an error for the card.
So we check for it.
Result error.
If that exists, then the card was declined or something went wrong.
So I'll just put a comment in there.
In most cases, Card declined or something went wrong with the card.
Maybe it's a stolen card, for example.
And in that case, I actually want to show an error and I'm going to call a function that doesn't exist
yet show error and it will exist shortly.
And I'm going to pass that the error message I get back from Stripe, which is just result.
Error message.
OK.
And then I want to show the Pemberton's again, again, a function that doesn't exist, but it will
shortly show Pemberton's plural.
So we'll have to create these two functions in a minute, but we'll get to that in a moment.
And I have to have an error on error or I want to have a JavaScript error.
Now, the other situation, of course, is ELT's.
In this case, I want to check to make sure if LGF result payment intent, make sure we have that
intent.
If that exists at this point, I'm going to write another test.
OK, so I'm going to make sure that I actually have the correct response if result payment, intent,
that status, if that's exactly equal to as you did and you got to spell that right.
You're going to have problems.
This means that we have charged the card,
OK?
And there are things we want to do at this point to start with.
Remember those four hidden fields we have up here, we add a little while ago, I need to populate those
with information because I'm going to be submitting this form at some point and probably saving information
to the database, whatever the case may be.
Let's come back down here and let's actually set the values for those.
So document get element by ID and I'm going to get the element named, first of all, payment method
value.
And that's going to be equal to what we get back from straight result dot payment intent
dot.
And I'm looking for payment, underscore method, underscore types.
It's an array and I'm looking for the first entry in that array.
So index zero.
So let's make sure we spell this.
All right.
Payment method.
Payment method types.
Looks good.
Next document Dockett Element by ID and this time I'm looking for payment intent and we're not storing
the entire payment intent but I do want it to ID.
So value is equal to result payment intent id now the amount.
So I'll just duplicate this line and change this to amount.
And I want result on payment in that amount.
And finally, the currency.
So you are in SeeWhy and this is Currence, you are in SeeWhy, so I set all of those values.
Now I want to hide the Spiner, so I'll just save processing because we already have a reference to
our Spiner processing class list ad.
And I'll add Demon Bootstraps.
Hide this class.
And then I'm going to call a function that doesn't exist yet, we have to write the show error function
and we also have to write the show Pemberton's function and we'll also have to write a show card success
like that.
And at this point, I would submit the form, our actual form that will generate a receipt.
We want to submit that and we want to do something with the information in that form and we'll take
care of that a bit later on.
Right now, let's see if we could actually charge this card.
OK, so down here, the last thing I want to do is in this tri statement right now, we're just logging
in air.
But if something goes wrong, writing to the console isn't very helpful for our end users.
So instead we'll say show card error.
That function we haven't written yet, but we will before too long.
And I'll just put in a generic response, invalid response from Payment Gateway, which is suitable
for our purposes at the moment.
And again, we'll show the PAYBOX show.
Hey, so we have a few functions.
We have to write.
We have to write, first of all, show error, show pay buttons.
And Shoket success, so let's get started doing that and I can just put them right at the top.
They already have a high pay button.
So let's create a show paper, although I think I had an excellent show today, but yes, I did OK.
And in this case, I want to remove Nun from the pay button and I want to add Denon to the processing
center.
We also want to function
show KO'd error.
And it will take a message, some kind of strength, and, of course, what we want to deal with here,
if we go to the very top of our form, is we have this hidden divx with a class of alert, alert, danger
tech center and currently Dinon.
And it has the idea of card messages, and that's what I want to show.
So in the instance where there's an error right here or we have a card error, we need to make sure
that it has the class of alert danger, that it does not have the class of alert success because we'll
also be using that same device to display success messages and we need to remove nut and then said it's
in our text.
So we already have a reference to card messages we made that a couple of years ago, card messages.
And we want to add to its class list, class list and alert that danger, which it might already have.
But we need to make sure and then I'll duplicate this.
We want to remove the class list, the class alert success, and we want to remove Dean on Dash and
on.
And finally, we want to set its inter text card messages.
Dot inter text equals whatever we got as a message when we call this function that show card error.
And we also need to create a function
show card success right there.
And that doesn't take any parameters.
And basically we want to do pretty much the same thing we do here, but just reversing things.
So I copy this and paste it in here and we want to remove alert danger and alert success removed none
and set its message to I'll just say.
Transaction successful.
OK, so we have our high pay button show buttons, show air show cards, success, I think that's it.
Let's come down here, make sure.
So we're calling show card success.
Show pay buttons, show error.
Show error, that should be show card error.
That's better.
And I think that's enough to get this going, so let's make sure everything compiled and er got confused
as it sometimes does, as it says binde address already in use, so I'll just restart er and you should
check that if you're running into problems where things don't seem to be showing up changed on your
webpage, just make sure er didn't get confused because it does sometimes.
Let's go back to a web browser and I'll open the JavaScript console and I'll reload this page.
I don't see any JavaScript errors yet, but there might be some.
So let's just clear the console so we can see what's going on.
And first of all, I'll try to actually make a transaction that fails.
Now, I have opened in my Web browser another tab, and there's a link to this in the course.
Resources for this lecture stripes test your integration page.
And if you scroll down on the page, you'll see this entry testing for specific responses and errors.
And then one I want to use is where the charge is declined.
And here's the credit card number four with a bunch of zeroes ending in a two charges declined with
a card declined.
That's what I want.
So let's go back to our virtual terminal and I'll put it out.
Mountain doesn't matter what it is.
And the cardholder name is Jack and the email is Jack at JD.com.
And I'll put in that credit card number that will always fail.
Four zero zero zero zero zero zero zero zero zero zero zero zero zero zero two with an expiry in the
future, say twenty nine and three three three.
And hopefully this will display the message up here unless we have a typo, which I often do.
So I did get an error card message, but it displayed this so there is a typo card message is not defined
and I know exactly where that is.
So let's go back in to here, our terminal and find card message card messages not to fund virtual terminal
one for.
Let's see if it'll show me that line card message.
I have an E missing in show card error.
So let's go back and fix the.
Shoket error card messages, and that means because I copied and pasted, it's also here, so I'll save
that, make sure that er we compiled it did go back and I'll go to the console, reload this page.
Clear this out and try that again.
So amount one hundred dollars, cardholder name, Jack Carthew, email Jack at Jack dot com and again
for three zeros and four zeros than four zeros than zero zero zero to any date in the future.
So long in the future, but in the future and our CDC.
And let's hope we get the correct error message at the top.
Received unknown parameters, curdling details.
Well, that's my second typo.
As I said, I do this sometimes, so we have the wrong parameters in there.
And that would be here in the val method billing details.
Stupid me, this entire thing has to be wrapped in payment.
Underscore method.
I don't know why I do that.
I tend to do that all the time.
And then I need a closing curly bracket and I need a colon.
And then I just indent all of this and it did rebuild.
Yes, OK, third time's the charm.
Let's go back to our Web browser, reload this page, clear the console, and we'll put in a mountain,
say, ten dollars, Jack, Jack, Jack, dot com.
And then our number.
That should fail every time.
Two zero one twenty nine three three three.
All right, third time's a charm.
My card was declined, that may be the first time in my entire life I have been happy to see that message,
but that's exactly what we wanted.
Now, what happens if the card succeeds?
Let's go back and check our code and make sure that there are no typos in there, because seem to be
making a lot of those today show card error, show pay buttons.
That all looks good.
OK, so it did exactly what it should have declined our card and took us back to this screen with the
charge card button enabled.
And now I should be able to change this to one that always passes for to delete the four to four to
four to four to four to four to four to four two.
And I actually have my stripe test terminal open.
So let's look at that and you can see my gross volume on my test data and make sure your viewing test
data here on the left hand side, it's four hundred dollars and six cents.
So let's go back here to the virtual terminal and try running this transaction for ten dollars and see
if we get everything right.
So I'll clear the console and click the charge card button.
Transaction successful, so it looks like we charge the card, so let's go back to our straight terminal
here, our actual dashboard, and you can see it's now four hundred and ten dollars and six cents that
just went through.
So now we've successfully charged a credit card, which is great.
So we seem to have handled most of the cases.
The next step is to actually submit the form and generate a receipt and display that to the end user.
And we'll take care of that in the next lecture.