All right, So now we're going to implement our payment screen.
But before we do that, we want to implement in the cart slice our save payment method, just like we
have saved shipping address.
So we're going to go down here and let's say save I'll say save payment method state.
It's going to take state and action, and then we're going to just put the payment method or set the
payment method of our state to the payload that's passed in to this to this action.
And then we're just going to update our cart.
Okay.
So we need to export this.
So let's export.
Uh, save payment method.
Now, you might be a little confused as to why we just export these reducers directly.
Where in, for instance, our users API.
We say like login mutation or in our products API products query.
That's because we're using the API.
Here we're using create API, not create slice.
So the syntax is different.
The products and users API slice are basically children of the API slice and we're using create API.
So it just works different on how we, how we dispatch our actions and so on or our queries and mutations
versus a regular reducer function like these.
So just keep that in mind.
Now since we've done that, let's go, let's go into screens and let's create a payment screen.
X.
Okay, So in our payment screen, let's say Ra FC and we have just like with our other screens, we
have a bunch of stuff to do here and a bunch of stuff to import.
We're going to be using use state.
So we're also going to.
Do we need that?
No, not yet.
Let's import a couple of things from React Bootstrap.
So I'm going to bring in form.
Button and call.
So that's going to be from React Bootstrap.
And then let's also import our form container because we're going to be using that again.
So bring that in.
And let's also bring in our checkout steps.
So import checkout steps.
And let's see, we have our payment screen as far as state.
We're going to have our payment method in the component state as well.
So let's add that and we're going to set PayPal to the the default.
And let's see down here.
Let's make the rapper make that the form container.
Okay.
And then inside the form container, we're going to have our checkout steps and we're going to have
it one through three because this is the third step.
Then we have our form.
We'll do an H one and then our form.
Okay.
And then we'll have our form group and we'll end that form group.
And inside of that form group we're going to have a label that says Select method.
And let's say for our payment, let's do a column.
We'll end that column.
And let's see in here.
This is actually going to be a form check.
I don't know why this is acting weird here.
So this is going to be a check and we're going to have a bunch of attributes on this.
We want a type of radio.
So it's going to be radio checkbox.
We're going to give it a class name or a couple.
Yeah, just one class name of margin.
Why to.
Okay.
And then we're also going to do the label, which will be PayPal or credit card because they can pay
with a credit card.
We'll do an ID of PayPal, a name of payment method, a value of PayPal, and we'll make this checked
by default.
And then we want an onchange with a handler and we're just, well, not a handler really.
We're just calling set payment method and setting it to whatever we choose, which is the only selection,
which is PayPal.
And then we'll end that form check.
And then underneath the form group, we want to put our button.
Okay.
So again, we'll just do continue for the text.
And variant primary.
Good.
So now let's save that and let's bring it into or let's create the route.
So we'll go to index.
And we need to import.
We need to import the payment screen and this is going to be a protected route.
So we're going to make sure you put it in the private root area so like that.
Okay.
And let's see.
What's this?
Yeah, that's fine.
All right.
So now we're going to click continue on the shipping and now we get our payment method page.
Now a couple things.
If the user comes to this page and there's no shipping address in the state in local storage, then
I want them to be redirected to shipping.
So in order to do that, we have to add a couple things here.
We have to import a couple things, including use effect and then we're going to want to navigate.
So let's also import let's well, we do want use dispatch and use selector as well because we're dealing
with the cart state.
And then we also want to import use navigate from React router dom and let's also bring in the the save
payment method because that's what we want to call on the submit handler when we click continue.
We want to save that payment method to to local storage.
All right.
Now down here, let's see.
We're going to.
Initialize.
Um.
Dispatch and navigate.
Okay.
And then let's see.
We want to get our cart state.
So we'll do that.
And then we want to get the shipping address from the cart and then let's create our use effect.
So this right here, the if if shipping address, we want to do that in a use effect.
Okay, so let's pass in here.
Uh, sometimes GitHub copilot confuses confuses me.
Okay.
Now in here.
Yeah.
We want to check for.
For not having a shipping address.
Right.
Because we're getting it from our cart state.
It's basically checking local storage.
And then if it's not there, then we want to navigate to shipping so that they can enter the address.
Now, since we use shipping, address and navigate in the use effect, we have to add those as dependencies.
So shipping address and navigate.
All right.
And then.
I think that.
That should do it.
Let's go ahead and just save that and see.
So cannot resolve actions cart actions.
Did I not export?
Let's see.
Let's go to our cart slice.
So save payment method.
Um.
Act.
Wait.
Wait a minute.
This.
This is wrong.
So this should be so save payment method should be coming from dot, dot, slash slices.
Slash cart slice.
Good.
Now we do have a shipping address, so it's not redirecting us.
Now we want to handle the submit, so we're going to put that onto the form.
Let's say right here form on, not click on Submit.
Then we're going to call Submit Handler.
Okay.
And let's see.
We'll put that right here.
Let's say const submit handler And we want to first of all, just prevent the default.
Then we're going to dispatch the save payment method and pass in the payment method, which by default
is going to be PayPal.
And then we're going to navigate to the place order page.
So let's save that.
Let's come over here, let's click continue takes us to place order, which is what we want.
It doesn't work.
It doesn't show anything because we don't have that screen.
But if we open up our state.
Let's go into our redux state.
And we should see in our cart.
The payment method is PayPal.
You should see it there and it should also be in local storage.
So let's see.
We have our cart and down here we have payment method PayPal.
And like I said, if later on you want to implement Stripe or some something else, that's absolutely
fine.
Okay, so that's it for the payment screen.
Now in the next video, we're going to actually go back to the back end and we're going to create all
of our order routes and controller controller methods.
Controller functions, I should say, because we're going to start to work on orders because that's
the next step, is to place the order.