1 00:00:00,170 --> 00:00:02,890 Okay, so now we have our order page. 2 00:00:02,900 --> 00:00:09,170 The next step is to add the route, to update the order as paid, and then we'll take care of the whole 3 00:00:09,170 --> 00:00:12,530 PayPal button and connecting the PayPal API. 4 00:00:12,560 --> 00:00:20,330 So let's go to our back end and let's go to Controllers Order controller and we should have an update 5 00:00:20,330 --> 00:00:21,440 to paid. 6 00:00:21,590 --> 00:00:24,170 So right here update order to paid. 7 00:00:24,170 --> 00:00:26,540 So it's going to be. 8 00:00:30,150 --> 00:00:31,420 Why do I have get here? 9 00:00:31,440 --> 00:00:34,920 This should be a put request, I believe. 10 00:00:37,730 --> 00:00:40,790 Um, let me just check something real quick. 11 00:00:40,970 --> 00:00:43,070 Yeah, that should be a put request. 12 00:00:43,070 --> 00:00:44,690 I don't know why I have get there. 13 00:00:44,720 --> 00:00:46,790 So let's change that to put. 14 00:00:46,910 --> 00:00:48,770 And this should also be put. 15 00:00:50,820 --> 00:00:53,990 Canned, then we're going to get rid of that. 16 00:00:54,000 --> 00:00:56,910 And first thing we need to do is get the order. 17 00:00:56,910 --> 00:01:06,090 So let's say order equals await order, find by ID, pass in the ID, and then we'll say if order, 18 00:01:07,200 --> 00:01:14,100 then we're going to just basically take the order and set is paid to true. 19 00:01:14,100 --> 00:01:18,960 And then there's a couple other fields that we want to add paid at which we're going to set to the current 20 00:01:18,960 --> 00:01:29,760 date and time, and then the payment result is going to be an object with the ID status, update time 21 00:01:29,760 --> 00:01:30,810 and email address. 22 00:01:30,810 --> 00:01:33,990 This stuff is actually going to come from PayPal, okay? 23 00:01:33,990 --> 00:01:41,490 After it's paid and then we're going to just save it in the database and then put it into a variable 24 00:01:41,490 --> 00:01:49,650 and then respond with a 200 and pass in the updated order and then we'll just do an else. 25 00:01:50,210 --> 00:01:55,310 So if else, then it's going to be a 404 because obviously that there is no order. 26 00:01:55,310 --> 00:01:56,630 So it's not found. 27 00:01:57,320 --> 00:01:57,620 Okay. 28 00:01:57,620 --> 00:01:59,480 So we'll save that now. 29 00:02:00,070 --> 00:02:05,560 We have to you basically have to register for a PayPal API. 30 00:02:05,590 --> 00:02:12,460 So log in, go to developer dot paypal.com and log in. 31 00:02:12,490 --> 00:02:19,780 You log in with your regular PayPal account, but from here you can basically switch this to sandbox 32 00:02:19,780 --> 00:02:22,300 and then you can create test accounts. 33 00:02:22,300 --> 00:02:29,110 So if you go to testing tools and then sandbox accounts, I believe you already have one, a business 34 00:02:29,110 --> 00:02:30,610 and a personal set up. 35 00:02:30,610 --> 00:02:36,910 So basically your business is going to be the the account that gets the money from your app through 36 00:02:36,910 --> 00:02:37,780 your application. 37 00:02:37,780 --> 00:02:40,360 The personal is what you use to pay with. 38 00:02:40,540 --> 00:02:40,870 Okay. 39 00:02:40,870 --> 00:02:45,070 So that way you're not dealing with actual money when you're testing your app. 40 00:02:45,070 --> 00:02:47,470 So just make sure you have a business and personal. 41 00:02:47,470 --> 00:02:49,240 If you don't, then just create it. 42 00:02:49,270 --> 00:02:54,070 Then you want to go to apps and credentials and then click Create app. 43 00:02:54,070 --> 00:03:00,920 And I'm just going to call this pro shop and we're going to choose merchant. 44 00:03:00,920 --> 00:03:07,970 And then for your sandbox account, you can choose one of your business accounts. 45 00:03:07,970 --> 00:03:13,480 I'm just going to keep the default and then let's click Create App. 46 00:03:17,810 --> 00:03:21,680 And then we'll get after that, we'll get our client ID. 47 00:03:22,010 --> 00:03:23,600 So this is really important. 48 00:03:23,600 --> 00:03:24,680 You want to grab this? 49 00:03:24,680 --> 00:03:31,610 Let's copy it to our clipboard and then we're going to go into our env dot env and we're going to add 50 00:03:31,760 --> 00:03:33,110 PayPal. 51 00:03:35,740 --> 00:03:41,890 So we want PayPal underscore client underscore ID, and then you're going to paste in. 52 00:03:42,490 --> 00:03:46,120 Your PayPal client ID and save. 53 00:03:47,940 --> 00:03:48,270 All right. 54 00:03:48,270 --> 00:03:50,670 And then I believe that's all we have to do here. 55 00:03:50,670 --> 00:03:53,310 There are like different features and stuff. 56 00:03:53,310 --> 00:03:55,230 I'm just going to leave the default. 57 00:03:57,540 --> 00:03:57,900 Yeah. 58 00:03:57,900 --> 00:03:59,880 So we should be all set. 59 00:04:00,350 --> 00:04:01,060 I'll just click. 60 00:04:01,080 --> 00:04:04,090 Yeah, we should be all set as far as this goes. 61 00:04:04,110 --> 00:04:09,230 Now we need to add the PayPal route in our back end. 62 00:04:09,240 --> 00:04:11,970 So you want to go to your server.js. 63 00:04:13,520 --> 00:04:19,220 And you can look at look this stuff up in the docs if you want as well, the PayPal API docs, but we're 64 00:04:19,220 --> 00:04:25,070 going to go under where we have the routes mapped to our files. 65 00:04:25,070 --> 00:04:32,930 So right here and we're just going to say app dot get and the endpoint. 66 00:04:34,060 --> 00:04:35,140 Is going to be. 67 00:04:35,140 --> 00:04:36,250 This is very important. 68 00:04:36,260 --> 00:04:41,290 It has to be a slash API slash config slash PayPal. 69 00:04:42,230 --> 00:04:42,650 All right. 70 00:04:42,650 --> 00:04:43,610 And then. 71 00:04:45,660 --> 00:04:50,730 Um, actually, we don't even need curly braces because what we're returning, we're just going to respond 72 00:04:50,730 --> 00:04:53,130 so we can say res dot send. 73 00:04:53,490 --> 00:04:56,490 And what we want to send is our client ID. 74 00:04:56,490 --> 00:05:07,830 So in curly braces, we'll say client ID and then set that to our environment variable, which is process 75 00:05:07,830 --> 00:05:08,670 dot env. 76 00:05:09,620 --> 00:05:11,660 Dot PayPal client ID. 77 00:05:12,700 --> 00:05:14,260 And we'll save that. 78 00:05:14,260 --> 00:05:19,000 And the reason for this is because we can't put our client ID in the front end. 79 00:05:19,030 --> 00:05:22,900 You don't want it on the client side because you don't want people getting that. 80 00:05:22,900 --> 00:05:29,800 So we're storing it in our Env file and then we're creating a route so PayPal can then get that client 81 00:05:29,800 --> 00:05:31,480 ID and then use it. 82 00:05:32,690 --> 00:05:33,110 Okay. 83 00:05:33,110 --> 00:05:38,880 Now, I think we should be all set as far as the back end goes. 84 00:05:38,900 --> 00:05:44,840 So in the next video, we'll start to implement the front end and papal. 85 00:05:44,840 --> 00:05:49,670 We're actually going to use a package called React Papal or React Papal. 86 00:05:49,670 --> 00:05:51,950 JS So we'll do that next.