1 00:00:00,890 --> 00:00:01,430 All right, guys. 2 00:00:01,430 --> 00:00:06,800 So now you actually want to add our buttons, our PayPal buttons and our test order button. 3 00:00:06,800 --> 00:00:12,800 But there's one thing that I made a mistake with that we need to fix, and that is with this pay order 4 00:00:12,800 --> 00:00:19,850 right here, when we we have the query and I directly passed in the order ID and details and we don't 5 00:00:19,850 --> 00:00:20,390 want to do that. 6 00:00:20,390 --> 00:00:21,800 It needs to be destructured. 7 00:00:21,800 --> 00:00:26,960 So make sure that you put curly braces around those like that. 8 00:00:27,050 --> 00:00:33,830 Because I have I had to rerecord this video because I, you know, obviously I ran into an issue because 9 00:00:33,830 --> 00:00:35,270 I forgot to destructure those. 10 00:00:35,270 --> 00:00:38,150 So make sure that you add those curly braces. 11 00:00:38,510 --> 00:00:38,840 All right. 12 00:00:38,840 --> 00:00:44,300 So now we're going to basically replace this, our placeholder with the actual buttons. 13 00:00:44,300 --> 00:00:48,230 And of course, our buttons will have some handlers that we need to create. 14 00:00:48,230 --> 00:00:51,890 So we'll have some functions to create above as well. 15 00:00:52,100 --> 00:00:52,490 All right. 16 00:00:52,520 --> 00:00:57,770 Now, we only want to show this if the order is not paid, because if the order is paid, why would 17 00:00:57,770 --> 00:00:59,720 you want to show pay buttons? 18 00:00:59,720 --> 00:01:09,000 So let's say if not order Dot is paid, then we want to go ahead and show whatever we're going to show 19 00:01:09,000 --> 00:01:09,570 here. 20 00:01:09,930 --> 00:01:10,260 All right. 21 00:01:10,260 --> 00:01:12,930 And what we're going to do is have a list, group item. 22 00:01:13,430 --> 00:01:15,980 And let's close that list group item. 23 00:01:17,330 --> 00:01:23,480 And then inside here, if loading pay is true, I want to show loader the loader. 24 00:01:23,510 --> 00:01:24,110 Okay. 25 00:01:24,110 --> 00:01:26,950 And then I want to check if it's pending. 26 00:01:26,990 --> 00:01:31,010 So if pending is true, then I'm also going to show. 27 00:01:31,890 --> 00:01:36,570 The loader else, then we'll go ahead and continue on. 28 00:01:36,840 --> 00:01:41,640 So this is where we want to put our not only our PayPal buttons, but also the test button. 29 00:01:41,640 --> 00:01:48,120 So I'm actually going to put a div here and inside the div we'll have our test button. 30 00:01:48,790 --> 00:01:50,740 So let's say test. 31 00:01:51,640 --> 00:01:55,860 Pay order and this isn't something you're going to leave in production. 32 00:01:55,870 --> 00:01:56,720 So test. 33 00:01:56,740 --> 00:01:57,460 Pay order. 34 00:01:57,460 --> 00:01:59,620 And I'm going to add on to this. 35 00:02:00,640 --> 00:02:08,770 Let's see, we're going to have an on click and we'll set that to on approve test. 36 00:02:09,740 --> 00:02:11,870 So we'll have a function called on approve test. 37 00:02:11,870 --> 00:02:16,610 And I'm also just going to add style because I do want to put just some margin bottom. 38 00:02:16,610 --> 00:02:20,540 So let's put two curly braces here and then margin bottom. 39 00:02:21,150 --> 00:02:23,520 And set that to ten pixels. 40 00:02:24,300 --> 00:02:28,500 Okay, so if I save, it's going to give me an error because I don't have this function. 41 00:02:30,010 --> 00:02:30,370 Actually. 42 00:02:30,370 --> 00:02:31,450 Wait a second. 43 00:02:31,660 --> 00:02:31,920 Um. 44 00:02:34,130 --> 00:02:34,910 What's this? 45 00:02:37,240 --> 00:02:38,530 Why am I getting that? 46 00:02:38,800 --> 00:02:39,760 Did I not end? 47 00:02:39,790 --> 00:02:41,170 This is pending. 48 00:02:42,110 --> 00:02:42,530 Yeah. 49 00:02:42,530 --> 00:02:46,760 So just make sure you have your opening curly brace and closed. 50 00:02:46,760 --> 00:02:51,680 But I'm going to get an error that says unapproved test is not defined, which is okay right now. 51 00:02:51,680 --> 00:02:59,060 So now under the test button, I'm going to have another div and in that div we'll have our PayPal buttons 52 00:02:59,060 --> 00:03:06,440 and we imported PayPal buttons from the package that we installed, the React PayPal JS and this is 53 00:03:06,440 --> 00:03:08,420 going to have a few. 54 00:03:09,710 --> 00:03:11,750 A few functions and handlers. 55 00:03:11,750 --> 00:03:17,240 So we're going to have create order, but we're going to have that as a separate function up above called 56 00:03:17,240 --> 00:03:18,440 create. 57 00:03:19,230 --> 00:03:19,950 Order. 58 00:03:20,340 --> 00:03:20,700 Okay. 59 00:03:20,700 --> 00:03:25,500 Then we're going to also have an on approve and set that to a function called on approve. 60 00:03:25,500 --> 00:03:28,410 And then we're also going to have an on error. 61 00:03:29,530 --> 00:03:34,510 Handler and set that to a function above called on error. 62 00:03:35,050 --> 00:03:38,320 And then we can close the PayPal buttons. 63 00:03:38,320 --> 00:03:43,510 We don't put anything in between because that gets auto generated through the package. 64 00:03:43,510 --> 00:03:47,890 So now it's just telling us that all these functions are not defined, which is what we're going to 65 00:03:47,890 --> 00:03:48,870 do next. 66 00:03:48,880 --> 00:03:50,650 So let's go up above. 67 00:03:52,520 --> 00:03:57,020 So we'll go right above the return and right below the use effect. 68 00:03:57,350 --> 00:03:59,810 And let's just create these for now. 69 00:03:59,810 --> 00:04:03,860 So we'll say function on approve. 70 00:04:04,920 --> 00:04:10,020 And then we have a couple others, let's say, on approved test. 71 00:04:10,720 --> 00:04:12,910 And then we have our on error. 72 00:04:14,310 --> 00:04:16,680 And then we have our create order. 73 00:04:19,660 --> 00:04:20,050 All right. 74 00:04:20,050 --> 00:04:23,140 So if I save that, we should at least be able to see the page. 75 00:04:23,140 --> 00:04:28,060 And you can see the PayPal buttons and you can pay with a debit or credit or PayPal. 76 00:04:28,060 --> 00:04:30,370 And then we also have our test order. 77 00:04:30,370 --> 00:04:36,280 And all this test is going to do is set the is page to true so we don't have to go through PayPal. 78 00:04:36,280 --> 00:04:39,160 But of course you do want to test PayPal as well. 79 00:04:39,160 --> 00:04:45,010 We do have it in sandbox mode, so we can use it as if as if we were paying with real money. 80 00:04:45,890 --> 00:04:54,130 So let's do the on approve first and what we're going to do, what this is going to take in. 81 00:04:54,140 --> 00:04:58,820 So this is a handler for the PayPal buttons right here. 82 00:04:59,240 --> 00:04:59,570 Okay. 83 00:04:59,570 --> 00:05:06,950 So this will get called when basically when we click the PayPal buttons and everything goes as planned. 84 00:05:06,950 --> 00:05:12,560 And that's going to take in a couple things, data and actions. 85 00:05:12,890 --> 00:05:17,030 So in here we want to say actions. 86 00:05:18,200 --> 00:05:21,860 Or we want to return actually return actions. 87 00:05:22,570 --> 00:05:25,600 Dot order and this is in the documentation. 88 00:05:25,600 --> 00:05:28,060 So order dot capture. 89 00:05:30,780 --> 00:05:31,380 Uh, yeah. 90 00:05:31,380 --> 00:05:34,770 So order capture, and then that returns a promise. 91 00:05:34,770 --> 00:05:36,390 So we add a dot, then. 92 00:05:37,180 --> 00:05:40,240 And let's see inside here. 93 00:05:40,450 --> 00:05:42,250 Actually, I'm not going to do that. 94 00:05:42,700 --> 00:05:44,410 Let's just finish this. 95 00:05:44,620 --> 00:05:44,980 All right. 96 00:05:44,980 --> 00:05:53,440 So actions, dot order, dot capture, and then a promise with the function, with the details passed 97 00:05:53,440 --> 00:05:53,590 in. 98 00:05:53,590 --> 00:05:55,970 And these details come from PayPal. 99 00:05:55,990 --> 00:06:02,140 So we're going to call our pay order inside here, which is returns a promise. 100 00:06:02,140 --> 00:06:05,410 So we want to make sure that this function is asynchronous. 101 00:06:06,380 --> 00:06:07,610 Okay, so now in here. 102 00:06:07,610 --> 00:06:08,450 Let's do a try. 103 00:06:08,480 --> 00:06:09,380 Catch. 104 00:06:11,470 --> 00:06:13,750 And let's call our pay order. 105 00:06:13,750 --> 00:06:16,960 So we want to await on pay order. 106 00:06:17,930 --> 00:06:21,620 And pay order is coming from the mutation right here. 107 00:06:21,860 --> 00:06:25,610 Our use pay order mutation from our slice. 108 00:06:26,090 --> 00:06:27,590 I just called it pay order. 109 00:06:27,590 --> 00:06:29,030 So that's what we're calling. 110 00:06:29,810 --> 00:06:33,620 And let's see, that's going to take in. 111 00:06:34,640 --> 00:06:36,110 An object. 112 00:06:36,900 --> 00:06:42,690 With the order ID and the details from PayPal. 113 00:06:44,120 --> 00:06:44,540 Okay. 114 00:06:44,540 --> 00:06:51,860 And then I'm just going to Refetch so we can basically, once it's marked as paid, I want it to refetch 115 00:06:51,860 --> 00:06:55,190 so that this will then say paid instead of not paid. 116 00:06:55,790 --> 00:06:56,110 All right. 117 00:06:56,120 --> 00:06:59,900 And then we'll also have a toast that says payment successful. 118 00:07:00,800 --> 00:07:04,040 And then in the error, we'll just do a toast. 119 00:07:04,070 --> 00:07:05,570 Dot error. 120 00:07:06,720 --> 00:07:11,820 And in that we're going to do error question mark dot. 121 00:07:12,620 --> 00:07:14,390 Data question mark. 122 00:07:14,670 --> 00:07:16,580 Message or. 123 00:07:18,960 --> 00:07:21,600 Error dot message. 124 00:07:22,570 --> 00:07:26,140 Except we have to make sure that this is IRR. 125 00:07:27,120 --> 00:07:27,420 All right. 126 00:07:27,420 --> 00:07:30,030 So that's our unapproved now unapproved test. 127 00:07:30,060 --> 00:07:31,890 We're not going to do this action stuff. 128 00:07:31,890 --> 00:07:34,380 This is what what triggers PayPal, right? 129 00:07:34,380 --> 00:07:37,320 What we want to do is simply just do the pay order. 130 00:07:37,320 --> 00:07:43,320 So let's just grab these three lines and put that in the test. 131 00:07:44,960 --> 00:07:48,080 Except now we're not getting details from PayPal. 132 00:07:48,080 --> 00:07:52,070 So what we'll do is just set details to an object. 133 00:07:52,100 --> 00:07:59,300 And in this object, I think it needs to have a payer, but we can set that to an empty object. 134 00:07:59,300 --> 00:08:02,720 And since we're using a weight here, of course we need a sink. 135 00:08:03,720 --> 00:08:04,530 Here. 136 00:08:06,720 --> 00:08:07,350 All right. 137 00:08:07,470 --> 00:08:08,970 So that's that. 138 00:08:10,120 --> 00:08:13,240 Now, the error on error is really simple. 139 00:08:13,240 --> 00:08:14,650 That's going to take in. 140 00:08:15,400 --> 00:08:16,720 An error object. 141 00:08:16,720 --> 00:08:21,400 And then we just want to toast dot error. 142 00:08:22,390 --> 00:08:25,270 And just error message. 143 00:08:26,990 --> 00:08:28,820 And then the create order. 144 00:08:29,950 --> 00:08:35,919 Takes in data and actions just like the on approve does. 145 00:08:37,130 --> 00:08:40,880 And what we want to do here is return. 146 00:08:42,630 --> 00:08:44,700 Actually, that was right, I believe. 147 00:08:45,580 --> 00:08:46,060 Yeah. 148 00:08:46,060 --> 00:08:49,510 So we want to return ActionScript order create. 149 00:08:49,750 --> 00:08:49,900 So. 150 00:08:49,900 --> 00:08:55,000 So this object has a bunch of methods on it that have to do with our order. 151 00:08:55,000 --> 00:08:56,470 So here we're creating it. 152 00:08:56,470 --> 00:09:02,680 It gets passed in purchase units, which is an array that has a single object with the amount, and 153 00:09:02,680 --> 00:09:07,390 that amount object has a value and that's going to be whatever we're paying, which of course is going 154 00:09:07,390 --> 00:09:09,280 to be the orders total price. 155 00:09:09,310 --> 00:09:10,900 Now this returns a promise. 156 00:09:10,900 --> 00:09:13,870 So we actually want to go down here and add a dot then. 157 00:09:15,150 --> 00:09:17,970 And that's going to take in a function. 158 00:09:19,040 --> 00:09:21,860 And we're going to get the order ID here. 159 00:09:23,100 --> 00:09:26,160 And then we just want to simply return the order ID. 160 00:09:26,910 --> 00:09:30,180 So that's the create order function. 161 00:09:31,310 --> 00:09:32,990 So we should be ready to test. 162 00:09:32,990 --> 00:09:36,410 I'm going to do the the the approve test first. 163 00:09:36,410 --> 00:09:41,720 So let's come over here and let's click test, pay order so we get payment successful. 164 00:09:43,740 --> 00:09:46,230 And let's see, that didn't change. 165 00:09:49,300 --> 00:09:49,600 All right. 166 00:09:49,600 --> 00:09:51,730 Let me just see what went wrong here. 167 00:09:52,280 --> 00:09:55,550 So I'm going to click on network and then we'll try that again. 168 00:09:57,810 --> 00:09:58,800 Oh, it worked. 169 00:10:00,350 --> 00:10:00,680 Okay. 170 00:10:00,680 --> 00:10:06,770 I think I just needed to reload the page initially, but now you can see paid because all the test one 171 00:10:06,770 --> 00:10:12,350 does is changes that flag of is paid from false to true. 172 00:10:12,350 --> 00:10:13,910 So now we see this in green. 173 00:10:13,910 --> 00:10:16,250 We also don't see the buttons anymore. 174 00:10:16,460 --> 00:10:20,240 Now to test the PayPal one, we're going to make another order. 175 00:10:20,240 --> 00:10:21,530 So let's go. 176 00:10:22,600 --> 00:10:23,770 Add something. 177 00:10:24,970 --> 00:10:26,590 I'll just add this. 178 00:10:27,440 --> 00:10:30,050 We'll just add the mouse and let's proceed to checkout. 179 00:10:30,050 --> 00:10:31,280 Continue. 180 00:10:31,340 --> 00:10:34,160 Click that and then we're going to place the order. 181 00:10:34,190 --> 00:10:39,230 Now you're going to need your, your your test PayPal account username and password. 182 00:10:39,230 --> 00:10:40,850 So I'm going to go to. 183 00:10:42,130 --> 00:10:46,480 My PayPal portal and you can get it by choosing. 184 00:10:47,140 --> 00:10:49,780 You probably want to use a personal to pay. 185 00:10:49,810 --> 00:10:52,390 So if you go to view edit account. 186 00:10:54,180 --> 00:10:59,670 You can see your email ID, which is what you use for email and then your password. 187 00:10:59,670 --> 00:11:01,440 So I'm going to grab this. 188 00:11:02,170 --> 00:11:05,200 Copy it, and then let's click PayPal. 189 00:11:06,790 --> 00:11:10,120 And we're not going to want to use a regular. 190 00:11:10,150 --> 00:11:11,830 See how it says sandbox right here? 191 00:11:11,830 --> 00:11:14,110 That means that it's just it's fake. 192 00:11:14,140 --> 00:11:17,650 It works exactly how PayPal works, but it's not real money. 193 00:11:17,650 --> 00:11:19,240 It's not real accounts. 194 00:11:19,240 --> 00:11:25,240 So I'm going to use that email and then I want to grab my password, which is this. 195 00:11:27,020 --> 00:11:28,790 And paste that in. 196 00:11:33,320 --> 00:11:33,710 Okay. 197 00:11:33,710 --> 00:11:35,540 So, again, this is not real money. 198 00:11:35,540 --> 00:11:36,890 This is not a real account. 199 00:11:36,890 --> 00:11:38,510 You can see John Doe. 200 00:11:39,260 --> 00:11:43,430 And I'm just going to choose complete purchase. 201 00:11:43,940 --> 00:11:46,610 It's going to go through payment successful. 202 00:11:46,610 --> 00:11:48,650 And now we get this as paid. 203 00:11:49,130 --> 00:11:49,490 Awesome. 204 00:11:49,490 --> 00:11:50,990 So that worked perfectly. 205 00:11:51,850 --> 00:11:57,340 Now, if you just shut off the sandbox, then it's going to be live and people can just pay, you know, 206 00:11:57,580 --> 00:11:59,440 pay real money through your shop. 207 00:11:59,440 --> 00:12:01,510 And, you know, that's that. 208 00:12:01,510 --> 00:12:08,380 Now, what I would suggest doing is removing or at least commenting out the test button. 209 00:12:09,930 --> 00:12:11,580 So come down here. 210 00:12:11,580 --> 00:12:12,360 Let's see. 211 00:12:12,950 --> 00:12:13,370 Yeah. 212 00:12:13,370 --> 00:12:16,100 So right here, the test this button. 213 00:12:16,220 --> 00:12:19,010 I'm just going to I'm going to leave it there, but just comment it out. 214 00:12:19,010 --> 00:12:22,850 So that way all that shows is the actual PayPal buttons. 215 00:12:23,460 --> 00:12:27,210 So the next thing I'd like to work on is the user profile. 216 00:12:27,210 --> 00:12:31,770 So I want to be able to go to the profile and it'll show the user data. 217 00:12:31,770 --> 00:12:35,700 But I also want it to show all of that particular user's orders. 218 00:12:35,700 --> 00:12:37,950 So we'll start to work on that next.