Navigation between Checkout Steps

Oct 13, 2025 by wbrum.org 126 views

Checkout Process Flow

Implementing a multi-step checkout process is crucial for e-commerce sites to ensure a seamless user experience. In this section, we will create a checkout state machine using TypeScript with proper state transitions, a CheckoutProvider context that manages the checkout flow, navigation between checkout steps with validation, and data persistence between steps if the user refreshes.

Checkout State Machine

We will use a finite state machine to manage the checkout flow. The state machine will have the following states:

INITIAL: The initial state of the checkout flow.
SELECT_SHIPPING_ADDRESS: The user selects their shipping address.
SELECT_BILLING_ADDRESS: The user selects their billing address.
SELECT_SHIPPING_METHOD: The user selects their shipping method.
SELECT_PAYMENT_METHOD: The user selects their payment method.
ORDER_REVIEW: The user reviews their order.
ORDER_SUBMISSION: The user submits their order.

// checkout-state-machine.ts
enum CheckoutState {
  INITIAL,
  SELECT_SHIPPING_ADDRESS,
  SELECT_BILLING_ADDRESS,
  SELECT_SHIPPING_METHOD,
  SELECT_PAYMENT_METHOD,
  ORDER_REVIEW,
  ORDER_SUBMISSION,
}

class CheckoutStateMachine {
  private currentState: CheckoutState;

  constructor() {
    this.currentState = CheckoutState.INITIAL;
  }

  public transitionTo(state: CheckoutState) {
    this.currentState = state;
  }

  public getCurrentState() {
    return this.currentState;
  }
}

CheckoutProvider Context

We will use the Context API to manage the checkout flow. The CheckoutProvider context will provide the checkout state machine and the current state of the checkout flow.

// checkout-provider.ts
import { createContext, useState } from 'react';
import CheckoutStateMachine from './checkout-state-machine';

const CheckoutContext = createContext<CheckoutContextType>({
  checkoutState: CheckoutStateMachine(),
  updateCheckoutState: () => {},
});

interface CheckoutContextType {
  checkoutState: CheckoutStateMachine;
  updateCheckoutState: (state: CheckoutState) => void;
}

const CheckoutProvider: React.FC = ({ children }) => {
  const [checkoutState, setCheckoutState] = useState<CheckoutStateMachine>(
    new CheckoutStateMachine()
  );

  const updateCheckoutState = (state: CheckoutState) => {
    setCheckoutState((prevState) => {
      prevState.transitionTo(state);
      return prevState;
    });
  };

  return (
    <CheckoutContext.Provider value={{ checkoutState, updateCheckoutState }}>
      {children}
    </CheckoutContext.Provider>
  );
};

export default CheckoutProvider;

Navigation between Checkout Steps

We will use the useContext hook to access the checkout state machine and update the current state of the checkout flow.

// use-checkout.ts
import { useContext } from 'react';
import { CheckoutContext } from './checkout-provider';

const useCheckout = () => {
  const { checkoutState, updateCheckoutState } = useContext(CheckoutContext);

  return {
    checkoutState,
    updateCheckoutState,
  };
};

Data Persistence between Steps

We will use the localStorage API to persist the checkout data between steps.

// use-local-storage.ts
import { useState, useEffect } from 'react';

const useLocalStorage = (key: string) => {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : null;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [value]);

  return [value, setValue];
};

Shipping & Billing Forms

Shipping and billing address forms are essential components of the checkout process. In this section, we will create reusable AddressForm components with TypeScript interfaces, form validation using Formik or React Hook Form, country/state selection with dynamic field requirements, a 'Same as shipping' option for billing address, and address saving functionality for registered users.

Reusable AddressForm Components

We will create two reusable AddressForm components: ShippingAddressForm and BillingAddressForm.

// shipping-address-form.ts
import { Formik, Form, Field, ErrorMessage } from 'formik';
import { useState } from 'react';

interface ShippingAddressFormProps {
  onSubmit: (values: ShippingAddress) => void;
}

interface ShippingAddress {
  name: string;
  address1: string;
  address2: string;
  city: string;
  state: string;
  zip: string;
  country: string;
}

const ShippingAddressForm: React.FC<ShippingAddressFormProps> = ({ onSubmit }) => {
  const [values, setValues] = useState<ShippingAddress>({
    name: '',
    address1: '',
    address2: '',
    city: '',
    state: '',
    zip: '',
    country: '',
  });

  const handleFormSubmit = (values: ShippingAddress) => {
    onSubmit(values);
  };

  return (
    <Formik
      initialValues={values}
      onSubmit={handleFormSubmit}
      render={({ values, handleChange, handleBlur, handleSubmit }) => (
        <Form>
          <Field
            type="text"
            name="name"
            value={values.name}
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="Name"
          />
          <ErrorMessage name="name" component="div" />
          <Field
            type="text"
            name="address1"
            value={values.address1}
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="Address 1"
          />
          <ErrorMessage name="address1" component="div" />
          <Field
            type="text"
            name="address2"
            value={values.address2}
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="Address 2"
          />
          <ErrorMessage name="address2" component="div" />
          <Field
            type="text"
            name="city"
            value={values.city}
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="City"
          />
          <ErrorMessage name="city" component="div" />
          <Field
            type="text"
            name="state"
            value={values.state}
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="State"
          />
          <ErrorMessage name="state" component="div" />
          <Field
            type="text"
            name="zip"
            value={values.zip}
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="Zip"
          />
          <ErrorMessage name="zip" component="div" />
          <Field
            type="text"
            name="country"
            value={values.country}
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="Country"
          />
          <ErrorMessage name="country" component="div" />
          <button type="submit">Submit</button>
        </Form>
      )}
    />
  );
};

