Payment Integration

Relevant source files

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

• backend/app.js
• backend/controller/payment.js
• frontend/src/components/Checkout/Checkout.jsx
• frontend/src/components/Payment/Payment.jsx
• frontend/src/pages/PaymentPage.jsx
• README.md

The payment integration module is a critical component of the e-commerce platform, designed to handle order transactions securely and efficiently. It provides customers with multiple payment options, including PayPal, Cash on Delivery, and Stripe for credit card payments (though the Stripe UI is currently commented out). The system is architected with a clear separation between the frontend React application, which handles user interaction and payment method selection, and the backend Node.js/Express server, which processes payments and finalizes order creation.

The overall flow begins on the Checkout page, where user and order details are collected. This information is then passed to the Payment page, where the user selects a payment method. Depending on the choice, the frontend interacts with the respective payment provider (PayPal, Stripe) and/or the application's backend API to process the payment and create the order in the database.

System Architecture

The payment system involves a coordinated effort between frontend components and backend API endpoints. The process is initiated by the user and flows from the checkout page to the payment page, culminating in a request to the backend to create an order.

High-Level Payment Flow

This diagram illustrates the user's journey from the checkout page to a successful order placement.

Frontend Implementation

The frontend logic is split across several React components, primarily managing the user interface for collecting data and handling payment provider interactions.

Checkout Process

The checkout process begins on the Checkout.jsx component. Its main responsibilities are:

1. Collecting the user's shipping address.
2. Calculating the subtotal, shipping costs, and total price based on the cart contents.
3. Allowing the user to apply a coupon code.
4. Preparing the order data and passing it to the payment page.

When the user clicks the "Payment" button, the paymentSubmit function is triggered. This function packages all relevant information into an orderData object and stores it in the browser's localStorage before redirecting the user to the /payment page.

Sources: frontend/src/components/Checkout/Checkout.jsx:30-52

orderData Structure

The orderData object stored in localStorage is crucial for passing state between the checkout and payment pages.

Key	Type	Description	Source File
cart	Array	An array of product objects in the user's cart.	Checkout.jsx:43
totalPrice	Number	The final price including shipping and discounts.	Checkout.jsx:44
subTotalPrice	Number	The total price of items in the cart before shipping/discounts.	Checkout.jsx:45
shipping	Number	The calculated shipping cost.	Checkout.jsx:46
discountPrice	Number	The amount discounted via a coupon.	Checkout.jsx:47
shippingAddress	Object	The user's shipping address.	Checkout.jsx:48
user	Object	The currently logged-in user's data.	Checkout.jsx:49

Payment Page

The PaymentPage.jsx component acts as a wrapper that renders the main Payment.jsx component. The Payment.jsx component retrieves the orderData from localStorage and presents the user with the available payment options.

Sources: frontend/src/pages/PaymentPage.jsx, frontend/src/components/Payment/Payment.jsx:21-24

Payment Method Handlers

The Payment.jsx component contains distinct handlers for each payment method. Each handler is responsible for creating a final order object and posting it to the /api/v2/order/create-order endpoint.

1. Cash on Delivery (COD): The cashOnDeliveryHandler sets the paymentInfo type to 'Cash On Delivery' and immediately sends the order creation request.
   Sources: frontend/src/components/Payment/Payment.jsx:159-176

2. PayPal: The paypalPaymentHandler is triggered after a successful PayPal transaction via the @paypal/react-paypal-js library. It captures the payer details from PayPal, sets the paymentInfo with the PayPal transaction ID and status, and then sends the order creation request.
   Sources: frontend/src/components/Payment/Payment.jsx:89-106

3. Stripe (Credit Card): The paymentHandler manages the Stripe payment flow. It first requests a client_secret from the backend /api/v2/payment/process endpoint. It then uses this secret with the Stripe.js library to confirm the card payment. If successful, it populates paymentInfo with the Stripe payment intent ID and status before creating the order. Note: The UI for this method is currently commented out in the code.
   Sources: frontend/src/components/Payment/Payment.jsx:122-157

The sequence diagram below shows the interactions for all three payment methods.

Backend Implementation

The backend exposes a set of API endpoints under /api/v2/payment to facilitate payment processing, specifically for Stripe.

Sources: backend/app.js:76, README.md

API Endpoints

The payment-specific endpoints are handled by backend/controller/payment.js.

Method	Path	Description	Source File
POST	/api/v2/payment/process	Creates a Stripe Payment Intent and returns a client_secret to the frontend.	README.md
GET	/api/v2/payment/stripeapikey	Sends the Stripe publishable API key to the frontend.	README.md

Stripe Payment Processing

The POST /process endpoint is the core of the Stripe integration.

1. It receives the order amount in the request body from the frontend.
2. It initializes the Stripe SDK using the STRIPE_SECRET_KEY from environment variables.
3. It calls stripe.paymentIntents.create with the amount and currency ('USD').
4. It sends a success response back to the client containing the client_secret for the created Payment Intent.

This client_secret is then used by the frontend to securely confirm the payment without handling sensitive card details directly.

Sources: frontend/src/components/Payment/Payment.jsx:128-132, README.md