Food Item Checkout Mobile UI

Key Components and Structure

• Header: At the top, there is a "Checkout" title centered, a back arrow on the left, and a three-dot menu/more options icon on the right.
• Order Items List: This is the main section, listing the selected food items. Each item includes:
  • An image of the dish.
  • The name of the dish (e.g., "Chow min").
  • The individual price (e.g., "$6").
  • A quantity selector with the current quantity displayed between a minus (decrement) and a plus (increment) button.
    • The listed items are:
      1. Chow min (Quantity: 2)
      2. Sweet Takoyaki (Quantity: 1)
      3. Fresh Fruit Pan Cake (Quantity: 2)
      4. Gekkeikan Tandoor (Quantity: 1)
• Notes Section: Below the item list, there is a field labeled "Add notes to your order" with a small icon, allowing the user to input special instructions.