export default ShippingAddressForm;

Form Validation using Formik or React Hook Form

We will use Formik to validate the form fields.

// formik-validation.ts
import { Formik, Form, Field, ErrorMessage } from 'formik';

const validateForm = (values: ShippingAddress) => {
  const errors: ShippingAddress = {};

  if (!values.name) {
    errors.name = 'Required';
  }

  if (!values.address1) {
    errors.address1 = 'Required';
  }

  if (!values.city) {
    errors.city = 'Required';
  }

  if (!values.state) {
    errors.state = 'Required';
  }

  if (!values.zip) {
    errors.zip = 'Required';
  }

  if (!values.country) {
    errors.country = 'Required';
  }

  return errors;
};

const ShippingAddressForm: React.FC = () => {
  const [values, setValues] = useState<ShippingAddress>({
    name: '',
    address1: '',
    address2: '',
    city: '',
    state: '',
    zip: '',
    country: '',
  });

  const handleFormSubmit = (values: ShippingAddress) => {
    // Submit the form
  };

  return (
    <Formik
      initialValues={values}
      validate={validateForm}
      onSubmit={handleFormSubmit}
      render={({ values, handleChange, handleBlur, handleSubmit, errors }) => (
        <Form>
          <Field
            type="text"
            name="name"
            value={values.name}
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="Name"
          />
          <ErrorMessage name="name" component="div" />
          <Field
            type="text"
            name="address1"
            value={values.address1}
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="Address 1"
          />
          <ErrorMessage name="address1" component="div" />
          <Field
            type="text"
            name="address2"
            value={values.address2}
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="Address 2"
          />
          <ErrorMessage name="address2" component="div" />
          <Field
            type="text"
            name="city"
            value={values.city}
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="City"
          />
          <ErrorMessage name="city" component="div" />
          <Field
            type="text"
            name="state"
            value={values.state}
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="State"
          />
          <ErrorMessage name="state" component="div" />
          <Field
            type="text"
            name="zip"
            value={values.zip}
            onChange={handleChange}
            onBlur={<br/>
**Q&A: Checkout & Order Processing**
=====================================

**Q: What is the purpose of a checkout state machine in an e-commerce application?**
A: A checkout state machine is a finite state machine that manages the checkout flow of an e-commerce application. It helps to ensure that the user completes the checkout process in the correct order and that all necessary steps are taken.

**Q: How does the CheckoutProvider context manage the checkout flow?**
A: The CheckoutProvider context uses the Context API to manage the checkout flow. It provides the checkout state machine and the current state of the checkout flow to all components in the application.

**Q: What is the purpose of the useCheckout hook?**
A: The useCheckout hook is used to access the checkout state machine and update the current state of the checkout flow. It provides a way for components to interact with the checkout state machine.

**Q: How does the useLocalStorage hook persist data between steps?**
A: The useLocalStorage hook uses the `localStorage` API to persist data between steps. It stores the data in the browser's local storage and retrieves it when the user navigates to a new step.

**Q: What is the purpose of the ShippingAddressForm component?**
A: The ShippingAddressForm component is a reusable form component that allows users to enter their shipping address. It includes fields for name, address 1, address 2, city, state, zip, and country.

**Q: How does the form validation work in the ShippingAddressForm component?**
A: The form validation in the ShippingAddressForm component is handled by the `validateForm` function. This function checks if the required fields are filled in and returns an object with error messages if any fields are missing.

**Q: What is the purpose of the useFormik hook?**
A: The useFormik hook is used to create a Formik form component. It provides a way to create a form with validation and submission handling.

**Q: How does the useFormik hook handle form submission?**
A: The useFormik hook handles form submission by calling the `onSubmit` function when the form is submitted. This function can be used to submit the form data to the server.

**Q: What is the purpose of the ShippingMethodSelector component?**
A: The ShippingMethodSelector component is a reusable component that allows users to select their shipping method. It includes a list of available shipping methods and their prices.

**Q: How does the ShippingMethodSelector component handle shipping calculation errors?**
A: The ShippingMethodSelector component handles shipping calculation errors by displaying an error message to the user. It also provides a way to retry the shipping calculation.

**Q: What is the purpose of the PaymentMethodSelector component?**
A: The PaymentMethodSelector component is a reusable component that allows users to select their payment method. It includes a list of available payment methods and their prices.

**Q: How does the PaymentMethodSelector component handle payment method errors?**
A: The PaymentMethodSelector component handles payment method errors by displaying an error message to the user. It also provides a way to retry the payment method selection.

**Q: What is the purpose of the OrderReview component?**
A: The OrderReview component is a reusable component that allows users to review their order. It includes a summary of the order details and a way to submit the order.

**Q: How does the OrderReview component handle order submission errors?**
A: The OrderReview component handles order submission errors by displaying an error message to the user. It also provides a way to retry the order submission.

**Q: What is the purpose of the OrderTracking component?**
A: The OrderTracking component is a reusable component that allows users to track their order. It includes a list of order status updates and a way to view the order details.

**Q: How does the OrderTracking component handle order status updates?**
A: The OrderTracking component handles order status updates by displaying the latest order status update to the user. It also provides a way to view the order details.

**Q: What is the purpose of the OrderHistory component?**
A: The OrderHistory component is a reusable component that allows users to view their order history. It includes a list of past orders and a way to view the order details.

**Q: How does the OrderHistory component handle order history updates?**
A: The OrderHistory component handles order history updates by displaying the latest order history update to the user. It also provides a way to view the order details.