1. Create the Orders Page

Now that we can retrieve the orders for the logged in user, let’s show these orders in the Account Page.

We’ll have to make authenticated requests, which means we’ll export getToken from our ContextProvider in our AuthContext file..

Now let’s import getToken on our Accounts page.

Awesome, to simplify our fetching logic let’s create a custom hook called useOrders in the account page.

Remember to import API_URL

We can quickly check the value of orders with a quick console log line here.

Now that we know it’s working, let’s actually render the orders so they will be displayed on the page.

Next, let’s move the user email and logout button below, and let’s separate with an hr so it is more distinct.

Let’s also add a loading status so we inform the client that something is actually happening behind the scenes.

And for the last thing let’s add a Head section for SEO purposes. Also, don’t forget to import Head from next/head.

And we’re done! This is how our account page should look now!

Process Orders

It’s time to create and process the orders with Stripe. Specifically, we’ll be using Stripe Hosted Checkout to provide our customers with a secure, privacy compliant, and easy to implement checkout solution. We’ll pre-fill the email for them and then redirect them to a success page.

Order Processing will consist of the following steps:

1. Our customer will start the order by clicking a button
2. The button will make a request to strapi, which will make a request to Stripe to generate a checkout session
3. If the checkout session is generated successfully, we’ll create the order and set it to an ‘unpaid’ status
4. We’ll return the checkout session, this will be used in the frontend by Stripe’s SDK to redirect the user to the Stripe Hosted Checkout.
5. Once the Stripe Checkout is Successful, we’ll redirect the customer to a success page.
6. We’ll use the success page to tell strapi to use the Stripe SDK to verify that the payment was processed.
7. If the payment was successful, we’ll update the order to be paid.

This behaviour can be extended by using Stripe’s webhooks with very little extra code. We’ll code the Checkout and Order Creation behaviour first then we’ll code the BuyButton and finally we’ll code the Confirmation page and the code to verify that an order was successful.

Get the Stripe Stuff

To continue, you’ll need a stripe account. I’m going to use development data to keep things simple

Let’s get started by going to our terminal and typing:

In the meantime get your key from the strapi admin panel.

You can inject the Secret Key by using a .env file. You’ll also use the PK in the order controller file.

Now import stripe and add the PK from environmental variables inside your order controller file.

Don’t forget to restart the strapi development server because we changed the .env file for changes to apply.

So what happens is we receive a product and user from our front-end.

1. We verify that we do indeed have that product in our ecommerce web application.
2. Using the Stripe SDK we create a checkout session with the product and user email.
3. Lastly we create the order with unpaid status

Then return the session ID.

Let’s test that out with Postman.

Remember that you’ll need to use a fresh bearer token from Magic which you can get by reloading the page and checking out the console in your browser.

Testing Stripe and Strapi

Then use it to make a post request to http://localhost:1337/orders/ with the token to create the order. Don’t forget to also provide a product id.

Stripe Front-end

Now that we have confirmed that it works, let’s switch over to our NextJS application in the front-end. Let’s create a BuyButton component and CSS module for that component.

Let’s quickly add some basic styles inside of our BuyButton.module.css.

Since we want only authenticated users to be able to purchase goods we’ll make the component redirect to the login page if the user is logged out otherwise it will start the checkout flow. Now let’s create the component, it should look something like this.

Next let’s add Stripe functionality on our front-end by first installing Stripe’s front-end library with:

Then restart the frontend with npm run dev

Inside the BuyButton let's create a stripePormise variable by running the loadStripe function that stripe provides with our key.

Instead of passing the key directly to the loadStripe function let’s add it to our urls.js file and export it from there.

And update our import and loadStripe function by adding the STRIPE_PK.

Next up, let’s add the option for authenticated users to actually buy the product by creating a button that calls a handler function when pressed.

And add the handler function inside of our BuyButton which sends a request to our back.

Now our BuyButton component should look something like this.

We can now test it. When clicking the BUY button you should see Stripe’s front-end SDK redirect us to a checkout page. Let’s simulate us purchasing the item by using a fake credit card which Stripe provides (Use card 42424242424242424242424 and any 3 numbers for PIN)!

On confirmation, we should be redirected to the success page, with a custom query parameter. This query parameter is the checkout session id. We are going to use it to verify that the payment was processed and update the order. Let’s work on this logic next!

Verify an Order

Like we said above the query parameter is the successful checkout session id which we are going to use to verify that an order has been paid and update its status on Strapi by using this id.

First, we’ll be using Stripe to verify that payment was processed and then we’ll update the order to ‘paid’ after that, we are going to then return the updated order back to our front-end application. Now in case, the order is not verified, we’ll instead throw an error which can happen sometimes due to the asynchronous nature of working with APIs.

By using this setup, we can have a success page, which triggers the update. The success page can also be used for marketing purposes because the customer will visit the page on success.

First, let’s go into our strapi application and add a new function to our order controller.

Let’s now test it out! First we need to create the route, by editing the routes.json file in our order folder. Make sure that the handler points to the correct function (order.confirm).

Now we just need to open the endpoint (confirm) to the public in our Strapi admin panel and test the endpoint out in Postman.

If everything works correctly and we get the checkout_session id back then everything works correctly and we can move onto the last part - success page.

Success Page

We’ll need to retrieve the session_id from the query param. With that we can make a call to a method that we’ll write, but first let’s create the success page in our pages folder and import everything we need.

Next up, let’s create a new custom hook to retrieve the session id from the query param and send it back to our Strapi back-end.

And some feedback to the user.

Our success page should look like this:

And that’s it! You’ve successfully built an E-commerce Application with Nextjs, Strapi, Magic, and Stripe! Congratulations!

Deploy the Backend

We’ll be deploying the backend to Heroku.

Add the STRIPE_PK environmental variable to heroku, by going to Settings tab under the ‘Config Vars’.

In order to set up our application for deployment we’ll need to do three things:

1. Set up Node Version
2. Prepare the database
3. Add file upload provider

Setting up the Node version

Most of the time that builds fail it is because of this step. Make sure to add your node version to the package.json file.

Setting up the Database

We need to store data somewhere, in development we have been using a local database. For production we are going to set up Postgres that Heroku provides. Let’s open up our Strapi back-end in our terminal and add:

Next up, let’s update the database.js file inside the config folder on strapi. Change it to a function with an explicit return. Then check if we’re in production, in case we are in production use the Postgres otherwise use SQLite database for development purposes. Remember DATABASE_URL will be provided by Heroku.

To get the DATABASE_URL let’s go to Heroku.

Adding file upload provider

The very last thing before our back-end is live we need to add the upload provider. There are multiple providers, but we’re going to use S3 which Strapi supports. Copy and paste the strapi-provider-upload-aws-s3 plugin from strapi documents or from down below and paste it inside the plugins.js file in the config folder.

Remember that you still need to configure your AWS keys.

And that’s it!