All right, guys.
So now you actually want to add our buttons, our PayPal buttons and our test order button.
But there's one thing that I made a mistake with that we need to fix, and that is with this pay order
right here, when we we have the query and I directly passed in the order ID and details and we don't
want to do that.
It needs to be destructured.
So make sure that you put curly braces around those like that.
Because I have I had to rerecord this video because I, you know, obviously I ran into an issue because
I forgot to destructure those.
So make sure that you add those curly braces.
All right.
So now we're going to basically replace this, our placeholder with the actual buttons.
And of course, our buttons will have some handlers that we need to create.
So we'll have some functions to create above as well.
All right.
Now, we only want to show this if the order is not paid, because if the order is paid, why would
you want to show pay buttons?
So let's say if not order Dot is paid, then we want to go ahead and show whatever we're going to show
here.
All right.
And what we're going to do is have a list, group item.
And let's close that list group item.
And then inside here, if loading pay is true, I want to show loader the loader.
Okay.
And then I want to check if it's pending.
So if pending is true, then I'm also going to show.
The loader else, then we'll go ahead and continue on.
So this is where we want to put our not only our PayPal buttons, but also the test button.
So I'm actually going to put a div here and inside the div we'll have our test button.
So let's say test.
Pay order and this isn't something you're going to leave in production.
So test.
Pay order.
And I'm going to add on to this.
Let's see, we're going to have an on click and we'll set that to on approve test.
So we'll have a function called on approve test.
And I'm also just going to add style because I do want to put just some margin bottom.
So let's put two curly braces here and then margin bottom.
And set that to ten pixels.
Okay, so if I save, it's going to give me an error because I don't have this function.
Actually.
Wait a second.
Um.
What's this?
Why am I getting that?
Did I not end?
This is pending.
Yeah.
So just make sure you have your opening curly brace and closed.
But I'm going to get an error that says unapproved test is not defined, which is okay right now.
So now under the test button, I'm going to have another div and in that div we'll have our PayPal buttons
and we imported PayPal buttons from the package that we installed, the React PayPal JS and this is
going to have a few.
A few functions and handlers.
So we're going to have create order, but we're going to have that as a separate function up above called
create.
Order.
Okay.
Then we're going to also have an on approve and set that to a function called on approve.
And then we're also going to have an on error.
Handler and set that to a function above called on error.
And then we can close the PayPal buttons.
We don't put anything in between because that gets auto generated through the package.
So now it's just telling us that all these functions are not defined, which is what we're going to
do next.
So let's go up above.
So we'll go right above the return and right below the use effect.
And let's just create these for now.
So we'll say function on approve.
And then we have a couple others, let's say, on approved test.
And then we have our on error.
And then we have our create order.
All right.
So if I save that, we should at least be able to see the page.
And you can see the PayPal buttons and you can pay with a debit or credit or PayPal.
And then we also have our test order.
And all this test is going to do is set the is page to true so we don't have to go through PayPal.
But of course you do want to test PayPal as well.
We do have it in sandbox mode, so we can use it as if as if we were paying with real money.
So let's do the on approve first and what we're going to do, what this is going to take in.
So this is a handler for the PayPal buttons right here.
Okay.
So this will get called when basically when we click the PayPal buttons and everything goes as planned.
And that's going to take in a couple things, data and actions.
So in here we want to say actions.
Or we want to return actually return actions.
Dot order and this is in the documentation.
So order dot capture.
Uh, yeah.
So order capture, and then that returns a promise.
So we add a dot, then.
And let's see inside here.
Actually, I'm not going to do that.
Let's just finish this.
All right.
So actions, dot order, dot capture, and then a promise with the function, with the details passed
in.
And these details come from PayPal.
So we're going to call our pay order inside here, which is returns a promise.
So we want to make sure that this function is asynchronous.
Okay, so now in here.
Let's do a try.
Catch.
And let's call our pay order.
So we want to await on pay order.
And pay order is coming from the mutation right here.
Our use pay order mutation from our slice.
I just called it pay order.
So that's what we're calling.
And let's see, that's going to take in.
An object.
With the order ID and the details from PayPal.
Okay.
And then I'm just going to Refetch so we can basically, once it's marked as paid, I want it to refetch
so that this will then say paid instead of not paid.
All right.
And then we'll also have a toast that says payment successful.
And then in the error, we'll just do a toast.
Dot error.
And in that we're going to do error question mark dot.
Data question mark.
Message or.
Error dot message.
Except we have to make sure that this is IRR.
All right.
So that's our unapproved now unapproved test.
We're not going to do this action stuff.
This is what what triggers PayPal, right?
What we want to do is simply just do the pay order.
So let's just grab these three lines and put that in the test.
Except now we're not getting details from PayPal.
So what we'll do is just set details to an object.
And in this object, I think it needs to have a payer, but we can set that to an empty object.
And since we're using a weight here, of course we need a sink.
Here.
All right.
So that's that.
Now, the error on error is really simple.
That's going to take in.
An error object.
And then we just want to toast dot error.
And just error message.
And then the create order.
Takes in data and actions just like the on approve does.
And what we want to do here is return.
Actually, that was right, I believe.
Yeah.
So we want to return ActionScript order create.
So.
So this object has a bunch of methods on it that have to do with our order.
So here we're creating it.
It gets passed in purchase units, which is an array that has a single object with the amount, and
that amount object has a value and that's going to be whatever we're paying, which of course is going
to be the orders total price.
Now this returns a promise.
So we actually want to go down here and add a dot then.
And that's going to take in a function.
And we're going to get the order ID here.
And then we just want to simply return the order ID.
So that's the create order function.
So we should be ready to test.
I'm going to do the the the approve test first.
So let's come over here and let's click test, pay order so we get payment successful.
And let's see, that didn't change.
All right.
Let me just see what went wrong here.
So I'm going to click on network and then we'll try that again.
Oh, it worked.
Okay.
I think I just needed to reload the page initially, but now you can see paid because all the test one
does is changes that flag of is paid from false to true.
So now we see this in green.
We also don't see the buttons anymore.
Now to test the PayPal one, we're going to make another order.
So let's go.
Add something.
I'll just add this.
We'll just add the mouse and let's proceed to checkout.
Continue.
Click that and then we're going to place the order.
Now you're going to need your, your your test PayPal account username and password.
So I'm going to go to.
My PayPal portal and you can get it by choosing.
You probably want to use a personal to pay.
So if you go to view edit account.
You can see your email ID, which is what you use for email and then your password.
So I'm going to grab this.
Copy it, and then let's click PayPal.
And we're not going to want to use a regular.
See how it says sandbox right here?
That means that it's just it's fake.
It works exactly how PayPal works, but it's not real money.
It's not real accounts.
So I'm going to use that email and then I want to grab my password, which is this.
And paste that in.
Okay.
So, again, this is not real money.
This is not a real account.
You can see John Doe.
And I'm just going to choose complete purchase.
It's going to go through payment successful.
And now we get this as paid.
Awesome.
So that worked perfectly.
Now, if you just shut off the sandbox, then it's going to be live and people can just pay, you know,
pay real money through your shop.
And, you know, that's that.
Now, what I would suggest doing is removing or at least commenting out the test button.
So come down here.
Let's see.
Yeah.
So right here, the test this button.
I'm just going to I'm going to leave it there, but just comment it out.
So that way all that shows is the actual PayPal buttons.
So the next thing I'd like to work on is the user profile.
So I want to be able to go to the profile and it'll show the user data.
But I also want it to show all of that particular user's orders.
So we'll start to work on that next.