@12-apps/payments-frontend 3.9.0 → 3.11.0

package/src/components/checkout/screens-copy.ts

@@ -0,0 +1,201 @@
+/**
+ * Every sentence the buyer's checkout SCREENS render (FUT-760).
+ *
+ * The step wrappers already took theirs through `CheckoutViewCopy`; this is
+ * what sits inside them — the method tiles, the PIX and card panes, the wallet
+ * buttons, the hosted handover, and the refusals any of them can produce.
+ *
+ * Required, with no defaults. The split is the one the whole port draws: WHICH
+ * situation the buyer is in — a charge still settling, one taking longer than
+ * it should, a wallet this store cannot start, a provider page they are about
+ * to be sent to — is knowledge of the payment lifecycle, and it stays in the
+ * package. The words are the host's.
+ *
+ * Two members are LOCALES rather than sentences (`pix.expiryLocale`,
+ * `wallet.googlePay.buttonLocale`). They are here for the same reason: both
+ * were hard-coded to Brazilian Portuguese, and both decide what a buyer reads
+ * — one formats the PIX expiry clock, the other is the language Google draws
+ * its own button in. A host that translates every string below and still ships
+ * `"pt"` to Google has a checkout in two languages.
+ */
+
+/** The method tiles, and what each one promises. */
+export interface MethodPickerCopy {
+  /** The group's heading, and its `aria-label` — one string, said once. */
+  groupLabel: string;
+  /**
+   * What each method is CALLED. "PIX" is a Brazilian instrument and keeps its
+   * name everywhere, the way "Visa" does; "Cartão" is just the word for card,
+   * and was the tile's label — so both are stated rather than one assumed.
+   */
+  pixLabel: string;
+  cardLabel: string;
+  /** What each method is like to use — shown under its name. */
+  pixDescription: string;
+  cardDescription: string;
+  /** This store's providers cannot take that method. */
+  unavailableHere: string;
+}
+
+/**
+ * What a charge in flight says, shared by the PIX, card and wallet panes.
+ *
+ * One slice rather than three, because these ARE the same four states — and
+ * three copies of them is how a product ends up telling a buyer two different
+ * things about one situation depending on which button they pressed.
+ */
+export interface SettlingCopy {
+  /** The provider answered, and the answer was not a payment. */
+  cannotConfirm: string;
+  /** Still open past the point where a buyer starts to worry. */
+  takingLonger: string;
+  /**
+   * The one sentence in here that prevents money moving twice: a buyer who
+   * pays again because the screen went quiet has been charged twice, and only
+   * this line stands between them and that.
+   */
+  takingLongerHelp: string;
+  /** The charge is on its way to the provider. */
+  processing: string;
+  /** It arrived, and settlement is being confirmed. */
+  confirming: string;
+  /** It came back refused. */
+  cannotPay: string;
+}
+
+/** The PIX pane: the QR, the copyable code, and the wait. */
+export interface PixPaneCopy {
+  heading: string;
+  /** What to do with the QR, carrying the order total the buyer is paying. */
+  instructions(totalLabel: string): string;
+  /** The QR image's alternative text — the only thing a screen reader gets. */
+  qrAlt: string;
+  copyAction: string;
+  /** The same button for the two seconds after a successful copy. */
+  copiedAction: string;
+  /**
+   * How long the code lasts. Takes the already-formatted clock time, and
+   * {@link expiryLocale} is what formatted it.
+   */
+  validUntil(time: string): string;
+  /**
+   * The BCP-47 tag the expiry clock is formatted in — `'pt-BR'` here, and a
+   * hard-coded one before this port. Beside the sentence it feeds rather than
+   * in a config elsewhere, because they are one decision.
+   */
+  expiryLocale: string;
+  /** The live footer while nothing has been paid yet. */
+  awaiting: string;
+  /** The order came back with no PIX charge on it — nothing to show. */
+  chargeMissing: string;
+}
+
+/** The card pane's own heading. Everything else in it is {@link SettlingCopy}. */
+export interface CardPaneCopy {
+  heading: string;
+}
+
+/** Who is paying, as the checkout has understood it. */
+export interface PayerSummaryCopy {
+  taxId(formatted: string): string;
+  /** The store already holds this CPF — nothing to re-enter. */
+  taxIdAlreadyKnown: string;
+  payingAs(name: string): string;
+  payingWithSavedDetails: string;
+  /** Reopen the buyer-details step to pay as somebody else. */
+  changeAction: string;
+}
+
+/** The refusal panel, and what a buyer can do about it. */
+export interface PaymentErrorCopy {
+  confirming: string;
+  cannotContinue: string;
+  /** Only offered for a refusal that is SAFE to retry — never an unresolved one. */
+  retryAction: string;
+  emailLabel: string;
+  /** Why the store's own address will not do. */
+  emailMustDifferHint: string;
+  useEmailAction: string;
+}
+
+/** The two wallet buttons — what they say when they cannot run. */
+export interface WalletCopy {
+  applePay: {
+    /** The line item Apple's own sheet shows above the amount. */
+    orderTotal: string;
+    /** This store cannot offer Apple Pay at all. */
+    cannotStart: string;
+    /** It started and failed. */
+    cannotComplete: string;
+    payAction: string;
+  };
+  googlePay: {
+    cannotComplete: string;
+    /**
+     * The language Google draws its button's own label in. Google owns those
+     * pixels, so this is the only say a host has over them.
+     */
+    buttonLocale: string;
+  };
+  /** The divider under the wallet buttons, pointing at the form below. */
+  orPayWithCard: string;
+}
+
+/** The interstitial before a buyer leaves for a provider's own page. */
+export interface HostedHandoverCopy {
+  /**
+   * Where they are going. Named when the adapter says who it is, generic
+   * otherwise — "a página de pagamento do provedor" is the same sentence with
+   * the one useful word removed.
+   */
+  destinationNamed(displayName: string): string;
+  destinationGeneric: string;
+  /** The methods the hosted page will offer, when we know them. */
+  methodsChoice(methods: string): string;
+  /** Which methods those are — read from what the provider actually declared. */
+  pixAndCard: string;
+  pixOnly: string;
+  cardOnly: string;
+  /** The whole sentence, composed from the two above. */
+  handoff(destination: string, choice: string): string;
+  /** What happens after they pay over there. */
+  afterwards: string;
+  startAction: string;
+  preparing: string;
+}
+
+/** What the browser says when the wire itself failed. */
+export interface CheckoutTransportCopy {
+  /** A refusal whose envelope carried no sentence of its own. */
+  failed: string;
+  /** A 2xx that was not the shape the route promises. */
+  invalidResponse: string;
+  /** The request never got out — the one of the three a buyer really meets. */
+  offline: string;
+}
+
+/** The buyer-details validators, field by field. */
+export interface CheckoutValidationCopy {
+  taxIdInvalid: string;
+  nameRequired: string;
+  emailInvalid: string;
+  phoneInvalid: string;
+  /** Any other declared field the store demands and the buyer left empty. */
+  required: string;
+}
+
+/** Everything above, in the shape the checkout context carries. */
+export interface CheckoutScreensCopy {
+  method: MethodPickerCopy;
+  settling: SettlingCopy;
+  pix: PixPaneCopy;
+  card: CardPaneCopy;
+  payer: PayerSummaryCopy;
+  error: PaymentErrorCopy;
+  wallet: WalletCopy;
+  hosted: HostedHandoverCopy;
+  transport: CheckoutTransportCopy;
+  validation: CheckoutValidationCopy;
+  /** The step wrapper's own wait, while the charge is being raised. */
+  generatingPayment: string;
+}

