1 00:00:00,230 --> 00:00:03,230 All right, so now we're going to implement PayPal in the front end. 2 00:00:03,230 --> 00:00:11,060 So we need to install a package called React, PayPal JS and you need to make sure you install it in 3 00:00:11,060 --> 00:00:11,900 the front end. 4 00:00:11,900 --> 00:00:13,400 So I have my server running here. 5 00:00:13,400 --> 00:00:18,650 I'm going to go into my other terminal, which is in my front end folder, so make sure you CD into 6 00:00:18,650 --> 00:00:20,360 front end before you run this. 7 00:00:20,360 --> 00:00:24,590 So we'll say NPM install and it's going to be at. 8 00:00:25,170 --> 00:00:29,880 PayPal slash react. 9 00:00:30,850 --> 00:00:33,610 It's react cash, PayPal, dash. 10 00:00:33,630 --> 00:00:40,120 JS Okay, there's other packages that are called like React, PayPal and PayPal react. 11 00:00:40,120 --> 00:00:41,740 Just make sure you do this. 12 00:00:41,770 --> 00:00:43,450 This is the package we want. 13 00:00:45,070 --> 00:00:48,850 And then what we have to do is, is add the provider. 14 00:00:48,850 --> 00:00:56,110 So just like with Redux and with many other packages, we have to wrap our app in the provider. 15 00:00:56,110 --> 00:01:01,650 So we're going to do that in the let's see, the index.js in our front end. 16 00:01:01,660 --> 00:01:03,790 So front end source. 17 00:01:04,660 --> 00:01:06,280 Index.js. 18 00:01:06,460 --> 00:01:10,000 And let's bring this in so up here. 19 00:01:11,390 --> 00:01:13,580 I guess I'll just bring it in like right here. 20 00:01:13,580 --> 00:01:15,020 Let's say import. 21 00:01:15,860 --> 00:01:18,290 And it's going to be PayPal. 22 00:01:18,320 --> 00:01:18,740 Let's see. 23 00:01:18,770 --> 00:01:19,430 Uppercase. 24 00:01:19,430 --> 00:01:20,690 So PayPal. 25 00:01:21,460 --> 00:01:22,870 Script. 26 00:01:23,390 --> 00:01:25,570 I want to make sure I do this right. 27 00:01:25,570 --> 00:01:29,320 So PayPal script provider. 28 00:01:30,560 --> 00:01:30,950 Oops. 29 00:01:31,160 --> 00:01:33,080 And that's going to be from. 30 00:01:34,300 --> 00:01:35,530 At PayPal. 31 00:01:35,530 --> 00:01:37,300 React, PayPal JS. 32 00:01:37,540 --> 00:01:41,380 So once you do that, we're going to come down here to. 33 00:01:41,900 --> 00:01:48,320 Where we have our provider, our router provider, and we have our redux provider, we're going to put 34 00:01:48,320 --> 00:01:53,360 the PayPal one right in inside of the redux provider. 35 00:01:53,470 --> 00:01:53,600 Okay. 36 00:01:53,660 --> 00:01:59,600 So just like that PayPal script provider and we're going to set defer loading. 37 00:01:59,600 --> 00:02:03,800 So defer loading is going to be set to true. 38 00:02:06,180 --> 00:02:06,990 And then. 39 00:02:06,990 --> 00:02:07,890 And that's it. 40 00:02:07,920 --> 00:02:14,210 Now we want to put the router provider, which is essentially our app inside of the papal script provider. 41 00:02:14,220 --> 00:02:20,280 So it should look like that and we shouldn't have any errors or anything like that. 42 00:02:22,310 --> 00:02:24,290 And then what we want to do next. 43 00:02:24,290 --> 00:02:30,380 I believe in our constants we have yeah, we already have the PayPal URL, so that's what we created 44 00:02:30,380 --> 00:02:31,600 in our back end. 45 00:02:31,610 --> 00:02:34,970 So if you don't have this here, make sure you add it to your constants. 46 00:02:34,970 --> 00:02:38,510 And then we're going to go into, let's see. 47 00:02:40,460 --> 00:02:42,800 Let's go into the orders. 48 00:02:42,800 --> 00:02:48,290 So slices and then orders API slice. 49 00:02:48,990 --> 00:02:52,650 And let's see, we have create order, get order details. 50 00:02:52,650 --> 00:02:55,470 I'm going to go under the get order details. 51 00:02:56,430 --> 00:02:58,890 And we're going to have pay order. 52 00:03:00,530 --> 00:03:00,950 Okay. 53 00:03:00,950 --> 00:03:03,050 And that's going to be a mutation. 54 00:03:03,230 --> 00:03:08,900 And then we're going to have a query and instead of payment result, we're going to have the order ID 55 00:03:08,900 --> 00:03:10,790 and then details. 56 00:03:12,510 --> 00:03:12,960 Okay. 57 00:03:12,960 --> 00:03:18,240 And then that's going to have the URL of the order's URL, slash ID slash pay. 58 00:03:18,270 --> 00:03:20,160 The method is going to be put. 59 00:03:20,160 --> 00:03:23,610 And then for body, we're going to pass in the details. 60 00:03:24,570 --> 00:03:26,340 Okay, so that's pay order. 61 00:03:26,370 --> 00:03:31,170 Now we also need a query to get the client ID from our back end. 62 00:03:31,170 --> 00:03:36,420 So we're going to bring in from constants PayPal URL. 63 00:03:37,210 --> 00:03:40,750 And then let's go under pay order, which ends right here. 64 00:03:40,750 --> 00:03:42,280 And we're going to say. 65 00:03:43,860 --> 00:03:50,830 Get PayPal client ID, which is going to be a query, and inside that we'll have a query. 66 00:03:50,850 --> 00:03:53,400 The URL is going to be our PayPal URL. 67 00:03:53,940 --> 00:03:58,650 And then I'm also just going to add the keep unused data for five. 68 00:04:00,200 --> 00:04:03,010 Okay, now we have to export both of those. 69 00:04:03,020 --> 00:04:08,330 So let's go right here and let's say use and what do we add? 70 00:04:08,360 --> 00:04:09,260 Pay order. 71 00:04:09,260 --> 00:04:12,110 So pay order mutation. 72 00:04:12,110 --> 00:04:14,450 And then the next one is a query. 73 00:04:14,450 --> 00:04:19,940 So we want to do use get PayPal client ID query. 74 00:04:20,720 --> 00:04:22,130 And save that. 75 00:04:23,590 --> 00:04:24,070 All right. 76 00:04:24,070 --> 00:04:29,350 So now let's go back to our order screen because that's where we want to implement this. 77 00:04:29,530 --> 00:04:31,750 So open up the order screen. 78 00:04:32,400 --> 00:04:35,220 And let's see, we're going to have to bring in. 79 00:04:36,200 --> 00:04:37,720 A few things here. 80 00:04:37,730 --> 00:04:44,780 So from the React PayPal package, we have to bring in a few things. 81 00:04:44,810 --> 00:04:51,260 So let's say from and this is going to be at PayPal. 82 00:04:52,680 --> 00:05:00,900 And what we want to bring in here is going to be PayPal buttons right here, PayPal buttons and also 83 00:05:00,930 --> 00:05:01,980 use. 84 00:05:03,530 --> 00:05:13,130 You are not that use PayPal right here, script reducer and then everything that we created the to the 85 00:05:13,130 --> 00:05:15,560 mutation and the query, we're going to bring that in. 86 00:05:15,560 --> 00:05:24,050 So we want use use pay order mutation and we want use get PayPal client. 87 00:05:24,990 --> 00:05:26,340 ID query. 88 00:05:27,160 --> 00:05:29,710 And let's see, do we bring toast to Phi in? 89 00:05:29,710 --> 00:05:31,270 Because we do need that. 90 00:05:32,300 --> 00:05:33,860 So it's import. 91 00:05:36,180 --> 00:05:38,130 Toast from React. 92 00:05:38,160 --> 00:05:38,430 Toast. 93 00:05:38,430 --> 00:05:39,080 Defy. 94 00:05:39,090 --> 00:05:42,640 And do we have use selector? 95 00:05:42,660 --> 00:05:43,530 No, we don't. 96 00:05:43,530 --> 00:05:45,030 So we also need that. 97 00:05:45,030 --> 00:05:46,590 So import. 98 00:05:47,270 --> 00:05:52,610 And use selector from React Redux. 99 00:05:53,580 --> 00:05:56,330 And I think I'll use effect. 100 00:05:56,340 --> 00:05:57,570 We also need that. 101 00:06:03,790 --> 00:06:04,220 Okay. 102 00:06:04,270 --> 00:06:05,080 We should be good. 103 00:06:05,080 --> 00:06:06,610 So let's come down here. 104 00:06:07,370 --> 00:06:09,860 And we're just going to take this step by step. 105 00:06:09,860 --> 00:06:17,300 So first of all, let's create our function to use from our mutation for our pay order mutation. 106 00:06:17,300 --> 00:06:18,680 So we'll put that. 107 00:06:20,100 --> 00:06:20,970 Right here. 108 00:06:20,970 --> 00:06:23,670 Let's say const and. 109 00:06:24,500 --> 00:06:27,380 Set that to our use pay order mutation. 110 00:06:27,380 --> 00:06:34,550 And I'm going to call the the function pay order and then we can also get. 111 00:06:35,100 --> 00:06:39,690 Is loading and actually that's it. 112 00:06:39,690 --> 00:06:41,790 But we already have an is loading. 113 00:06:41,790 --> 00:06:46,650 So what we can do is rename this to we'll say loading. 114 00:06:47,210 --> 00:06:47,780 Pay. 115 00:06:49,190 --> 00:06:53,680 You can rename it to anything, but you don't want to keep it as is loading because we have that here 116 00:06:53,680 --> 00:06:55,300 from our other query. 117 00:06:56,100 --> 00:06:56,490 All right. 118 00:06:56,520 --> 00:07:01,260 Now, from the use PayPal script reducer that we brought in. 119 00:07:02,380 --> 00:07:10,450 We want to say const and set that to use. 120 00:07:11,490 --> 00:07:13,770 PayPal script reducer. 121 00:07:14,860 --> 00:07:17,920 And what we want to get from that is going to be. 122 00:07:19,680 --> 00:07:24,600 First of all, is pending in curly braces. 123 00:07:24,600 --> 00:07:29,610 And then outside of curly braces, we're going to say papal dispatch. 124 00:07:31,500 --> 00:07:31,890 All right. 125 00:07:31,890 --> 00:07:35,690 And then we also want to get our user data. 126 00:07:35,700 --> 00:07:37,340 Did I did we do that? 127 00:07:37,350 --> 00:07:37,920 No, we didn't. 128 00:07:37,920 --> 00:07:39,900 So let's bring in our user data as well. 129 00:07:39,900 --> 00:07:41,790 I'm going to put that right here. 130 00:07:42,570 --> 00:07:45,260 Actually now we'll put that down here. 131 00:07:45,270 --> 00:07:53,010 So let's say const user info and we want to get that from our state. 132 00:07:53,010 --> 00:07:58,200 So use selector and our state is not called that, it's called auth. 133 00:07:59,290 --> 00:08:01,900 So let's save and see if we get any errors here. 134 00:08:01,900 --> 00:08:03,100 It doesn't look like it. 135 00:08:03,940 --> 00:08:05,020 Okay, good. 136 00:08:06,290 --> 00:08:07,700 So far, so good. 137 00:08:07,730 --> 00:08:12,290 Now for the use get client ID query. 138 00:08:12,290 --> 00:08:13,610 So this right here. 139 00:08:14,450 --> 00:08:15,560 We'll do that next. 140 00:08:15,560 --> 00:08:18,080 I'll just go right here. 141 00:08:18,080 --> 00:08:21,020 And what we want to get from that is going to be. 142 00:08:22,800 --> 00:08:24,240 An object. 143 00:08:24,890 --> 00:08:30,710 Say use PayPal client query and we're going to pass in here, let's say data, but we're going to rename 144 00:08:30,710 --> 00:08:32,480 it to PayPal. 145 00:08:33,080 --> 00:08:34,700 And then is loading. 146 00:08:34,700 --> 00:08:36,409 But again, we're already using that. 147 00:08:36,409 --> 00:08:40,580 So we're going to call this one loading PayPal. 148 00:08:41,559 --> 00:08:41,950 All right. 149 00:08:41,950 --> 00:08:42,940 And then error. 150 00:08:42,970 --> 00:08:46,630 We're already using error, so we'll rename that to error. 151 00:08:47,540 --> 00:08:48,530 PayPal. 152 00:08:52,000 --> 00:08:52,420 Okay. 153 00:08:52,420 --> 00:08:54,190 We should still get no errors. 154 00:08:54,960 --> 00:09:03,780 Now we're going to create a use effect because we need to basically load the PayPal script in the first 155 00:09:03,780 --> 00:09:05,180 version of this course. 156 00:09:05,190 --> 00:09:09,060 We did this, but we we manually added the script tags. 157 00:09:09,060 --> 00:09:14,670 So here we're using the package that we installed, the PayPal React package, which makes it a little 158 00:09:14,670 --> 00:09:15,570 bit cleaner. 159 00:09:15,570 --> 00:09:24,180 So let's create a use effect here and inside the use effect we're going to check for. 160 00:09:26,380 --> 00:09:26,890 See. 161 00:09:26,890 --> 00:09:29,890 We're going to check for to make sure there's no errors. 162 00:09:29,890 --> 00:09:32,230 So we're going to say, if not error. 163 00:09:33,470 --> 00:09:34,730 PayPal. 164 00:09:35,090 --> 00:09:43,190 And if not, we want to say if not loading PayPal and PayPal dot. 165 00:09:43,990 --> 00:09:45,610 Client ID. 166 00:09:46,450 --> 00:09:54,040 Okay, So if that stuff is there, then if that stuff is true, then we want to create a function called 167 00:09:54,040 --> 00:09:55,760 load PayPal script. 168 00:09:55,780 --> 00:09:57,770 So load PayPal script. 169 00:09:57,790 --> 00:10:00,370 Set that to an async function. 170 00:10:01,390 --> 00:10:05,800 And what we're going to do in here is use our PayPal dispatch. 171 00:10:05,800 --> 00:10:07,450 So PayPal. 172 00:10:08,670 --> 00:10:13,380 Dispatch, and that's going to get passed in an object. 173 00:10:14,900 --> 00:10:21,080 And in that object, we're going to have a type of reset options, a value, and this is all in the 174 00:10:21,080 --> 00:10:22,100 documentation. 175 00:10:22,100 --> 00:10:25,700 So it's pretty much copied from the documentation. 176 00:10:25,700 --> 00:10:31,790 Client ID we're going to set to the PayPal client ID, and the currency we're going to use is USD. 177 00:10:33,350 --> 00:10:33,800 Okay. 178 00:10:33,800 --> 00:10:35,510 And then underneath that. 179 00:10:35,510 --> 00:10:41,270 So underneath the load PayPal script, we're going to call PayPal dispatch. 180 00:10:41,270 --> 00:10:46,130 We're going to pass in a type of set loading status and a value of pending. 181 00:10:46,520 --> 00:10:46,970 Okay. 182 00:10:46,970 --> 00:10:52,250 Now underneath the the if statement here. 183 00:10:52,550 --> 00:10:54,320 So actually. 184 00:10:55,830 --> 00:10:57,120 Now underneath. 185 00:10:58,460 --> 00:11:00,350 The load PayPal script. 186 00:11:00,380 --> 00:11:01,760 We need to then run it. 187 00:11:02,030 --> 00:11:07,370 So after the function which ends right here, we're going to. 188 00:11:09,320 --> 00:11:13,370 Have an if statement and we'll say if the order and. 189 00:11:14,530 --> 00:11:19,180 Naught order dot is paid. 190 00:11:19,480 --> 00:11:25,210 Okay, So if it's not paid, then we want to load the script, but we also want to check and make sure 191 00:11:25,210 --> 00:11:26,590 it's not already loaded. 192 00:11:26,590 --> 00:11:34,720 And we can do that by saying if not window dot PayPal. 193 00:11:34,900 --> 00:11:38,770 So if it's not already loaded, then go ahead and load it. 194 00:11:39,220 --> 00:11:39,520 All right. 195 00:11:39,520 --> 00:11:43,660 And then as far as dependencies, we just need order PayPal. 196 00:11:44,410 --> 00:11:46,510 Um, what else? 197 00:11:46,960 --> 00:11:50,020 Yeah, PayPal dispatch loading. 198 00:11:50,020 --> 00:11:51,570 PayPal and error. 199 00:11:51,580 --> 00:11:52,450 PayPal. 200 00:11:53,720 --> 00:11:54,080 All right. 201 00:11:54,080 --> 00:12:01,370 So now that we have all of our mutations and queries, we have all this stuff ready, ready to go. 202 00:12:01,370 --> 00:12:07,220 In the next video, we're going to actually put the PayPal buttons here, as well as a test button that 203 00:12:07,220 --> 00:12:11,960 will simply set the the order to paid without having to go through PayPal. 204 00:12:11,960 --> 00:12:14,390 And that's going to be just for testing purposes. 205 00:12:14,420 --> 00:12:16,430 And then we need the handlers for that. 206 00:12:16,430 --> 00:12:20,750 We need an on approve handler and on error handler and so on. 207 00:12:20,750 --> 00:12:22,760 So we'll do that in the next video.