@12-apps/payments-frontend 3.46.0 → 3.47.0

package/package.json

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

package/src/components/checkout/apple-pay-button.tsx

@@ -48,10 +48,18 @@ export interface ApplePayPaymentRequest {
   total: { label: string; amount: string };
 }
 
+/** The card an authorized payment names, as Apple describes it — e.g. `{ network: 'Visa', displayName: 'Visa 1234' }`. */
+export interface ApplePayPaymentMethod {
+  network?: string;
+  displayName?: string;
+}
+
 /** The session events/methods this button drives. */
 export interface ApplePaySessionLike {
   onvalidatemerchant: ((event: { validationURL: string }) => void) | null;
-  onpaymentauthorized: ((event: { payment: { token: { paymentData: unknown } } }) => void) | null;
+  onpaymentauthorized:
+    | ((event: { payment: { token: { paymentData: unknown; paymentMethod?: ApplePayPaymentMethod } } }) => void)
+    | null;
   oncancel: (() => void) | null;
   begin(): void;
   abort(): void;
@@ -157,6 +165,8 @@ export function startApplePaySession(input: {
   copy: ApplePayCopy;
   validateMerchant: ((validationURL: string) => Promise<unknown>) | undefined;
   onError: (message: string) => void;
+  /** The card the authorized payment names — told before the answer settles (FUT-3755). */
+  onPaymentMethod?: (method: ApplePayPaymentMethod | null) => void;
 }): ApplePaySheet {
   const { Session, copy } = input;
   const session = new Session(APPLE_PAY_VERSION, paymentRequest(input.cents, copy));
@@ -177,7 +187,10 @@ export function startApplePaySession(input: {
       .catch(() => fail(copy.cannotComplete));
   };
   // Apple's `token.paymentData`, serialized VERBATIM — PagBank's `key`.
-  session.onpaymentauthorized = (event) => settle(JSON.stringify(event.payment.token.paymentData));
+  session.onpaymentauthorized = (event) => {
+    input.onPaymentMethod?.(event.payment.token.paymentMethod ?? null);
+    settle(JSON.stringify(event.payment.token.paymentData));
+  };
   // Closing the sheet is a choice, not a failure to report.
   session.oncancel = () => settle(null);
   try {

package/src/components/checkout/google-pay-button.tsx

@@ -36,9 +36,16 @@ export interface GooglePaymentsClient {
   loadPaymentData(request: Record<string, unknown>): Promise<GooglePaymentData>;
 }
 
-/** The one path of the payment data this checkout reads. */
+/** The paths of the payment data this package reads. */
 export interface GooglePaymentData {
-  paymentMethodData: { tokenizationData: { token: string } };
+  paymentMethodData: {
+    tokenizationData: { token: string };
+    /**
+     * The card the buyer picked, as Google describes it: its network (`VISA`)
+     * and its last four digits — what a screen may show of it (FUT-3755).
+     */
+    info?: { cardNetwork?: string; cardDetails?: string };
+  };
 }
 
 /** The `google.payments.api` namespace, as far as this button needs it. */

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/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/pix-banks.tsx

@@ -172,7 +172,23 @@ function Grid({ bank, state, stale }: { bank: CheckoutPixBank; state: PixBankSta
   );
 }
 
-/** The grid, or the bank being opened. */
+/** The one line under the bank being opened, where the checklist was (FUT-3612). */
+function AppHint({ text }: { text: string }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  return (
+    <Text variant="body" size="sm" color="secondary" as="p" style={{ margin: 0 }} data-testid="pix-bank-hint">
+      {text}
+    </Text>
+  );
+}
+
+/** The grid, or the bank being opened and the line that says what to do there. */
 export function PixBanks({ bank, state, stale }: { bank: CheckoutPixBank; state: PixBankState; stale: boolean }): JSX.Element {
-  return state.chosen ? <Opening bank={bank} state={state} chosen={state.chosen} /> : <Grid bank={bank} state={state} stale={stale} />;
+  if (!state.chosen) return <Grid bank={bank} state={state} stale={stale} />;
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+      <Opening bank={bank} state={state} chosen={state.chosen} />
+      {bank.copy.appHint ? <AppHint text={bank.copy.appHint} /> : null}
+    </Box>
+  );
 }

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

@@ -270,6 +270,11 @@ export interface PixBankCopy {
   notOpened: (bank: PixBankName) => string;
   /** "Tentar de novo". */
   retry: string;
+  /**
+   * The one line under the bank being opened, in place of the checklist —
+   * "Abra o app do seu banco e cole em Pix copia e cola." Absent ⇒ no line.
+   */
+  appHint?: string;
   /** The toasts. */
   copied: string;
   copiedPick: string;

package/src/components/platform/HomologacaoEvidenceCard.tsx

@@ -6,8 +6,10 @@ import { useState, type ReactNode } from 'react';
 import type {
   BrowserCardFailure,
   BrowserCardResult,
+  BrowserWalletResult,
   DebitTestData,
   EvidenceSummary,
+  EvidenceWalletsConfig,
   PaymentEnvironment,
   ThreeDSecureSession,
 } from '@12-apps/payments-backend';
@@ -15,9 +17,11 @@ import type {
 import { maskTestCard, PAGBANK_3DS_TEST_CARD, PAGBANK_TEST_CARDS } from '../../card/pagbank-test-cards';
 import { authenticatePagBankDebit, type ThreeDSFailure } from '../../card/three-ds';
 import { encryptPagBankCard } from '../../card/tokenize';
+import type { GooglePayApi } from '../checkout/google-pay-button';
 import { CARD_SX, TAP_SX } from './ConnectEnvironmentCard';
 import type { PlatformHomologacaoCopy } from './copy';
 import { PlatformCopyProvider, usePlatformCopy } from './copy-context';
+import { EvidenceWalletBlock, useEvidenceWallets, type EvidenceWallets } from './HomologacaoEvidenceWallets';
 
 /**
  * The homologação EVIDENCE card (FUT-3696): connect a sandbox test seller,
@@ -26,7 +30,9 @@ import { PlatformCopyProvider, usePlatformCopy } from './copy-context';
  * The one thing this card does itself is the part that has to happen in a
  * browser: encrypting PagBank's official TEST cards with the seller's public
  * key, through the same SDK call the checkout makes, and authenticating the
- * 3DS test card with PagBank's SDK for the debit scenario (FUT-3755). Everything else is the
+ * 3DS test card with PagBank's SDK for the debit scenario (FUT-3755), and
+ * opening Google Pay's and Apple Pay's sheets on the operator's tap for the
+ * wallet scenarios (`HomologacaoEvidenceWallets.tsx`). Everything else is the
  * host's — each callback is a call to its own mounted routes — and what the
  * file says is decided by the server, from what was recorded. This card shows
  * the counts it answered and never infers a result of its own.
@@ -42,6 +48,12 @@ export interface HomologacaoSellerView {
   accountId: string | null;
   /** Why the latest authorization did not complete, as the evidence recorded it. */
   lastConnectProblem?: string | null;
+  /**
+   * What each wallet's sheet needs (FUT-3755) — the package's seller view
+   * carries it. Absent, no wallet button is drawn and both wallet sections
+   * stay pending.
+   */
+  wallets?: EvidenceWalletsConfig;
 }
 
 export interface HomologacaoEvidenceCardProps {
@@ -64,8 +76,19 @@ export interface HomologacaoEvidenceCardProps {
     /** What the debit card is authenticated with — the server's, so the amount matches what it charges. */
     debitTest?: DebitTestData;
   }>;
-  /** Phase 2 — raise the orders with the encrypted cards. */
-  onRun: (runId: string, cards: BrowserCardResult[]) => Promise<void>;
+  /**
+   * Phase 2 — raise the orders with the encrypted cards and, for each wallet,
+   * the token its sheet gave (or the code saying why there is none).
+   */
+  onRun: (runId: string, cards: BrowserCardResult[], wallets: BrowserWalletResult[]) => Promise<void>;
+  /**
+   * The host's Apple Pay merchant validation (FUT-3755): exchange Apple's
+   * `validationURL` for a merchant session, server-side. Absent, the Apple Pay
+   * button is not drawn and its section stays pending.
+   */
+  onValidateApplePayMerchant?: (validationURL: string) => Promise<unknown>;
+  /** Injectable `google.payments.api` for tests and harnesses; omit to load pay.js. */
+  googlePayApi?: GooglePayApi | null;
   /** Build and deliver the file; resolves to the counts it holds. */
   onDownload: () => Promise<EvidenceSummary>;
 }
@@ -206,7 +229,10 @@ function SellerBlock({
 }
 
 /** One run at a time: which phase it is in, what it answered, where it failed. */
-function useEvidenceRun({ onPrepare, onRun, onDownload }: Pick<HomologacaoEvidenceCardProps, 'onPrepare' | 'onRun' | 'onDownload'>) {
+function useEvidenceRun(
+  { onPrepare, onRun, onDownload }: Pick<HomologacaoEvidenceCardProps, 'onPrepare' | 'onRun' | 'onDownload'>,
+  wallets: Pick<EvidenceWallets, 'collect' | 'reset'>,
+) {
   const [phase, setPhase] = useState<Phase>('idle');
   const [summary, setSummary] = useState<EvidenceSummary | null>(null);
   const [failed, setFailed] = useState<ActivePhase | null>(null);
@@ -222,11 +248,14 @@ function useEvidenceRun({ onPrepare, onRun, onDownload }: Pick<HomologacaoEviden
     try {
       if (full) {
         enter('preparing');
+        // The sheets ran before this chain: what they answered, taken once.
+        const walletResults = wallets.collect();
+        wallets.reset();
         const prepared = await onPrepare();
         enter('encrypting');
         const cards = await prepareTestCards(prepared);
         enter('running');
-        await onRun(prepared.runId, cards);
+        await onRun(prepared.runId, cards, walletResults);
       }
       enter('downloading');
       setSummary(await onDownload());
@@ -256,7 +285,12 @@ function ConnectOutcome({ seller, connectOutcome }: Pick<HomologacaoEvidenceCard
 function EvidenceBody(props: HomologacaoEvidenceCardProps): ReactNode {
   const { seller, onConnect } = props;
   const copy = usePlatformCopy().evidence;
-  const { phase, busy, summary, failed, run } = useEvidenceRun(props);
+  const wallets = useEvidenceWallets({
+    config: seller?.connected ? (seller.wallets ?? null) : null,
+    validateApplePayMerchant: props.onValidateApplePayMerchant,
+    googlePayApi: props.googlePayApi,
+  });
+  const { phase, busy, summary, failed, run } = useEvidenceRun(props, wallets);
   return (
     <Stack spacing={1.5} data-testid="homologacao-evidence-card" sx={CARD_SX}>
       <Typography variant="body2" fontWeight={600}>
@@ -267,6 +301,7 @@ function EvidenceBody(props: HomologacaoEvidenceCardProps): ReactNode {
       </Typography>
       <ConnectOutcome seller={seller} connectOutcome={props.connectOutcome} />
       <SellerBlock seller={seller} onConnect={onConnect} />
+      <EvidenceWalletBlock wallets={wallets} />
       <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: { sm: 'center' } }}>
         <Button
           variant={seller?.connected ? 'contained' : 'outlined'}

package/src/components/platform/HomologacaoEvidenceWallets.tsx

@@ -0,0 +1,296 @@
+'use client';
+
+import { Box, Stack, Typography } from '@mui/material';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+
+import type {
+  BrowserWalletFailure,
+  BrowserWalletResult,
+  EvidenceWallet,
+  EvidenceWalletsConfig,
+} from '@12-apps/payments-backend';
+
+import {
+  applePaySessionClass,
+  applePaySupported,
+  startApplePaySession,
+  type ApplePayPaymentMethod,
+  type ApplePaySessionClass,
+} from '../checkout/apple-pay-button';
+import {
+  paymentDataRequest,
+  sheetDismissed,
+  useGooglePayClient,
+  type GooglePayApi,
+  type GooglePaymentData,
+  type GooglePaymentsClient,
+} from '../checkout/google-pay-button';
+import type { HomologacaoEvidenceWalletsCopy } from './copy';
+import { usePlatformCopy } from './copy-context';
+
+/**
+ * The wallet step of the evidence card (FUT-3755): Google Pay's and Apple
+ * Pay's sheets, opened BEFORE "generate" because each opens only inside the
+ * operator's own tap — the browser refuses a sheet started from the async
+ * chain "generate" runs. A press keeps the wallet's token in state, the screen
+ * says the wallet is ready (network and last four, never the token), and
+ * "generate" hands the results to phase 2 with the cards.
+ *
+ * The sheets are the checkout's own: the same `PaymentsClient` probe and
+ * payment request (`google-pay-button.tsx`), the same `ApplePaySession`
+ * (`apple-pay-button.tsx`). Google Pay is ALWAYS `TEST` here — the evidence is
+ * sandbox-only — and mints against the test seller's PagBank account, as the
+ * host's seller view says; Apple Pay is offered only where the device has an
+ * `ApplePaySession`, the host has an Apple Pay identity, and the host validates
+ * the merchant.
+ */
+
+/** The wallets, in the order the evidence file prints them. */
+const WALLETS: readonly EvidenceWallet[] = ['GOOGLE_PAY', 'APPLE_PAY'];
+
+type Results = Partial<Record<EvidenceWallet, BrowserWalletResult>>;
+
+interface EvidenceWalletsInput {
+  /** What each sheet needs, from the host's seller view; null when the host gave none. */
+  config: EvidenceWalletsConfig | null;
+  /** The host's Apple Pay merchant validation (server-side); absent, Apple Pay is not offered. */
+  validateApplePayMerchant?: (validationURL: string) => Promise<unknown>;
+  /** Injectable `google.payments.api` for tests; omit to load pay.js. */
+  googlePayApi?: GooglePayApi | null;
+}
+
+const failed = (type: EvidenceWallet, failure: BrowserWalletFailure): BrowserWalletResult => ({
+  type,
+  token: null,
+  brand: null,
+  last4: null,
+  failure,
+});
+
+/** Four trailing digits, or null — the only part of the number a wallet shows. */
+function lastFour(text: string | undefined): string | null {
+  return /(\d{4})\s*$/.exec(text ?? '')?.[1] ?? null;
+}
+
+function googleResult(data: GooglePaymentData): BrowserWalletResult {
+  const info = data.paymentMethodData.info;
+  return {
+    type: 'GOOGLE_PAY',
+    token: data.paymentMethodData.tokenizationData.token,
+    brand: info?.cardNetwork ?? null,
+    last4: lastFour(info?.cardDetails),
+  };
+}
+
+function appleResult(token: string, method: ApplePayPaymentMethod | null): BrowserWalletResult {
+  return { type: 'APPLE_PAY', token, brand: method?.network ?? null, last4: lastFour(method?.displayName) };
+}
+
+/** Open Google's sheet — synchronously, inside the tap — and keep what it answers. */
+function runGooglePay(
+  client: GooglePaymentsClient,
+  google: NonNullable<EvidenceWalletsConfig['googlePay']>,
+  cents: number,
+  record: (result: BrowserWalletResult) => void,
+): void {
+  let loading: Promise<GooglePaymentData>;
+  try {
+    loading = client.loadPaymentData(paymentDataRequest(google, { totalCents: cents }));
+  } catch {
+    record(failed('GOOGLE_PAY', 'TOKEN_ERROR'));
+    return;
+  }
+  loading.then(
+    (data) => record(googleResult(data)),
+    (error: unknown) => record(failed('GOOGLE_PAY', sheetDismissed(error) ? 'DISMISSED' : 'TOKEN_ERROR')),
+  );
+}
+
+/**
+ * Start Apple's session — synchronously, inside the tap — and keep its token.
+ * The order is raised later, at "generate", so the sheet is closed as soon as
+ * it authorizes: Apple's sheet would otherwise time out waiting for it.
+ */
+function runApplePay(
+  Session: ApplePaySessionClass,
+  cents: number,
+  input: { copy: HomologacaoEvidenceWalletsCopy; validate: (validationURL: string) => Promise<unknown> },
+  record: (result: BrowserWalletResult) => void,
+): void {
+  const seen: { failure: BrowserWalletFailure | null; method: ApplePayPaymentMethod | null } = { failure: null, method: null };
+  const { copy } = input;
+  let sheet: ReturnType<typeof startApplePaySession>;
+  try {
+    sheet = startApplePaySession({
+      Session,
+      cents,
+      copy: {
+        orderTotal: copy.applePaySheetTotal,
+        cannotStart: copy.applePayCannotStart,
+        cannotComplete: copy.applePayCannotComplete,
+        payAction: copy.applePayButton,
+      },
+      validateMerchant: (url) =>
+        input.validate(url).catch((error: unknown) => {
+          seen.failure = 'MERCHANT_VALIDATION_FAILED';
+          throw error;
+        }),
+      onError: () => {
+        seen.failure ??= 'TOKEN_ERROR';
+      },
+      onPaymentMethod: (method) => {
+        seen.method = method;
+      },
+    });
+  } catch {
+    record(failed('APPLE_PAY', 'TOKEN_ERROR'));
+    return;
+  }
+  void sheet.answer.then((key) => {
+    if (key === null) return record(failed('APPLE_PAY', seen.failure ?? 'DISMISSED'));
+    sheet.complete(true);
+    record(appleResult(key, seen.method));
+  });
+}
+
+/** Apple Pay, when this device can show the sheet, the host has an identity, and validates the merchant. */
+function appleOffer(input: EvidenceWalletsInput): { Session: ApplePaySessionClass; validate: (url: string) => Promise<unknown> } | null {
+  const validate = input.validateApplePayMerchant;
+  if (!input.config?.applePay.configured || !validate || !applePaySupported()) return null;
+  const Session = applePaySessionClass();
+  return Session ? { Session, validate } : null;
+}
+
+/** Why a wallet with no press cannot run here — or undefined when it simply was not pressed. */
+function notOffered(wallet: EvidenceWallet, input: EvidenceWalletsInput, googleReady: boolean): BrowserWalletResult | undefined {
+  if (wallet === 'GOOGLE_PAY') return input.config?.googlePay && !googleReady ? failed(wallet, 'NOT_AVAILABLE') : undefined;
+  if (!input.config?.applePay.configured) return failed(wallet, 'NOT_CONFIGURED');
+  // An identity with no host validation: the sheet could never be validated.
+  if (!input.validateApplePayMerchant) return failed(wallet, 'MERCHANT_VALIDATION_FAILED');
+  return applePaySupported() ? undefined : failed(wallet, 'NOT_AVAILABLE');
+}
+
+/** Why Apple Pay has no button on a screen whose host carries wallets — null when it has one, or no wallets at all. */
+function appleAbsence(input: EvidenceWalletsInput, offered: boolean): BrowserWalletFailure | null {
+  if (offered || !input.config) return null;
+  return notOffered('APPLE_PAY', input, false)?.failure ?? null;
+}
+
+/** The wallet step's state: the sheets' answers, the presses that open them, and what phase 2 gets. */
+export function useEvidenceWallets(input: EvidenceWalletsInput) {
+  const copy = usePlatformCopy().evidence.wallets;
+  const [results, setResults] = useState<Results>({});
+  const google = input.config?.googlePay ?? null;
+  // `null` tells the client hook not to load pay.js at all.
+  const client = useGooglePayClient(google ? input.googlePayApi : null, 'TEST');
+  const apple = appleOffer(input);
+  const cents = input.config?.amountCents ?? 0;
+  const record = (result: BrowserWalletResult): void => setResults((previous) => ({ ...previous, [result.type]: result }));
+  return {
+    results,
+    google: client && google ? { client, press: () => runGooglePay(client, google, cents, record) } : null,
+    apple: apple ? { press: () => runApplePay(apple.Session, cents, { copy, validate: apple.validate }, record) } : null,
+    /** Why Apple Pay has no button here, or null when it has one. */
+    appleAbsent: appleAbsence(input, apple !== null),
+    /** What phase 2 gets: each wallet's answer, or why it could not be offered here. */
+    collect: (): BrowserWalletResult[] =>
+      WALLETS.flatMap((wallet) => {
+        const result = results[wallet] ?? notOffered(wallet, input, client !== null);
+        return result ? [result] : [];
+      }),
+    /** A token pays once: a run that used them clears them. */
+    reset: () => setResults({}),
+  };
+}
+
+export type EvidenceWallets = ReturnType<typeof useEvidenceWallets>;
+
+/** Google's own button (its brand rule), drawn by `createButton`; the press opens the sheet in the tap. */
+function GooglePayMount({ client, onPress, locale }: { client: GooglePaymentsClient; onPress: () => void; locale: string }): ReactNode {
+  const mount = useRef<HTMLDivElement | null>(null);
+  const latest = useRef(onPress);
+  latest.current = onPress;
+  useEffect(() => {
+    const element = mount.current;
+    if (!element) return undefined;
+    element.replaceChildren(client.createButton({ onClick: () => latest.current(), buttonSizeMode: 'fill', buttonLocale: locale }));
+    return () => element.replaceChildren();
+  }, [client, locale]);
+  return <Box ref={mount} data-testid="evidence-google-pay" sx={{ minHeight: 40, width: 240, '& > *': { width: '100%' } }} />;
+}
+
+/** Apple's button: Safari draws it (`-apple-pay-button`); elsewhere the name on a black pill. */
+function ApplePayPress({ label, onPress }: { label: string; onPress: () => void }): ReactNode {
+  return (
+    <Box
+      component="button"
+      type="button"
+      aria-label={label}
+      onClick={onPress}
+      data-testid="evidence-apple-pay"
+      sx={{
+        WebkitAppearance: '-apple-pay-button',
+        height: 40,
+        width: 240,
+        border: 0,
+        borderRadius: 1,
+        cursor: 'pointer',
+        bgcolor: 'common.black',
+        color: 'common.white',
+        '@supports (-webkit-appearance: -apple-pay-button)': { '& > span': { display: 'none' } },
+      }}
+    >
+      <span aria-hidden>{label}</span>
+    </Box>
+  );
+}
+
+/** One wallet's line under the buttons: ready with its card, or that it answered no token. */
+function WalletLine({ result, copy }: { result: BrowserWalletResult; copy: HomologacaoEvidenceWalletsCopy }): ReactNode {
+  const name = copy.names[result.type];
+  const card = [result.brand, result.last4 ? `•••• ${result.last4}` : null].filter(Boolean).join(' ');
+  return (
+    <Typography
+      variant="body2"
+      role="status"
+      color={result.token ? 'text.primary' : 'error.main'}
+      data-testid={`evidence-wallet-${result.token ? 'ready' : 'failed'}-${result.type}`}
+    >
+      {result.token ? copy.ready(name, card) : copy.failed(name)}
+    </Typography>
+  );
+}
+
+/** The wallet step: nothing at all when the host's seller view carries no wallets. */
+export function EvidenceWalletBlock({ wallets }: { wallets: EvidenceWallets }): ReactNode {
+  const copy = usePlatformCopy().evidence.wallets;
+  if (!wallets.google && !wallets.apple && !wallets.appleAbsent) return null;
+  const lines = WALLETS.flatMap((wallet) => {
+    const result = wallets.results[wallet];
+    return result ? [result] : [];
+  });
+  return (
+    <Stack spacing={1} data-testid="evidence-wallets">
+      <Typography variant="body2" fontWeight={600}>
+        {copy.heading}
+      </Typography>
+      <Typography variant="caption" component="p" color="text.secondary">
+        {copy.hint}
+      </Typography>
+      <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
+        {wallets.google ? (
+          <GooglePayMount client={wallets.google.client} onPress={wallets.google.press} locale={copy.googlePayButtonLocale} />
+        ) : null}
+        {wallets.apple ? <ApplePayPress label={copy.applePayButton} onPress={wallets.apple.press} /> : null}
+      </Stack>
+      {wallets.appleAbsent === 'NOT_CONFIGURED' || wallets.appleAbsent === 'NOT_AVAILABLE' ? (
+        <Typography variant="caption" component="p" color="text.secondary" data-testid="evidence-apple-pay-absent">
+          {copy.applePayAbsent[wallets.appleAbsent]}
+        </Typography>
+      ) : null}
+      {lines.map((result) => (
+        <WalletLine key={result.type} result={result} copy={copy} />
+      ))}
+    </Stack>
+  );
+}

package/src/components/platform/copy.ts

@@ -152,6 +152,33 @@ export interface HomologacaoEvidenceCardCopy {
   incomplete: string;
   /** Which phase failed — and that the latest recorded file can still be downloaded. */
   generateFailed: (phase: 'preparing' | 'encrypting' | 'running' | 'downloading') => string;
+  /** The wallet step before generating (FUT-3755): each sheet opens on the operator's tap. */
+  wallets: HomologacaoEvidenceWalletsCopy;
+}
+
+/** The Google Pay / Apple Pay step of the evidence card (FUT-3755). */
+export interface HomologacaoEvidenceWalletsCopy {
+  heading: string;
+  /** Each wallet's name, as the ready and failed lines say it. */
+  names: { GOOGLE_PAY: string; APPLE_PAY: string };
+  /** Why the buttons come before "generate", and that skipping them leaves the sections pending. */
+  hint: string;
+  /** The language Google draws its own button's label in. */
+  googlePayButtonLocale: string;
+  /** The Apple Pay button's accessible name. */
+  applePayButton: string;
+  /** The line Apple's sheet shows above the test amount. */
+  applePaySheetTotal: string;
+  /** Apple Pay could not start (no merchant validation). */
+  applePayCannotStart: string;
+  /** Apple Pay started and failed. */
+  applePayCannotComplete: string;
+  /** Why Apple Pay has no button here: the platform has no Apple Pay identity yet, or this browser has no sheet. */
+  applePayAbsent: { NOT_CONFIGURED: string; NOT_AVAILABLE: string };
+  /** A wallet holds its token: `card` is the network and last four the wallet showed — never the token. */
+  ready: (wallet: string, card: string) => string;
+  /** The sheet answered no token; pressing again retries. */
+  failed: (wallet: string) => string;
 }
 
 /** The whole platform surface, in one object a host passes at the mount. */

package/src/components/platform/en-US.ts

@@ -128,7 +128,7 @@ export const EN_US_PLATFORM_HOMOLOGACAO_COPY: PlatformHomologacaoCopy = {
     phases: {
       preparing: 'Consulting the application, renewing the token and minting the public key and the 3DS session…',
       encrypting: 'Encrypting the test cards and authenticating the debit card (3DS) in the browser…',
-      running: 'Creating the Pix, credit and debit orders in the sandbox — this can take a few minutes…',
+      running: 'Creating the Pix, credit, debit and wallet orders in the sandbox — this can take a few minutes…',
       downloading: 'Building the file…',
     },
     summary: ({ executed, failed, pending }) =>
@@ -144,5 +144,23 @@ export const EN_US_PLATFORM_HOMOLOGACAO_COPY: PlatformHomologacaoCopy = {
           downloading: 'Building the file failed.',
         }[phase]
       } Try again; "Download the latest recorded" still returns what was recorded.`,
+    wallets: {
+      heading: 'Digital wallets (before generating)',
+      names: { GOOGLE_PAY: 'Google Pay', APPLE_PAY: 'Apple Pay' },
+      hint:
+        'Google Pay and Apple Pay open their own sheet, and only on your tap. Tap each one before generating the file; ' +
+        "without it, the wallets' sections stay pending. Test only: nothing is charged.",
+      googlePayButtonLocale: 'en',
+      applePayButton: 'Pay with Apple Pay',
+      applePaySheetTotal: 'Homologation test',
+      applePayCannotStart: 'Apple Pay is not configured.',
+      applePayCannotComplete: 'Apple Pay could not be completed.',
+      applePayAbsent: {
+        NOT_CONFIGURED: 'Apple Pay: waiting for the Apple Developer account. Its section stays pending.',
+        NOT_AVAILABLE: 'Apple Pay: open this screen in Safari on an iPhone or Mac to test it.',
+      },
+      ready: (wallet, card) => `${wallet} ready${card ? ` — ${card}` : ''}. It will be used when the file is generated.`,
+      failed: (wallet) => `${wallet} returned no token. Tap again to retry.`,
+    },
   },
 };

package/src/components/platform/pt-BR.ts

@@ -109,7 +109,7 @@ export const PT_BR_PLATFORM_HOMOLOGACAO_COPY: PlatformHomologacaoCopy = {
     phases: {
       preparing: 'Consultando a aplicação, renovando o token e gerando a chave pública e a sessão 3DS…',
       encrypting: 'Criptografando os cartões de teste e autenticando o cartão de débito (3DS) no navegador…',
-      running: 'Criando os pedidos Pix, crédito e débito no sandbox — pode levar alguns minutos…',
+      running: 'Criando os pedidos Pix, crédito, débito e carteiras no sandbox — pode levar alguns minutos…',
       downloading: 'Montando o arquivo…',
     },
     summary: ({ executed, failed, pending }) =>
@@ -128,5 +128,23 @@ export const PT_BR_PLATFORM_HOMOLOGACAO_COPY: PlatformHomologacaoCopy = {
           downloading: 'Falhou ao montar o arquivo.',
         }[phase]
       } Tente de novo; "Baixar o último registrado" ainda traz o que já foi registrado.`,
+    wallets: {
+      heading: 'Carteiras digitais (antes de gerar)',
+      names: { GOOGLE_PAY: 'Google Pay', APPLE_PAY: 'Apple Pay' },
+      hint:
+        'O Google Pay e o Apple Pay abrem a própria folha e só com o seu toque. Toque em cada um antes de gerar o arquivo; ' +
+        'sem isso, as seções das carteiras ficam pendentes. Somente teste: nada é cobrado.',
+      googlePayButtonLocale: 'pt',
+      applePayButton: 'Pagar com Apple Pay',
+      applePaySheetTotal: 'Teste de homologação',
+      applePayCannotStart: 'O Apple Pay não está configurado.',
+      applePayCannotComplete: 'Não foi possível concluir o Apple Pay.',
+      applePayAbsent: {
+        NOT_CONFIGURED: 'Apple Pay: aguardando a conta Apple Developer. A seção fica pendente.',
+        NOT_AVAILABLE: 'Apple Pay: abra esta tela no Safari de um iPhone ou Mac para testar.',
+      },
+      ready: (wallet, card) => `${wallet} pronto${card ? ` — ${card}` : ''}. Será usado ao gerar o arquivo.`,
+      failed: (wallet) => `O ${wallet} não devolveu o token. Toque de novo para tentar.`,
+    },
   },
 };