Header Only Appears On One Page

The issue is indeed with the value passed to the element prop of the Route components. What you've done is used the comma operator.

element={<Header />, <Orders />} // <-- comma operator

Comma operator (,)

The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand. This lets you create a compound expression in which multiple expressions are evaluated, with the compound expression's final value being the value of the rightmost of its member expressions. This is commonly used to provide multiple parameters to a for loop.

In other words, it processed all the operands and returned only the last one, the non-header component.

To resolve you can either return an array of JSX literals

element={[<Header />, <Orders />]}

or return a fragment

element={(
  <>
    <Header />
    <Orders />
  </>
)}

Alternatively, if rendering a header with a page is something you commonly do, abstract this into a layout component.

import { Outlet } from 'react-router-dom';

const HeaderLayout = () => (
  <>
    <Header />
    <Outlet /> // <-- nested routes rendered here
  </>
);

...

<Router>
  <div className="app">
    <Routes>
      <Route element={<HeaderLayout />}>
        <Route path="/orders" element={<Orders />} />
        <Route path="/checkout" element={<Checkout />} />
        <Route path="/" element={<Home />} />
      </Route>
      
      <Route path="/login" element={< Login />} />
      <Route path="/payment" stripe={promise} element={ < Payment />} />
    </Routes>
  </div>
</Router>