Adding a item to the cart was the last feature
I wanted to cover in this example.
Now, you could argue that
our Shop application is not really complete.
For a start, we're missing
the Checkout functionality,
so we cannot actually buy any products.
Also, there's no way for the user
to modify what's in their shopping cart.
For testing we can do that,
by using the Strapi dashboard,
but our users won't have access to that.
The main purpose of building this Shop website
was of course to teach you Next.js.
And this section gave you a chance
to do some practice.
We added API handlers
for GET and POST requests.
We created a new page,
where we're also calling an API route
using "useQuery".
We added another component
where we call "useMutation"
to make a POST request.
Implementing the rest
of the shopping cart functionality
would be just more of the same really.
And I don't want to ask you to do
repetitive work,
that's why we're stopping here
with this example.
But I want to give you at least a quick overview
of what's left to do,
if we wanted our shop to be fully functional.
We probably want to give our users
the ability to remove an item from the cart.
So we could show a button
next to each item,
and clicking that button should trigger
a DELETE request to be sent to the CMS,
with the path that identifies this cart item,
so including its ID at the end.
This would need to be proxied through an API route,
to pass the authentication token.
So we'd need to write a new API route
and call it with "useMutation",
pretty similar to what we did
for adding an item to the cart.
We may also want to let the user
update an item in the cart.
The only thing that can be changed
is really the "Quantity".
So we could make the quantity value editable
and then clicking "Update" would send
another request to the CMS.
This time it would used the "PUT" method,
and the request body should be a JSON object
with the updated cart item values.
Again, this requires a new API handler
and a mutation called when the button is clicked.
Finally, and in a sense most importantly,
we'll want to show a "Checkout" button.
And when the user clicks "Checkout"
we want to show a payment page.
This requires integrating with a payment provider,
to collect and validate the credit card details,
or other payment method.
If the payment was successful we then want to
remove all the items from the cart.
Something we can do by sending
a DELETE request to the CMS.
So implementing the Checkout functionality
first requires choosing a payment provider.
And there are many different companies
providing payment APIs.
Just as an example, I'll show you quickly
how this could work using Stripe.
Stripe offers both a "Pre-built Checkout page",
or a "Custom payment flow".
The simplest option is to use their Checkout page.
So in this case we would need to install
the "stripe" library into our project.
And then in our website we can
redirect the user
to a Checkout page hosted by Stripe.
The way this works is that
we first need to send a request to Stripe.
This is a POST request to "/create-checkout-session",
where we pass the details of the items to be purchased.
So there are basically the same details
we have for our cart items:
a product name, its price, and a quantity.
We pass them to the Stripe API,
and Stripe return the URL of the Checkout page.
At that point we can simply redirect
the user to that URL,
and after the payment is taken
Stripe will redirect back to our website,
using the "success_url" we passed
in our "/create-checkout-session" request.
This example is using the Express framework,
but we could easily do the same
in a Next.js API handler.
Anyway, this was just to give you an idea
of how the payment step could work.
In a real world application
you may have other requirements
such as charging taxes,
and that can get a bit complicated
if you're selling internationally.
So, as usual, start from your specific requirements
and select a payment provider based on that.
But, as far as Next.js goes
we have covered all the main Next.js features.
And hopefully you should have
all the knowledge you need
to go on and build your own Next.js applications.
Congratulations for completing the course!
And feel free to get in touch
if you have any questions.