Extending the Marketplace for Orders and Payments

Processing payments from customers when they place orders and allowing sellers to manage these orders are key aspects of e-commerce applications. In this chapter, we'll extend the online marketplace we built in the previous chapter by implementing capabilities for buyers to add products to a shopping cart, a checkout, and place orders, and for sellers to manage these orders and have payments processed from the marketplace application. Once you've gone through this chapter and added these features, besides extending the marketplace application with advanced features, you will be able to utilize browser storage, process payments using Stripe, and integrate other technologies into this stack.

In this chapter, we will extend the online marketplace by covering the following topics:

• Introducing a cart, payments, and orders...

Introducing cart, payments, and orders in the MERN Marketplace

The MERN Marketplace application we developed in Chapter 7, Exercising MERN Skills with an Online Marketplace, has very simple features and is missing core e-commerce functionality. In this chapter, we will extend this marketplace application so that it includes a shopping cart feature for the buyer, Stripe integration for processing credit card payments, and a basic order-management flow for the seller. The implementations that follow are kept simple to serve as starting points for developing more complex versions of these features for your own applications.

The code for the complete MERN Marketplace application is available on GitHub at https://github.com/PacktPublishing/Full-Stack-React-Projects-Second-Edition/tree/master/Chapter07%20and%2008/mern-marketplace. You can clone this code and run the application as you...

Implementing a shopping cart

Visitors to the MERN Marketplace can add products they wish to buy to a shopping cart by clicking the add to cart button on each product. A cart icon on the menu will indicate the number of products that have already been added to their cart as the user continues to browse through the marketplace. They can also update the cart's contents and begin the checkout process by opening the cart view. But to complete the checkout process and place an order, users will be required to sign in.

The shopping cart is mainly a frontend feature, so the cart details will be stored locally on the client side until the user places the order at checkout. To implement the shopping cart features, we will set up helper methods in client/cart/cart-helper.js that will help manipulate the cart details from relevant React components.

In the following sections, we will...

Using Stripe for payments

Payment processing is required across implementations of the checkout, order creation, and order management processes. It also involves making updates to both the buyer's and seller's user data. Before we delve into the implementations of the checkout and order features, we will briefly discuss payment processing options and considerations using Stripe and learn how to integrate it in the MERN Marketplace.

Stripe provides an extensive set of tools that are necessary to integrate payments in any web application. These tools can be selected and used in different ways, depending on the specific type of application and the payment use case being implemented.

In the case of the MERN Marketplace setup, the application itself will have a platform on Stripe and will expect sellers to have connected Stripe accounts on the platform so that the application...

Integrating the checkout process

Users who are signed in and have items added to their cart will be able to start the checkout process. We will add a Checkout form to collect customer details, delivery address information, and credit card information, as shown in the following screenshot:

This checkout view will consist of two parts, with the first part for collecting buyer details including name, email, and delivery address, and the second part for entering credit card details and placing the order. In the following sections, we will complete the implementation of the checkout process by initializing the checkout form details and adding the fields for collecting buyer details. Then, we will collect the buyer's credit card details to allow them to place the order and finish the checkout process.

...

Creating a new order

When a user places an order, the details of the order that were confirmed at checkout will be used to create a new order record in the database, update or create a Stripe Customer for the user, and decrease the stock quantities of products ordered. In the following sections, we will add an order model to define the details of the orders to be stored in the database and discuss the implementation of the backend API that will be called from the frontend to create the new order record.

Defining an Order model

To store the orders in the backend, we will define a Schema for the order model that will record order details including the customer details, payment information, and an array of the products ordered...

Listing orders by shop

An important feature of the marketplace is allowing sellers to see and update the status of orders they've received for products in their shops. To implement this, we will set up backend APIs to list orders by shop and update an order as a seller changes the status of a purchased product. Then, we will add some frontend views that will display the orders and allow the seller to interact with each order.

The list by shop API

In this section, we will implement an API to get orders for a specific shop so that authenticated sellers can view the orders for each of their shops in one place. The request for this API will be received at /api/orders/shop/:shopId, with the route defined in order.routes.js...

Viewing single-order details

With the Order collection and the database access all set up, moving forward, it is easy to add the features of listing orders for each user and showing details of a single order in a separate view where the user can track the status of each ordered product. A view to render the details of a single order to the customer can be designed and implemented to look as follows:

Following the steps that have been repeated throughout this book to set up backend APIs to retrieve data and use it in the frontend to construct frontend views, you can develop order-related views as desired. For example, a view to display the orders that have been placed by a single user can be rendered as follows:

You can apply the lessons you learned while building out the full-stack features of the MERN Marketplace application to implement these order detail views, taking inspiration...

Summary

In this chapter, we extended the MERN Marketplace application and explored how to add a shopping cart for buyers, a checkout process with credit card payments, and order management for the sellers in an online marketplace application.

We discovered how the MERN stack technologies can work well with third-party integrations as we implemented the cart checkout flow and processed credit card charges on ordered products using the tools provided by Stripe for managing online payments.

We also unlocked more of what is possible with MERN, such as optimized bulk write operations in MongoDB for updating multiple documents in response to a single API call. This allowed us to decrease the stock quantities of multiple products in one go, such as when a user placed an order for multiple products from different stores.

With these new approaches and implementations that we explored...