@12-apps/payments-frontend 3.35.0 → 3.37.0

package/src/components/checkout/pix-pane.tsx

@@ -1,29 +1,28 @@
 import { Box } from "@mui/material";
-import { useId, type JSX, type KeyboardEvent, type ReactNode } from "react";
+import type { JSX, ReactNode } from "react";
 
+import { usePaymentStale } from "./cart-changed";
 import { useCheckoutCopy } from "./copy-context";
 import { ContentCopyIcon } from "./icons";
-import { Emphasized, PIX_WIDE, PixQr } from "./pix-parts";
+import { StickyPayBar, useCheckoutLayout } from "./payment-step-layout";
+import { Emphasized, PIX_WIDE, PixQr, StaleVeil } from "./pix-parts";
 import type { PixCharge } from "./types";
 import { useCheckoutComponents } from "./ui";
 
 /**
- * The PIX pane before a copy (the 2026-10-06 Pix redesign).
+ * The PIX pane before a copy (the 2026-10-06 Pix redesign, laid out again by
+ * the 2026-10-11 Pagamento redesign, FUT-3525).
  *
- * Narrow — a phone — it is two tabs, "Copia e cola" first: the buyer pays on
- * the phone they are holding and cannot scan a QR drawn on that same screen,
- * so the code and its full-width button come before anything else. Wide — a
- * desktop — the same two panels stand side by side with "ou" between them:
- * the QR, for the phone in the buyer's hand, and the code, for their internet
- * banking.
+ * Narrow — a phone — the code and its button come first and the QR follows,
+ * "Ou pague de outro aparelho": the buyer pays on the phone they are holding
+ * and cannot scan a QR drawn on that same screen. Wide — a computer — the two
+ * stand side by side, the QR on the left. The Copia/QR tabs this replaced hid
+ * the QR behind a tap the phone's own buyer never needed.
  *
  * Both panels are always mounted and the switch is CSS (`PIX_WIDE`), so the
- * layout needs no measurement: the first paint is already right, and the QR is
- * in the document whichever tab is showing.
+ * layout needs no measurement: the first paint is already right.
  */
 
-export type PixTab = "copy" | "qr";
-
 /** A narrow-only element: shown under the container query's threshold. */
 const NARROW_ONLY = { [PIX_WIDE]: { display: "none" } } as const;
 
@@ -32,120 +31,85 @@ function wideOnly(display: string) {
   return { display: "none", [PIX_WIDE]: { display } } as const;
 }
 
