WEBVTT 00:00.020 --> 00:00.230 Okay. 00:00.260 --> 00:05.660 Our last task for this particular section is to test our new webhook that we have now created. 00:05.660 --> 00:09.020 And in order to do that, well, how do we do that? 00:09.020 --> 00:12.650 Because stripe is a service out there on the internet. 00:12.680 --> 00:19.760 Our application is an application running on our local developer machine on localhost, which means 00:19.760 --> 00:25.520 stripe cannot access our local developer machine unless we did some significant routing jiggery pokery. 00:25.520 --> 00:26.780 But we're not going to do that. 00:26.780 --> 00:30.110 But stripe do provide a way that we can test this. 00:30.110 --> 00:38.300 And if we go back to stripe itself and let's go to inside the more section and in fact not the more 00:38.300 --> 00:40.220 section, this does change sometimes. 00:40.220 --> 00:44.570 So we need to go to our developer section on the bottom left hand side. 00:44.570 --> 00:51.740 At the time of recording it could change, but do hunt around for a link that takes you to developers, 00:51.740 --> 00:57.530 and then we can get to the webhooks section and I'll just turn off their advert for whatever that is. 00:57.560 --> 01:01.130 And inside here we're going to create an event destination. 01:01.130 --> 01:07.500 And this is to automatically trigger business workflows in our application to response to events sent 01:07.500 --> 01:11.790 from stripe, so we can send stripe events to webhook endpoints. 01:11.820 --> 01:12.930 And that's what we're going to do. 01:12.930 --> 01:15.630 So we'll create an event destination. 01:15.630 --> 01:19.500 And we've got an option to test in a local environment. 01:19.680 --> 01:24.450 Now in order to do this we have to download the stripe CLI. 01:24.480 --> 01:26.880 So let's click this link and see what we need to do. 01:26.880 --> 01:31.410 Because this is going to be different between Mac, Windows and Linux. 01:31.410 --> 01:34.950 But there is options for all three operating systems. 01:34.950 --> 01:38.610 So we need to install the stripe CLI. 01:38.640 --> 01:44.340 Now if you can use homebrew on your computer, if you're on a mac or Linux then this would be an option. 01:44.340 --> 01:47.040 If you're on windows, Sqoop is an option. 01:47.040 --> 01:54.090 And if you're on windows as well, then there's an option to install this directly without Sqoop. 01:54.090 --> 01:58.050 But if you're on Linux or Mac, I'd suggest using homebrew if you've got that installed already. 01:58.050 --> 02:01.020 Very simple to just use brew install to get this. 02:01.170 --> 02:06.140 And if you're on windows, then Skype is probably the easiest way to get this installed. 02:06.140 --> 02:11.600 Once we have this installed, then we can log into the stripe CLI and that's what we'll do. 02:11.600 --> 02:13.760 And do I have this available? 02:13.760 --> 02:16.430 Well I'm just going to copy this link for homebrew. 02:16.460 --> 02:20.990 Go back to VSCode and go to my terminal. 02:21.020 --> 02:22.790 The app is asking to restart. 02:22.790 --> 02:30.500 I'm going to say yes to this anyway, but then I'm going to go to a spare tab and I'm going to install 02:30.530 --> 02:37.100 because I do have homebrew installed on my computer, the stripe CLI, and that will probably take a 02:37.100 --> 02:37.730 moment or two. 02:37.760 --> 02:42.170 So I'll pause the video and then I'll come back once this is available for use. 02:42.200 --> 02:42.740 Okay. 02:42.770 --> 02:46.190 So that did take a little while, but now that is available to install. 02:46.190 --> 02:51.770 And if we go back to the documentation, our next step is to log in and authenticate with our stripe 02:51.800 --> 02:56.120 user account to generate a set of restricted keys. 02:56.120 --> 02:58.730 So we'll use the stripe login next. 02:58.730 --> 03:00.380 And I'll use this command. 03:00.380 --> 03:08.760 And what this typically does is open up stripe in the browser, and I'll do that and log in in a separate 03:08.760 --> 03:09.570 window. 03:10.350 --> 03:16.920 And once you've gone through their authentication process, then you'll be logged in and you'll see 03:16.920 --> 03:18.570 something like this. 03:18.570 --> 03:21.960 And we get 90 days after which this key will expire. 03:21.960 --> 03:24.300 And we need to re-authenticate. 03:24.300 --> 03:31.050 So once we have authenticated then we can listen for stripe events using the stripe CLI. 03:31.080 --> 03:37.440 Because obviously stripe on the internet cannot reach our API server running locally on our developer 03:37.440 --> 03:38.010 machine. 03:38.010 --> 03:42.750 So in order to listen to events we use stripe listen. 03:42.780 --> 03:47.040 And then we can forward events to our API server. 03:47.040 --> 03:52.470 So we use the dash F switch to forward any events and tell it where we want them to go. 03:52.470 --> 04:02.040 So it's going to be https forward slash forward slash localhost colon 5001 forward slash API forward 04:02.040 --> 04:03.550 slash Payments. 04:03.610 --> 04:05.890 Forward slash webhook. 04:05.920 --> 04:14.320 And obviously this needs to be accurate if you want this to work and needs to exactly match the endpoint 04:14.320 --> 04:15.460 address. 04:15.520 --> 04:19.870 And then we can specify which events we're interested in listening to. 04:19.900 --> 04:22.630 Now there's two events that we're interested in here. 04:22.660 --> 04:24.340 So we specify dash e. 04:25.060 --> 04:32.710 And the first event is payment underscore intent period succeeded. 04:33.850 --> 04:35.260 And then we add a comma. 04:35.290 --> 04:40.150 And then we can specify the second event we're interested in which is going to be payment underscore 04:40.180 --> 04:46.450 intent period payments underscore failed. 04:46.480 --> 04:51.610 Now I believe you'll get an error if you've got a typo in the event. 04:51.610 --> 04:57.970 And let me just test that theory, I'll make a very obvious spelling mistake here and see if I do get 04:58.000 --> 05:00.880 notified that this is not a genuine event. 05:01.720 --> 05:03.400 And sure we do. 05:03.530 --> 05:08.690 So it tells us which one is not a valid event, but it still starts up. 05:08.690 --> 05:12.410 And also what it gives us is our webhook sign in secret. 05:12.410 --> 05:18.530 And that's what we'll need to configure as well in our application, so that we can trust stripe when 05:18.530 --> 05:21.350 it comes to receiving that webhook event. 05:21.350 --> 05:22.280 So I'm just going to stop this. 05:22.280 --> 05:29.060 I just wanted to confirm that we do get information about an incorrect event that we're trying to listen 05:29.060 --> 05:29.600 to. 05:29.630 --> 05:33.920 So I'll put it in correctly this time and press return. 05:33.920 --> 05:36.410 And now this is listening. 05:36.410 --> 05:40.790 So the webhook secret doesn't change between stopping and restarting this. 05:40.790 --> 05:43.340 So it's pretty consistent on what we use here. 05:43.340 --> 05:47.300 So I can copy this webhook sign in secret into my clipboard. 05:47.300 --> 05:51.530 And we can go to our app Settings development. 05:51.680 --> 06:02.270 Jason and I can put in here the secrets and paste in the key. 06:02.570 --> 06:08.710 And obviously this is exactly what we specified in our payments controller. 06:08.950 --> 06:18.280 And if we take a look at the stripe or construct stripe event then we've got stripe settings colon w 06:18.280 --> 06:19.480 h secret layer. 06:19.510 --> 06:25.840 What this should all mean is that when I create a new order after the payment has been confirmed, then 06:25.840 --> 06:28.630 stripe should send us the event. 06:28.630 --> 06:31.030 And let's test that theory. 06:31.060 --> 06:38.380 So I'll just go back to the developers tab and I'll click done because we've got the stripe listener 06:38.380 --> 06:40.180 and we're forwarding it to. 06:40.210 --> 06:42.340 So let's go back to our application. 06:42.370 --> 06:44.500 I'll close the spare tab I had open for this. 06:44.500 --> 06:48.130 We'll do this properly I'll go back to the catalog. 06:48.130 --> 06:50.020 I've got one item in my basket just now. 06:50.020 --> 06:52.840 Let's add something else to the cart as well. 06:52.870 --> 06:54.310 I'll click on the baskets. 06:54.310 --> 06:56.020 I'll click on checkout. 06:57.940 --> 06:59.590 I'll keep the same address. 06:59.590 --> 07:00.610 Click next. 07:00.610 --> 07:08.240 Add the card number of 42, 42, 42, 42, 42, 42 and one to some date in the future. 07:08.240 --> 07:09.500 And then one, two, three. 07:09.500 --> 07:17.840 I'll click next and then I'll pay, and I should get redirected to the checkout success page. 07:17.840 --> 07:21.170 And I do, and I see the amount there. 07:21.290 --> 07:27.320 If I then go and view my order, what I would expect to see is that payment has been received. 07:27.320 --> 07:31.700 But first of all, before I do that, let's just double check the logs, because what we should see 07:31.730 --> 07:37.310 inside the logs is the event being received and then forwarded to our webhook. 07:37.310 --> 07:41.750 And we can see that we've got a 200 back from our webhook, a 200. 07:41.780 --> 07:42.110 Okay. 07:42.140 --> 07:45.890 That means that it has processed this specific event. 07:45.920 --> 07:52.730 And if we go back and check our browser and then view this order, then we can see that the payment 07:52.760 --> 07:54.650 has been received. 07:54.680 --> 07:59.270 So all of our ordering functionality appears to be working. 07:59.270 --> 08:04.400 Let's see what happens if I do not succeed in the payment. 08:04.400 --> 08:06.250 So I'll just go back to the catalog. 08:06.790 --> 08:09.070 I'll add an item into the cart. 08:09.100 --> 08:10.510 I'll go to the basket. 08:10.540 --> 08:12.190 I'll go to checkout. 08:14.020 --> 08:15.460 And I'll click next. 08:15.460 --> 08:18.010 And I'll pick a failing card this time. 08:18.010 --> 08:26.860 And I'll go back to the test cards and pick a declined payment card and insufficient funds, and go 08:26.860 --> 08:29.830 back to the store and paste this in. 08:29.830 --> 08:32.620 And once again, some random dates in the future. 08:32.620 --> 08:37.630 And the security code, I'll click next and click pay. 08:37.660 --> 08:39.430 So our payment goes to stripe. 08:39.430 --> 08:41.680 But we do get a declined payment. 08:41.680 --> 08:48.370 And if I go and take a look at my orders then what we should see is that we've got the payment failed 08:48.370 --> 08:52.660 inside the orders there, which is what we would expect to see. 08:52.720 --> 08:56.680 And let's go back to the basket and the checkout. 08:56.680 --> 09:04.000 I just want to make sure that we can resubmit this order with a valid card and ensure that we get the 09:04.000 --> 09:06.040 payment received so it gets updated. 09:06.040 --> 09:12.700 So I'll click next and say 42, 42, 42 all the 40 twos, which we know is a valid card. 09:12.700 --> 09:19.450 And then click next and then click pay and we go back to stripe. 09:19.450 --> 09:23.020 And this time we get the order correctly created. 09:23.020 --> 09:29.470 And if we view the order then we'll see that we've got the updated status of payment received. 09:29.470 --> 09:37.150 And if I go back to all of my orders then ah, that's been cashed of course because of RTK query. 09:37.180 --> 09:39.670 So that is something that we could correct. 09:39.670 --> 09:43.720 Because when we receive our orders, we're obviously receiving this from cash. 09:43.720 --> 09:47.530 And that could confuse the user. 09:47.530 --> 09:51.310 But obviously if we refresh the page then we're not going to receive it from cash. 09:51.310 --> 09:54.550 And we get the payment received inside there. 09:54.550 --> 10:01.420 So I'll let the facts that that's staying in cash to my to do list for something to consider looking 10:01.420 --> 10:09.810 at before we wrap up this course, but please do feel free to see if you can get this updating inside 10:09.810 --> 10:12.030 the cache based on what we've done previously. 10:12.030 --> 10:13.500 I'll leave that up to you for now. 10:13.530 --> 10:18.180 I've added this to my to do list because it's not something that I considered before I started recording 10:18.180 --> 10:21.360 this lesson, but it is on my to do list now. 10:21.360 --> 10:25.950 And that is the final action of this section. 10:25.950 --> 10:31.110 I'm just going to quickly check the console, make sure there's nothing unexpected hanging around in 10:31.110 --> 10:31.710 the console. 10:31.710 --> 10:33.630 From what we've done here, that looks fine. 10:33.660 --> 10:38.580 Still ignoring this stuff on the right hand side from stripe that I cannot do anything about. 10:38.730 --> 10:41.610 And we're going to consider this the end of section. 10:41.610 --> 10:44.460 So once again we've reached the milestone. 10:44.700 --> 10:46.290 I've still got my stripe CLI running. 10:46.290 --> 10:47.220 I can leave this running. 10:47.220 --> 10:48.390 It doesn't do any harm. 10:48.390 --> 10:57.240 And I'm going to go to the version control tab and stage the changes and give this a commit message 10:57.240 --> 11:00.930 of end of section 11. 11:01.530 --> 11:05.790 And I'm going to commit and sync the changes up with GitHub. 11:05.820 --> 11:08.310 And we'll wrap up with a summary.