package/src/components/checkout/screens-pt-BR.ts

@@ -0,0 +1,101 @@
+import type { CheckoutScreensCopy } from './screens-copy';
+
+/**
+ * The pt-BR pack for the buyer's checkout screens — a NAMED constant a host
+ * passes by hand, never a default.
+ *
+ * The filename is what exempts this file from the copy-portability gate:
+ * Portuguese may ship, it may not be silent. Every sentence is VERBATIM what
+ * the screens used to render, so a host adopting it sees no change — what
+ * changes is that the words are chosen in a diff.
+ */
+export const PT_BR_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
+  method: {
+    groupLabel: 'Forma de pagamento',
+    pixLabel: 'PIX',
+    cardLabel: 'Cartão',
+    pixDescription: 'Aprovação imediata',
+    cardDescription: 'Crédito à vista',
+    unavailableHere: 'Indisponível nesta loja',
+  },
+  settling: {
+    cannotConfirm: 'Não foi possível confirmar o pagamento',
+    takingLonger: 'O pagamento está demorando mais que o esperado',
+    takingLongerHelp:
+      'Você pode aguardar ou verificar seu pedido em instantes — não realize um novo pagamento.',
+    processing: 'Processando pagamento…',
+    confirming: 'Estamos confirmando seu pagamento',
+    cannotPay: 'Não foi possível pagar',
+  },
+  pix: {
+    heading: 'Pague com PIX',
+    instructions: (totalLabel) =>
+      `Escaneie o QR code no app do seu banco ou copie o código. Total ${totalLabel}.`,
+    qrAlt: 'QR Code PIX para pagamento',
+    copyAction: 'Copiar',
+    copiedAction: 'Copiado!',
+    validUntil: (time) => `Válido até ${time}. A confirmação é automática.`,
+    expiryLocale: 'pt-BR',
+    awaiting: 'Aguardando pagamento…',
+    chargeMissing: 'Não foi possível gerar o código PIX.',
+  },
+  card: {
+    heading: 'Pague com cartão',
+  },
+  payer: {
+    taxId: (formatted) => `CPF ${formatted}`,
+    taxIdAlreadyKnown: 'CPF já cadastrado',
+    payingAs: (name) => `Pagando como ${name}`,
+    payingWithSavedDetails: 'Pagando com os seus dados salvos',
+    changeAction: 'Alterar',
+  },
+  error: {
+    confirming: 'Estamos confirmando seu pagamento',
+    cannotContinue: 'Não foi possível continuar',
+    retryAction: 'Tentar novamente',
+    emailLabel: 'E-mail para o pagamento',
+    emailMustDifferHint: 'use um e-mail diferente do da loja',
+    useEmailAction: 'Usar este e-mail e continuar',
+  },
+  wallet: {
+    applePay: {
+      orderTotal: 'Total do pedido',
+      cannotStart: 'Não foi possível iniciar o Apple Pay nesta loja. Pague com cartão.',
+      cannotComplete:
+        'Não foi possível iniciar o Apple Pay. Tente novamente ou pague com cartão.',
+      payAction: 'Pagar com Apple Pay',
+    },
+    googlePay: {
+      cannotComplete:
+        'Não foi possível concluir o pagamento com o Google Pay. Tente novamente ou pague com cartão.',
+      buttonLocale: 'pt',
+    },
+    orPayWithCard: 'ou pague com cartão',
+  },
+  hosted: {
+    destinationNamed: (displayName) => `à página de pagamento da ${displayName}`,
+    destinationGeneric: 'à página de pagamento segura do provedor',
+    methodsChoice: (methods) => `, onde você escolhe pagar com ${methods}`,
+    pixAndCard: 'PIX ou cartão',
+    pixOnly: 'PIX',
+    cardOnly: 'cartão',
+    handoff: (destination, choice) => `Você será levado ${destination}${choice}.`,
+    afterwards:
+      'Assim que o pagamento for concluído, você volta para cá e nós confirmamos o pedido.',
+    startAction: 'Seguir para o pagamento',
+    preparing: 'Preparando o pagamento',
+  },
+  transport: {
+    failed: 'Não foi possível concluir a operação. Tente novamente.',
+    invalidResponse: 'Resposta inválida do servidor.',
+    offline: 'Não foi possível conectar. Verifique sua conexão e tente novamente.',
+  },
+  validation: {
+    taxIdInvalid: 'CPF inválido.',
+    nameRequired: 'Informe seu nome.',
+    emailInvalid: 'E-mail inválido.',
+    phoneInvalid: 'Telefone inválido.',
+    required: 'Campo obrigatório.',
+  },
+  generatingPayment: 'Gerando pagamento…',
+};