-/** A tab panel: shown when its tab is picked, and always in the wide layout. */
-function panelSx(shown: boolean) {
-  return {
-    display: shown ? "flex" : "none",
-    flexDirection: "column",
-    gap: 1.75,
-    minWidth: 0,
-    [PIX_WIDE]: { display: "flex" },
-  } as const;
-}
-
-/** The small capitals over each wide column. Uppercase by CSS only. */
-function ColumnHeading({ children, center }: { children: ReactNode; center?: boolean }): JSX.Element {
+/** The small capitals over each column. Uppercase by CSS only. */
+function ColumnHeading({
+  children,
+  center,
+  sx,
+}: {
+  children: ReactNode;
+  center?: boolean;
+  sx?: object;
+}): JSX.Element {
   const { Text } = useCheckoutComponents();
   return (
-    <Box sx={{ ...wideOnly("block"), textAlign: center ? "center" : "left" }}>
-      <Text variant="body" size="xs" weight="bold" color="secondary" as="p" style={{ textTransform: "uppercase", letterSpacing: "0.04em", margin: 0 }}>
+    <Box sx={{ textAlign: center ? "center" : "left", ...sx }}>
+      <Text
+        variant="body"
+        size="xs"
+        weight="bold"
+        color="secondary"
+        as="p"
+        style={{
+          textTransform: "uppercase",
+          letterSpacing: "0.04em",
+          margin: 0,
+        }}
+      >
         {children}
       </Text>
     </Box>
   );
 }
 
-const TAB_ORDER: readonly PixTab[] = ["copy", "qr"];
-
-/** The ARIA tabs pattern's keys: arrows move and select, Home and End jump. */
-function nextTab(key: string, tab: PixTab): PixTab | null {
-  const at = TAB_ORDER.indexOf(tab);
-  if (key === "ArrowRight") return TAB_ORDER[(at + 1) % TAB_ORDER.length] ?? null;
-  if (key === "ArrowLeft") return TAB_ORDER[(at + TAB_ORDER.length - 1) % TAB_ORDER.length] ?? null;
-  if (key === "Home") return TAB_ORDER[0] ?? null;
-  if (key === "End") return TAB_ORDER[TAB_ORDER.length - 1] ?? null;
-  return null;
-}
-
-/** DOM ids for the tabs and panels, unique per pane (two panes on one page must not collide). */
-function paneIds(base: string, id: PixTab): { tab: string; panel: string } {
-  return { tab: `${base}-tab-${id}`, panel: `${base}-panel-${id}` };
-}
-
-function PixTabs({ tab, onTab, idBase }: { tab: PixTab; onTab: (tab: PixTab) => void; idBase: string }): JSX.Element {
-  const copy = useCheckoutCopy().screens.pix;
-  const tabs: { id: PixTab; label: string }[] = [
-    { id: "copy", label: copy.copyPasteTab },
-    { id: "qr", label: copy.qrTab },
-  ];
-  const onKeyDown = (event: KeyboardEvent<HTMLElement>): void => {
-    const next = nextTab(event.key, tab);
-    if (!next) return;
-    event.preventDefault();
-    onTab(next);
-    document.getElementById(paneIds(idBase, next).tab)?.focus();
-  };
-  return (
-    <Box
-      role="tablist"
-      aria-label={copy.tabsLabel}
-      onKeyDown={onKeyDown}
-      sx={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", borderBottom: "1px solid", borderColor: "divider", ...NARROW_ONLY }}
-    >
-      {tabs.map((item) => {
-        const selected = item.id === tab;
-        return (
-          <Box
-            key={item.id}
-            component="button"
-            type="button"
-            role="tab"
-            id={paneIds(idBase, item.id).tab}
-            aria-selected={selected}
-            aria-controls={paneIds(idBase, item.id).panel}
-            tabIndex={selected ? 0 : -1}
-            data-testid={`pix-tab-${item.id}`}
-            onClick={() => onTab(item.id)}
-            sx={{
-              minHeight: 44,
-              border: 0,
-              borderBottom: "3px solid",
-              borderColor: selected ? "primary.main" : "transparent",
-              bgcolor: "transparent",
-              font: "inherit",
-              fontSize: "0.875rem",
-              fontWeight: selected ? 700 : 600,
-              color: selected ? "text.primary" : "text.secondary",
-              cursor: "pointer",
-              "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: -2 },
-            }}
-          >
-            {item.label}
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}
-
-function QrPanel({ pix, shown, idBase }: { pix: PixCharge; shown: boolean; idBase: string }): JSX.Element {
+function QrPanel({ pix }: { pix: PixCharge }): JSX.Element {
   const { Text } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
+  const stale = usePaymentStale();
   return (
     <Box
-      id={paneIds(idBase, "qr").panel}
-      role="tabpanel"
-      aria-labelledby={paneIds(idBase, "qr").tab}
+      data-testid="pix-qr-panel"
       sx={{
-        ...panelSx(shown),
+        display: "flex",
+        flexDirection: "column",
         alignItems: "center",
+        gap: 1.25,
+        minWidth: 0,
         textAlign: "center",
-        [PIX_WIDE]: { display: "flex", p: 3, borderRadius: 1.75, border: "1px solid", borderColor: "divider", bgcolor: "action.hover" },
+        pt: 2,
+        borderTop: "1px solid",
+        borderColor: "divider",
+        [PIX_WIDE]: {
+          gap: 1.75,
+          p: 3,
+          borderTop: "1px solid",
+          borderRadius: 1.75,
+          border: "1px solid",
+          borderColor: "divider",
+          bgcolor: "action.hover",
+        },
       }}
     >
-      <ColumnHeading center>{copy.qrHeading}</ColumnHeading>
-      <Box sx={{ "& svg": { width: 200, height: 200 }, [PIX_WIDE]: { "& svg": { width: 232, height: 232 } } }}>
-        <PixQr payload={pix.copyPaste} size={232} alt={copy.qrAlt} testId="pix-qr" />
+      <ColumnHeading center sx={NARROW_ONLY}>
+        {copy.otherDeviceHeading}
+      </ColumnHeading>
+      <ColumnHeading center sx={wideOnly("block")}>
+        {copy.qrHeading}
+      </ColumnHeading>
+      <Box
+        sx={{
+          "& svg": { width: 168, height: 168 },
+          [PIX_WIDE]: { "& svg": { width: 232, height: 232 } },
+        }}
+      >
+        <StaleVeil stale={stale}>
+          <PixQr
+            payload={pix.copyPaste}
+            size={232}
+            alt={copy.qrAlt}
+            testId="pix-qr"
+          />
+        </StaleVeil>
       </Box>
       <Text variant="body" size="sm" color="secondary" as="p" style={{ margin: 0, maxWidth: 280 }}>
         <Box component="span" sx={NARROW_ONLY}>{copy.qrTabCaption}</Box>
@@ -157,82 +121,154 @@ function QrPanel({ pix, shown, idBase }: { pix: PixCharge; shown: boolean; idBas
   );
 }
 
-function CopyPanel({ pix, shown, onCopy, idBase }: { pix: PixCharge; shown: boolean; onCopy: () => void; idBase: string }): JSX.Element {
-  const { Button, Text } = useCheckoutComponents();
+/**
+ * The one action on the pane: the prototype's 56px bar (52 wide), whatever
+ * the host's lg is — and on the phone's Pagamento step, the sticky pay bar's
+ * button (FUT-3525).
+ */
+function CopyButton({ onCopy }: { onCopy: () => void }): JSX.Element {
+  const { Button } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
+  // A changed cart makes this code the OLD order's (FUT-3535): nothing to copy
+  // until the step's "Atualizar pagamento" brings a new one.
+  const stale = usePaymentStale();
   return (
-    <Box id={paneIds(idBase, "copy").panel} role="tabpanel" aria-labelledby={paneIds(idBase, "copy").tab} sx={{ ...panelSx(shown), [PIX_WIDE]: { display: "flex", justifyContent: "center" } }}>
-      <ColumnHeading>{copy.copyPasteHeading}</ColumnHeading>
-      {/*
-        The box IS the code's frame, so whatever the host draws for inline code
-        (a tinted chip, its own border and padding) is undone inside it:
-        otherwise a wrapped code reads as a box inside a box.
-      */}
+    <StickyPayBar>
       <Box
         sx={{
-          px: 2,
-          py: 1.5,
-          border: "1px solid",
-          borderColor: "divider",
-          borderRadius: 1.5,
-          bgcolor: "action.hover",
-          "&& > *": { bgcolor: "transparent", border: 0, borderRadius: 0, p: 0 },
+          "& > *": { minHeight: 56 },
+          "& > *, & > * *": { fontWeight: 700 },
+          [PIX_WIDE]: { "& > *": { minHeight: 52 } },
         }}
       >
-        <Text variant="code" size="xs" as="p" data-testid="pix-code" style={{ margin: 0, wordBreak: "break-all", lineHeight: 1.55 }}>
-          {pix.copyPaste}
-        </Text>
-      </Box>
-      {/* The one action on the pane: the prototype's 56px bar (52 wide), whatever the host's lg is. */}
-      <Box sx={{ "& > *": { minHeight: 56 }, "& > *, & > * *": { fontWeight: 700 }, [PIX_WIDE]: { "& > *": { minHeight: 52 } } }}>
-        <Button variant="solid" color="primary" size="lg" fullWidth icon={<ContentCopyIcon fontSize="small" />} onClick={onCopy} dataTestId="pix-copy">
+        <Button
+          variant="solid"
+          color="primary"
+          size="lg"
+          fullWidth
+          icon={<ContentCopyIcon fontSize="small" />}
+          onClick={onCopy}
+          disabled={stale}
+          dataTestId="pix-copy"
+        >
           {copy.copyAction}
         </Button>
       </Box>
-      <Text variant="body" size="sm" color="secondary" as="p" style={{ margin: 0 }}>
-        <Box component="span" sx={{ display: "block", textAlign: "center", ...NARROW_ONLY }}>
-          <Emphasized text={copy.copyPasteHint} />
-        </Box>
-        <Box component="span" sx={wideOnly("block")}>
-          <Emphasized text={copy.internetBankingHint} />
-        </Box>
-      </Text>
-    </Box>
+    </StickyPayBar>
   );
 }
 
-/** The word between the wide layout's two columns, on a hairline. */
-function OrDivider(): JSX.Element {
+function CopyPanel({
+  pix,
+  onCopy,
+  inPanel,
+}: {
+  pix: PixCharge;
+  onCopy: () => void;
+  /** False when the phone's pay bar carries the button, at the pane's foot. */
+  inPanel: boolean;
+}): JSX.Element {
   const { Text } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
-  const line = { width: "1px", height: 56, bgcolor: "divider" };
+  const stale = usePaymentStale();
   return (
-    <Box aria-hidden sx={{ ...wideOnly("flex"), flexDirection: "column", alignItems: "center", alignSelf: "center", gap: 1 }}>
-      <Box sx={line} />
-      <Text variant="body" size="xs" weight="semibold" color="secondary" as="span">
-        {copy.or}
+    <Box
+      data-testid="pix-copy-panel"
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.75,
+        minWidth: 0,
+        [PIX_WIDE]: { justifyContent: "center" },
+      }}
+    >
+      <ColumnHeading>{copy.copyPasteHeading}</ColumnHeading>
+      {/*
+        The box IS the code's frame, so whatever the host draws for inline code
+        (a tinted chip, its own border and padding) is undone inside it:
+        otherwise a wrapped code reads as a box inside a box.
+      */}
+      <StaleVeil stale={stale}>
+        <Box
+          sx={{
+            px: 2,
+            py: 1.5,
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: 1.5,
+            bgcolor: "action.hover",
+            "&& > *": { bgcolor: "transparent", border: 0, borderRadius: 0, p: 0 },
+          }}
+        >
+          <Text variant="code" size="xs" as="p" data-testid="pix-code" style={{ margin: 0, wordBreak: "break-all", lineHeight: 1.55 }}>
+            {pix.copyPaste}
+          </Text>
+        </Box>
+      </StaleVeil>
+      {inPanel ? <CopyButton onCopy={onCopy} /> : null}
+      <Text
+        variant="body"
+        size="sm"
+        color="secondary"
+        as="p"
+        style={{ margin: 0 }}
+      >
+        <Box component="span" sx={{ display: "block", ...NARROW_ONLY }}>
+          <Emphasized text={copy.copyPasteHint} />
+        </Box>
+        <Box component="span" sx={wideOnly("block")}>
+          <Emphasized text={copy.internetBankingHint} />
+        </Box>
       </Text>
-      <Box sx={line} />
     </Box>
   );
 }
 
-export function PixPane({ pix, tab, onTab, onCopy }: { pix: PixCharge; tab: PixTab; onTab: (tab: PixTab) => void; onCopy: () => void }): JSX.Element {
-  const idBase = useId();
+/**
+ * The pane itself. Narrow, the code comes first — the buyer pays on the phone
+ * they are holding and cannot scan a QR drawn on that same screen — and the
+ * QR follows under a hairline, for paying from another device. Wide, the two
+ * stand side by side: the QR for the phone in the buyer's hand, the code for
+ * their internet banking.
+ */
+export function PixPane({
+  pix,
+  onCopy,
+}: {
+  pix: PixCharge;
+  onCopy: () => void;
+}): JSX.Element {
+  // The phone's Pagamento step pins the button to the bottom of the screen
+  // (FUT-3525), so it goes LAST in the pane — under the QR — where a sticky
+  // bar rests when the page is scrolled to its end.
+  const layout = useCheckoutLayout();
+  const barAtFoot = layout !== null && !layout.wide;
   return (
-    <>
-      <PixTabs tab={tab} onTab={onTab} idBase={idBase} />
+    <Box
+      sx={{
+        display: "grid",
+        gap: 2.5,
+        [PIX_WIDE]: {
+          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+          gap: 4,
+          alignItems: "stretch",
+        },
+      }}
+    >
+      <Box sx={{ minWidth: 0, [PIX_WIDE]: { order: 2 } }}>
+        <CopyPanel pix={pix} onCopy={onCopy} inPanel={!barAtFoot} />
+      </Box>
       <Box
         sx={{
-          display: "grid",
-          gap: 2,
-          [PIX_WIDE]: { gridTemplateColumns: "minmax(0, 1fr) auto minmax(0, 1fr)", gap: 4, alignItems: "stretch" },
+          minWidth: 0,
+          display: "flex",
+          flexDirection: "column",
+          [PIX_WIDE]: { order: 1 },
         }}
       >
-        <QrPanel pix={pix} shown={tab === "qr"} idBase={idBase} />
-        <OrDivider />
-        <CopyPanel pix={pix} shown={tab === "copy"} onCopy={onCopy} idBase={idBase} />
+        <QrPanel pix={pix} />
       </Box>
-    </>
+      {barAtFoot ? <CopyButton onCopy={onCopy} /> : null}
+    </Box>
   );
 }

package/src/components/checkout/pix-parts.tsx

@@ -1,7 +1,9 @@
 import { Box } from "@mui/material";
-import { Fragment, useCallback, useEffect, useRef, useState, type JSX } from "react";
+import { Fragment, useCallback, useEffect, useRef, useState, type JSX, type ReactNode } from "react";
 import QRCode from "react-qr-code";
 
+import { useCheckoutCopy } from "./copy-context";
+
 /**
  * The pieces the PIX pane and its after-copy face share (the 2026-10-06 Pix
  * redesign): the container-query switch, the QR, bold spans in a sentence, and
@@ -9,11 +11,13 @@ import QRCode from "react-qr-code";
  */
 
 /**
- * The pane switches from tabs to two columns by its OWN width, never the
- * window's: the same checkout is mounted in a 720px column, a 1040px one and a
- * phone, and only the room it was given says whether two columns fit.
+ * The pane switches from one column to two by its OWN width, never the
+ * window's: the same checkout is mounted beside an order summary, alone in a
+ * column and on a phone, and only the room it was given says whether two
+ * columns fit. 680px is what the Pagamento step's payment column leaves it
+ * beside the summary card (FUT-3525).
  */
-export const PIX_WIDE = "@container pixpane (min-width: 760px)";
+export const PIX_WIDE = "@container pixpane (min-width: 680px)";
 
 /** The container the {@link PIX_WIDE} query reads. */
 export const PIX_CONTAINER = { containerType: "inline-size", containerName: "pixpane" } as const;
@@ -77,3 +81,47 @@ export function useClipboardCopy(text: string): { copy: () => Promise<boolean>;
   }, [text]);
   return { copy, justCopied };
 }
+
+/**
+ * A PIX's QR or code, veiled while the cart has changed under it (FUT-3535):
+ * blurred past reading, out of reach of a pointer, a selection and a screen
+ * reader, with "Atualize para gerar um novo Pix" over it. The step's warning
+ * above says why and carries the control that brings a new code. One tree
+ * shape either way, so lifting the veil redraws nothing.
+ */
+export function StaleVeil({ stale, children }: { stale: boolean; children: ReactNode }): JSX.Element {
+  const words = useCheckoutCopy().screens.cartChanged.pixVeil;
+  return (
+    <Box sx={{ position: "relative", minWidth: 0 }} data-testid={stale ? "pix-stale-veil" : undefined}>
+      <Box
+        aria-hidden={stale || undefined}
+        sx={stale ? { filter: "blur(6px)", opacity: 0.5, pointerEvents: "none", userSelect: "none" } : undefined}
+      >
+        {children}
+      </Box>
+      {stale ? (
+        <Box
+          sx={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", p: 1.5 }}
+        >
+          <Box
+            component="p"
+            sx={{
+              m: 0,
+              px: 1.5,
+              py: 0.75,
+              borderRadius: 999,
+              bgcolor: "background.paper",
+              boxShadow: 1,
+              color: "text.primary",
+              fontSize: "0.8125rem",
+              fontWeight: 600,
+              textAlign: "center",
+            }}
+          >
+            {words}
+          </Box>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}

package/src/components/checkout/pix-view.tsx

@@ -1,9 +1,10 @@
 import { Box } from "@mui/material";
-import { useEffect, useMemo, useRef, useState, type JSX } from "react";
+import { useEffect, useMemo, useRef, type JSX } from "react";
 
 import { useCheckoutCopy } from "./copy-context";
 import { PixAfterCopy } from "./pix-after-copy";
-import { PixPane, type PixTab } from "./pix-pane";
+import { PixPane } from "./pix-pane";
+import { useCheckoutLayout } from "./payment-step-layout";
 import { PIX_CONTAINER, PIX_WIDE, useClipboardCopy } from "./pix-parts";
 import { usePixStage } from "./pix-stage";
 import type { PixPaneCopy, SettlingCopy } from "./screens-copy";
@@ -202,11 +203,27 @@ function usePixPolling(order: CheckoutOrder, onResolved: (status: OrderStatus) =
   return polling;
 }
 
-function PixBody({ order, pix, poll }: { order: CheckoutOrder; pix: PixCharge; poll: ReturnType<typeof usePixPolling> }): JSX.Element {
+/**
+ * The pane's title, at the prototype's scale: 20px, 26px wide — left out
+ * inside the Pagamento step, where the "Pix" tab names the pane (FUT-3525).
+ */
+function PixTitle(): JSX.Element | null {
   const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
+  const inStep = useCheckoutLayout() !== null;
+  if (inStep) return null;
+  return (
+    <Box sx={{ "&& > *": { fontSize: "1.25rem", lineHeight: 1.25 }, [PIX_WIDE]: { "&& > *": { fontSize: "1.625rem" } } }}>
+      <Text variant="heading" size="md" weight="bold" as="h2" style={{ margin: 0 }}>
+        {copy.heading}
+      </Text>
+    </Box>
+  );
+}
+
+function PixBody({ order, pix, poll }: { order: CheckoutOrder; pix: PixCharge; poll: ReturnType<typeof usePixPolling> }): JSX.Element {
   const copy = useCheckoutCopy().screens.pix;
   const stage = usePixStage();
-  const [tab, setTab] = useState<PixTab>("copy");
   const { copy: writeClipboard, justCopied } = useClipboardCopy(pix.copyPaste);
   // Leaving the payment step (a method switch, a terminal status) ends the
   // after-copy face with it: the next pane starts on the code.
@@ -240,10 +257,8 @@ function PixBody({ order, pix, poll }: { order: CheckoutOrder; pix: PixCharge; p
         deadline={time}
         justCopied={justCopied}
         onCopyAgain={() => void writeClipboard()}
-        onShowQr={() => {
-          setTab("qr");
-          setAfterCopy(false);
-        }}
+        // Back to the pane, where the QR is always on screen now.
+        onShowQr={() => setAfterCopy(false)}
         onPreferCard={stage.preferCard}
         footer={footerLine(copy.verifying)}
       />
@@ -251,16 +266,9 @@ function PixBody({ order, pix, poll }: { order: CheckoutOrder; pix: PixCharge; p
   }
   return (
     <>
-      {/* The pane's title, at the prototype's scale: 20px, 26px wide. */}
-      <Box sx={{ "&& > *": { fontSize: "1.25rem", lineHeight: 1.25 }, [PIX_WIDE]: { "&& > *": { fontSize: "1.625rem" } } }}>
-        <Text variant="heading" size="md" weight="bold" as="h2" style={{ margin: 0 }}>
-          {copy.heading}
-        </Text>
-      </Box>
+      <PixTitle />
       <PixPane
         pix={pix}
-        tab={tab}
-        onTab={setTab}
         onCopy={() => {
           // Only a copy the clipboard TOOK moves on: the next face opens on
           // "Código Pix copiado", and a failed write leaves the code on screen
@@ -287,6 +295,9 @@ export function PixView({
   const { Text } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.pix;
   const poll = usePixPolling(order, onResolved, pollIntervalMs);
+  // The Pagamento step's panel is the card there (FUT-3525); drawing another
+  // inside it would be a box in a box.
+  const inStep = useCheckoutLayout() !== null;
   const pix = order.pix;
   if (!pix) {
     return (
@@ -307,7 +318,16 @@ export function PixView({
           display: "flex",
           flexDirection: "column",
           gap: 2,
-          [PIX_WIDE]: { gap: 2.5, p: 3.5, bgcolor: "background.paper", border: "1px solid", borderColor: "divider", borderRadius: 2 },
+          [PIX_WIDE]: inStep
+            ? { gap: 2.5 }
+            : {
+                gap: 2.5,
+                p: 3.5,
+                bgcolor: "background.paper",
+                border: "1px solid",
+                borderColor: "divider",
+                borderRadius: 2,
+              },
         }}
       >
         <PixBody order={order} pix={pix} poll={poll} />