@12-apps/payments-frontend 3.45.1 → 3.46.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.45.1",
+  "version": "3.46.1",
   "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.",
@@ -23,7 +23,7 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@12-apps/payments-backend": "^4.36.1",
+    "@12-apps/payments-backend": "^4.37.0",
     "react-qr-code": "^2.2.0"
   },
   "peerDependencies": {

package/src/card/pagbank-test-cards.ts

@@ -7,7 +7,7 @@
  * encrypts them and only the encrypted blob leaves it.
  */
 interface PagBankTestCard {
-  scenario: "approved" | "declined";
+  scenario: "approved" | "declined" | "debit";
   brand: string;
   number: string;
   holder: string;
@@ -44,6 +44,22 @@ export const PAGBANK_TEST_CARDS: readonly PagBankTestCard[] = [
   },
 ];
 
+/**
+ * PagBank's 3-D Secure sandbox test card (FUT-3755), charged as DEBIT. The
+ * sandbox answers it by AMOUNT: authenticated for R$ 27,01
+ * (`PAGBANK_SANDBOX_DEBIT_CENTS`) it is AUTHENTICATED with no challenge and
+ * then PAID, so the evidence run needs no one to type a code.
+ */
+export const PAGBANK_3DS_TEST_CARD: PagBankTestCard = {
+  scenario: "debit",
+  brand: "VISA",
+  number: "4000000000002701",
+  holder: "Jose da Silva",
+  expMonth: "12",
+  expYear: TEST_EXPIRY_YEAR,
+  securityCode: "123",
+};
+
 /** `4539 62** **** 2097` — the first six and last four, as a receipt prints them. */
 export function maskTestCard(number: string): string {
   return `${number.slice(0, 4)} ${number.slice(4, 6)}** **** ${number.slice(-4)}`;

package/src/card/three-ds.ts

@@ -0,0 +1,166 @@
+import { ensurePagBankSdk } from "./tokenize";
+
+/**
+ * PagBank's 3-D Secure, in the buyer's browser (FUT-3754) — the step a DEBIT
+ * card charge cannot skip.
+ *
+ * Per "Criar e pagar com autenticação 3DS do PagBank": the SDK is pointed at a
+ * session the SERVER minted with the seller's token (`setUp`), then
+ * `authenticate3DS` runs the issuer's check — silently, or with a challenge the
+ * SDK draws itself — and answers an `id` that the debit charge carries as
+ * `authentication_method: { type: "THREEDS", id }`.
+ *
+ * What the statuses mean for a DEBIT card, and therefore what this answers:
+ *   AUTH_FLOW_COMPLETED    the id may be charged (authenticated or not — the
+ *                          issuer decides, PagBank still processes it)
+ *   AUTH_NOT_SUPPORTED     "para débito, a transação deve ser finalizada": the
+ *                          card cannot be charged as debit here
+ *   CHANGE_PAYMENT_METHOD  PagBank refused the authentication outright
+ * `REQUIRE_CHALLENGE` is intermediate — the SDK opens the challenge itself when
+ * no `beforeChallenge` is given — so it never reaches the caller.
+ */
+
+/** The SDK's request, field for field. Only the shape this package sends. */
+export interface PagBankThreeDSRequest {
+  data: {
+    customer: {
+      name: string;
+      email: string;
+      phones: { country: string; area: string; number: string; type: "MOBILE" }[];
+    };
+    paymentMethod: {
+      type: "DEBIT_CARD" | "CREDIT_CARD";
+      installments: number;
+      card: { encrypted: string };
+    };
+    amount: { value: number; currency: "BRL" };
+    billingAddress: PagBankThreeDSAddress;
+    dataOnly: false;
+  };
+}
+
+export interface PagBankThreeDSAddress {
+  street: string;
+  number: string;
+  complement?: string;
+  regionCode: string;
+  country: "BRA";
+  city: string;
+  postalCode: string;
+}
+
+export interface PagBankThreeDSResult {
+  status: "AUTH_FLOW_COMPLETED" | "AUTH_NOT_SUPPORTED" | "CHANGE_PAYMENT_METHOD" | "REQUIRE_CHALLENGE";
+  authenticationStatus?: "AUTHENTICATED" | "NOT_AUTHENTICATED";
+  id?: string;
+}
+
+/** Everything a debit authentication needs, in this package's own words. */
+export interface ThreeDSInput {
+  /** From the server's `3ds-session` answer. */
+  session: string;
+  environment: "SANDBOX" | "PRODUCTION";
+  /** The card, already encrypted with the seller's public key. */
+  encryptedCard: string;
+  amountCents: number;
+  customer: { name: string; email: string; phone: string };
+  billingAddress: Omit<PagBankThreeDSAddress, "country">;
+  /**
+   * Give up after this long, answering `ERROR`. Only for a run nobody types
+   * into (the homologation's no-challenge test card): a buyer's challenge may
+   * honestly take minutes, so the checkout passes none.
+   */
+  timeoutMs?: number;
+}
+
+/** Why a debit card could not be authenticated — a CODE; the caller words it. */
+export type ThreeDSFailure =
+  | "SDK_UNAVAILABLE"
+  | "NOT_SUPPORTED"
+  | "REFUSED"
+  | "INVALID_DATA"
+  | "ERROR";
+
+type ThreeDSOutcome =
+  | { ok: true; authenticationId: string; authenticated: boolean }
+  | { ok: false; failure: ThreeDSFailure };
+
+/**
+ * A Brazilian phone as the SDK's `{ country, area, number }`; null when it
+ * cannot be split. PagBank requires at least one MOBILE phone on the request.
+ */
+function mobileOf(phone: string): PagBankThreeDSRequest["data"]["customer"]["phones"][number] | null {
+  const digits = phone.replace(/\D/g, "");
+  const local = digits.length >= 12 && digits.startsWith("55") ? digits.slice(2) : digits;
+  if (local.length < 10 || local.length > 11) return null;
+  return { country: "55", area: local.slice(0, 2), number: local.slice(2), type: "MOBILE" };
+}
+
+/** The SDK's request, or null when the buyer's data cannot fill it. */
+export function threeDSRequestOf(input: ThreeDSInput): PagBankThreeDSRequest | null {
+  const mobile = mobileOf(input.customer.phone);
+  if (!mobile) return null;
+  return {
+    data: {
+      customer: { name: input.customer.name.trim(), email: input.customer.email.trim(), phones: [mobile] },
+      paymentMethod: { type: "DEBIT_CARD", installments: 1, card: { encrypted: input.encryptedCard } },
+      amount: { value: input.amountCents, currency: "BRL" },
+      billingAddress: {
+        ...input.billingAddress,
+        postalCode: input.billingAddress.postalCode.replace(/\D/g, ""),
+        country: "BRA",
+      },
+      dataOnly: false,
+    },
+  };
+}
+
+/** What the SDK answered, as this package's outcome. */
+export function threeDSOutcomeOf(result: PagBankThreeDSResult): ThreeDSOutcome {
+  if (result.status === "AUTH_FLOW_COMPLETED" && result.id) {
+    return {
+      ok: true,
+      authenticationId: result.id,
+      authenticated: result.authenticationStatus === "AUTHENTICATED",
+    };
+  }
+  if (result.status === "AUTH_NOT_SUPPORTED") return { ok: false, failure: "NOT_SUPPORTED" };
+  if (result.status === "CHANGE_PAYMENT_METHOD") return { ok: false, failure: "REFUSED" };
+  return { ok: false, failure: "ERROR" };
+}
+
+/** The SDK's answer, or a rejection once `ms` have passed (never, without `ms`). */
+function withTimeout<T>(pending: Promise<T>, ms: number | undefined): Promise<T> {
+  if (ms === undefined) return pending;
+  return new Promise<T>((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error("3-D Secure timed out")), ms);
+    pending.then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      (error: unknown) => {
+        clearTimeout(timer);
+        reject(error instanceof Error ? error : new Error(String(error)));
+      },
+    );
+  });
+}
+
+/** Authenticate a debit card with PagBank's SDK. Never throws. */
+export async function authenticatePagBankDebit(input: ThreeDSInput): Promise<ThreeDSOutcome> {
+  const request = threeDSRequestOf(input);
+  if (!request) return { ok: false, failure: "INVALID_DATA" };
+  if (!(await ensurePagBankSdk())) return { ok: false, failure: "SDK_UNAVAILABLE" };
+  const sdk = typeof window === "undefined" ? undefined : window.PagSeguro;
+  if (!sdk?.setUp || !sdk.authenticate3DS) return { ok: false, failure: "SDK_UNAVAILABLE" };
+  try {
+    sdk.setUp({ session: input.session, env: input.environment === "PRODUCTION" ? "PROD" : "SANDBOX" });
+    return threeDSOutcomeOf(await withTimeout(sdk.authenticate3DS(request), input.timeoutMs));
+  } catch {
+    // The SDK rejects with `{ detail: { httpStatus, traceId, errorMessages } }`
+    // — a bad field or an expired session. Neither can be fixed by the buyer
+    // retrying the same card in the same second.
+    return { ok: false, failure: "ERROR" };
+  }
+}