package/src/components/checkout/transport.ts

@@ -20,6 +20,8 @@ import type { BuyerVaultSession, VaultedCardDisplay } from "@12-apps/payments-ba
 import type { SavedCard } from "../../card";
 import { err, ok, type Result } from "../../result";
 
+import type { CheckoutTransportCopy } from "./screens-copy";
+
 import type {
   ChargeCardInput,
   ChargeOutcome,
@@ -59,6 +61,16 @@ export const DEFAULT_CHECKOUT_BASE_URL = "/api/checkout";
 
 /** Where the `createPaymentFlowsBE` mount lives, and how to reach it. */
 export interface CheckoutTransport {
+  /**
+   * What the buyer reads when the WIRE failed and the server sent no sentence
+   * of its own (FUT-760) — required, and with no default.
+   *
+   * Three sentences, and only one of them is common: `offline`, which is what
+   * a buyer on a dropped connection sees. That is exactly why it may not be
+   * this package's Portuguese — it is the failure most likely to be the first
+   * thing an adopter's shopper ever reads from us.
+   */
+  copy: CheckoutTransportCopy;
   /**
    * Prefix for `/config`, `/status`, `/charge`, `/cards`, `/cards/begin`,
    * `/cards/complete`, `/refresh-key`.
@@ -73,6 +85,17 @@ export interface CheckoutTransport {
   headers?: () => HeadersInit | Promise<HeadersInit>;
 }
 
+/**
+ * A transport whose WORDS some surrounding config already answers.
+ *
+ * `createPaymentFlows` takes one: its `copy` covers the whole checkout, so
+ * asking a host to repeat the three transport sentences beside `fetchImpl`
+ * would be the same question twice. Naming `copy` here still wins, for a mount
+ * that talks to a different surface in a different voice.
+ */
+export type CheckoutTransportBinding = Omit<CheckoutTransport, "copy"> &
+  Partial<Pick<CheckoutTransport, "copy">>;
+
 /** The eight calls the buyer checkout makes, pre-bound to a {@link CheckoutTransport}. */
 export interface CheckoutClient {
   getConfig(tenantSlug: string): Promise<Result<CheckoutProviderConfig>>;
@@ -115,8 +138,8 @@ interface ApiEnvelope<T> {
  * The message is what the buyer reads; the code is what a surface uses to
  * decide how to PRESENT it, which a message cannot be parsed for.
  */
-function refused<T>(json: ApiEnvelope<T> | null): Result<T> {
-  return err(json?.error ?? "Não foi possível concluir a operação. Tente novamente.", json?.code);
+function refused<T>(json: ApiEnvelope<T> | null, copy: CheckoutTransportCopy): Result<T> {
+  return err(json?.error ?? copy.failed, json?.code);
 }
 
 /**
@@ -200,11 +223,14 @@ function completeVaultBody(input: CompleteVaultInput): string {
 /**
  * The checkout calls, bound to one transport.
  *
- * Passing no transport reproduces exactly what the free functions in
- * `client.ts` have always done: `/api/checkout/**` on the ambient `fetch`.
+ * `baseUrl` and `fetchImpl` still default to what the free functions in
+ * `client.ts` have always done — `/api/checkout/**` on the ambient `fetch`.
+ * `copy` does NOT default, because there is no language this package could
+ * pick that would be right for the next host (FUT-760).
  */
-export function createCheckoutClient(transport: CheckoutTransport = {}): CheckoutClient {
+export function createCheckoutClient(transport: CheckoutTransport): CheckoutClient {
   const baseUrl = transport.baseUrl ?? DEFAULT_CHECKOUT_BASE_URL;
+  const copy = transport.copy;
 
   /** Call a checkout route and normalize the response into a {@link Result}. */
   async function call<T>(route: string, init?: RequestInit): Promise<Result<T>> {
@@ -218,13 +244,13 @@ export function createCheckoutClient(transport: CheckoutTransport = {}): Checkou
         headers: { "Content-Type": "application/json", ...extra, ...init?.headers },
       });
       const json = (await res.json().catch(() => null)) as ApiEnvelope<T> | null;
-      if (!res.ok) return refused(json);
+      if (!res.ok) return refused(json, copy);
       if (!json || json.data === undefined) {
-        return err(json?.error ?? "Resposta inválida do servidor.");
+        return err(json?.error ?? copy.invalidResponse);
       }
       return ok(json.data);
     } catch {
-      return err("Não foi possível conectar. Verifique sua conexão e tente novamente.");
+      return err(copy.offline);
     }
   }
 

package/src/components/checkout/use-card-checkout.ts

@@ -28,6 +28,8 @@ import { useCheckoutNavigate, type CheckoutNavigate } from "./navigate-context";
 import type { CardChainLink } from "./method-capability";
 import type { BuyerInfo, CheckoutOrder, OrderStatus } from "./types";
 import { usePaymentPolling } from "./use-payment-polling";
+import type { CardCopy } from "../../card/copy";
+import { useCheckoutCopy } from "./copy-context";
 
 const EMPTY_CARD: CardDetails = { number: "", holder: "", expiry: "", cvv: "" };
 
@@ -190,6 +192,8 @@ async function resolveInstruments(input: {
   providerChain: readonly CardChainLink[];
   /** The bound key-refresh call (FUT-741) — the self-heal must hit OUR mount. */
   refreshKey: RefreshBrowserKey;
+  /** The words a failed mint reports with — the host's (FUT-760). */
+  copy: CardCopy;
 }): Promise<Result<CardInstruments>> {
   const { form } = input;
   if (!form.usingNewCard) return ok({ token: form.selection });
@@ -200,7 +204,7 @@ async function resolveInstruments(input: {
     input.onKeyRefreshed,
     form.saveCard,
     input.providerChain,
-    undefined,
+    input.copy,
     input.refreshKey,
   );
 }
@@ -228,6 +232,7 @@ function useCardSubmit(
   const { publicKey, setPublicKey } = useCardPublicKey(order.orderId, providerConfig);
   const client = useCheckoutClientApi();
   const navigate = useCheckoutNavigate();
+  const cardCopy = useCheckoutCopy().card;
 
   const { status, error: pollError, timedOut: pollTimedOut } = usePaymentPolling(order.orderId, {
     enabled: submitted,
@@ -252,6 +257,7 @@ function useCardSubmit(
       onKeyRefreshed: setPublicKey,
       providerChain,
       refreshKey: client.refreshBrowserKey,
+      copy: cardCopy,
     });
     if (!resolved.ok) {
       setError(resolved.error);
@@ -315,11 +321,13 @@ export function useCardCheckout(
   const brand = detectBrand(onlyDigits(card.number));
   const usingNewCard = selection === NEW_CARD;
 
+  const cardCopy = useCheckoutCopy().card;
+  const fieldCopy = cardCopy.fields;
   const validate = (): CardFieldErrors => ({
-    number: validateCardNumber(card.number),
-    holder: validateHolder(card.holder),
-    expiry: validateExpiry(card.expiry),
-    cvv: validateCvv(card.cvv, brand),
+    number: validateCardNumber(card.number, fieldCopy),
+    holder: validateHolder(card.holder, fieldCopy),
+    expiry: validateExpiry(card.expiry, fieldCopy),
+    cvv: validateCvv(card.cvv, fieldCopy, brand),
   });
 
   const submit = useCardSubmit(

package/src/components/checkout/use-checkout-controller.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState, type Dispatch, type SetStateAction } from "react";
 
-import { buyerFormComplete } from "./buyer-info-form";
+import { buyerGateError } from "./buyer-gate";
+import { useCheckoutCopy } from "./copy-context";
 
 import { rememberHostedOrder, takeHostedOrder } from "./hosted-return";
 import { useCheckoutNavigate, type CheckoutNavigate } from "./navigate-context";
@@ -88,51 +89,6 @@ function useCheckoutNav(
   return { back, editBuyer: taxIdOnFile ? openDados : undefined };
 }
 
-/** The message shown when a declared field is missing or malformed. */
-const FIELD_COMPLAINT: Record<string, string> = {
-  taxId: "CPF inválido.",
-  name: "Informe seu nome.",
-  email: "E-mail inválido.",
-  phone: "Telefone inválido.",
-};
-
-/** Which input to highlight for a declared key. */
-const FIELD_INPUT: Record<string, BuyerField> = {
-  taxId: "cpf",
-  name: "name",
-  email: "email",
-  phone: "phone",
-};
-
-/**
- * What the "Continuar" gate objects to, or undefined to advance.
- *
- * The fields come from the chain's own declaration (FUT-595) — absent, they
- * degrade to CPF-required, which is exactly what this gate has always demanded.
- *
- * A blank CPF is only an error when the store has NO CPF for this buyer. With
- * one on file the field starts empty by design (the client is never sent the
- * saved CPF), so demanding one here trapped a returning buyer who opened Dados
- * through "Alterar" and changed their mind: they could not reach Pagamento
- * again, and back only led out to the menu. Leaving it blank means "charge me
- * as before", which is exactly what the server's `resolveBuyerTaxId` does.
- */
-function buyerGateError(
-  buyer: BuyerInfo,
-  fields: readonly CheckoutCustomerField[],
-  taxIdOnFile: boolean,
-): { message: string; field: BuyerField } | undefined {
-  const effective = taxIdOnFile
-    ? fields.filter((field) => !(field.key === "taxId" && !buyer.taxId?.trim()))
-    : fields;
-  const offending = buyerFormComplete(buyer, effective);
-  if (!offending) return undefined;
-  return {
-    message: FIELD_COMPLAINT[offending.key] ?? "Campo obrigatório.",
-    field: FIELD_INPUT[offending.key] ?? "cpf",
-  };
-}
-
 /**
  * Where checkout opens: on the outcome for a buyer returning from a hosted
  * provider, on Pagamento when their CPF is already on file, else on Dados.
@@ -319,6 +275,7 @@ export function useCheckoutController(
   tenantSlug?: string,
 ) {
   const { createOrder, saveBuyerContact, onExitToMenu, onPaid } = ports;
+  const validation = useCheckoutCopy().screens.validation;
   const navigate = useCheckoutNavigate();
   const resume = useHostedResume(tenantSlug);
   const [step, setStep] = useState<Step>(initialStep(Boolean(resume.order), taxIdOnFile));
@@ -341,7 +298,7 @@ export function useCheckoutController(
   }, [clearError]);
   const goToPayment = useCallback(() => {
     clearError();
-    const complaint = buyerGateError(buyer, buyerFields, taxIdOnFile);
+    const complaint = buyerGateError(validation, buyer, buyerFields, taxIdOnFile);
     if (complaint) { failure.fail(complaint); return; }
     // Persist the buyer's details HERE, on "Continuar" — not when a payment is
     // raised. Everything after this step can fail (no provider configured, a
@@ -354,7 +311,7 @@ export function useCheckoutController(
       saveBuyerContact?.({ name: buyer.name, phone: buyer.phone, taxId: buyer.taxId });
     }
     setStep("payment");
-  }, [buyer, buyerFields, saveProfile, taxIdOnFile, clearError, saveBuyerContact]);
+  }, [buyer, buyerFields, saveProfile, taxIdOnFile, clearError, saveBuyerContact, validation]);
   const startPayment = useCallback(async (chosen: PaymentMethod, override?: BuyerInfo) => {
     clearError();
     setCreating(true);

package/src/components/checkout/view-copy.ts

@@ -1,3 +1,5 @@
+import type { CheckoutCopy } from "./copy-context";
+
 /**
  * Every string the legacy checkout views render — required props, with NO
  * defaults, deliberately (the payments extraction's own doctrine, FUT-760):
@@ -87,4 +89,15 @@ export interface CheckoutViewCopy {
   dados: DadosStepCopy;
   emptyCart: EmptyCartCopy;
   status: PaymentStatusCopy;
+  /**
+   * The words the screens BELOW these read — the card fields, the wallet
+   * panes, the buyer-details inputs (FUT-760).
+   *
+   * Carried here rather than as a second prop so a host still passes copy
+   * exactly once. `CheckoutFlow` mounts it as `CheckoutCopyProvider`, because
+   * threading it down through four intermediate components as props is how a
+   * copy port comes to exist, be required, and go unread — which is what
+   * happened to `unavailableWithRemedyTitle` before this port was finished.
+   */
+  screens: CheckoutCopy;
 }

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

@@ -3,6 +3,7 @@ import { useState, type JSX } from "react";
 
 import { ApplePayButton, applePaySupported } from "./apple-pay-button";
 import { CardView } from "./card-view";
+import { useCheckoutCopy } from "./copy-context";
 import { GooglePayButton } from "./google-pay-button";
 import {
   applePayDeclared,
@@ -37,11 +38,12 @@ type WalletPaneProps = ProviderCheckoutScreenProps & {
 /** Post-submit confirmation, error > timeout > spinner — the card view's order. */
 function WalletProcessing({ wallet }: { wallet: WalletCharge }): JSX.Element {
   const { Alert, LoadingState } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.settling;
   if (wallet.pollError) {
     return (
       <Alert
         variant="danger"
-        title="Não foi possível confirmar o pagamento"
+        title={copy.cannotConfirm}
         description={wallet.pollError}
         showIcon
         data-testid="wallet-poll-error"
@@ -52,8 +54,8 @@ function WalletProcessing({ wallet }: { wallet: WalletCharge }): JSX.Element {
     return (
       <Alert
         variant="warning"
-        title="O pagamento está demorando mais que o esperado"
-        description="Você pode aguardar ou verificar seu pedido em instantes — não realize um novo pagamento."
+        title={copy.takingLonger}
+        description={copy.takingLongerHelp}
         showIcon
         data-testid="wallet-poll-timeout"
       />
@@ -63,7 +65,7 @@ function WalletProcessing({ wallet }: { wallet: WalletCharge }): JSX.Element {
     <LoadingState
       variant="spinner"
       size="md"
-      message="Processando pagamento…"
+      message={copy.processing}
       dataTestId="wallet-processing"
     />
   );
@@ -77,10 +79,11 @@ function WalletProcessing({ wallet }: { wallet: WalletCharge }): JSX.Element {
  */
 function WalletUnresolved({ message }: { message: string }): JSX.Element {
   const { Alert } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.settling;
   return (
     <Alert
       variant="warning"
-      title="Estamos confirmando seu pagamento"
+      title={copy.confirming}
       description={message}
       showIcon
       data-testid="wallet-unresolved"
@@ -105,6 +108,7 @@ function WalletButtons({
   onSheetError: (message: string) => void;
 }): JSX.Element | null {
   const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.wallet;
   const [googleReady, setGoogleReady] = useState(false);
   const googlePay = googlePayConfig(props.config);
   const applePay = applePayDeclared(props.config) && applePaySupported();
@@ -131,7 +135,7 @@ function WalletButtons({
       {applePay || googleReady ? (
         <Divider>
           <Text variant="caption" size="xs" color="secondary" as="span">
-            ou pague com cartão
+            {copy.orPayWithCard}
           </Text>
         </Divider>
       ) : null}
@@ -142,6 +146,7 @@ function WalletButtons({
 /** The CARD pane: wallet fast lane above, the card form below. */
 export function WalletCardPane(props: WalletPaneProps): JSX.Element {
   const { Alert } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.settling;
   const { order, buyer, config, tenantSlug, onResolved, pollIntervalMs } = props;
   const wallet = useWalletCharge(order, buyer, onResolved, pollIntervalMs);
   // A sheet failure the wallet reported before any charge existed (pay.js
@@ -158,7 +163,7 @@ export function WalletCardPane(props: WalletPaneProps): JSX.Element {
       {wallet.error ? (
         <Alert
           variant="danger"
-          title="Não foi possível pagar"
+          title={copy.cannotPay}
           description={wallet.error}
           showIcon
           data-testid="wallet-error"
@@ -167,7 +172,7 @@ export function WalletCardPane(props: WalletPaneProps): JSX.Element {
       {sheetError && !wallet.error ? (
         <Alert
           variant="danger"
-          title="Não foi possível pagar"
+          title={copy.cannotPay}
           description={sheetError}
           showIcon
           data-testid="wallet-sheet-error"