it doesn't update the order total

Because there's no code to do that. This is what the code does when you click a "tip" button:

tip = event.target.value;
document.getElementById("tip").textContent = `Tip: $${tip}`;

As you can see, nothing in this operation affects the orderTotal or the display of that total. You can update those as well by writing code to update them:

// update tip
tip = event.target.value;
document.getElementById("tip").textContent = `Tip: $${tip}`;

// update total
// with calculations because your other values are multiplied by 100 for some reason
document.getElementById("total").textContent = `Your order total is: $${(
  (orderTotal + (tip * 100)) / 100
).toFixed(2)}`;

A few additional notes...

• Your updateTotal function is re-binding click handlers with document.addEventListener every time it executes. This is probably not what you want and can lead to bugs. Separate binding the event handlers from the logic executed by those handlers.
• The values being used are pretty much guaranteed to cause confusion at some point. Pick a standard and stick with it. Are values in "dollars" or in "cents"? If you stick with one standard then you won't have to keep littering the code with * 100 and / 100 operations just to get it to work.
• For some elements you have inline onClick attributes, for others you are using document.addEventListener. Why make them different? Pick one (ideally the latter) and be consistent with it, otherwise you're likely to confuse yourself.

Please read more about let
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
You are defining a scope variable inside the function and when you click on the button it doesn't work because there isn't any event to call the function.
After that, you can define an object outside the function that stores your data when you want to call the function in different ways.

let data = {
  items: 0,
  tip: 0
};

const buttons = document.querySelectorAll("input[type=button]");

buttons.forEach((b) => {
  b.addEventListener("click", (event) => {
    if (event.target.matches("input[type=button]")) {
      data.tip = parseInt(event.target.value);
      document.getElementById("tip").textContent = `Tip: $${data.tip}`;
      showPrice();
    }
  });
});

function updatePrice() {
  data.items = 0;
  document.querySelectorAll("input[type=checkbox]").forEach((checkBox) => {
    if (checkBox.checked) {
      data.items += +checkBox.value;
      showPrice();
    }
  });
}
function showPrice() {
  //Calculating Totals

  let orderTotal = data.items + data.tip;

  document.getElementById("price").textContent = `Food Total: $${(
    data.items / 100
  ).toFixed(2)}`;

  document.getElementById("total").textContent = `Your order total is: $${(
    orderTotal / 100
  ).toFixed(2)}`;
}

• HTML - Changed instead of input type button used radio button.
• Javascript - Used same method as checkbox for radio button logic.

function updatePrice() {
  //Adding Food
  let items = 0;

  document.querySelectorAll("input[type=checkbox]").forEach((checkBox) => {
    if (checkBox.checked) {
      items += +checkBox.value;
    }
  });
  
  

  //Adding Tip
  document.querySelectorAll("input[type=radio]").forEach((radioBox) => {
    if (radioBox.checked) {
      items += +radioBox.value;
    }
  });

  //Calculating Totals

  let orderTotal = items;

  document.getElementById("price").textContent = `Food Total: $${(
    items / 100
  ).toFixed(2)}`;

  document.getElementById("total").textContent = `Your order total is: $${(
    orderTotal / 100
  ).toFixed(2)}`;
}

<div class="menu-items">
    <h2>Order Details</h2>
        <div>
    <input type="checkbox" name="item1" value="1000" onChange="updatePrice()">
    <label for="item1">12 piece wings $10</label>
</div>
<div>
    <input type="checkbox" name="item2" value="700" onChange="updatePrice()">
    <label for="item2">6 piece wings $7</label>
</div>
<div>
    <input type="checkbox" name="item3" value="300" onChange="updatePrice()">
    <label for="item3">Large fries $3</label>
</div>
</div>
<div class="payment">
    <h2>Payment Summary</h2>
    <p id="price">Food Total: $0.00</p>
    <p id="fee">Delivery Fee $0.00</p>
    <p id="tip">Tip: $0.00</p>
    <input type="radio" name="tip" value="300" onChange="updatePrice()"> 3
    <input type="radio" name="tip" value="500" onChange="updatePrice()"> 5
    <input type="radio" name="tip" value="1000" onChange="updatePrice()"> 10
    <p id="total">Your order total is: $0.00</p>
</div>