How to set up a one-page check-out flow in Next.js
Tags: nextjs, javascript, opensource
Published: 2022-02-22 17:16:51

# Introduction

[Medusa](https://github.com/medusajs/medusa) is an open source headless ecommerce platform that enables you to set up a custom and flexible e-commerce setup. The creators of Medusa recently launched a new project called [Medusa Express](https://github.com/medusajs/medusa-express-nextjs). 

The idea behind Medusa Express is to make the purchasing experience as frictionless and easy to set up as possible. It is also great for businesses that aren’t looking into starting a full fledges store but want to easily sell their products online. The customer visits the link of the product, chooses the variant they wish to buy and then completes the checkout process. This will be beneficial as it allows you to store products as clickable links, which is great for businesses and developers that don’t want (or need) to build the entire storefront on their own.

For more inspiration on the type of use cases we have seen already, please check out our [initial introductory article on the topic](https://www.medusajs.com/post/introducing-medusa-express-the-easiest-way-to-setup-an-ecommerce-store).

# What it is

In this article, I will dive deep into how to set up Medusa Express using NextJS. The checkout page will function like this:

![Preview of Medusa Express](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvfv9ktye7vpalz5ph2q.gif)

You can view the demo by going to this link: [https://medusa.express/t-shirt](https://www.medusa.express/t-shirt)

# How to Setup Medusa Express

1. Create your project:
    
    ```powershell
    npx create-medusa-app@latest
    ```
    
    Fill in your details and choose [medusa.express](http://medusa.express) (Next.js) from the options
    
    ![Medusa Options in the console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lee7k97ejml2acswcsd9.png)
    
    After this command is done, you’ll find three folders: admin, backend and storefront
    
    ![Three Folders after setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7g5ob03096evs2qcfw7.png) 
    
2. Navigate to your backend folder and run the following commands:
    
    ```powershell
    cd medusa-express-test/backend
    
    npm install -g @medusajs/medusa-cli
    medusa develop
    ```
    
    Here, we’re downloading the medusa CLI tool globally to run the server that will have our seeded data. The server will run by default on localhost:9000. You can view all the products you have by visiting localhost:9000/store/products in your browser or postman to see all the available products you have.
    
    ![Notice the handle attribute in each product](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1t8o70m61v8d98v6pny.png) 
    
    Please notice the “handle” attribute in each product data as this is the attribute we’ll use as the end point for every product in our website.
    
3. Create a `.env.local` file and make sure you add the following environment variables:
    
    ```
    NEXT_PUBLIC_MEDUSA_BACKEND_URL=http://localhost:9000
    # Stripe key is required for completing orders
    NEXT_PUBLIC_STRIPE_API_KEY=pk_test_...
    ```
    
    You can get your stripe API key from here: [API keys | Stripe Documentation](https://stripe.com/docs/keys).
    
4. Run your storefront app
    
    ```
    npm run dev
    ```
    
    and you’re ready to go! You’ll find the storefront running on localhost:8000 by default. You’ll be met by this template page:
    
    ![What you'll see when you first run the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zz1esxnw3pd925vyozhb.png) 
    
5. Go to the checkout page
    
    You’ll find the checkout page for any of your products if you add “/<product handle>” at the end of the URL
    
    examples:
    
    1. “localhost:8000/sweatshirt”
        
        ![Sweatshirt example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9cx1gee2vjiu51gtxlmi.png) 
        
    2. “localhost:8000/sweatpants”
        
        ![Sweatpants example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8v85jbiwjeyfkt170g7z.png) 
        

# Why Use Medusa Express?

Using Medusa Express will be the perfect choice if you are:

- A business owner that wants to save time and money when building your website.
- A developer hobbyist that wants to practice building e-commerce apps without getting into the nits and grits of building a checkout process.
- A person who loves open-source products and wants to help the community by trying out products and giving feedback to the creators and contributors.

The solution is built on top of [Medusa’s](https://www.medusajs.com/) ecommerce backend which gives you a great place to manage orders, products, customers etc. For more info on how to set up a Medusa backend, check out the [introductory article on the topic](https://www.medusajs.com/post/get-started-with-medusa-the-open-source-alternative-to-shopify).

# Conclusion

In this article, we went through how to set up Medusa Express on your local machine, you can now use Medusa Express for a frictionless purchasing experience. If you have any questions or ran into any errors, you can always reach out on [discord](https://discord.gg/y6s5QggZBT) where you’ll find help!