Fix error before M7

apps/storefront/src/components/commerce/checkout-form.tsx

@@ -57,6 +57,17 @@ export function CheckoutForm({ locale }: { locale: Locale }) {
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  /**
+   * One key per checkout attempt, generated once and kept for the life of this
+   * form.
+   *
+   * That lifetime is exactly right. Pressing "Place order" again after a
+   * dropped response reuses it, so the server replays the order it already
+   * created instead of making a second one. Reloading the page mints a new key,
+   * which is a genuinely new attempt.
+   */
+  const [idempotencyKey] = useState(() => crypto.randomUUID());
+
   function set(key: keyof Fields, value: string) {
     setFields((current) => ({ ...current, [key]: value }));
   }
@@ -67,7 +78,7 @@ export function CheckoutForm({ locale }: { locale: Locale }) {
     setError(null);
 
     try {
-      const order = await browserApi.commerce.placeOrder(locale, {
+      const order = await browserApi.commerce.placeOrder(locale, idempotencyKey, {
         email: fields.email,
         shippingAddress: {
           fullName: fields.fullName,