WEBVTT 00:00.140 --> 00:05.690 Okay, now that we have our confirmed payment method in place, it's time to go ahead and test the fruits 00:05.690 --> 00:10.430 of our labor and see if we can actually make payments through to stripe. 00:10.430 --> 00:12.440 So let's go back to our browser. 00:12.440 --> 00:18.320 And I've got a basket with one item in just these gloves. 00:18.320 --> 00:23.480 And if I click on checkout we load the checkout and I won't change the address. 00:23.480 --> 00:25.100 So I'll just click on next. 00:25.220 --> 00:27.650 And then we can put in a card number. 00:27.680 --> 00:29.750 I'll come back to this Google Pay thing soon. 00:29.750 --> 00:33.200 I just want to make sure the basic card functionality is working. 00:33.200 --> 00:40.430 First of all, and I've said that stripe has a number of test cards I've been using 42, 42, etc. and 00:40.430 --> 00:42.320 let's go to the stripe docs. 00:42.320 --> 00:49.010 In fact, let's just look for stripe test cards in Google, and this will give us the link directly 00:49.010 --> 00:50.750 to the testing cards. 00:50.750 --> 00:56.240 And if we scroll down in here, we can test cards by brand, cards by country, we can test declined 00:56.270 --> 01:00.950 payments, and we can also test 3D secure authentication as well. 01:00.980 --> 01:04.910 And if we take a look at cards by brand, then this is the one that I have been using. 01:04.910 --> 01:07.130 Just the visa card all 42 seconds. 01:07.730 --> 01:11.360 But we have a variety of different cards that we can test this with. 01:11.360 --> 01:17.330 And the CVC for test cards is any three digits and the date is any future date as well. 01:17.360 --> 01:23.930 So let's just take a look at what should be a successful payment, the visa card, and what we would 01:23.930 --> 01:27.050 like to see if we go back to our transactions. 01:27.110 --> 01:30.290 Is this payment being confirmed? 01:30.290 --> 01:32.900 The one for $23 in my case. 01:32.900 --> 01:40.100 So back to the application and let's just paste in the card I copied into my clipboard. 01:40.130 --> 01:45.290 The expiration date is any date in the future and the security code is any digits. 01:45.290 --> 01:50.480 And I'll click next and we get taken to our billing and delivery information. 01:50.480 --> 01:53.840 And if I click pay we should see the spinner engage. 01:53.840 --> 01:56.120 And we should see payment successful. 01:56.270 --> 02:00.940 And if we go back to our transactions in stripe and I just refresh this page. 02:01.870 --> 02:07.810 Then we see the payment has succeeded and we see Bob Bob as the customer. 02:07.810 --> 02:10.330 So the system works. 02:10.540 --> 02:15.310 What we should also see inside here is that our shopping basket is now empty. 02:15.340 --> 02:21.280 If we go and check the cookies inside here and we go to our application, then we no longer have the 02:21.280 --> 02:23.140 basket ID cookie. 02:23.500 --> 02:25.450 And I see lots of warnings here. 02:25.450 --> 02:29.530 If I go to the console then it looks like we've got a warning here. 02:29.530 --> 02:31.720 I'm not quite sure what this one is. 02:31.720 --> 02:33.190 Frame not initialized. 02:33.190 --> 02:39.730 We are using stripe JavaScript, so it's possible that their JavaScript spits out warnings into our 02:39.730 --> 02:43.150 Chrome developer tools that we cannot do anything about. 02:43.570 --> 02:50.770 And I'll just refresh the page anyway, just to clear those warnings and okay, let's go through and 02:50.770 --> 02:51.670 try a different card. 02:51.670 --> 02:59.860 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 02:59.860 --> 03:01.840 and I'll click checkout. 03:02.080 --> 03:04.720 And next we'll test a failing card. 03:04.720 --> 03:06.010 So we'll click on next. 03:06.010 --> 03:07.840 And I'll go back to the test cards. 03:07.840 --> 03:10.630 And let's pick a declined payments card. 03:10.630 --> 03:17.620 And let's take a look for insufficient funds decline I'll just copy this card number into my clipboard. 03:17.620 --> 03:24.760 Go back to our application, paste in the card number, give it an expiration date in the future, and 03:24.760 --> 03:27.070 any random digits as the security code. 03:27.070 --> 03:33.670 I'll click next and we get the billing and delivery information along with the summary of our order. 03:33.670 --> 03:35.350 And I'll click pay. 03:35.680 --> 03:39.460 And what we get is our card has insufficient funds. 03:39.460 --> 03:42.370 Try a different card now. 03:42.370 --> 03:45.610 I was hoping to be redirected back to the payment. 03:45.610 --> 03:50.500 And we do actually need to go back to the previous step as well, because if I do try and pay again, 03:50.530 --> 03:53.440 I've already used that confirmation token once. 03:53.440 --> 03:59.290 So we get a different error telling us that the confirmation token has already been used to confirm 03:59.290 --> 04:03.910 a previous payment intent, so we don't want them to be able to click on this button again until they 04:03.910 --> 04:05.230 have gone back. 04:05.230 --> 04:10.180 And then if they click next again after making an update to their card, or they just want to retry, 04:10.210 --> 04:14.530 then if we pay again this time, then we get the same correct error. 04:14.560 --> 04:19.900 The card has insufficient funds, so I suspect the reason for this particular issue is this button is 04:19.900 --> 04:22.240 also forcing us onto the next step. 04:22.480 --> 04:27.820 When the payment fails, then because of the way we've configured the handle, next we're going forward 04:27.820 --> 04:32.110 and then back again because of the nature of just clicking on this button in the first place, even 04:32.110 --> 04:33.220 if it does fail. 04:33.220 --> 04:40.300 What I mean by this if I come up to the handle next, then we are setting the active step here, regardless 04:40.300 --> 04:42.910 of whether or not something works or not. 04:42.910 --> 04:49.930 So to solve this minor issue, then we can also check to make sure before we move forward, the step 04:49.930 --> 04:52.600 that the active step is actually less than two. 04:52.630 --> 04:54.460 So we'll add another check inside here. 04:54.460 --> 04:58.510 And we'll check to make sure that the active step is less than two. 04:58.540 --> 05:03.010 If it is, then we can go forward a step, so that should resolve the problem. 05:03.010 --> 05:05.440 I'll just go back to the browser and test that theory. 05:05.440 --> 05:06.760 I'll click on next. 05:06.790 --> 05:10.150 I'll paste in the same card number the same expiration date. 05:10.180 --> 05:11.290 Not that that matters. 05:11.290 --> 05:14.590 I'll click next and then I'll click pay. 05:14.590 --> 05:17.920 And what should happen this time is we get taken back to our payment step. 05:17.920 --> 05:19.480 We've still got a card details. 05:19.480 --> 05:26.650 And we can either change the card correct whatever the issue is with possibly the expiration dates or 05:26.650 --> 05:30.340 the security code, and then go and try and make the payment again. 05:30.340 --> 05:31.720 Let's test a different card. 05:31.720 --> 05:36.070 Let's try out that 3D secure authentication cards. 05:36.070 --> 05:38.470 And this is really down to the bank. 05:38.470 --> 05:43.630 So different banks have different kinds of authentication for 3D secure. 05:43.840 --> 05:50.950 And what typically happens is you'll see a pop up asking you to confirm something on your phone, maybe 05:50.950 --> 05:53.860 confirm a text message, maybe enter a code. 05:53.860 --> 05:59.110 Different banks use different systems, but for us in stripe doesn't really change. 05:59.110 --> 06:04.060 So let's try the always authenticate card and I'll copy this one into my clipboard. 06:04.090 --> 06:09.910 Go back to the application and I'll update the card to that card number. 06:09.910 --> 06:14.260 I'll click next and I'll pay. 06:14.290 --> 06:21.700 And what should happen is we see a pop up telling us that this is a test 3D secure, blah blah, blah. 06:21.730 --> 06:27.160 Different banks use different systems like I mentioned, so I'll just try the fail option for the time 06:27.190 --> 06:33.340 being, and we should get sent back and we get the unable to authenticate your payment method. 06:33.340 --> 06:34.150 That's fine. 06:34.150 --> 06:39.490 If I click next again and I pay again, we should get the pop up again. 06:39.490 --> 06:45.280 But this time I'll select complete and we complete our payment and we get taken to the payment. 06:45.280 --> 06:52.180 Successful page basket is emptied and we can go shopping again, etc. and that's all well and good, 06:52.210 --> 06:57.030 but our API server Well, that doesn't know anything about this payment taking place, because there's 06:57.030 --> 07:00.750 no communication at this stage between stripe and our API server. 07:00.750 --> 07:01.890 So we've still got some work to do. 07:01.890 --> 07:04.140 This is not the end of our payment journey. 07:04.170 --> 07:09.420 We've still got a bit more work to configure it so that after we have made a payment, there's communication 07:09.420 --> 07:11.580 between stripe and our API server. 07:11.580 --> 07:13.770 But we are making progress. 07:14.100 --> 07:22.020 Okay, I've just come back from the future because I forgot to mention how to disable Google Pay inside 07:22.020 --> 07:28.410 the card, but also, weirdly, for reasons that I cannot explain, it's just automatically stopped 07:28.410 --> 07:31.320 displaying the Google Pay link in my checkout. 07:31.350 --> 07:32.940 I don't know why this happened. 07:32.970 --> 07:35.520 I didn't change anything to make that happen. 07:35.520 --> 07:37.470 It just simply stopped happening. 07:37.470 --> 07:40.620 So maybe you never saw Google Pay there in the first place. 07:40.620 --> 07:45.960 And maybe that was just some weirdness on my side that I attributed to something that changed on stripe. 07:45.960 --> 07:49.140 Anyway, there's a couple of things that I want to demonstrate here. 07:49.140 --> 07:52.950 First of all, how we set the payment options in stripe. 07:52.950 --> 08:00.840 So if we go to the stripe dashboard first and we take a look at the settings at the top here, not the 08:00.840 --> 08:03.600 developer settings, just settings in general. 08:03.600 --> 08:05.820 And we click on settings. 08:06.060 --> 08:09.630 And then we take a look at product settings and payments. 08:09.630 --> 08:13.230 Then inside here we have the different payment methods that we can support. 08:13.260 --> 08:17.550 And if we check the payment methods then we have all of these different options. 08:17.550 --> 08:22.620 Now in my case and it was already the case, Google Pay was not enabled. 08:22.740 --> 08:24.150 And I didn't change this. 08:24.150 --> 08:25.200 I didn't turn it off. 08:25.200 --> 08:27.180 It just it was already there. 08:27.210 --> 08:30.930 Apple pay is active, but that one wasn't displaying on my checkout. 08:30.930 --> 08:36.060 But then Apple Pay is not supported in the country that I'm currently in, so I wouldn't necessarily 08:36.060 --> 08:37.500 expect it to be there. 08:37.530 --> 08:44.400 What you can see is a preview of how things look in particular countries for different payment options. 08:44.400 --> 08:50.190 So for example, if I was in the United States, Apple Pay would be an option because that is enabled 08:50.190 --> 08:54.060 in my payment methods, but it doesn't show up in the country I'm in because. 08:54.090 --> 08:55.860 Apple pay is not supported. 08:55.920 --> 08:58.950 So do come in here and take a look at the setup. 08:58.980 --> 09:00.270 See what you wish to enable. 09:00.300 --> 09:02.160 See what you wish to disable. 09:02.190 --> 09:07.740 I also just want to demonstrate from a code perspective because I was seeing the Google pay link inside 09:07.740 --> 09:08.310 there. 09:08.340 --> 09:14.640 I just want to demonstrate how we can turn that off as well, and we can effectively turn off elements 09:14.640 --> 09:16.080 inside wallets. 09:16.080 --> 09:22.830 And if I go back to the code and let's open up the checkout step, and please bear in mind I've come 09:22.830 --> 09:23.760 from the future. 09:23.760 --> 09:28.050 You may see some code inside here that you have not seen yet. 09:28.080 --> 09:34.740 Please ignore it and just focus on the very specific parts that I'm demonstrating here. 09:34.740 --> 09:37.170 Ignore everything else is what I'm saying. 09:37.170 --> 09:42.300 We're just going to focus on the payment element here so we can provide this with some options. 09:42.300 --> 09:46.560 And I'll just specify options below the onchange here. 09:46.590 --> 09:49.890 And inside curly brackets and more curly brackets. 09:49.890 --> 09:51.990 We've got an option for wallets. 09:52.020 --> 09:56.370 Inside here I'll open curly brackets and then we can specify Apple Pay. 09:56.400 --> 09:58.080 We can set this to never. 09:58.080 --> 10:00.510 And I'll also specify Google Pay. 10:00.510 --> 10:03.390 And I'll also set this to never as well. 10:03.390 --> 10:10.620 And even though that's going to make no difference to my checkout experience as it stands, that's how 10:10.620 --> 10:11.400 you would need to do it. 10:11.400 --> 10:17.430 If you want to turn it off on yours so you won't see me refer to this code again. 10:17.430 --> 10:20.160 Because like I said, I forgot to add this. 10:20.160 --> 10:23.160 So in future lessons you won't see this in place. 10:23.160 --> 10:24.330 Don't worry about that. 10:24.330 --> 10:25.380 It's just how we do. 10:25.410 --> 10:25.890 Turn it off. 10:25.890 --> 10:33.240 What you can do, what advantage this does give us though, if I go back to the checkout, is if I open 10:33.240 --> 10:39.030 up the console Chrome DevTools, then you can remove a filter. 10:39.060 --> 10:43.980 Now because the Apple one is not going to show up inside here. 10:43.980 --> 10:46.650 So you'll have the just the card payments. 10:46.650 --> 10:52.790 But because Apple is no longer present or part of this, then you can remove that filter and just go 10:52.790 --> 10:57.920 down to cookie and icons in the filter here as the things you cannot do anything about. 10:57.920 --> 11:01.820 But now we've just got a simple card payment checkout. 11:02.060 --> 11:06.290 So I just wanted to mention that I did forgot to include it in the original lesson. 11:06.290 --> 11:09.170 Only noticed I forgot when I was editing the video. 11:09.170 --> 11:14.510 And now we'll continue with the original lesson, which is coming to the end of this particular section. 11:14.570 --> 11:18.410 So please feel free to experiment with various different card numbers. 11:18.410 --> 11:24.320 I feel I've done enough testing to give me confidence that this system is indeed working, and this 11:24.320 --> 11:25.880 is another milestone that we've reached. 11:25.880 --> 11:27.620 So we've come to the end of this section. 11:27.620 --> 11:31.340 So let's head back to VS code and I'll close this stuff down. 11:31.340 --> 11:33.950 We'll go to our version control. 11:34.100 --> 11:41.420 I'll stage the changes and I'll give it a commit message of end of section ten. 11:41.420 --> 11:42.950 And I'll click commit. 11:42.950 --> 11:46.640 And I'll sync these changes up with GitHub. 11:47.060 --> 11:49.250 And we'll wrap up with a summary.