1 00:00:00,260 --> 00:00:00,710 All right, guys. 2 00:00:00,710 --> 00:00:04,250 So in the last video, we went over some small fixes, some small bugs. 3 00:00:04,250 --> 00:00:07,220 In this video, I want to address two pretty large bugs. 4 00:00:07,220 --> 00:00:13,370 And you have to realize that when you create a project for a course, it's not like a production project 5 00:00:13,370 --> 00:00:19,280 where it was a business and you're actually using it to make money and so on, because that takes a 6 00:00:19,280 --> 00:00:20,240 lot longer. 7 00:00:20,240 --> 00:00:25,940 You have more people working on it, so you can expect to have bugs in course projects. 8 00:00:25,940 --> 00:00:32,240 But I want to be fully transparent and this is a pretty big one, so I want to address it and show you 9 00:00:32,240 --> 00:00:33,530 guys how to fix it. 10 00:00:33,530 --> 00:00:41,090 So basically, if someone is tech savvy enough the way we have the project now, they could actually 11 00:00:41,090 --> 00:00:45,140 make a request to this order slash pay. 12 00:00:45,140 --> 00:00:51,140 If they knew the correct info to add, they would have to be logged in, so their token would be traced. 13 00:00:51,560 --> 00:00:57,350 But regardless, they, they could be they could be able to get stuff for free. 14 00:00:57,350 --> 00:01:05,430 They could basically just bypass the part where it sets the is paid to true and do it themselves, which 15 00:01:05,459 --> 00:01:07,980 obviously isn't something you want. 16 00:01:08,340 --> 00:01:15,870 So what we're going to do is instead of just marking it after the transaction goes through and then 17 00:01:15,870 --> 00:01:17,010 marking it is paid. 18 00:01:17,010 --> 00:01:24,030 True, we're going to make a separate API call to PayPal to verify that the transaction went through 19 00:01:24,030 --> 00:01:27,450 when it was actually paid for and it was completed. 20 00:01:27,570 --> 00:01:27,960 Okay. 21 00:01:27,960 --> 00:01:32,400 Then we get an access token back and then we can check it with that. 22 00:01:32,850 --> 00:01:36,600 The second issue is the price calculations. 23 00:01:36,600 --> 00:01:41,370 Right now we're calculating the prices for the items, the tax, the shipping. 24 00:01:41,370 --> 00:01:46,020 We're doing it all client side where again, if someone was tech savvy enough, they could actually 25 00:01:46,020 --> 00:01:50,850 change those values to zero and again, get free stuff sent to them. 26 00:01:51,270 --> 00:01:52,710 So we don't want that either. 27 00:01:52,710 --> 00:01:56,100 So what we're going to do is do the calculation on the server side. 28 00:01:56,100 --> 00:02:00,180 So those are the two big bugs that I want to fix. 29 00:02:00,180 --> 00:02:05,820 Now the first thing we're going to do is just add these PayPal environment variables because to make 30 00:02:05,820 --> 00:02:07,770 that API call, we need these. 31 00:02:07,770 --> 00:02:09,150 We need our app secret. 32 00:02:09,180 --> 00:02:15,030 We also need this API URL, which if you go live and you don't want to test anymore, you would just 33 00:02:15,030 --> 00:02:19,230 get rid of sandbox and it would just be m dot paypal.com. 34 00:02:19,230 --> 00:02:21,090 But let's go ahead and grab those. 35 00:02:21,090 --> 00:02:26,550 And by the way, this document, it's in the premium docs at Travis Media.com, but I will include it 36 00:02:26,550 --> 00:02:32,220 on all platforms within the course files as well so that you have it and you can just because I'm mostly 37 00:02:32,220 --> 00:02:36,540 going to copy and paste this stuff now, I don't want to show my dot env file. 38 00:02:36,540 --> 00:02:42,210 So what I'm going to do is just I'm going to copy this and I'm going to put my secret in the variable 39 00:02:42,210 --> 00:02:47,850 and to get the secret you can just go to your PayPal credentials, apps and credentials and just make 40 00:02:47,850 --> 00:02:49,410 sure you copy this. 41 00:02:49,410 --> 00:02:50,880 One is for the Secret. 42 00:02:50,910 --> 00:02:55,200 This one here is for the client ID, So just grab that and paste it in. 43 00:02:55,200 --> 00:02:57,570 I'm just going to do that off camera real quick. 44 00:02:57,780 --> 00:02:58,170 All right. 45 00:02:58,170 --> 00:02:59,130 So I did that. 46 00:02:59,130 --> 00:03:06,360 You're going to want to just restart the server if you're in development, because when you add a new 47 00:03:06,360 --> 00:03:10,740 environment variable, the server has to be restarted for it to take effect. 48 00:03:10,740 --> 00:03:13,860 So now let's go back to. 49 00:03:15,850 --> 00:03:16,210 Let's see. 50 00:03:16,210 --> 00:03:18,640 Let's go back to that, the document there. 51 00:03:19,260 --> 00:03:23,780 And next thing we want to do is make our call to PayPal. 52 00:03:23,790 --> 00:03:29,880 So this code right here is going to go in a file called PayPal JS in our utils folder. 53 00:03:29,880 --> 00:03:35,730 So what I'll do is copy this, create the file, and then I'll just go over it real quick and you can 54 00:03:35,730 --> 00:03:39,540 find this stuff in the PayPal documentation as well. 55 00:03:39,540 --> 00:03:48,330 So we're going to create in back end utils a file called PayPal dot JS and then we're going to paste 56 00:03:48,330 --> 00:03:49,080 that in. 57 00:03:49,080 --> 00:03:51,060 And a lot of this is commenting. 58 00:03:51,060 --> 00:03:55,830 You can see we have three functions and before each function we just have a header telling, telling 59 00:03:55,830 --> 00:04:00,120 us what each parameter is, what it returns and etcetera. 60 00:04:00,120 --> 00:04:07,920 So we bring in dot env because we are using our client ID app secret and API URL. 61 00:04:07,920 --> 00:04:12,360 Now the three functions we have are get PayPal access token. 62 00:04:13,400 --> 00:04:21,050 We have check if new transaction and we have verify PayPal payment. 63 00:04:21,050 --> 00:04:25,490 So the get access token is a helper that's going to be called within this function. 64 00:04:25,490 --> 00:04:32,650 But this is what's going to verify that the product was actually paid for before we mark it as is paid. 65 00:04:32,660 --> 00:04:38,570 So we get the access token with the get PayPal access token function, which is up here. 66 00:04:38,570 --> 00:04:48,620 So basically we create a base 64 hash that includes our PayPal client ID and the PayPal secret. 67 00:04:48,620 --> 00:04:54,500 And then what we do is we're going to make a request to this URL. 68 00:04:54,500 --> 00:05:02,120 So PayPal API, URL, v one, OAuth two token, and in the headers we're going to send authorization 69 00:05:02,120 --> 00:05:03,590 and we're going to send basic. 70 00:05:03,590 --> 00:05:07,190 And then that auth, that hash that we create here. 71 00:05:07,460 --> 00:05:07,790 Okay. 72 00:05:07,790 --> 00:05:13,350 So that will validate the PayPal client ID secret. 73 00:05:13,350 --> 00:05:19,770 And then in the body we just need to add this grant type and set that to client credentials and then 74 00:05:19,770 --> 00:05:20,760 we make our request. 75 00:05:20,760 --> 00:05:26,310 So we're just using fetch here, make a post request, sending the headers in the body, and then if 76 00:05:26,310 --> 00:05:31,260 the response is not okay, we're going to throw an error that says failed to get token. 77 00:05:31,260 --> 00:05:39,600 And if it passes, then we're going to get the data from response dot Json and we're going to return 78 00:05:39,600 --> 00:05:43,380 the access token so that gets returned down here. 79 00:05:44,180 --> 00:05:50,870 That will get put in this variable, then we're going to make a request to check out slash orders slash, 80 00:05:50,870 --> 00:05:58,130 and then the transaction ID because this will take in the transaction ID, And then for the authorization, 81 00:05:58,130 --> 00:06:01,190 we add our access token, our bearer token. 82 00:06:01,190 --> 00:06:04,790 And if that isn't okay, it's going to throw an error. 83 00:06:04,790 --> 00:06:09,980 And then if it is, we're going to get the PayPal data and then we return this verified. 84 00:06:09,980 --> 00:06:13,100 So if it's completed, then verified will be true. 85 00:06:13,100 --> 00:06:14,960 And then we also have the value. 86 00:06:15,380 --> 00:06:15,740 All right. 87 00:06:15,740 --> 00:06:17,420 So we're going to be calling that function. 88 00:06:17,420 --> 00:06:21,560 We're also going to be calling this function check if new transaction. 89 00:06:21,560 --> 00:06:26,630 And what this is going to do is go through the orders in our database and look for that transaction 90 00:06:26,630 --> 00:06:27,080 ID. 91 00:06:27,410 --> 00:06:31,820 If it's there, then we know it's not a new transaction. 92 00:06:31,820 --> 00:06:34,430 So it'll return false here. 93 00:06:34,430 --> 00:06:40,550 If there's none, if the length is zero, then that means it's a new transaction and we can proceed. 94 00:06:40,550 --> 00:06:41,480 So that will return. 95 00:06:41,480 --> 00:06:42,140 True. 96 00:06:42,500 --> 00:06:42,860 All right. 97 00:06:42,890 --> 00:06:45,120 Now we're not calling any of these functions yet. 98 00:06:45,150 --> 00:06:47,040 We're just we're just creating them. 99 00:06:47,040 --> 00:06:49,260 So make sure you save that file. 100 00:06:49,260 --> 00:06:50,670 We can close that up. 101 00:06:50,670 --> 00:06:54,330 And now let's go back to the document. 102 00:06:55,150 --> 00:06:59,490 And this just kind of explains what I just told you, the three different functions. 103 00:06:59,500 --> 00:07:06,040 Now, to calculate the prices on the server, we're going to have a new file in utils called calc prices. 104 00:07:06,040 --> 00:07:09,220 And this is essentially the same thing that we did on the client. 105 00:07:09,220 --> 00:07:13,930 But again, we don't really want to do this on the client because if someone is tech savvy enough, 106 00:07:13,930 --> 00:07:19,710 they can change the values and set prices to whatever they want, set tax to whatever they want. 107 00:07:19,720 --> 00:07:21,130 So let's copy that. 108 00:07:21,130 --> 00:07:31,750 And then in utils, let's create a file called Calc Prices Dot JS, paste that in and basically we're 109 00:07:31,750 --> 00:07:33,370 returning the items price. 110 00:07:33,370 --> 00:07:38,560 So all the items combined together, whatever's in the cart shipping tax and total. 111 00:07:40,630 --> 00:07:41,160 Uh, let's see. 112 00:07:41,170 --> 00:07:43,270 What is this error here? 113 00:07:46,170 --> 00:07:47,280 Did I? 114 00:07:51,910 --> 00:07:53,620 Oh, yeah, I missed that last. 115 00:07:54,790 --> 00:07:55,870 Curly brace. 116 00:07:57,350 --> 00:08:02,210 Okay, so we have calc prices, so we have all of our functions created. 117 00:08:02,210 --> 00:08:04,190 Now we need to implement them. 118 00:08:04,190 --> 00:08:09,560 So let's come down here to use our new functions and where we're going to use them is going to be in 119 00:08:09,560 --> 00:08:13,220 the order controller because that's where all the order stuff happens. 120 00:08:13,220 --> 00:08:17,030 So we're going to bring in our product model because we will need that and then we're going to bring 121 00:08:17,030 --> 00:08:23,030 in calc prices as well as verify PayPal payment and check if new transaction. 122 00:08:23,030 --> 00:08:24,980 So the functions we just created. 123 00:08:24,980 --> 00:08:29,930 So let's go into back end controllers order controller and let's paste that in. 124 00:08:30,660 --> 00:08:34,830 Now, the two functions we're going to be changing are add order items. 125 00:08:34,830 --> 00:08:42,210 And of course, the update order to paid, which right now doesn't do any checks with PayPal. 126 00:08:42,210 --> 00:08:48,360 It just waits for the order to be created, the PayPal to be paid, but not checking it, not verifying 127 00:08:48,360 --> 00:08:49,410 it and then marking it. 128 00:08:49,410 --> 00:08:49,950 True. 129 00:08:49,980 --> 00:08:51,180 Which we don't want. 130 00:08:51,180 --> 00:08:53,880 So let's go back to the document. 131 00:08:55,770 --> 00:08:56,940 And let's see. 132 00:08:56,940 --> 00:09:00,000 So this is going to be the new add order items. 133 00:09:00,000 --> 00:09:02,670 So what I'll do is just grab this. 134 00:09:04,980 --> 00:09:08,700 Again, This document will be in in the course files. 135 00:09:09,460 --> 00:09:11,580 And let's go ahead and paste that in. 136 00:09:11,590 --> 00:09:17,860 So what we're doing different here is now we're not getting the price, the calculated prices from the 137 00:09:17,860 --> 00:09:19,300 body, from the client. 138 00:09:19,300 --> 00:09:26,110 So we took those out and then we're checking if the order items are there and the length is equal to 139 00:09:26,110 --> 00:09:26,560 zero. 140 00:09:26,560 --> 00:09:31,780 If it if that's true, then we're going to send a 400 because there's no order items else. 141 00:09:31,780 --> 00:09:38,170 Then we're going to get the ordered items from the database and we're going to map over the order items 142 00:09:38,170 --> 00:09:42,600 and use the price from our items in the database. 143 00:09:42,610 --> 00:09:43,300 Okay. 144 00:09:43,840 --> 00:09:45,970 So we're not getting them from the client. 145 00:09:45,970 --> 00:09:49,810 We're getting it directly from the database and returning that. 146 00:09:49,810 --> 00:09:56,170 And then down here, we're going to calculate our prices by calling our calc prices function and passing 147 00:09:56,170 --> 00:10:00,790 in the order items, and then we're just destructuring to get those prices. 148 00:10:00,790 --> 00:10:07,540 Then we're going to create the order just like we did before, except now our prices are safe and then 149 00:10:07,540 --> 00:10:15,410 we're setting order items as the user to the logged in user shipping address, payment method, all 150 00:10:15,410 --> 00:10:17,960 that stuff, and then it's going to create the order. 151 00:10:18,260 --> 00:10:19,520 All right, So that's that. 152 00:10:19,520 --> 00:10:22,760 Now for the update to paid. 153 00:10:24,970 --> 00:10:29,320 So let's and this is again, this is just explaining what I just said. 154 00:10:29,960 --> 00:10:32,180 So update order to page function. 155 00:10:32,180 --> 00:10:33,530 We're going to grab that. 156 00:10:35,700 --> 00:10:38,010 And let's go down. 157 00:10:39,280 --> 00:10:41,770 To write here, update or to paid. 158 00:10:41,770 --> 00:10:44,470 And we're going to replace what we have here. 159 00:10:45,230 --> 00:10:53,450 So what this is doing is we're going to call our verify PayPal payment, which makes that separate request 160 00:10:53,450 --> 00:11:01,130 to the PayPal API, gets the token, verifies the payment, and if so, then this verified will be true. 161 00:11:01,190 --> 00:11:01,550 All right. 162 00:11:01,550 --> 00:11:04,570 So if it's not true, we're going to pay and we're going to send an error. 163 00:11:04,580 --> 00:11:07,400 Throw an error that says payment not verified. 164 00:11:07,400 --> 00:11:11,570 In addition to that, we want to check to make sure that it's a new transaction. 165 00:11:11,570 --> 00:11:18,610 So we're also calling that check if new transaction function that we created in the PayPal JS file, 166 00:11:18,620 --> 00:11:20,450 then we find the order. 167 00:11:21,080 --> 00:11:28,070 If order then paid correct amount, we're going to set that to the order total price, set that to if 168 00:11:28,070 --> 00:11:29,750 that's equal to that value. 169 00:11:29,780 --> 00:11:33,650 If that's false, then we know it's the incorrect amount. 170 00:11:33,680 --> 00:11:33,940 Okay. 171 00:11:33,950 --> 00:11:41,180 So we're checking those prices and only if then if all that stuff is true, then we set is paid to true. 172 00:11:41,400 --> 00:11:41,710 Okay. 173 00:11:41,750 --> 00:11:46,380 We also set the paid at to the date and then our payment result. 174 00:11:46,380 --> 00:11:51,110 So this is stuff we've already been setting, so there's nothing else we have to do here. 175 00:11:51,120 --> 00:11:53,880 We just save the order, All right. 176 00:11:53,880 --> 00:11:55,140 And return the order. 177 00:11:55,410 --> 00:11:57,270 So that should be it for. 178 00:11:57,270 --> 00:12:00,060 For this file, the order controller. 179 00:12:00,210 --> 00:12:08,100 Now, I'm going to go back to the the documentation here that just explains what I just showed you. 180 00:12:08,520 --> 00:12:14,310 Now, in the order screen, we're just going to add this dot unwrap because we're having some issues 181 00:12:14,310 --> 00:12:18,120 with with how errors were reported. 182 00:12:18,120 --> 00:12:20,850 So that's actually in the front end. 183 00:12:21,180 --> 00:12:27,690 So front end screens and then order screen. 184 00:12:29,140 --> 00:12:30,940 And we want to put that. 185 00:12:33,240 --> 00:12:34,020 Uh, let's see. 186 00:12:34,020 --> 00:12:37,710 So that's going to go on the pay order function. 187 00:12:38,600 --> 00:12:39,920 So let's see. 188 00:12:39,920 --> 00:12:41,270 Where do we use that? 189 00:12:42,150 --> 00:12:42,660 Right here. 190 00:12:42,660 --> 00:12:47,580 So wait, pay order and we're just going to add dot unwrap. 191 00:12:48,390 --> 00:12:56,250 So now we're going to go to our project and I'm going to add something to my cart and we're going to 192 00:12:56,250 --> 00:12:57,660 proceed to checkout. 193 00:12:59,020 --> 00:12:59,560 Place. 194 00:12:59,560 --> 00:13:00,100 Order! 195 00:13:00,140 --> 00:13:00,360 Okay. 196 00:13:00,370 --> 00:13:02,680 The order is placed, but it's not paid yet. 197 00:13:02,710 --> 00:13:09,370 Now, what will happen when I click this PayPal button is it's going to send that API call out that 198 00:13:09,370 --> 00:13:10,090 we just created. 199 00:13:10,090 --> 00:13:14,880 It's going to get the token, it's going to verify everything and we should be good. 200 00:13:14,890 --> 00:13:17,440 So let's click on that. 201 00:13:17,470 --> 00:13:19,480 Use my dummy account here. 202 00:13:23,270 --> 00:13:24,830 Complete purchase. 203 00:13:27,180 --> 00:13:27,920 And there we go. 204 00:13:27,930 --> 00:13:31,650 Order is paid and you can see right here, paid on and then the date. 205 00:13:32,480 --> 00:13:37,310 All right, so the final code with the bug fixes are in the GitHub repo. 206 00:13:37,310 --> 00:13:39,080 So if you need, you can use that. 207 00:13:39,380 --> 00:13:43,220 You should also have the documents that I created in the course files. 208 00:13:43,220 --> 00:13:44,240 But that's it, guys. 209 00:13:44,240 --> 00:13:49,250 I just wanted to be transparent and if I make a mistake, I want to address it. 210 00:13:49,250 --> 00:13:54,020 And it also gives you guys a little bit of more of a learning experience because you have to go in and 211 00:13:54,020 --> 00:13:55,430 refactor and stuff. 212 00:13:55,430 --> 00:13:56,120 So. 213 00:13:56,450 --> 00:13:56,960 But that's it. 214 00:13:56,960 --> 00:13:59,570 Guys, thanks for watching and I will see you next time.