Order & Checkout Flow

Relevant source files

The following files were used as context for generating this wiki page:

• backend/controller/order.js
• backend/model/order.js
• frontend/src/components/Checkout/Checkout.jsx
• frontend/src/components/Payment/Payment.jsx
• frontend/src/components/UserOrderDetails.jsx
• frontend/src/components/Shop/OrderDetails.jsx
• backend/app.js
• frontend/src/redux/actions/order.js

The Order & Checkout Flow is a critical module that manages the entire process from when a user decides to purchase items in their cart until the order is successfully created and tracked. This system encompasses user-facing components for entering shipping and payment information, backend services for processing and storing order data, and dashboards for both users and sellers to manage and track orders post-purchase.

The flow is designed to be a multi-step process involving shipping address entry, coupon application, payment method selection, and final order submission. The backend, built with Express.js, provides RESTful APIs to handle order creation, retrieval, and status updates, while the React frontend orchestrates the user experience.

High-Level Checkout Flow

The following diagram illustrates the user's journey from the checkout page to order confirmation.

Backend Architecture

The backend is responsible for validating and persisting order data, as well as exposing endpoints for order management.

Order Data Model

The Order model defines the structure for storing order information in the database. It uses Sequelize to define the schema, which includes details about the cart items, shipping, payment, user, and order status.

Sources: backend/model/order.js

The following ER diagram shows the structure of the orders table.

Key Fields

Field	Type	Description
id	INTEGER	Primary key for the order.
cart	JSON	An array of product objects that are part of the order.
shippingAddress	JSON	An object containing the customer's shipping address.
user	JSON	An object containing information about the user who placed the order.
totalPrice	DECIMAL	The final price of the order after discounts and shipping.
status	VARCHAR	The current status of the order (e.g., "Processing", "Delivered").
paymentInfo	JSON	An object with payment details, including method, ID, and status.
paidAt	INTEGER	Timestamp indicating when the order was paid.
deliveredAt	INTEGER	Timestamp indicating when the order was delivered.
createdAt	DATETIME	Timestamp for when the order was created.

Sources: backend/model/order.js:7-20

API Endpoints

The order-related API endpoints are defined in backend/controller/order.js and registered in backend/app.js under the /api/v2/order route.

Method	Endpoint	Description	Middleware
POST	/create-order	Creates a new order.	catchAsyncErrors
GET	/get-all-orders/:userId	Retrieves all orders for a specific user.	isAuthenticated
GET	/get-seller-all-orders/:shopId	Retrieves all orders for a specific shop.	isSeller
PUT	/update-order-status/:id	Updates the status of an order (for sellers).	isSeller
PUT	/order-refund/:id	Allows a user to request a refund for an order.	isAuthenticated
PUT	/order-refund-success/:id	Allows a seller to mark a refund request as successful.	isSeller
GET	/admin-all-orders	Retrieves all orders in the system (for admins).	isAuthenticated, isAdmin

Sources: backend/controller/order.js, backend/app.js:71

Frontend Checkout Process

The checkout process is handled across several React components, primarily Checkout.jsx and Payment.jsx.

Step 1: Shipping & Order Summary

The Checkout.jsx component is the first step in the checkout flow.

• Shipping Information: The user provides their shipping address. The form uses the country-state-city library to populate country and state/city dropdowns. Users can also select a previously saved address.
• Order Calculation: The component calculates the subTotalPrice, shipping cost (2% of subtotal), and totalPrice.
• Coupon Application: A form allows users to apply a coupon code. Submitting the form triggers a GET request to /api/v2/coupon/get-coupon-value/:name. If the coupon is valid for the items in the cart, a discountPrice is calculated and applied to the total.
• Data Persistence: Upon proceeding, the complete order details (cart, prices, shipping address) are stored in localStorage under the key latestOrder to be accessed by the Payment component.

// frontend/src/components/Checkout/Checkout.jsx:38-54
const paymentSubmit = () => {
    if (address1 === '' || country === '' || city === '') {
        toast.error('Please select a delivery address!');
    } else {
        const shippingAddress = {
            address1,
            country,
            city,
        };

        const orderData = {
            cart,
            totalPrice,
            subTotalPrice,
            shipping,
            discountPrice,
            shippingAddress,
            user,
        };

        // update local storage with the updated orders array
        localStorage.setItem('latestOrder', JSON.stringify(orderData));
        navigate('/payment');
    }
};

Sources: frontend/src/components/Checkout/Checkout.jsx:21-118

Step 2: Payment Selection

The Payment.jsx component retrieves the order data from localStorage and presents the user with payment options.

• Payment Methods:
  1. PayPal: Integrates the @paypal/react-paypal-js library. Clicking "Pay now" opens a modal with PayPal's payment interface.
  2. Cash on Delivery: A simple form submission that creates the order with paymentInfo.type set to "Cash On Delivery".
  3. Stripe (Credit/Debit Card): The code for Stripe integration using @stripe/react-stripe-js is present but appears to be commented out in the UI. It is designed to handle card payments by confirming the payment intent with the backend.

Sources: frontend/src/components/Payment/Payment.jsx:200-297

Order Creation Sequence

The following sequence diagram shows the interactions when a user completes a payment and an order is created.

Post-Order Management

After an order is placed, both users and sellers have interfaces to manage and track it.

User Order Details & Tracking

The UserOrderDetails.jsx component allows a logged-in user to:

• View detailed information about a specific order, including items, total price, shipping address, and payment status.
• Submit a product review if the order status is "Delivered".
• Request a refund for a delivered order by triggering a PUT request to /api/v2/order/order-refund/:id, which updates the order status to "Processing refund".

Sources: frontend/src/components/UserOrderDetails.jsx:58-71

Seller Order Management

The Shop/OrderDetails.jsx component provides an interface for sellers to:

• View the details of an order placed with their shop.
• Update the order status through a dropdown menu. Available statuses include "Processing", "Transferred to delivery partner", "Shipping", "Received", "On the way", and "Delivered".
• Update the status of a refund request to "Processing refund" or "Refund Success".
• Changes are submitted via a PUT request to /api/v2/order/update-order-status/:id or /api/v2/order/order-refund-success/:id.

Sources: frontend/src/components/Shop/OrderDetails.jsx:33-46, frontend/src/components/Shop/OrderDetails.jsx:150-194

Summary

The Order & Checkout Flow is a well-structured module that handles the entire lifecycle of a customer's purchase. It begins with a user-friendly frontend experience for data entry and payment, supported by a robust backend API for data processing. The use of localStorage effectively bridges the data transfer between the checkout and payment steps. Post-purchase, dedicated components for users and sellers ensure transparent order tracking and management, including features like reviews and refunds, completing the e-commerce transaction cycle.