All right, so now we're going to implement PayPal in the front end.
So we need to install a package called React, PayPal JS and you need to make sure you install it in
the front end.
So I have my server running here.
I'm going to go into my other terminal, which is in my front end folder, so make sure you CD into
front end before you run this.
So we'll say NPM install and it's going to be at.
PayPal slash react.
It's react cash, PayPal, dash.
JS Okay, there's other packages that are called like React, PayPal and PayPal react.
Just make sure you do this.
This is the package we want.
And then what we have to do is, is add the provider.
So just like with Redux and with many other packages, we have to wrap our app in the provider.
So we're going to do that in the let's see, the index.js in our front end.
So front end source.
Index.js.
And let's bring this in so up here.
I guess I'll just bring it in like right here.
Let's say import.
And it's going to be PayPal.
Let's see.
Uppercase.
So PayPal.
Script.
I want to make sure I do this right.
So PayPal script provider.
Oops.
And that's going to be from.
At PayPal.
React, PayPal JS.
So once you do that, we're going to come down here to.
Where we have our provider, our router provider, and we have our redux provider, we're going to put
the PayPal one right in inside of the redux provider.
Okay.
So just like that PayPal script provider and we're going to set defer loading.
So defer loading is going to be set to true.
And then.
And that's it.
Now we want to put the router provider, which is essentially our app inside of the papal script provider.
So it should look like that and we shouldn't have any errors or anything like that.
And then what we want to do next.
I believe in our constants we have yeah, we already have the PayPal URL, so that's what we created
in our back end.
So if you don't have this here, make sure you add it to your constants.
And then we're going to go into, let's see.
Let's go into the orders.
So slices and then orders API slice.
And let's see, we have create order, get order details.
I'm going to go under the get order details.
And we're going to have pay order.
Okay.
And that's going to be a mutation.
And then we're going to have a query and instead of payment result, we're going to have the order ID
and then details.
Okay.
And then that's going to have the URL of the order's URL, slash ID slash pay.
The method is going to be put.
And then for body, we're going to pass in the details.
Okay, so that's pay order.
Now we also need a query to get the client ID from our back end.
So we're going to bring in from constants PayPal URL.
And then let's go under pay order, which ends right here.
And we're going to say.
Get PayPal client ID, which is going to be a query, and inside that we'll have a query.
The URL is going to be our PayPal URL.
And then I'm also just going to add the keep unused data for five.
Okay, now we have to export both of those.
So let's go right here and let's say use and what do we add?
Pay order.
So pay order mutation.
And then the next one is a query.
So we want to do use get PayPal client ID query.
And save that.
All right.
So now let's go back to our order screen because that's where we want to implement this.
So open up the order screen.
And let's see, we're going to have to bring in.
A few things here.
So from the React PayPal package, we have to bring in a few things.
So let's say from and this is going to be at PayPal.
And what we want to bring in here is going to be PayPal buttons right here, PayPal buttons and also
use.
You are not that use PayPal right here, script reducer and then everything that we created the to the
mutation and the query, we're going to bring that in.
So we want use use pay order mutation and we want use get PayPal client.
ID query.
And let's see, do we bring toast to Phi in?
Because we do need that.
So it's import.
Toast from React.
Toast.
Defy.
And do we have use selector?
No, we don't.
So we also need that.
So import.
And use selector from React Redux.
And I think I'll use effect.
We also need that.
Okay.
We should be good.
So let's come down here.
And we're just going to take this step by step.
So first of all, let's create our function to use from our mutation for our pay order mutation.
So we'll put that.
Right here.
Let's say const and.
Set that to our use pay order mutation.
And I'm going to call the the function pay order and then we can also get.
Is loading and actually that's it.
But we already have an is loading.
So what we can do is rename this to we'll say loading.
Pay.
You can rename it to anything, but you don't want to keep it as is loading because we have that here
from our other query.
All right.
Now, from the use PayPal script reducer that we brought in.
We want to say const and set that to use.
PayPal script reducer.
And what we want to get from that is going to be.
First of all, is pending in curly braces.
And then outside of curly braces, we're going to say papal dispatch.
All right.
And then we also want to get our user data.
Did I did we do that?
No, we didn't.
So let's bring in our user data as well.
I'm going to put that right here.
Actually now we'll put that down here.
So let's say const user info and we want to get that from our state.
So use selector and our state is not called that, it's called auth.
So let's save and see if we get any errors here.
It doesn't look like it.
Okay, good.
So far, so good.
Now for the use get client ID query.
So this right here.
We'll do that next.
I'll just go right here.
And what we want to get from that is going to be.
An object.
Say use PayPal client query and we're going to pass in here, let's say data, but we're going to rename
it to PayPal.
And then is loading.
But again, we're already using that.
So we're going to call this one loading PayPal.
All right.
And then error.
We're already using error, so we'll rename that to error.
PayPal.
Okay.
We should still get no errors.
Now we're going to create a use effect because we need to basically load the PayPal script in the first
version of this course.
We did this, but we we manually added the script tags.
So here we're using the package that we installed, the PayPal React package, which makes it a little
bit cleaner.
So let's create a use effect here and inside the use effect we're going to check for.
See.
We're going to check for to make sure there's no errors.
So we're going to say, if not error.
PayPal.
And if not, we want to say if not loading PayPal and PayPal dot.
Client ID.
Okay, So if that stuff is there, then if that stuff is true, then we want to create a function called
load PayPal script.
So load PayPal script.
Set that to an async function.
And what we're going to do in here is use our PayPal dispatch.
So PayPal.
Dispatch, and that's going to get passed in an object.
And in that object, we're going to have a type of reset options, a value, and this is all in the
documentation.
So it's pretty much copied from the documentation.
Client ID we're going to set to the PayPal client ID, and the currency we're going to use is USD.
Okay.
And then underneath that.
So underneath the load PayPal script, we're going to call PayPal dispatch.
We're going to pass in a type of set loading status and a value of pending.
Okay.
Now underneath the the if statement here.
So actually.
Now underneath.
The load PayPal script.
We need to then run it.
So after the function which ends right here, we're going to.
Have an if statement and we'll say if the order and.
Naught order dot is paid.
Okay, So if it's not paid, then we want to load the script, but we also want to check and make sure
it's not already loaded.
And we can do that by saying if not window dot PayPal.
So if it's not already loaded, then go ahead and load it.
All right.
And then as far as dependencies, we just need order PayPal.
Um, what else?
Yeah, PayPal dispatch loading.
PayPal and error.
PayPal.
All right.
So now that we have all of our mutations and queries, we have all this stuff ready, ready to go.
In the next video, we're going to actually put the PayPal buttons here, as well as a test button that
will simply set the the order to paid without having to go through PayPal.
And that's going to be just for testing purposes.
And then we need the handlers for that.
We need an on approve handler and on error handler and so on.
So we'll do that in the next video.