@cartbase/storefront 0.17.0 → 0.18.0

package/src/checkout/payment-button.tsx

@@ -1,372 +1,372 @@
-"use client"
-
-import { useElements, useStripe } from "@stripe/react-stripe-js"
-import { useContext, useEffect, useRef, useState } from "react"
-
-import { Price } from "../lib/price"
-import { cn } from "../lib/utils"
-import { translatePaymentError } from "./payment-error-copy"
-import { useCheckoutLabels } from "./context"
-import { ErrorMessage } from "./error-message"
-import { StripeContext } from "./stripe-wrapper"
-import type { CheckoutLogError } from "./use-checkout-orchestration"
-
-/** Cycle interval for the processing-state messages, in ms. */
-const PROCESSING_MESSAGE_INTERVAL_MS = 1800
-
-/**
- * PaymentButton — top-level "place order" button.
- *
- * Ported from `@1click/ui/src/checkout/payment-button.tsx` (v2.3.1) with
- * the Cartbase data seam: the `cart` prop is structural (only `id`, `total`,
- * `currency_code` are read — any decorated Cartbase cart satisfies it), and
- * the `logCheckoutError` Supabase writer becomes the optional `logError`
- * callback (Cartbase has no store-side log endpoint; every production log
- * point is preserved through the callback).
- *
- * The button delegates entirely to the orchestration hook's
- * `performBuyClick` callback. It knows NOTHING about how the order is
- * placed; it just gathers the local Stripe primitives (when on the card
- * tab) and hands them off.
- *
- * The flow that runs on click:
- *   1. orchestration.performBuyClick({ submit, stripe, elements })
- *      - flushAddressSave()
- *      - (card) elements.submit()
- *      - prepareCheckout(...)         ← writes everything atomically
- *      - (card) stripe.confirmPayment ← may redirect for 3DS; SKIPPED on
- *        the zero-remainder gift path (docs/storefront/gift-cards.md)
- *      - placeOrder()                 ← POST /api/store/carts/:id/complete
- *
- * The button is always rendered inside `<StripeElementsScope>` so
- * `useStripe()`/`useElements()` resolve when the scope is active. On
- * COD-only carts (no Stripe key) the scope passes through and the
- * stripe/elements hooks return null — the COD path skips all Stripe
- * work, so that's fine.
- */
-
-type BuyClickStripeBundle = {
-  submit: () => Promise<{ error?: { message?: string } | null }>
-  stripe: {
-    confirmPayment: (args: {
-      elements: unknown
-      clientSecret: string
-      confirmParams: { return_url: string }
-      redirect: "if_required"
-    }) => Promise<{ error?: { message?: string } | null }>
-  }
-  elements: unknown
-}
-
-type PaymentButtonProps = {
-  /** Structural cart — only `id`, `total`, `currency_code` are read. */
-  cart: { id: string; total?: number | null; currency_code: string }
-  paymentTab: "card" | "cod"
-  notReady: boolean
-  performBuyClick: (stripeBundle?: BuyClickStripeBundle) => Promise<void>
-  /**
-   * Set to the live `event.complete` boolean from Stripe's
-   * `<PaymentElement onChange>`. When `false` on the card path, the Buy
-   * button stays disabled even when cart-level prerequisites are met,
-   * preventing the click → cryptic "Could not retrieve elements store"
-   * failure when the user hasn't filled in payment details.
-   *
-   * Ignored on the COD path. Defaults to `true`.
-   */
-  paymentElementComplete?: boolean
-  /**
-   * Display total in main currency units. Pass `useCheckoutOrchestration`'s
-   * `optimisticTotal` so the button reflects the same number the order
-   * summary shows, even pre-Buy when shipping & COD fee aren't on the
-   * cart yet. Falls back to `cart.total` for callers that haven't wired
-   * it up.
-   */
-  total?: number
-  /** Operational-visibility sink (successor of @1click's logCheckoutError). */
-  logError?: CheckoutLogError
-  "data-testid"?: string
-}
-
-function OrderButton({
-  onClick,
-  disabled,
-  loading,
-  total,
-  currencyCode,
-  testId,
-  label,
-}: {
-  onClick: () => void
-  disabled: boolean
-  loading: boolean
-  total?: number
-  currencyCode?: string
-  testId?: string
-  label: string
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      data-testid={testId}
-      className={cn(
-        "w-full h-14 bg-foreground text-card text-base font-semibold rounded-xl",
-        "flex items-center justify-center gap-2.5 transition-all",
-        "hover:bg-foreground/90 active:scale-[0.99]",
-        "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-foreground"
-      )}
-    >
-      {loading ? (
-        <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="3"
-          />
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          />
-        </svg>
-      ) : (
-        <>
-          <svg
-            className="w-4 h-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-            />
-          </svg>
-          <span className="inline-flex items-center gap-1.5">
-            {label}
-            {total !== undefined && currencyCode && (
-              <span className="inline-flex items-center gap-1">
-                <span aria-hidden="true"> · </span>
-                <Price
-                  amount={total}
-                  currencyCode={currencyCode}
-                  className="font-semibold"
-                />
-              </span>
-            )}
-          </span>
-        </>
-      )}
-    </button>
-  )
-}
-
-export function PaymentButton({
-  cart,
-  paymentTab,
-  notReady,
-  performBuyClick,
-  paymentElementComplete = true,
-  total,
-  logError,
-  "data-testid": dataTestId,
-}: PaymentButtonProps) {
-  const labels = useCheckoutLabels()
-  const stripeReady = useContext(StripeContext)
-  // `useStripe()`/`useElements()` THROW when no <Elements> provider is
-  // mounted — which is the documented state on COD/pp_manual-only stores
-  // without Stripe credentials (`StripeElementsScope` passthrough mode,
-  // components.md). Tolerate the missing scope: null here is equivalent
-  // to "Stripe not ready", and the card path is additionally gated by
-  // `stripeReady`. Hook order stays stable across renders because the
-  // provider's presence is fixed per mount (module-level Stripe key).
-  let stripe: ReturnType<typeof useStripe> = null
-  let elements: ReturnType<typeof useElements> = null
-  try {
-    stripe = useStripe()
-    elements = useElements()
-  } catch {
-    // no Elements scope (COD-only store) — proceed with stripe = null
-  }
-  const [submitting, setSubmitting] = useState(false)
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
-
-  // ── Processing-state cycling messages ───────────────────────────────
-  // While `submitting` is true, cycle through a short list of messages
-  // narrating what's actually happening server-side. Loops back to 0
-  // on long flows (3DS challenges, slow networks). Card and COD have
-  // separate sequences because the card path includes a bank handshake
-  // step that doesn't apply to COD.
-  //
-  // Why this exists: a spinning button alone reads as "thinking" but
-  // not "thinking about WHAT" — customers get nervous on the 3-30s
-  // wait. Stripe / Booking.com / Apple Pay all narrate the same way.
-  // Trust > novelty during the moment money leaves the account.
-  const [messageIndex, setMessageIndex] = useState(0)
-  useEffect(() => {
-    if (!submitting) {
-      setMessageIndex(0)
-      return
-    }
-    const messages =
-      paymentTab === "card" ? labels.processingCard : labels.processingCod
-    if (!messages || messages.length === 0) return
-    const id = setInterval(() => {
-      setMessageIndex((i) => (i + 1) % messages.length)
-    }, PROCESSING_MESSAGE_INTERVAL_MS)
-    return () => clearInterval(id)
-  }, [submitting, paymentTab, labels.processingCard, labels.processingCod])
-
-  const processingMessages =
-    paymentTab === "card" ? labels.processingCard : labels.processingCod
-  const currentProcessingMessage =
-    submitting && processingMessages?.length
-      ? processingMessages[messageIndex % processingMessages.length]
-      : null
-
-  // Hard re-entry guard. `submitting` state alone isn't enough: React
-  // batches state updates so two synchronous clicks both pass the
-  // submitting check before the first one's setState commits. A ref
-  // flips synchronously and blocks the second click cold.
-  const inFlightRef = useRef(false)
-
-  const isCardPath = paymentTab === "card"
-  const cardReady = !isCardPath || (stripeReady && !!stripe && !!elements)
-  const cardComplete = !isCardPath || paymentElementComplete
-
-  const disabled = notReady || !cardReady || !cardComplete || submitting
-
-  const handleClick = async () => {
-    if (inFlightRef.current) return
-    inFlightRef.current = true
-    setSubmitting(true)
-    setErrorMessage(null)
-
-    try {
-      const stripeBundle: BuyClickStripeBundle | undefined =
-        isCardPath && stripe && elements
-          ? {
-              submit: () => elements.submit(),
-              stripe: stripe as unknown as BuyClickStripeBundle["stripe"],
-              elements,
-            }
-          : undefined
-
-      await performBuyClick(stripeBundle)
-
-      // performBuyClick navigates on success (placeOrder →
-      // window.location.assign / the host's onOrderPlaced router push).
-      // If we get here without a navigation Stripe returned a
-      // non-terminal status (processing, requires_action without
-      // auto-redirect, etc.) — release the lock so the user can retry.
-      inFlightRef.current = false
-      setSubmitting(false)
-    } catch (err: unknown) {
-      // Next.js's `redirect()` throws a NEXT_REDIRECT error — that is
-      // success, not failure. The Cartbase default path navigates via
-      // window.location.assign (no throw), but a store routing
-      // `onOrderPlaced` through a server action still hits this; don't
-      // translate it — let it propagate so the navigation happens.
-      const e = err as {
-        digest?: string
-        message?: string
-        type?: string
-        code?: string
-        decline_code?: string
-        name?: string
-        stack?: string
-      }
-      const isNextRedirect =
-        typeof e?.digest === "string" && e.digest.startsWith("NEXT_REDIRECT")
-      if (isNextRedirect) {
-        throw err
-      }
-
-      // eslint-disable-next-line no-console
-      console.error("[buy-click] FAILED", {
-        message: e?.message,
-        raw: err,
-      })
-
-      // Operational sink so the actual error is readable without needing
-      // the customer's browser console. This is the catch-all for any
-      // error that escapes performBuyClick (stripe.confirmPayment,
-      // prepareCheckout, placeOrder).
-      let dump = ""
-      try {
-        dump = JSON.stringify(err, Object.getOwnPropertyNames(err as object)).slice(
-          0,
-          2000
-        )
-      } catch {
-        dump = String(err)
-      }
-      logError?.(
-        "place_order_error",
-        e?.message ?? String(err) ?? "unknown",
-        {
-          path: isCardPath ? "card" : "cod",
-          err_name: e?.name,
-          err_type: e?.type,
-          err_code: e?.code,
-          decline_code: e?.decline_code,
-          cart_id: cart.id,
-          full_error_json: dump,
-        }
-      )
-
-      const translated = translatePaymentError(err, isCardPath ? "card" : "cod", labels.paymentErrors)
-      setErrorMessage(translated)
-      inFlightRef.current = false
-      setSubmitting(false)
-    }
-  }
-
-  return (
-    <>
-      <OrderButton
-        onClick={handleClick}
-        disabled={disabled}
-        loading={submitting}
-        total={total ?? cart.total ?? undefined}
-        currencyCode={cart.currency_code}
-        testId={dataTestId}
-        label={labels.placeOrder}
-      />
-      {/*
-        Cycling processing message. Fixed-height wrapper prevents layout
-        shift when the message appears/disappears. aria-live="polite"
-        announces each message swap to screen readers.
-        `key={messageIndex}` re-mounts the span on every cycle so
-        Tailwind's animate-in fade-in fires fresh each time.
-      */}
-      <div
-        className="mt-3 h-5 flex items-center justify-center"
-        aria-live="polite"
-      >
-        {currentProcessingMessage && (
-          <span
-            key={messageIndex}
-            className="text-sm text-muted-foreground animate-in fade-in duration-500"
-          >
-            {currentProcessingMessage}
-          </span>
-        )}
-      </div>
-      <ErrorMessage
-        error={errorMessage}
-        data-testid={
-          isCardPath
-            ? "stripe-payment-error-message"
-            : "manual-payment-error-message"
-        }
-      />
-    </>
-  )
-}
+"use client"
+
+import { useElements, useStripe } from "@stripe/react-stripe-js"
+import { useContext, useEffect, useRef, useState } from "react"
+
+import { Price } from "../lib/price"
+import { cn } from "../lib/utils"
+import { translatePaymentError } from "./payment-error-copy"
+import { useCheckoutLabels } from "./context"
+import { ErrorMessage } from "./error-message"
+import { StripeContext } from "./stripe-wrapper"
+import type { CheckoutLogError } from "./use-checkout-orchestration"
+
+/** Cycle interval for the processing-state messages, in ms. */
+const PROCESSING_MESSAGE_INTERVAL_MS = 1800
+
+/**
+ * PaymentButton — top-level "place order" button.
+ *
+ * Ported from `@1click/ui/src/checkout/payment-button.tsx` (v2.3.1) with
+ * the Cartbase data seam: the `cart` prop is structural (only `id`, `total`,
+ * `currency_code` are read — any decorated Cartbase cart satisfies it), and
+ * the `logCheckoutError` Supabase writer becomes the optional `logError`
+ * callback (Cartbase has no store-side log endpoint; every production log
+ * point is preserved through the callback).
+ *
+ * The button delegates entirely to the orchestration hook's
+ * `performBuyClick` callback. It knows NOTHING about how the order is
+ * placed; it just gathers the local Stripe primitives (when on the card
+ * tab) and hands them off.
+ *
+ * The flow that runs on click:
+ *   1. orchestration.performBuyClick({ submit, stripe, elements })
+ *      - flushAddressSave()
+ *      - (card) elements.submit()
+ *      - prepareCheckout(...)         ← writes everything atomically
+ *      - (card) stripe.confirmPayment ← may redirect for 3DS; SKIPPED on
+ *        the zero-remainder gift path (docs/storefront/gift-cards.md)
+ *      - placeOrder()                 ← POST /api/store/carts/:id/complete
+ *
+ * The button is always rendered inside `<StripeElementsScope>` so
+ * `useStripe()`/`useElements()` resolve when the scope is active. On
+ * COD-only carts (no Stripe key) the scope passes through and the
+ * stripe/elements hooks return null — the COD path skips all Stripe
+ * work, so that's fine.
+ */
+
+type BuyClickStripeBundle = {
+  submit: () => Promise<{ error?: { message?: string } | null }>
+  stripe: {
+    confirmPayment: (args: {
+      elements: unknown
+      clientSecret: string
+      confirmParams: { return_url: string }
+      redirect: "if_required"
+    }) => Promise<{ error?: { message?: string } | null }>
+  }
+  elements: unknown
+}
+
+type PaymentButtonProps = {
+  /** Structural cart — only `id`, `total`, `currency_code` are read. */
+  cart: { id: string; total?: number | null; currency_code: string }
+  paymentTab: "card" | "cod"
+  notReady: boolean
+  performBuyClick: (stripeBundle?: BuyClickStripeBundle) => Promise<void>
+  /**
+   * Set to the live `event.complete` boolean from Stripe's
+   * `<PaymentElement onChange>`. When `false` on the card path, the Buy
+   * button stays disabled even when cart-level prerequisites are met,
+   * preventing the click → cryptic "Could not retrieve elements store"
+   * failure when the user hasn't filled in payment details.
+   *
+   * Ignored on the COD path. Defaults to `true`.
+   */
+  paymentElementComplete?: boolean
+  /**
+   * Display total in main currency units. Pass `useCheckoutOrchestration`'s
+   * `optimisticTotal` so the button reflects the same number the order
+   * summary shows, even pre-Buy when shipping & COD fee aren't on the
+   * cart yet. Falls back to `cart.total` for callers that haven't wired
+   * it up.
+   */
+  total?: number
+  /** Operational-visibility sink (successor of @1click's logCheckoutError). */
+  logError?: CheckoutLogError
+  "data-testid"?: string
+}
+
+function OrderButton({
+  onClick,
+  disabled,
+  loading,
+  total,
+  currencyCode,
+  testId,
+  label,
+}: {
+  onClick: () => void
+  disabled: boolean
+  loading: boolean
+  total?: number
+  currencyCode?: string
+  testId?: string
+  label: string
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      data-testid={testId}
+      className={cn(
+        "w-full h-14 bg-foreground text-card text-base font-semibold rounded-xl",
+        "flex items-center justify-center gap-2.5 transition-all",
+        "hover:bg-foreground/90 active:scale-[0.99]",
+        "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-foreground"
+      )}
+    >
+      {loading ? (
+        <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="3"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+      ) : (
+        <>
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+            />
+          </svg>
+          <span className="inline-flex items-center gap-1.5">
+            {label}
+            {total !== undefined && currencyCode && (
+              <span className="inline-flex items-center gap-1">
+                <span aria-hidden="true"> · </span>
+                <Price
+                  amount={total}
+                  currencyCode={currencyCode}
+                  className="font-semibold"
+                />
+              </span>
+            )}
+          </span>
+        </>
+      )}
+    </button>
+  )
+}
+
+export function PaymentButton({
+  cart,
+  paymentTab,
+  notReady,
+  performBuyClick,
+  paymentElementComplete = true,
+  total,
+  logError,
+  "data-testid": dataTestId,
+}: PaymentButtonProps) {
+  const labels = useCheckoutLabels()
+  const stripeReady = useContext(StripeContext)
+  // `useStripe()`/`useElements()` THROW when no <Elements> provider is
+  // mounted — which is the documented state on COD/pp_manual-only stores
+  // without Stripe credentials (`StripeElementsScope` passthrough mode,
+  // components.md). Tolerate the missing scope: null here is equivalent
+  // to "Stripe not ready", and the card path is additionally gated by
+  // `stripeReady`. Hook order stays stable across renders because the
+  // provider's presence is fixed per mount (module-level Stripe key).
+  let stripe: ReturnType<typeof useStripe> = null
+  let elements: ReturnType<typeof useElements> = null
+  try {
+    stripe = useStripe()
+    elements = useElements()
+  } catch {
+    // no Elements scope (COD-only store) — proceed with stripe = null
+  }
+  const [submitting, setSubmitting] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  // ── Processing-state cycling messages ───────────────────────────────
+  // While `submitting` is true, cycle through a short list of messages
+  // narrating what's actually happening server-side. Loops back to 0
+  // on long flows (3DS challenges, slow networks). Card and COD have
+  // separate sequences because the card path includes a bank handshake
+  // step that doesn't apply to COD.
+  //
+  // Why this exists: a spinning button alone reads as "thinking" but
+  // not "thinking about WHAT" — customers get nervous on the 3-30s
+  // wait. Stripe / Booking.com / Apple Pay all narrate the same way.
+  // Trust > novelty during the moment money leaves the account.
+  const [messageIndex, setMessageIndex] = useState(0)
+  useEffect(() => {
+    if (!submitting) {
+      setMessageIndex(0)
+      return
+    }
+    const messages =
+      paymentTab === "card" ? labels.processingCard : labels.processingCod
+    if (!messages || messages.length === 0) return
+    const id = setInterval(() => {
+      setMessageIndex((i) => (i + 1) % messages.length)
+    }, PROCESSING_MESSAGE_INTERVAL_MS)
+    return () => clearInterval(id)
+  }, [submitting, paymentTab, labels.processingCard, labels.processingCod])
+
+  const processingMessages =
+    paymentTab === "card" ? labels.processingCard : labels.processingCod
+  const currentProcessingMessage =
+    submitting && processingMessages?.length
+      ? processingMessages[messageIndex % processingMessages.length]
+      : null
+
+  // Hard re-entry guard. `submitting` state alone isn't enough: React
+  // batches state updates so two synchronous clicks both pass the
+  // submitting check before the first one's setState commits. A ref
+  // flips synchronously and blocks the second click cold.
+  const inFlightRef = useRef(false)
+
+  const isCardPath = paymentTab === "card"
+  const cardReady = !isCardPath || (stripeReady && !!stripe && !!elements)
+  const cardComplete = !isCardPath || paymentElementComplete
+
+  const disabled = notReady || !cardReady || !cardComplete || submitting
+
+  const handleClick = async () => {
+    if (inFlightRef.current) return
+    inFlightRef.current = true
+    setSubmitting(true)
+    setErrorMessage(null)
+
+    try {
+      const stripeBundle: BuyClickStripeBundle | undefined =
+        isCardPath && stripe && elements
+          ? {
+              submit: () => elements.submit(),
+              stripe: stripe as unknown as BuyClickStripeBundle["stripe"],
+              elements,
+            }
+          : undefined
+
+      await performBuyClick(stripeBundle)
+
+      // performBuyClick navigates on success (placeOrder →
+      // window.location.assign / the host's onOrderPlaced router push).
+      // If we get here without a navigation Stripe returned a
+      // non-terminal status (processing, requires_action without
+      // auto-redirect, etc.) — release the lock so the user can retry.
+      inFlightRef.current = false
+      setSubmitting(false)
+    } catch (err: unknown) {
+      // Next.js's `redirect()` throws a NEXT_REDIRECT error — that is
+      // success, not failure. The Cartbase default path navigates via
+      // window.location.assign (no throw), but a store routing
+      // `onOrderPlaced` through a server action still hits this; don't
+      // translate it — let it propagate so the navigation happens.
+      const e = err as {
+        digest?: string
+        message?: string
+        type?: string
+        code?: string
+        decline_code?: string
+        name?: string
+        stack?: string
+      }
+      const isNextRedirect =
+        typeof e?.digest === "string" && e.digest.startsWith("NEXT_REDIRECT")
+      if (isNextRedirect) {
+        throw err
+      }
+
+      // eslint-disable-next-line no-console
+      console.error("[buy-click] FAILED", {
+        message: e?.message,
+        raw: err,
+      })
+
+      // Operational sink so the actual error is readable without needing
+      // the customer's browser console. This is the catch-all for any
+      // error that escapes performBuyClick (stripe.confirmPayment,
+      // prepareCheckout, placeOrder).
+      let dump = ""
+      try {
+        dump = JSON.stringify(err, Object.getOwnPropertyNames(err as object)).slice(
+          0,
+          2000
+        )
+      } catch {
+        dump = String(err)
+      }
+      logError?.(
+        "place_order_error",
+        e?.message ?? String(err) ?? "unknown",
+        {
+          path: isCardPath ? "card" : "cod",
+          err_name: e?.name,
+          err_type: e?.type,
+          err_code: e?.code,
+          decline_code: e?.decline_code,
+          cart_id: cart.id,
+          full_error_json: dump,
+        }
+      )
+
+      const translated = translatePaymentError(err, isCardPath ? "card" : "cod", labels.paymentErrors)
+      setErrorMessage(translated)
+      inFlightRef.current = false
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <>
+      <OrderButton
+        onClick={handleClick}
+        disabled={disabled}
+        loading={submitting}
+        total={total ?? cart.total ?? undefined}
+        currencyCode={cart.currency_code}
+        testId={dataTestId}
+        label={labels.placeOrder}
+      />
+      {/*
+        Cycling processing message. Fixed-height wrapper prevents layout
+        shift when the message appears/disappears. aria-live="polite"
+        announces each message swap to screen readers.
+        `key={messageIndex}` re-mounts the span on every cycle so
+        Tailwind's animate-in fade-in fires fresh each time.
+      */}
+      <div
+        className="mt-3 h-5 flex items-center justify-center"
+        aria-live="polite"
+      >
+        {currentProcessingMessage && (
+          <span
+            key={messageIndex}
+            className="text-sm text-muted-foreground animate-in fade-in duration-500"
+          >
+            {currentProcessingMessage}
+          </span>
+        )}
+      </div>
+      <ErrorMessage
+        error={errorMessage}
+        data-testid={
+          isCardPath
+            ? "stripe-payment-error-message"
+            : "manual-payment-error-message"
+        }
+      />
+    </>
+  )
+}