Okay, now that we have our confirmed payment method in place, it's time to go ahead and test the fruits
of our labor and see if we can actually make payments through to stripe.
So let's go back to our browser.
And I've got a basket with one item in just these gloves.
And if I click on checkout we load the checkout and I won't change the address.
So I'll just click on next.
And then we can put in a card number.
I'll come back to this Google Pay thing soon.
I just want to make sure the basic card functionality is working.
First of all, and I've said that stripe has a number of test cards I've been using 42, 42, etc. and
let's go to the stripe docs.
In fact, let's just look for stripe test cards in Google, and this will give us the link directly
to the testing cards.
And if we scroll down in here, we can test cards by brand, cards by country, we can test declined
payments, and we can also test 3D secure authentication as well.
And if we take a look at cards by brand, then this is the one that I have been using.
Just the visa card all 42 seconds.
But we have a variety of different cards that we can test this with.
And the CVC for test cards is any three digits and the date is any future date as well.
So let's just take a look at what should be a successful payment, the visa card, and what we would
like to see if we go back to our transactions.
Is this payment being confirmed?
The one for $23 in my case.
So back to the application and let's just paste in the card I copied into my clipboard.
The expiration date is any date in the future and the security code is any digits.
And I'll click next and we get taken to our billing and delivery information.
And if I click pay we should see the spinner engage.
And we should see payment successful.
And if we go back to our transactions in stripe and I just refresh this page.
Then we see the payment has succeeded and we see Bob Bob as the customer.
So the system works.
What we should also see inside here is that our shopping basket is now empty.
If we go and check the cookies inside here and we go to our application, then we no longer have the
basket ID cookie.
And I see lots of warnings here.
If I go to the console then it looks like we've got a warning here.
I'm not quite sure what this one is.
Frame not initialized.
We are using stripe JavaScript, so it's possible that their JavaScript spits out warnings into our
Chrome developer tools that we cannot do anything about.
And I'll just refresh the page anyway, just to clear those warnings and okay, let's go through and
try a different card.
So I'll go back to the catalog and I'll just add a few items into the cart And I'll go to the basket
and I'll click checkout.
And next we'll test a failing card.
So we'll click on next.
And I'll go back to the test cards.
And let's pick a declined payments card.
And let's take a look for insufficient funds decline I'll just copy this card number into my clipboard.
Go back to our application, paste in the card number, give it an expiration date in the future, and
any random digits as the security code.
I'll click next and we get the billing and delivery information along with the summary of our order.
And I'll click pay.
And what we get is our card has insufficient funds.
Try a different card now.
I was hoping to be redirected back to the payment.
And we do actually need to go back to the previous step as well, because if I do try and pay again,
I've already used that confirmation token once.
So we get a different error telling us that the confirmation token has already been used to confirm
a previous payment intent, so we don't want them to be able to click on this button again until they
have gone back.
And then if they click next again after making an update to their card, or they just want to retry,
then if we pay again this time, then we get the same correct error.
The card has insufficient funds, so I suspect the reason for this particular issue is this button is
also forcing us onto the next step.
When the payment fails, then because of the way we've configured the handle, next we're going forward
and then back again because of the nature of just clicking on this button in the first place, even
if it does fail.
What I mean by this if I come up to the handle next, then we are setting the active step here, regardless
of whether or not something works or not.
So to solve this minor issue, then we can also check to make sure before we move forward, the step
that the active step is actually less than two.
So we'll add another check inside here.
And we'll check to make sure that the active step is less than two.
If it is, then we can go forward a step, so that should resolve the problem.
I'll just go back to the browser and test that theory.
I'll click on next.
I'll paste in the same card number the same expiration date.
Not that that matters.
I'll click next and then I'll click pay.
And what should happen this time is we get taken back to our payment step.
We've still got a card details.
And we can either change the card correct whatever the issue is with possibly the expiration dates or
the security code, and then go and try and make the payment again.
Let's test a different card.
Let's try out that 3D secure authentication cards.
And this is really down to the bank.
So different banks have different kinds of authentication for 3D secure.
And what typically happens is you'll see a pop up asking you to confirm something on your phone, maybe
confirm a text message, maybe enter a code.
Different banks use different systems, but for us in stripe doesn't really change.
So let's try the always authenticate card and I'll copy this one into my clipboard.
Go back to the application and I'll update the card to that card number.
I'll click next and I'll pay.
And what should happen is we see a pop up telling us that this is a test 3D secure, blah blah, blah.
Different banks use different systems like I mentioned, so I'll just try the fail option for the time
being, and we should get sent back and we get the unable to authenticate your payment method.
That's fine.
If I click next again and I pay again, we should get the pop up again.
But this time I'll select complete and we complete our payment and we get taken to the payment.
Successful page basket is emptied and we can go shopping again, etc. and that's all well and good,
but our API server Well, that doesn't know anything about this payment taking place, because there's
no communication at this stage between stripe and our API server.
So we've still got some work to do.
This is not the end of our payment journey.
We've still got a bit more work to configure it so that after we have made a payment, there's communication
between stripe and our API server.
But we are making progress.
Okay, I've just come back from the future because I forgot to mention how to disable Google Pay inside
the card, but also, weirdly, for reasons that I cannot explain, it's just automatically stopped
displaying the Google Pay link in my checkout.
I don't know why this happened.
I didn't change anything to make that happen.
It just simply stopped happening.
So maybe you never saw Google Pay there in the first place.
And maybe that was just some weirdness on my side that I attributed to something that changed on stripe.
Anyway, there's a couple of things that I want to demonstrate here.
First of all, how we set the payment options in stripe.
So if we go to the stripe dashboard first and we take a look at the settings at the top here, not the
developer settings, just settings in general.
And we click on settings.
And then we take a look at product settings and payments.
Then inside here we have the different payment methods that we can support.
And if we check the payment methods then we have all of these different options.
Now in my case and it was already the case, Google Pay was not enabled.
And I didn't change this.
I didn't turn it off.
It just it was already there.
Apple pay is active, but that one wasn't displaying on my checkout.
But then Apple Pay is not supported in the country that I'm currently in, so I wouldn't necessarily
expect it to be there.
What you can see is a preview of how things look in particular countries for different payment options.
So for example, if I was in the United States, Apple Pay would be an option because that is enabled
in my payment methods, but it doesn't show up in the country I'm in because.
Apple pay is not supported.
So do come in here and take a look at the setup.
See what you wish to enable.
See what you wish to disable.
I also just want to demonstrate from a code perspective because I was seeing the Google pay link inside
there.
I just want to demonstrate how we can turn that off as well, and we can effectively turn off elements
inside wallets.
And if I go back to the code and let's open up the checkout step, and please bear in mind I've come
from the future.
You may see some code inside here that you have not seen yet.
Please ignore it and just focus on the very specific parts that I'm demonstrating here.
Ignore everything else is what I'm saying.
We're just going to focus on the payment element here so we can provide this with some options.
And I'll just specify options below the onchange here.
And inside curly brackets and more curly brackets.
We've got an option for wallets.
Inside here I'll open curly brackets and then we can specify Apple Pay.
We can set this to never.
And I'll also specify Google Pay.
And I'll also set this to never as well.
And even though that's going to make no difference to my checkout experience as it stands, that's how
you would need to do it.
If you want to turn it off on yours so you won't see me refer to this code again.
Because like I said, I forgot to add this.
So in future lessons you won't see this in place.
Don't worry about that.
It's just how we do.
Turn it off.
What you can do, what advantage this does give us though, if I go back to the checkout, is if I open
up the console Chrome DevTools, then you can remove a filter.
Now because the Apple one is not going to show up inside here.
So you'll have the just the card payments.
But because Apple is no longer present or part of this, then you can remove that filter and just go
down to cookie and icons in the filter here as the things you cannot do anything about.
But now we've just got a simple card payment checkout.
So I just wanted to mention that I did forgot to include it in the original lesson.
Only noticed I forgot when I was editing the video.
And now we'll continue with the original lesson, which is coming to the end of this particular section.
So please feel free to experiment with various different card numbers.
I feel I've done enough testing to give me confidence that this system is indeed working, and this
is another milestone that we've reached.
So we've come to the end of this section.
So let's head back to VS code and I'll close this stuff down.
We'll go to our version control.
I'll stage the changes and I'll give it a commit message of end of section ten.
And I'll click commit.
And I'll sync these changes up with GitHub.
And we'll wrap up with a summary.