Skip to content
My Docs

Checkout Page

Documentation: Checkout Page

Overview

The Checkout Page in our payment dashboard allows users to finalize their payment transactions. It integrates with the backend to fetch payment details and billing information, providing a smooth and efficient checkout experience.

State Structure

The state is organized into three main sections:

  1. payment:
  • data: Stores the fetched payment details.
  • isLoading: Indicates if the payment data is being fetched.
  • error: Captures any errors during the payment data fetch process.
  1. billingDetails:
  • data: Array of billing details fetched for the user.
  • isLoading: Loading state for billing details fetch.
  • error: Error state for billing details fetch.
  1. selectedBillingDetails:
  • Stores the billing detail selected by the user for the current transaction.

Key Components

  1. State Management with Reducer:

    • checkoutReducer and initialState manage the state of the Checkout Page.
    • States: payment, billingDetails, selectedBillingDetails.
    • Actions: FETCH_PAYMENT_START, FETCH_PAYMENT_SUCCESS, FETCH_PAYMENT_ERROR, FETCH_BILLING_DETAILS_START, FETCH_BILLING_DETAILS_SUCCESS, FETCH_BILLING_DETAILS_ERROR, SET_SELECTED_BILLING_DETAILS.

  2. Action Creators (checkoutActions.js):

    • fetchPayment: Fetches a specific payment detail.
    • fetchBillingDetails: Retrieves all billing details for a user.
    • setSelectedBillingDetails: Sets the selected billing address for the transaction.

  3. Component Structure:

    • The page is structured using MDB React components.
    • It includes a form for billing details (BillingDetailsForm) and a section to display payment information (CheckoutDetails).
    • A modal (CreditCardModal) is used for credit card input.
    • Loading states are handled by LargeLoadingSpinner and SmallLoadingSpinner.

  4. Data Fetching and Error Handling:

    • On component mount, it fetches the payment and billing details.
    • Loading and error states are managed using the reducer.

  5. User Interaction:

    • Users can select a billing address from listed options or add a new one.
    • Proceed to Payment button is enabled only when a billing address is selected.

Detailed Workflow

  1. Initialization:

    • When the page loads, useEffect triggers the fetchPayment and fetchBillingDetails actions.
    • These actions dispatch types to start fetching data and handle success or error scenarios.

  2. Rendering:

    • The page first checks for any errors. If found, ErrorComponent displays the error message.
    • If no errors and data is loading, LargeLoadingSpinner is displayed.
    • Once data is fetched, the page renders billing details and payment information.

  3. Selecting Billing Details:

    • Users can click on a billing address to select it for the payment.
    • setSelectedBillingDetails is invoked on selection, updating the state with the selected details.

  4. Proceeding to Payment:

    • The Proceed to Payment button is active only when a billing address is selected.
    • On click, it opens the CreditCardModal for entering credit card details.

APIs and Helpers

  • getAllBillingDetails: Fetches billing details for a user.
  • getOnePayment: Retrieves specific payment details.

Future Enhancements

  • UI Improvements: Further refine the UI for a more intuitive and seamless user experience.

Error Handling and Debugging

  • Check for common API call failures and ensure the reducer properly handles these scenarios.
  • Monitor network requests and responses for troubleshooting.

Conclusion

The Checkout Page is a crucial component of our payment dashboard, enabling users to review and complete their transactions effectively. Continuous enhancements and optimizations will ensure a better user experience and reliability.