@12-apps/payments-frontend 3.35.0 → 3.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.35.0",
+  "version": "3.36.0",
   "type": "module",
   "sideEffects": false,
   "description": "Browser half of the vendor-agnostic payments platform: plug-and-play MUI components for the per-provider settings page (credential form from each provider's schema, masked hints, verify/enable) and the checkout page (PIX QR + polling, card tokenization, hosted-checkout redirect), plus the headless hooks and fetch clients they build on. Talks only to the host's payments HTTP surface — never to a provider directly. Microfrontend-ready: no app coupling, host injects theme and auth.",

package/src/card/fields.tsx

@@ -3,6 +3,10 @@ import type { JSX } from "react";
 
 import { useCheckoutCopy } from "../components/checkout/copy-context";
 import { useCheckoutComponents } from "../components/checkout/ui";
+import {
+  StickyPayBar,
+  useCheckoutLayout,
+} from "../components/checkout/payment-step-layout";
 
 import {
   cvvLength,
@@ -110,7 +114,9 @@ function ExpiryCvvFields({
   const { Input } = useCheckoutComponents();
   const copy = useCheckoutCopy().card.fields;
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    // Side by side while "Validade (MM/AA)" fits whole; stacked below that
+    // (a phone's Pagamento card, FUT-3525) rather than cut to "Validade (MM/…".
+    <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2, "& > *": { flex: "1 1 170px" } }}>
       <Input
         label={copy.expiryLabel}
         type="text"
@@ -216,7 +222,14 @@ export function NewCardForm({
   );
 }
 
-/** Sticky primary "Pagar" action — pinned to the bottom of the viewport on mobile. */
+/**
+ * The primary "Pagar" action.
+ *
+ * On the Pagamento step it is the step's pay bar (FUT-3525): pinned to the
+ * bottom of the viewport with the total beside it on a phone, in the form on
+ * a computer. Composed anywhere else it keeps the look it always had —
+ * pinned to the bottom on a small screen, in the form on a wide one.
+ */
 export function CardPayBar({
   totalLabel,
   submitting,
@@ -227,6 +240,23 @@ export function CardPayBar({
   onPay: () => void;
 }): JSX.Element {
   const { Button } = useCheckoutComponents();
+  const inStep = useCheckoutLayout() !== null;
+  const button = (
+    <Button
+      variant="solid"
+      color="primary"
+      size="lg"
+      fullWidth
+      loading={submitting}
+      disabled={submitting}
+      onClick={onPay}
+      dataTestId="card-pay"
+    >
+      Pagar {totalLabel}
+    </Button>
+  );
+  if (inStep)
+    return <StickyPayBar dataTestId="card-pay-bar">{button}</StickyPayBar>;
   return (
     <Box
       data-testid="card-pay-bar"
@@ -242,18 +272,7 @@ export function CardPayBar({
         borderColor: "divider",
       }}
     >
-      <Button
-        variant="solid"
-        color="primary"
-        size="lg"
-        fullWidth
-        loading={submitting}
-        disabled={submitting}
-        onClick={onPay}
-        dataTestId="card-pay"
-      >
-        Pagar {totalLabel}
-      </Button>
+      {button}
     </Box>
   );
 }

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

@@ -15,9 +15,23 @@ import { StalledWait } from "./stalled-wait";
 import type { CheckoutBasketIdentity } from "./basket";
 import type { CardChainLink } from "./method-capability";
 import type { BuyerInfo, CheckoutOrder, OnCheckoutResolved } from "./types";
+import { useCheckoutLayout } from "./payment-step-layout";
 import { useCheckoutComponents } from "./ui";
 import { useCardCheckout, type CardCheckout } from "./use-card-checkout";
 
+/** The pane's heading — left out inside the Pagamento step, where the "Cartão" tab names the pane (FUT-3525). */
+function CardHeading(): JSX.Element | null {
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.card;
+  const inStep = useCheckoutLayout() !== null;
+  if (inStep) return null;
+  return (
+    <Text variant="heading" size="md" weight="bold" as="h2">
+      {copy.heading}
+    </Text>
+  );
+}
+
 /**
  * Post-submit confirmation state: timeout > error > spinner.
  *
@@ -180,8 +194,6 @@ export function CardView({
    */
   basket?: CheckoutBasketIdentity;
 }): JSX.Element {
-  const { Text } = useCheckoutComponents();
-  const copy = useCheckoutCopy().screens.card;
   const cc = useCardCheckout(
     order,
     buyer,
@@ -204,10 +216,11 @@ export function CardView({
   }
 
   return (
-    <Box data-testid="card-view" sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-      <Text variant="heading" size="md" weight="bold" as="h2">
-        {copy.heading}
-      </Text>
+    <Box
+      data-testid="card-view"
+      sx={{ display: "flex", flexDirection: "column", gap: 2 }}
+    >
+      <CardHeading />
 
       <CardInstrumentFields card={cc} />
 

package/src/components/checkout/checkout-flow.tsx

@@ -1,29 +1,20 @@
-import { Box } from "@mui/material";
 import { useMemo, type JSX, type ReactNode } from "react";
 
 import type { CheckoutBasketIdentity } from "./basket";
 import { buyerFieldsFor } from "./buyer-fields";
 import { EmptyCart, PaymentStep } from "./checkout-steps";
 import { DadosStep } from "./dados-step";
-import { ArrowBackIcon } from "./icons";
 import { PaymentStatus } from "./payment-status";
 import type { BackActionEmphasis } from "./payment-status-parts";
 import type { BuyerInfo, CheckoutProviderConfig, SettlementCheckout } from "./types";
 import { CheckoutCopyProvider } from "./copy-context";
 import { OneClickProvider, useOneClick } from "./one-click";
-import { CheckoutComponentsProvider, useCheckoutComponents, type CheckoutComponents } from "./ui";
+import { CheckoutComponentsProvider, type CheckoutComponents } from "./ui";
 import type { CheckoutViewCopy } from "./view-copy";
-import { STEP_COLUMN_MAX } from "./payment-step-layout";
+import { CheckoutFrame, FlowHeader } from "./checkout-frame";
+import type { CheckoutDeliverySummary, CheckoutSummaryLine } from "./payment-summary";
 import { useCheckoutController, type CheckoutHostPorts } from "./use-checkout-controller";
 
-/** Step ids are the flow's own contract; the labels beside them are host copy. */
-function stepperSteps(copy: CheckoutViewCopy): { id: string; label: string }[] {
-  return [
-    { id: "dados", label: copy.steps.dados },
-    { id: "payment", label: copy.steps.payment },
-    { id: "status", label: copy.steps.status },
-  ];
-}
 
 /** What the flow reads off the host's cart — display facts, never money math. */
 export interface CheckoutCartView {
@@ -33,6 +24,19 @@ export interface CheckoutCartView {
   totalItems: number;
   /** Host-rendered discount itemization under the pay-bar total (FUT-246). */
   discountLines?: ReactNode;
+  /**
+   * The cart's lines, worded by the host, for the order summary the Pagamento
+   * step shows beside the payment on a computer (FUT-3525). Absent, the
+   * summary shows the total alone.
+   */
+  lines?: CheckoutSummaryLine[];
+  /**
+   * Where the order is delivered, and the host's way back to change it — set
+   * only for a delivery (FUT-3525). Absent, no address is shown.
+   */
+  delivery?: CheckoutDeliverySummary;
+  /** The host's note control, shown in the Pagamento step's summary (FUT-3525). */
+  orderNote?: ReactNode;
   /**
    * WHICH basket this is, so a payment raised from another one cannot resume
    * itself over it (FUT-1213).
@@ -147,36 +151,6 @@ function statusTotalLabel(
   return order?.totalLabel ?? settlement?.totalLabel ?? cart.totalLabel;
 }
 
-/**
- * The slim checkout header — the flow's only nav: a step-aware back link
- * (Pagamento → Dados, else the menu).
- *
- * Deliberately nothing else. A "limpar carrinho" trash used to sit on the right
- * of the Dados step; it was removed because emptying the cart is a CART action
- * and belongs where the cart is edited — the drawer, which already offers a
- * per-line remove. Offering it here put a destructive control next to the form
- * a buyer is filling in, one tap away from the field they are typing into.
- */
-function CheckoutHeader({ copy, step, onBack }: { copy: CheckoutViewCopy; step: string; onBack: () => void }): JSX.Element {
-  const { Button } = useCheckoutComponents();
-  return (
-    <Box sx={{ minHeight: 36, display: "flex", alignItems: "center", gap: 1 }}>
-      <Button variant="text" color="neutral" size="sm" icon={<ArrowBackIcon fontSize="small" />} iconPosition="left" onClick={onBack} dataTestId="checkout-back">
-        {step === "dados" ? copy.dados.keepShopping : copy.dados.back}
-      </Button>
-    </Box>
-  );
-}
-
-/** Compact 50px progress header so the form stays above the fold on mobile. */
-function ProgressHeader({ copy, step, completed }: { copy: CheckoutViewCopy; step: string; completed: Set<string> }): JSX.Element {
-  const { Stepper } = useCheckoutComponents();
-  return (
-    <Box sx={{ height: 50, display: "flex", flexDirection: "column", justifyContent: "center" }}>
-      <Stepper steps={stepperSteps(copy)} activeId={step} completed={completed} orientation="horizontal" size="sm" data-testid="checkout-stepper" />
-    </Box>
-  );
-}
 
 /**
  * The 3-step flow body, below the slot provider. Ported from the storefront's
@@ -308,6 +282,10 @@ function PagamentoStep({
       cartTotals={cart}
       totalOverride={settlementTotalOverride(settlement)}
       discountLines={cart.discountLines}
+      // The order around the payment, for the summary (FUT-3525).
+      lines={cart.lines}
+      delivery={cart.delivery}
+      orderNote={cart.orderNote}
       // Retrying a refused card: the failed saved card is not chosen again (FUT-1145).
       freshInstrument={c.freshInstrument}
       // The card path parks an order of its own for a 3-D Secure challenge, so
@@ -341,46 +319,52 @@ function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Ele
   }
 
   return (
-    // Pagamento alone takes the host's full width (its PIX pane, FUT-3367).
-    <Box sx={{ display: "flex", flexDirection: "column", gap: { xs: 2, sm: 3 }, width: "100%", mx: "auto", maxWidth: c.step === "payment" ? "none" : STEP_COLUMN_MAX }}>
-      <CheckoutHeader copy={copy} step={c.step} onBack={c.back} />
-
-      <ProgressHeader copy={copy} step={c.step} completed={c.completed} />
+    <CheckoutFrame payment={c.step === "payment"}>
+      <FlowHeader copy={copy} step={c.step} completed={c.completed} onBack={c.back} />
 
-      {c.step === "dados" ? (
-        <DadosStep
-          copy={copy.dados}
-          buyer={c.buyer}
-          onBuyerChange={c.setBuyer}
-          saveProfile={c.saveProfile}
-          onSaveProfileChange={c.setSaveProfile}
-          createError={c.createError}
-          errorField={c.errorField}
-          onContinue={c.goToPayment}
-          cartTotals={cart}
-          buyerFields={buyerFields}
-          discountLines={cart.discountLines}
-          totalOverride={settlementTotalOverride(settlement)}
-        />
-      ) : null}
+          {c.step === "dados" ? (
+            <DadosStep
+              copy={copy.dados}
+              buyer={c.buyer}
+              onBuyerChange={c.setBuyer}
+              saveProfile={c.saveProfile}
+              onSaveProfileChange={c.setSaveProfile}
+              createError={c.createError}
+              errorField={c.errorField}
+              onContinue={c.goToPayment}
+              cartTotals={cart}
+              buyerFields={buyerFields}
+              discountLines={cart.discountLines}
+              totalOverride={settlementTotalOverride(settlement)}
+            />
+          ) : null}
 
-      {c.step === "payment" ? (
-        <OneClickProvider armed={armed}>
-          <PagamentoStep
-            c={c}
-            cart={cart}
-            settlement={settlement}
-            providerConfig={providerConfig}
-            tenantSlug={tenantSlug}
-            validateApplePayMerchant={validateApplePayMerchant}
-          />
-        </OneClickProvider>
-      ) : null}
+          {c.step === "payment" ? (
+            <OneClickProvider armed={armed}>
+              <PagamentoStep
+                c={c}
+                cart={cart}
+                settlement={settlement}
+                providerConfig={providerConfig}
+                tenantSlug={tenantSlug}
+                validateApplePayMerchant={validateApplePayMerchant}
+              />
+            </OneClickProvider>
+          ) : null}
 
-      {c.step === "status" ? (
-        <StatusStep copy={copy} c={c} settlement={settlement} cart={cart} confirmationExtra={confirmationExtra} confirmationHero={confirmationHero} confirmationFooter={confirmationFooter} backActionEmphasis={backActionEmphasis} />
-      ) : null}
-    </Box>
+          {c.step === "status" ? (
+            <StatusStep
+              copy={copy}
+              c={c}
+              settlement={settlement}
+              cart={cart}
+              confirmationExtra={confirmationExtra}
+              confirmationHero={confirmationHero}
+              confirmationFooter={confirmationFooter}
+              backActionEmphasis={backActionEmphasis}
+            />
+          ) : null}
+    </CheckoutFrame>
   );
 }
 

package/src/components/checkout/checkout-frame.tsx

@@ -0,0 +1,175 @@
+import { Box } from "@mui/material";
+import { useMemo, type JSX, type ReactNode } from "react";
+
+import { useCheckoutCopy } from "./copy-context";
+import { ArrowBackIcon } from "./icons";
+import { CheckoutLayoutProvider, STEP_COLUMN_MAX, useCheckoutLayout, useWideLayout } from "./payment-step-layout";
+import { useCheckoutComponents } from "./ui";
+import type { CheckoutViewCopy } from "./view-copy";
+
+/**
+ * The flow's frame and header: measured once at the host's full width
+ * (FUT-3525), so every step agrees on whether this is the computer's layout or
+ * the phone's.
+ */
+
+/** Step ids are the flow's own contract; the labels beside them are host copy. */
+function stepperSteps(copy: CheckoutViewCopy): { id: string; label: string }[] {
+  return [
+    { id: "dados", label: copy.steps.dados },
+    { id: "payment", label: copy.steps.payment },
+    { id: "status", label: copy.steps.status },
+  ];
+}
+
+/**
+ * The slim checkout header — the flow's only nav: a step-aware back link
+ * (Pagamento → Dados, else the menu).
+ *
+ * Deliberately nothing else. A "limpar carrinho" trash used to sit on the right
+ * of the Dados step; it was removed because emptying the cart is a CART action
+ * and belongs where the cart is edited — the drawer, which already offers a
+ * per-line remove. Offering it here put a destructive control next to the form
+ * a buyer is filling in, one tap away from the field they are typing into.
+ */
+function CheckoutHeader({ copy, step, onBack }: { copy: CheckoutViewCopy; step: string; onBack: () => void }): JSX.Element {
+  const { Button } = useCheckoutComponents();
+  return (
+    <Box sx={{ minHeight: 36, display: "flex", alignItems: "center", gap: 1 }}>
+      <Button variant="text" color="neutral" size="sm" icon={<ArrowBackIcon fontSize="small" />} iconPosition="left" onClick={onBack} dataTestId="checkout-back">
+        {step === "dados" ? copy.dados.keepShopping : copy.dados.back}
+      </Button>
+    </Box>
+  );
+}
+
+/**
+ * The phone's header (FUT-3525, layout C): "← Voltar" with "Etapa 2 de 3 ·
+ * Pagamento" on the same row, and a thin bar filled to the step — the dots
+ * of the computer's stepper cost a phone a row for the same fact.
+ */
+function CompactHeader({
+  copy,
+  step,
+  onBack,
+}: {
+  copy: CheckoutViewCopy;
+  step: string;
+  onBack: () => void;
+}): JSX.Element {
+  const { Button, Text } = useCheckoutComponents();
+  const layout = useCheckoutCopy().screens.layout;
+  const steps = stepperSteps(copy);
+  const at = Math.max(
+    0,
+    steps.findIndex((item) => item.id === step),
+  );
+  const current = steps[at];
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+      <Box
+        sx={{
+          minHeight: 44,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 1,
+        }}
+      >
+        {/* Its label on the column's edge, as the prototype draws it: the text
+            button's own padding would push it 12px in. */}
+        <Box sx={{ ml: -1.5 }}>        <Button
+            variant="text"
+            color="neutral"
+            size="sm"
+            icon={<ArrowBackIcon fontSize="small" />}
+            iconPosition="left"
+            onClick={onBack}
+            dataTestId="checkout-back"
+          >
+            {step === "dados" ? copy.dados.keepShopping : copy.dados.back}
+          </Button>
+        </Box>
+        <Text
+          variant="body"
+          size="xs"
+          as="span"
+          data-testid="checkout-step-progress"
+        >
+          {layout.stepProgress(at + 1, steps.length, current?.label ?? "")}
+        </Text>
+      </Box>
+      <Box
+        // The bar draws the sentence beside it; a reader hears that once.
+        aria-hidden
+        data-testid="checkout-stepper"
+        sx={{
+          height: 4,
+          borderRadius: 2,
+          bgcolor: "divider",
+          overflow: "hidden",
+        }}
+      >
+        <Box
+          sx={{
+            height: "100%",
+            width: `${((at + 1) / steps.length) * 100}%`,
+            bgcolor: "primary.main",
+            borderRadius: 2,
+          }}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+/** Compact 50px progress header so the form stays above the fold on mobile. */
+function ProgressHeader({ copy, step, completed }: { copy: CheckoutViewCopy; step: string; completed: Set<string> }): JSX.Element {
+  const { Stepper } = useCheckoutComponents();
+  return (
+    <Box sx={{ height: 50, display: "flex", flexDirection: "column", justifyContent: "center" }}>
+      <Stepper steps={stepperSteps(copy)} activeId={step} completed={completed} orientation="horizontal" size="sm" data-testid="checkout-stepper" />
+    </Box>
+  );
+}
+
+/** The header for the frame the flow is in: back link and stepper on a computer, one compact row on a phone. */
+export function FlowHeader({
+  copy,
+  step,
+  completed,
+  onBack,
+}: {
+  copy: CheckoutViewCopy;
+  step: string;
+  completed: Set<string>;
+  onBack: () => void;
+}): JSX.Element {
+  const wide = useCheckoutLayout()?.wide ?? false;
+  if (!wide) return <CompactHeader copy={copy} step={step} onBack={onBack} />;
+  return (
+    <>
+      <CheckoutHeader copy={copy} step={step} onBack={onBack} />
+      <ProgressHeader copy={copy} step={step} completed={completed} />
+    </>
+  );
+}
+
+/**
+ * Measured at the HOST's full width: one frame for the whole flow. Pagamento
+ * alone takes that width (its summary column); every other step keeps the
+ * 672px column it always had.
+ */
+export function CheckoutFrame({ payment, children }: { payment: boolean; children: ReactNode }): JSX.Element {
+  const [wide, frame] = useWideLayout();
+  const layout = useMemo(() => ({ wide }), [wide]);
+  return (
+    <Box ref={frame} sx={{ width: "100%" }}>
+      <CheckoutLayoutProvider value={layout}>
+        <Box sx={{ display: "flex", flexDirection: "column", gap: { xs: 2, sm: 3 }, width: "100%", mx: "auto", maxWidth: payment ? "none" : STEP_COLUMN_MAX }}>
+          {children}
+        </Box>
+      </CheckoutLayoutProvider>
+    </Box>
+  );
+}

package/src/components/checkout/checkout-steps.tsx

@@ -2,15 +2,14 @@ import { Box } from "@mui/material";
 import { useEffect, useRef, type JSX, type ReactNode } from "react";
 
 import type { CheckoutBasketIdentity } from "./basket";
-import { displayTotals, PayBarTotal } from "./checkout-totals";
 import { CartChangedBoundary, type OrderRefresh } from "./cart-changed";
 import { useCheckoutCopy } from "./copy-context";
 import { useMethodChoice } from "./method-choice";
-import { MethodPicker } from "./method-picker";
 import { PixStageProvider } from "./pix-stage";
-import { StepColumn, usePaymentPixStage } from "./payment-step-layout";
+import { PayBarTotalProvider, useCheckoutLayout, usePaymentPixStage } from "./payment-step-layout";
 import { PaymentErrorPanel } from "./payment-error-panel";
-import { PayerSummary } from "./payer-summary";
+import { PaymentStepFrame, summaryParts } from "./payment-step-frame";
+import type { CheckoutDeliverySummary, CheckoutSummaryLine, OrderSummaryParts } from "./payment-summary";
 import { resolveCheckoutScreen } from "./providers/registry";
 import type {
   BuyerField,
@@ -124,48 +123,6 @@ export function EmptyCart({ copy, onBack }: { copy: EmptyCartCopy; onBack: () =>
   );
 }
 
-/** What the step knows about the amount: the charge's, the balance's, the cart's. */
-interface StepMoney {
-  order: CheckoutOrder | null;
-  cartTotals?: { totalLabel: string; totalItems: number };
-  totalOverride?: { label: string; items: number };
-  discountLines?: ReactNode;
-}
-
-/**
- * The Pagamento step's own money line (FUT-1179).
- *
- * THE RAISED ORDER'S TOTAL WINS, exactly as the confirmation screen's does
- * (`statusTotalLabel`). Once a charge exists, that charge's amount is what is
- * being taken — a repriced cart, or an order resumed from a parked entry, makes
- * the cart's total a different number from the one about to leave the buyer's
- * account. Showing the cart's number above a QR for the order's would be this
- * ticket's own defect in a new place: an amount on screen that is not the
- * amount being charged.
- *
- * The item COUNT stays the cart's — an order carries no line count, and the
- * caption is a description of the basket rather than of the charge.
- *
- * Renders nothing at all when the host supplied no totals and no order — a step
- * that would otherwise print "Total ·" with a blank beside it is worse than the
- * silence this ticket is about. Every host mounting `CheckoutFlow` gets them;
- * only a hand-composed step can be missing them.
- */
-function PaymentStepTotal({ money }: { money: StepMoney }): JSX.Element | null {
-  const { order, cartTotals, totalOverride, discountLines } = money;
-  if (!cartTotals && !totalOverride && !order) return null;
-  const { label, items } = displayTotals(totalOverride, cartTotals ?? { totalLabel: "", totalItems: 0 });
-  return (
-    <Box data-testid="payment-step-total" sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 2 }}>
-      <PayBarTotal totalLabel={order?.totalLabel ?? label} totalItems={items}>
-        {/* Suppressed while settling a balance: those totals come from the
-            frozen ticket, not the cart. */}
-        {totalOverride ? null : discountLines}
-      </PayBarTotal>
-    </Box>
-  );
-}
-
 /** Props for {@link PaymentStep} — step 2's inputs, wired by the flow. */
 interface PaymentStepProps {
   method: PaymentMethod | null;
@@ -221,6 +178,12 @@ interface PaymentStepProps {
   totalOverride?: { label: string; items: number };
   /** The host's own rendered discount itemization, under the total (FUT-246). */
   discountLines?: ReactNode;
+  /** The cart's lines, listed in the computer's order summary (FUT-3525). */
+  lines?: CheckoutSummaryLine[];
+  /** Where a delivery goes — Entrega only; absent hides the row (FUT-3525). */
+  delivery?: CheckoutDeliverySummary;
+  /** The host's note control, shown in the summary (FUT-3525). */
+  orderNote?: ReactNode;
   pollIntervalMs?: number;
   /** Retrying a refused card — preselect no saved instrument (FUT-1145). */
   freshInstrument?: boolean;
@@ -254,6 +217,9 @@ export function PaymentStep({
   cartTotals,
   totalOverride,
   discountLines,
+  lines,
+  delivery,
+  orderNote,
   pollIntervalMs,
   freshInstrument,
   basket,
@@ -265,23 +231,23 @@ export function PaymentStep({
   useAutoRaiseOrder(order, method, creating, createError, onGenerate);
   const pixStage = usePaymentPixStage(choice, onMethodChange);
 
+  const wide = useCheckoutLayout()?.wide ?? false;
+  const parts = summaryParts(
+    { order, cartTotals, totalOverride, discountLines },
+    { lines, payer: payerOf(buyer, onEditBuyer), delivery, orderNote },
+  );
+  const tabs = {
+    show: !(choice.atProvider || pixStage.afterCopy),
+    method,
+    onChange: onMethodChange,
+    cardUnavailable: choice.cardUnavailable,
+    offered: choice.offered,
+  };
+
   return (
     <PixStageProvider stage={pixStage}>
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
-        {/* THE AMOUNT, before anything asks for it (FUT-1179) — at the top, not in a
-            bar of its own: a second bar would put two "pay" controls on one screen. */}
-        <PaymentStepTotal money={{ order, cartTotals, totalOverride, discountLines }} />
-
-        {/* Self-hiding: renders only for a flow whose Dados step was skipped. */}
-        <StepColumn>
-          <PayerSummary name={buyer.name} taxId={buyer.taxId} onEdit={onEditBuyer} />
-        </StepColumn>
-
-        {choice.atProvider || pixStage.afterCopy ? null : (
-          <MethodPicker value={method} onChange={onMethodChange} cardUnavailable={choice.cardUnavailable} offered={choice.offered} />
-        )}
-
-        <StepColumn full={order?.method === "PIX"}>
+      <PayBarTotalProvider value={parts?.totalLabel ?? null}>
+        <PaymentStepFrame wide={wide} parts={parts} tabs={tabs} filled={Boolean(method || order)}>
           <CartChangedBoundary {...{ order, creating, onGenerate, refresh }} basket={totalOverride ? undefined : basket}>
             <PaymentBody
               order={order}
@@ -298,9 +264,6 @@ export function PaymentStep({
               validateApplePayMerchant={validateApplePayMerchant}
             />
           </CartChangedBoundary>
-        </StepColumn>
-
-        <StepColumn>
           <RaisingState
             order={order}
             method={method}
@@ -311,12 +274,17 @@ export function PaymentStep({
             onUseEmail={onUseEmail}
             onGenerate={onGenerate}
           />
-        </StepColumn>
-      </Box>
+        </PaymentStepFrame>
+      </PayBarTotalProvider>
     </PixStageProvider>
   );
 }
 
+/** The payer line's facts — only for a flow whose Dados step was skipped (FUT-465). */
+function payerOf(buyer: BuyerInfo, onEditBuyer: (() => void) | undefined): OrderSummaryParts["payer"] {
+  return onEditBuyer ? { name: buyer.name, taxId: buyer.taxId, onEdit: onEditBuyer } : undefined;
+}
+
 /**
  * What the shell says while the order is being raised, and if raising it
  * failed.

package/src/components/checkout/icons.tsx

@@ -69,3 +69,8 @@ export const QrCodeIcon = makeIcon([
 ]);
 
 export const CheckIcon = makeIcon(['M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z']);
+
+export const PlaceOutlinedIcon = makeIcon([
+  'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7M7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.88-2.88 7.19-5 9.88C9.92 16.21 7 11.85 7 9',
+  'M12 6.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5',
+]);