Feature: Checkout Process
Relevant source files
The following files were used as context for generating this wiki page:
The Checkout Process is a critical feature of the Becathlon application that allows authenticated users to finalize their purchases. It orchestrates the collection of shipping and payment information, validates the user's cart and input, and creates a persistent order record in the database. The entire process is designed to be secure and atomic, ensuring data integrity.
The process begins when a user with items in their cart navigates to the checkout page. They are presented with a single form to enter their shipping address and select a payment method. Upon submission, the system performs a series of validations before creating the order, decrementing product stock, and redirecting the user to a confirmation page.
Core Components and Flow
The checkout system is primarily handled by the order app. It involves views for rendering the form and processing the data, templates for the user interface, and interactions with multiple database models.
URL Routing
The checkout process uses two main URL endpoints.
| Path | View Name | Description |
|---|---|---|
/checkout/ | checkout_view | Displays the main checkout form (GET) and processes the order submission (POST). |
/checkout/success/<order_id>/ | checkout_success | Displays the order confirmation page after a successful checkout. |
Sources: apps/order/views.py:118-121, 241-244, apps/order/tests.py:461-464, 477-480
Overall Checkout Flow
The following diagram illustrates the high-level logic flow from initiating checkout to its completion.
This diagram shows the conditional paths for user authentication, cart status, and data validation during the checkout process.
Sources: apps/order/views.py:115-238, apps/cart/views.py:126-136
Backend Logic (views.py)
The core logic resides in apps/order/views.py, which handles both displaying the checkout page and processing the submitted order.
checkout_view(request)
This view acts as the main entry point for the checkout process.
- Authentication Check: It first verifies if
request.user.is_authenticated. If not, it redirects the user to the login page with anextparameter to return them to checkout after logging in. - Cart Check: It retrieves the user's cart and checks if it contains any items. If the cart is empty, it redirects the user to the catalog homepage with an informational message.
- Request Handling:
- For a
GETrequest, it renders theorder/checkout.htmltemplate, passing the cart and cart items to be displayed in the order summary. - For a
POSTrequest, it calls theprocess_checkoutfunction to handle the order creation logic.
- For a
Sources: apps/order/views.py:115-136
process_checkout(request, cart, cart_items)
This function, decorated with @transaction.atomic, ensures that all database operations for an order succeed or fail together. This prevents partial orders or incorrect stock levels.
The sequence diagram below shows the interactions during a successful checkout submission.
Data Validation
Before any database operations, the submitted data is rigorously validated.
Shipping Address Validation
The validate_shipping_address_data function checks the following fields from the POST request.
| Field | Validation Rules |
|---|---|
full_name | Required, 3-100 characters. |
phone_number | Required, must match regex ^[\d\s\-\+\(\)]{7,20}$. |
address_line1 | Required, 5-255 characters. |
address_line2 | Optional, max 255 characters. |
city | Required, 2-100 characters. |
state | Optional, max 100 characters. |
postal_code | Required, must match regex ^[\d\s\-]{4,20}$. |
country | Required, must be one of: 'Indonesia', 'Malaysia', 'Singapore', 'Thailand', 'Philippines'. |
If any validation fails, the process is halted, and the user is redirected back to the checkout page with error messages.
Sources: apps/order/views.py:19-94, apps/order/tests.py:534-553
Payment Method Validation
The validate_payment_method function ensures the selected payment method is one of the allowed choices.
- Valid Methods:
CREDIT_CARD,BANK_TRANSFER,E_WALLET,COD. - These options are presented as radio buttons in the
checkout.htmltemplate.
Sources: apps/order/views.py:97-104, apps/order/templates/order/checkout.html:125-174
Stock Validation
A crucial final validation step is to re-check the stock for each item in the cart within the process_checkout function. This prevents overselling if another user purchases the same item while the current user is on the checkout page. The validate_cart_item_stock utility is used for this check.
Sources: apps/order/views.py:166-173, apps/cart/views.py:32-38
Frontend Templates
The user interface for the checkout process is defined in two main templates.
checkout.html
This template renders the main checkout page.
- Layout: It uses a two-column grid layout (
checkout-layout), with the main form on the left and a sticky order summary sidebar on the right. - Shipping Form: A
<form>with the IDcheckout-formcollects all shipping information. All inputs have therequiredattribute for client-side validation. - Payment Method: Payment options are presented as a group of styled radio buttons (
radio-group). Each option is associated with the main form via theform="checkout-form"attribute. - Order Summary: The right sidebar (
checkout-sidebar) displays a list of items in the cart (cart_items), the subtotal, and the total amount. This data is passed from thecheckout_view. - Submission: A "Complete Order" button of
type="submit"is linked to the main form and triggers the POST request.
Sources: apps/order/templates/order/checkout.html, apps/order/static/order/css/checkout.css:59-64, 252-277
checkout_success.html
This page is displayed after a successful order creation.
- Confirmation: It shows a confirmation message, including the user's name and the unique order ID.
- Order Details: It provides a comprehensive summary of the completed order, including:
- Order number, date, status, and total price.
- The shipping address provided during checkout.
- Payment information, including the method and status.
- A list of all items purchased in that order.
- Navigation: Provides links to "Continue Shopping" or return to the homepage.
Sources: apps/order/templates/order/checkout_success.html
Database Interaction
The checkout process coordinates several database models to create a complete order record.
This ER diagram shows the relationships between the models involved in the checkout.
A key aspect is that OrderItem saves a snapshot of the product's price at the time of purchase. The Order.create_from_cart method handles the creation of Order and OrderItem objects, decrements Product.stock, and clears the Cart.
Sources: apps/order/views.py:176-220, apps/order/tests.py:101-109, 240-252, 310-318
Summary
The Becathlon checkout process is a robust, multi-step feature that securely handles order placement. It enforces user authentication, performs comprehensive server-side validation of shipping data, payment methods, and product availability. By using an atomic transaction, it guarantees data consistency across the Order, Product, Payment, and ShippingAddress models. The frontend provides a clear, user-friendly interface for data entry and order confirmation, completing the customer's purchasing journey.