package/src/card/tokenize.ts

@@ -27,6 +27,7 @@ import { detectBrand, onlyDigits } from "./format";
 import { tokenizeWithStripe } from "./stripe-token";
 import type { CardDetails, CardToken } from "./types";
 import type { CardCopy } from "./copy";
+import type { PagBankThreeDSRequest, PagBankThreeDSResult } from "./three-ds";
 
 /** Test PAN that always declines (mirrors common sandbox decline cards). */
 const DECLINE_PAN = "4000000000000002";
@@ -56,6 +57,10 @@ declare global {
         expYear: string;
         securityCode: string;
       }): PagBankEncryptResult;
+      /** 3-D Secure (FUT-3754): point the SDK at a server-minted session. */
+      setUp?(params: { session: string; env: "SANDBOX" | "PROD" }): void;
+      /** 3-D Secure (FUT-3754): see `three-ds.ts` for the request and the answer. */
+      authenticate3DS?(request: PagBankThreeDSRequest): Promise<PagBankThreeDSResult>;
     };
   }
 }
@@ -66,7 +71,7 @@ declare global {
  * surfaces a friendly retry message.
  */
 let sdkLoad: Promise<boolean> | null = null;
-function ensurePagBankSdk(): Promise<boolean> {
+export function ensurePagBankSdk(): Promise<boolean> {
   if (typeof window === "undefined") return Promise.resolve(false);
   if (window.PagSeguro?.encryptCard) return Promise.resolve(true);
   sdkLoad ??= new Promise<boolean>((resolve) => {

package/src/components/checkout/client-context.tsx

@@ -53,6 +53,7 @@ function unboundClient(copy: CheckoutTransportCopy): CheckoutClient {
     beginVault: () => createCheckoutClient({ copy }).beginVault(),
     completeVault: (input) => createCheckoutClient({ copy }).completeVault(input),
     refreshBrowserKey: (input) => refreshCardPublicKey(input, copy),
+    threeDSecureSession: (input) => createCheckoutClient({ copy }).threeDSecureSession!(input),
   };
 }
 

package/src/components/checkout/debit-charge.ts

@@ -0,0 +1,60 @@
+import { authenticatePagBankDebit, type ThreeDSFailure } from "../../card/three-ds";
+import { err, ok, type Result } from "../../result";
+
+import type { CheckoutBillingAddress, PaymentListDebitCopy } from "./list/types";
+import type { CheckoutClient } from "./transport";
+import type { BuyerInfo, CheckoutOrder } from "./types";
+
+/**
+ * A DEBIT card's 3-D Secure, between the card's encryption and its charge
+ * (FUT-3754).
+ *
+ * The session is minted by the server for the order's own store (`/3ds-session`
+ * is payable-scoped), the provider's SDK authenticates the encrypted card in
+ * this browser — drawing the bank's challenge itself when the bank asks for
+ * one — and the id it answers is what the debit charge carries. Nothing is
+ * charged when the authentication fails: the buyer reads why and stays on the
+ * list with the card they typed.
+ */
+
+/** What the debit row hands the card charge: the address the bank checks, and the row's words. */
+export interface DebitAuthentication {
+  billingAddress: CheckoutBillingAddress;
+  copy: PaymentListDebitCopy;
+}
+
+/** The session a stub connection answers — authenticating it needs no SDK and no bank. */
+const STUB_SESSION = "stub-3ds-session";
+
+function failureWords(copy: PaymentListDebitCopy, failure: ThreeDSFailure): string {
+  if (failure === "NOT_SUPPORTED") return copy.notSupported;
+  if (failure === "REFUSED") return copy.refused;
+  return copy.failed;
+}
+
+/** The authentication id to charge the debit card with, or the buyer's reason why not. */
+export async function authenticateDebit(input: {
+  client: Pick<CheckoutClient, "threeDSecureSession">;
+  order: CheckoutOrder;
+  buyer: BuyerInfo;
+  encryptedCard: string;
+  debit: DebitAuthentication;
+}): Promise<Result<string>> {
+  const { copy } = input.debit;
+  const minted = await input.client.threeDSecureSession?.({ orderId: input.order.orderId });
+  if (!minted?.ok) return err(copy.failed);
+  if (minted.data.session === STUB_SESSION) return ok("stub-3ds");
+  const outcome = await authenticatePagBankDebit({
+    session: minted.data.session,
+    environment: minted.data.environment,
+    encryptedCard: input.encryptedCard,
+    amountCents: minted.data.amountCents,
+    customer: {
+      name: input.buyer.name ?? "",
+      email: input.buyer.email ?? "",
+      phone: input.buyer.phone ?? "",
+    },
+    billingAddress: input.debit.billingAddress,
+  });
+  return outcome.ok ? ok(outcome.authenticationId) : err(failureWords(copy, outcome.failure));
+}

package/src/components/checkout/debit-types.ts

@@ -0,0 +1,31 @@
+/**
+ * The debit card's wire and config shapes (FUT-3754) — their own module for
+ * the size gate on `types.ts`, which extends them.
+ */
+
+/** A chain entry's debit claim: absent (an older host) means no debit, as `wallets`. */
+export interface DebitDeclaration {
+  /** THIS entry charges a card as DEBIT, 3-D Secure authenticated. */
+  debit?: boolean;
+}
+
+/** What makes a card charge a debit one. Absent means credit, as every charge before it. */
+export interface DebitChargeFields {
+  funding?: "DEBIT";
+  /** The 3-D Secure authentication the buyer completed for this charge. */
+  authenticationId?: string;
+}
+
+/** `POST /3ds-session`'s answer: what the provider's 3-D Secure SDK runs on. */
+export interface ThreeDSecureSessionView {
+  provider: string;
+  session: string;
+  expiresAt: number;
+  environment: "SANDBOX" | "PRODUCTION";
+  /**
+   * What the charge will take, in cents — the figure the bank authenticates.
+   * The server's, never the browser's: an authentication for any other amount
+   * is refused or, worse, approves a debit the buyer never confirmed.
+   */
+  amountCents: number;
+}

package/src/components/checkout/list/bank-en-US.ts

@@ -20,6 +20,7 @@ export const EN_US_PIX_BANK_COPY: PixBankCopy = {
   other: "Another bank",
   notOpened: (bank) => `We couldn't open ${bank.name}. Is the app installed on this phone?`,
   retry: "Try again",
+  appHint: "Open your bank's app and paste the code in Pix copy and paste.",
   copied: "Pix code copied",
   copiedPick: "Pix code copied. Choose your bank.",
   copiedOpening: (bank) => `Pix code copied. Opening ${bank.name}…`,

package/src/components/checkout/list/bank-pt-BR.ts

@@ -20,6 +20,7 @@ export const PT_BR_PIX_BANK_COPY: PixBankCopy = {
   other: "Outro banco",
   notOpened: (bank) => `Não conseguimos abrir ${bank.the}${bank.name}. O app está instalado neste celular?`,
   retry: "Tentar de novo",
+  appHint: "Abra o app do seu banco e cole em Pix copia e cola.",
   copied: "Código Pix copiado",
   copiedPick: "Código Pix copiado. Escolha o banco.",
   copiedOpening: (bank) => `Código Pix copiado. Abrindo ${bank.the}${bank.name}…`,

package/src/components/checkout/list/charge-runners.tsx

@@ -19,6 +19,7 @@ import type { ChallengeScope } from "../card-outcome";
 import { useCheckoutCopy } from "../copy-context";
 import type { BuyerInfo, CheckoutOrder, CheckoutWalletType, OnCheckoutResolved } from "../types";
 import { useCardSubmit } from "../use-card-checkout";
+import type { DebitAuthentication } from "../debit-charge";
 import { useWalletCharge } from "../use-wallet-charge";
 
 import type { ListCard } from "./use-list-state";
@@ -60,10 +61,13 @@ export function CardRun({
   pollIntervalMs,
   onAccepted,
   onFailed,
+  debit,
 }: RunnerCallbacks & {
   order: CheckoutOrder;
   buyer: BuyerInfo;
   card: ListCard;
+  /** The debit row is the choice: authenticate, then charge as debit (FUT-3754). */
+  debit?: DebitAuthentication;
   config: CardTokenizationConfig;
   chain: readonly CardChainLink[];
   scope: ChallengeScope;
@@ -89,6 +93,7 @@ export function CardRun({
         number: card.complete ? undefined : fieldCopy.numberInvalid,
       }),
       setFieldErrors: card.setFieldErrors,
+      debit,
     },
     chain,
     scope,

package/src/components/checkout/list/choice-list.tsx

@@ -8,16 +8,19 @@ import { cardName, type OnlineRow } from "./choice";
 import type { ListChargeFailure } from "./charge-runners";
 import { OnlineContent, opensContent } from "./online-content";
 import { GroupHeading, OptionRow } from "./option-row";
-import type { CheckoutDoorOption, CheckoutOnlineChoice, PaymentListCopy } from "./types";
+import type { CheckoutDoorOption, PaymentListCopy } from "./types";
 import type { ListState } from "./use-list-state";
 
 /** An online row's label and hint, worded for what the store and the buyer hold. */
 function onlineWords(
-  method: CheckoutOnlineChoice,
+  row: OnlineRow,
   copy: PaymentListCopy,
   state: ListState,
   provider: string | null,
 ): { label: string; hint: string } {
+  const { method } = row;
+  // A debit row exists only with these words (`useDebitReady`).
+  if (row.funding === "DEBIT" && copy.debit) return { label: copy.debit.label, hint: copy.debit.hint };
   if (method === "PIX") return copy.pix;
   if (method === "GOOGLE_PAY") return copy.googlePay;
   if (method === "HAND_OFF") return { label: copy.handOff.label, hint: copy.handOff.hint(provider) };
@@ -28,6 +31,11 @@ function onlineWords(
   };
 }
 
+/** A row's identity — its method, and `-DEBIT` for the debit card (FUT-3754). */
+function rowKey(row: OnlineRow): string {
+  return row.funding ? `${row.method}-${row.funding}` : row.method;
+}
+
 /** The hint of a card the store declares and this browser cannot take — today's words (N9). */
 function useUnavailableHint(): string {
   return useCheckoutCopy().screens.method.unavailableHere;
@@ -50,23 +58,24 @@ interface RowProps {
 function OnlineOptionRow({ row, props }: { row: OnlineRow; props: RowProps }): JSX.Element {
   const { copy, state, provider } = props;
   const unavailable = useUnavailableHint();
-  const words = onlineWords(row.method, copy, state, provider);
-  const chosen = state.choice?.kind === "online" && state.choice.method === row.method;
+  const words = onlineWords(row, copy, state, provider);
+  const chosen = state.choice?.kind === "online" && state.choice.method === row.method && state.choice.funding === row.funding;
   return (
     <OptionRow
       name={props.name}
-      value={row.method}
+      value={rowKey(row)}
       chosen={chosen}
       disabled={row.disabled}
       label={words.label}
       hint={row.disabled ? unavailable : words.hint}
-      onChoose={() => state.choose({ kind: "online", method: row.method })}
-      testId={`list-option-${row.method}`}
+      onChoose={() => state.choose({ kind: "online", method: row.method, ...(row.funding ? { funding: row.funding } : {}) })}
+      testId={`list-option-${rowKey(row)}`}
     >
       {opensContent(row.method, state.asked, props.failure, props.covered) ? (
         <OnlineContent
         withConsent={!state.top}
         method={row.method}
+        debit={row.funding === "DEBIT"}
         asked={state.asked}
         buyer={props.buyer}
         onBuyerChange={props.onBuyerChange}
@@ -164,7 +173,7 @@ export function ChoiceList({
       {/* Each heading only over a group that has rows (a door-only store shows the door one alone). */}
       {state.rows.length > 0 ? (
         <Group id={`${base}-online`} heading={copy.onlineHeading}>
-          {state.rows.map((row) => <OnlineOptionRow key={row.method} row={row} props={props} />)}
+          {state.rows.map((row) => <OnlineOptionRow key={rowKey(row)} row={row} props={props} />)}
         </Group>
       ) : null}
       {door.length > 0 ? (

package/src/components/checkout/list/choice.ts

@@ -28,6 +28,8 @@ export interface OnlineRow {
   method: CheckoutOnlineChoice;
   /** A card the store declares but this browser cannot mint for — drawn, not choosable. */
   disabled: boolean;
+  /** The DEBIT card row (FUT-3754): the card again, authenticated by 3-D Secure. */
+  funding?: "DEBIT";
 }
 
 /** What the chain lets this browser offer, as the list needs it. */
@@ -37,6 +39,8 @@ export interface OnlineCapability {
   /** The methods the chain declares, or `null` while unknown (fails OPEN). */
   offered: PaymentMethod[] | null;
   cardUnavailable: boolean;
+  /** The debit row is offered: the head declares debit and the host gave an address (FUT-3754). */
+  debit?: boolean;
 }
 
 /**
@@ -51,6 +55,8 @@ export function onlineRows(cap: OnlineCapability): OnlineRow[] {
   const rows: OnlineRow[] = [];
   if (offers("PIX")) rows.push({ method: "PIX", disabled: false });
   if (offers("CARD")) rows.push({ method: "CARD", disabled: cap.cardUnavailable });
+  // Right under the credit card, and only where the store has debit on.
+  if (offers("CARD") && cap.debit) rows.push({ method: "CARD", funding: "DEBIT", disabled: cap.cardUnavailable });
   return rows;
 }
 

package/src/components/checkout/list/debit-copy.ts

@@ -0,0 +1,32 @@
+/**
+ * The debit card row's host inputs (FUT-3754) — their own module for the size
+ * gate on `types.ts`, which re-exports them.
+ */
+
+/** `PaymentListCopy.debit` — the debit card row and its 3-D Secure refusals. */
+export interface PaymentListDebitCopy {
+  /** "Cartão de débito". */
+  label: string;
+  /** "Digite os dados do cartão; o banco pode pedir uma confirmação". */
+  hint: string;
+  /** The card cannot be authenticated as debit here — try credit or Pix. */
+  notSupported: string;
+  /** The bank refused the authentication. */
+  refused: string;
+  /** The authentication could not run (a session, the SDK, the buyer's data). */
+  failed: string;
+}
+
+/**
+ * Where the buyer's card bill goes, as a debit's 3-D Secure needs it
+ * (FUT-3754). The host's delivery address is the one it has; Brazil only.
+ */
+export interface CheckoutBillingAddress {
+  street: string;
+  number: string;
+  complement?: string;
+  city: string;
+  /** The state's two letters — "SP". */
+  regionCode: string;
+  postalCode: string;
+}

package/src/components/checkout/list/en-US.ts

@@ -11,6 +11,13 @@ export const EN_US_PAYMENT_LIST_COPY: PaymentListCopy = {
     hintSaved: (card) => `${card} or another card`,
     hintNew: "Enter your card details",
   },
+  debit: {
+    label: "Debit card",
+    hint: "Your bank may ask you to confirm in its app",
+    notSupported: "This card can't be used as debit here. Try credit or Pix.",
+    refused: "Your bank didn't confirm the debit payment. Try another card or Pix.",
+    failed: "We couldn't confirm the debit with your bank. Try again.",
+  },
   googlePay: { label: "Google Pay", hint: "With the card saved in your Google account" },
   wallets: {
     heading: "Quick payment",

package/src/components/checkout/list/list-face.tsx

@@ -5,6 +5,7 @@ import { cardChain, cardTokenization, handOffMethod } from "../method-capability
 import { PaymentErrorPanel } from "../payment-error-panel";
 import { UNRESOLVED_CODE } from "../failure-codes";
 import type { CheckoutBasketIdentity } from "../basket";
+import type { DebitAuthentication } from "../debit-charge";
 import type { BuyerContact, CheckoutProviderConfig, PaymentMethod } from "../types";
 import type { useCheckoutController } from "../use-checkout-controller";
 
@@ -226,6 +227,14 @@ function BarAction({ props, failure, act, onCancel, reason, returnFocus }: {
   return <PressButton props={props} act={act} reason={reason} returnFocus={returnFocus} />;
 }
 
+/** The debit card's 3-D Secure inputs when the debit row is the choice (FUT-3754), else none. */
+function debitOf(props: ListFaceProps): DebitAuthentication | undefined {
+  const { choice } = props.state;
+  const { billingAddress, copy } = props.list;
+  if (choice?.kind !== "online" || choice.funding !== "DEBIT" || !billingAddress || !copy.debit) return undefined;
+  return { billingAddress, copy: copy.debit };
+}
+
 /** The charge under way, once there is an order to run it against. */
 function Runners({ props, sheet, onFailed, onWalletFailed }: {
   props: ListFaceProps;
@@ -242,7 +251,7 @@ function Runners({ props, sheet, onFailed, onWalletFailed }: {
     onResolved: c.handleResolved, pollIntervalMs: props.pollIntervalMs, onAccepted: charge.accepted, onFailed,
   };
   if (charge.kind === "CARD") {
-    return <CardRun {...common} card={props.state.card} config={cardTokenization(config)} chain={cardChain(config)} />;
+    return <CardRun {...common} card={props.state.card} config={cardTokenization(config)} chain={cardChain(config)} debit={debitOf(props)} />;
   }
   if (charge.kind !== null && charge.kind === sheet?.type) return <WalletRun {...common} onFailed={onWalletFailed} sheet={sheet} />;
   return null;

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

@@ -311,7 +311,7 @@ export function ListPixFace(props: ListPixFaceProps & { mode: PaymentListMode })
   // On a phone the bank flow takes the copy: "Copiar e abrir o Nubank", the
   // toast, the app. Without it — or on a computer — the copy is today's.
   const onCopy = flow ? copies.copy : props.onCopy;
-  const banks = flow?.os ? { node: <PixBanks bank={flow.bank} state={flow.state} stale={stale} />, replacesChecklist: flow.state.chosen === null } : undefined;
+  const banks = flow?.os ? { node: <PixBanks bank={flow.bank} state={flow.state} stale={stale} />, replacesChecklist: true } : undefined;
   return (
     <Box data-testid="list-pix" sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
       <Text variant="body" size="md" weight="bold" as="p" style={{ margin: 0 }} data-testid="list-pix-title">

package/src/components/checkout/list/online-content.tsx

@@ -86,6 +86,30 @@ function focusCardNumber(scope: HTMLElement | null): void {
   scope?.querySelector<HTMLInputElement>('input[data-testid="card-number"]')?.focus();
 }
 
+/**
+ * The card's own fields: the saved cards, then the form for a new one. A debit
+ * card (FUT-3754) is always typed — a saved card is charged as credit — and is
+ * never offered for saving.
+ */
+function CardFields({ card, copy, debit }: { card: ListCard; copy: PaymentListCopy; debit: boolean }): JSX.Element {
+  return (
+    <>
+      {debit ? null : <SavedChips card={card} copy={copy} />}
+      {card.selection === NEW_CARD ? (
+        <NewCardForm
+          card={card.card}
+          fieldErrors={card.fieldErrors}
+          brand={detectBrand(onlyDigits(card.card.number))}
+          saveCard={card.saveCard}
+          setCard={card.setCard}
+          setFieldErrors={card.setFieldErrors}
+          onSaveCardChange={debit ? undefined : card.setSaveCard}
+        />
+      ) : null}
+    </>
+  );
+}
+
 /**
  * What opens inside a chosen ONLINE option, top to bottom (M11, FN:180-202):
  * the buyer's missing details, then — for the card — the saved-card chips and
@@ -103,8 +127,11 @@ export function OnlineContent({
   failure,
   covered = false,
   withConsent = true,
+  debit = false,
 }: {
   method: "PIX" | "CARD" | "GOOGLE_PAY" | "HAND_OFF";
+  /** The debit card row (FUT-3754): no saved cards, and nothing to save. */
+  debit?: boolean;
   asked: readonly CheckoutCustomerField[];
   buyer: BuyerInfo;
   onBuyerChange: (buyer: BuyerInfo) => void;
@@ -130,18 +157,7 @@ export function OnlineContent({
         onComplete={isCard ? () => focusCardNumber(scope.current) : undefined}
         withConsent={withConsent}
       />
-      {isCard ? <SavedChips card={card} copy={copy} /> : null}
-      {isCard && card.selection === NEW_CARD ? (
-        <NewCardForm
-          card={card.card}
-          fieldErrors={card.fieldErrors}
-          brand={detectBrand(onlyDigits(card.card.number))}
-          saveCard={card.saveCard}
-          setCard={card.setCard}
-          setFieldErrors={card.setFieldErrors}
-          onSaveCardChange={card.setSaveCard}
-        />
-      ) : null}
+      {isCard ? <CardFields card={card} copy={copy} debit={debit} /> : null}
       {failure ? <ChargeFailure message={failure.message} unresolved={failure.code === UNRESOLVED_CODE} /> : null}
     </Box>
   );