@12-apps/payments-frontend 3.9.0 → 3.11.0

package/src/card/tokenize.ts

@@ -26,6 +26,7 @@ import { err, ok, type Result } from "../result";
 import { detectBrand, onlyDigits } from "./format";
 import { tokenizeWithStripe } from "./stripe-token";
 import type { CardDetails, CardToken } from "./types";
+import type { CardCopy } from "./copy";
 
 /** Test PAN that always declines (mirrors common sandbox decline cards). */
 const DECLINE_PAN = "4000000000000002";
@@ -80,11 +81,11 @@ function ensurePagBankSdk(): Promise<boolean> {
 }
 
 /** Local card-field validation. Returns an error message, or `null` when valid. */
-function validateCardInput(card: CardDetails): string | null {
-  if (!passesLuhn(onlyDigits(card.number))) return "Número de cartão inválido.";
-  if (card.holder.trim().length < 2) return "Informe o nome impresso no cartão.";
-  if (!expiryIsFuture(card.expiry)) return "Validade inválida ou expirada.";
-  if (!/^\d{3,4}$/.test(card.cvv.trim())) return "CVV inválido.";
+function validateCardInput(card: CardDetails, copy: CardCopy): string | null {
+  if (!passesLuhn(onlyDigits(card.number))) return copy.fields.numberInvalid;
+  if (card.holder.trim().length < 2) return copy.fields.holderRequired;
+  if (!expiryIsFuture(card.expiry)) return copy.fields.expiryInvalid;
+  if (!/^\d{3,4}$/.test(card.cvv.trim())) return copy.fields.cvvInvalid;
   return null;
 }
 
@@ -98,12 +99,13 @@ function encryptWithSdk(
   publicKey: string,
   brand: string,
   last4: string,
+  copy: CardCopy,
 ): Result<CardToken> {
   if (typeof window === "undefined" || !window.PagSeguro?.encryptCard) {
-    return err("Não foi possível carregar o meio de pagamento. Recarregue a página.");
+    return err(copy.tokenize.sdkUnavailable);
   }
   const match = /^(\d{2})\/(\d{2})$/.exec(card.expiry.trim());
-  if (!match) return err("Validade inválida ou expirada.");
+  if (!match) return err(copy.fields.expiryInvalid);
   const encrypted = window.PagSeguro.encryptCard({
     publicKey,
     holder: card.holder.trim(),
@@ -113,7 +115,7 @@ function encryptWithSdk(
     securityCode: card.cvv.trim(),
   });
   if (encrypted.hasErrors || !encrypted.encryptedCard) {
-    return err("Não foi possível processar o cartão. Verifique os dados e tente novamente.");
+    return err(copy.tokenize.cardNotProcessed);
   }
   return ok({ token: encrypted.encryptedCard, brand, last4 });
 }
@@ -157,11 +159,12 @@ async function tokenizeWithPagarme(
   publicKey: string,
   brand: string,
   last4: string,
+  copy: CardCopy,
   /** Deadline for the round trip; an abort reads as "could not contact". */
   signal?: AbortSignal,
 ): Promise<Result<CardToken>> {
   const match = /^(\d{2})\/(\d{2})$/.exec(card.expiry.trim());
-  if (!match) return err("Validade inválida ou expirada.");
+  if (!match) return err(copy.fields.expiryInvalid);
 
   let response: Response;
   try {
@@ -181,7 +184,7 @@ async function tokenizeWithPagarme(
       }),
     });
   } catch {
-    return err("Não foi possível contatar o provedor do cartão. Verifique sua conexão.");
+    return err(copy.tokenize.providerUnreachable);
   }
 
   const body = (await response.json().catch(() => null)) as { id?: unknown } | null;
@@ -189,8 +192,7 @@ async function tokenizeWithPagarme(
     // Carried verbatim: a rejected tokenization is the provider's answer, and
     // the whole point of the activation screen is that it reaches a human.
     return err(
-      `O provedor recusou os dados do cartão (HTTP ${response.status}). ` +
-        `Resposta: ${JSON.stringify(body).slice(0, 300)}`,
+      copy.tokenize.providerRefused(response.status, JSON.stringify(body).slice(0, 300)),
     );
   }
   return ok({ token: body.id, brand, last4 });
@@ -205,6 +207,7 @@ async function tokenizeWithPagarme(
 export async function tokenizeCard(
   card: CardDetails,
   publicKey: string | null | undefined,
+  copy: CardCopy,
   tokenizer: CardTokenizer = "pagbank-sdk",
   /**
    * Bounds the network schemes (Pagar.me / Stripe). The PagBank one encrypts
@@ -212,31 +215,24 @@ export async function tokenizeCard(
    */
   signal?: AbortSignal,
 ): Promise<Result<CardToken>> {
-  const validationError = validateCardInput(card);
+  const validationError = validateCardInput(card, copy);
   if (validationError) return err(validationError);
 
-  if (!publicKey) {
-    return err(
-      "A chave pública do cartão não está disponível para esta loja. " +
-        "Reconecte o provedor e tente novamente.",
-    );
-  }
+  if (!publicKey) return err(copy.tokenize.noPublicKey);
 
   const pan = onlyDigits(card.number);
   const brand = detectBrand(pan);
   const last4 = pan.slice(-4);
 
   if (tokenizer === "pagarme-token") {
-    return tokenizeWithPagarme(card, pan, publicKey, brand, last4, signal);
+    return tokenizeWithPagarme(card, pan, publicKey, brand, last4, copy, signal);
   }
   if (tokenizer === "stripe-pm") {
-    return tokenizeWithStripe(card, pan, publicKey, brand, last4, signal);
+    return tokenizeWithStripe(card, pan, publicKey, brand, last4, copy, signal);
   }
 
-  if (!(await ensurePagBankSdk())) {
-    return err("Não foi possível carregar o meio de pagamento. Recarregue a página.");
-  }
-  return encryptWithSdk(card, pan, publicKey, brand, last4);
+  if (!(await ensurePagBankSdk())) return err(copy.tokenize.sdkUnavailable);
+  return encryptWithSdk(card, pan, publicKey, brand, last4, copy);
 }
 
 /**
@@ -259,10 +255,6 @@ export interface CardTokenizationConfig {
   mockTokenization: boolean;
 }
 
-/** The clear bail (FUT-697): said BEFORE any charge, naming the remedy. */
-const CARD_PATH_UNAVAILABLE =
-  "O pagamento com cartão está indisponível nesta loja no momento. Recarregue a página e tente de novo, escolha outro método de pagamento ou combine diretamente com a loja.";
-
 /**
  * Tokenize for the buyer checkout, speaking the ACTIVE provider's protocol.
  *
@@ -282,6 +274,7 @@ const CARD_PATH_UNAVAILABLE =
 export async function tokenizeForCheckout(
   card: CardDetails,
   config: CardTokenizationConfig,
+  copy: CardCopy,
   /**
    * Optional deadline for a provider that mints over the network. The chain
    * path passes one so a backup acquirer nobody can reach cannot hold the
@@ -290,11 +283,14 @@ export async function tokenizeForCheckout(
   signal?: AbortSignal,
 ): Promise<Result<CardToken>> {
   const scheme = config.provider ? tokenizerFor(config.provider) : null;
-  if (scheme && config.publicKey) return tokenizeCard(card, config.publicKey, scheme, signal);
+  if (scheme && config.publicKey) {
+    return tokenizeCard(card, config.publicKey, copy, scheme, signal);
+  }
 
-  if (!config.mockTokenization) return err(CARD_PATH_UNAVAILABLE);
+  // The clear bail (FUT-697): said BEFORE any charge, naming the remedy.
+  if (!config.mockTokenization) return err(copy.tokenize.cardUnavailable);
 
-  const validationError = validateCardInput(card);
+  const validationError = validateCardInput(card, copy);
   if (validationError) return err(validationError);
 
   const pan = onlyDigits(card.number);

package/src/components/CheckoutPayment.tsx

@@ -1,17 +1,6 @@
 'use client';
 
-import {
-  Alert,
-  Box,
-  Button,
-  CircularProgress,
-  FormControlLabel,
-  Radio,
-  RadioGroup,
-  Stack,
-  TextField,
-  Typography,
-} from '@mui/material';
+import { Alert, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
 
 import type { ClientChargeView, CustomerInfo, Money } from '@12-apps/payments-backend';
@@ -19,6 +8,12 @@ import type { ClientChargeView, CustomerInfo, Money } from '@12-apps/payments-ba
 import type { ClientPaymentsConfig, PaymentsClient } from '../client';
 import { useChargeStatus, useCreateCharge, usePaymentsClient } from '../context';
 
+import type { CheckoutPaymentCopy, LegacyRefusalCopy } from './checkout-payment-copy';
+import type { CardFormValues, SavedCardOption } from './checkout-payment-types';
+import { formatAmount, MethodChooser, PixPanel } from './checkout-payment-views';
+
+export type { CardFormValues, SavedCardOption };
+
 /**
  * Plug-and-play checkout payment step — the reusable equivalent of the
  * buyer-facing payment screen. Renders the right flow for the merchant's
@@ -36,22 +31,6 @@ import { useChargeStatus, useCreateCharge, usePaymentsClient } from '../context'
  * order creation, and what happens on `onPaid` — this component owns only
  * the payment interaction.
  */
-export interface CardFormValues {
-  number: string;
-  holder: string;
-  expiry: string;
-  cvv: string;
-}
-
-/** A provider-vaulted card the buyer may reuse ("Mastercard •••• 7599"). */
-export interface SavedCardOption {
-  savedCardToken: string;
-  brand: string;
-  last4: string;
-  /** e.g. "02/2034" — shown as "Validade 02/2034". */
-  expiry?: string;
-}
-
 export interface CheckoutPaymentProps {
   /**
    * Opaque host-side handle for what is being paid (cart/order id). Sent as
@@ -72,13 +51,11 @@ export interface CheckoutPaymentProps {
   savedCards?: SavedCardOption[];
   onPaid: (charge: ClientChargeView) => void;
   onFailed?: (charge: ClientChargeView) => void;
-}
-
-function formatBRL(amount: Money): string {
-  return (amount.amountCents / 100).toLocaleString('pt-BR', {
-    style: 'currency',
-    currency: amount.currency,
-  });
+  /**
+   * Every sentence this step renders — the HOST's, required and with no
+   * default (FUT-760). A pt-BR host passes `PT_BR_CHECKOUT_PAYMENT_COPY`.
+   */
+  copy: CheckoutPaymentCopy;
 }
 
 function firstError(...messages: (string | null | undefined)[]): string | null {
@@ -118,158 +95,6 @@ function useChargeOutcome(
   }, [current, settled, onPaid, onFailed]);
 }
 
-function PixPanel({ charge }: { charge: ClientChargeView }) {
-  const [copied, setCopied] = useState(false);
-  if (!charge.pix) return null;
-  return (
-    <Stack spacing={1} alignItems="flex-start">
-      {charge.pix.qrImageUrl ? (
-        <Box component="img" src={charge.pix.qrImageUrl} alt="QR Code PIX" sx={{ width: 220 }} />
-      ) : null}
-      <TextField fullWidth multiline size="small" label="PIX copia e cola" value={charge.pix.qrText} />
-      <Button
-        size="small"
-        onClick={() => {
-          void navigator.clipboard.writeText(charge.pix?.qrText ?? '').then(() => setCopied(true));
-        }}
-      >
-        {copied ? 'Copiado!' : 'Copiar código'}
-      </Button>
-      <Stack direction="row" spacing={1} alignItems="center">
-        <CircularProgress size={16} />
-        <Typography variant="body2">Aguardando pagamento…</Typography>
-      </Stack>
-    </Stack>
-  );
-}
-
-function CardPanel({ disabled, onSubmit }: { disabled: boolean; onSubmit: (values: CardFormValues) => void }) {
-  const [values, setValues] = useState<CardFormValues>({ number: '', holder: '', expiry: '', cvv: '' });
-  const field = (key: keyof CardFormValues, label: string, width?: number) => (
-    <TextField
-      size="small"
-      label={label}
-      value={values[key]}
-      sx={width ? { width } : undefined}
-      onChange={(e) => setValues((v) => ({ ...v, [key]: e.target.value }))}
-    />
-  );
-  return (
-    <Stack spacing={2}>
-      {field('number', 'Número do cartão')}
-      {field('holder', 'Nome impresso no cartão')}
-      <Stack direction="row" spacing={2}>
-        {field('expiry', 'Validade (MM/AA)', 140)}
-        {field('cvv', 'CVV', 100)}
-      </Stack>
-      <Button variant="contained" disabled={disabled} onClick={() => onSubmit(values)}>
-        Pagar com cartão
-      </Button>
-    </Stack>
-  );
-}
-
-interface CardSectionProps {
-  amount: Money;
-  savedCards: SavedCardOption[];
-  disabled: boolean;
-  onNewCard: (values: CardFormValues) => void;
-  onSavedCard: (card: SavedCardOption) => void;
-}
-
-/** "Pague com cartão": saved cards as radios + "Novo cartão" fallback. */
-function CardSection({ amount, savedCards, disabled, onNewCard, onSavedCard }: CardSectionProps) {
-  const [selected, setSelected] = useState(savedCards[0]?.savedCardToken ?? 'new');
-  const chosen = savedCards.find((c) => c.savedCardToken === selected);
-  if (savedCards.length === 0) return <CardPanel disabled={disabled} onSubmit={onNewCard} />;
-  return (
-    <Stack spacing={2}>
-      <Typography variant="subtitle2">Pague com cartão</Typography>
-      <RadioGroup value={selected} onChange={(_, v) => setSelected(v)}>
-        {savedCards.map((card) => (
-          <FormControlLabel
-            key={card.savedCardToken}
-            value={card.savedCardToken}
-            control={<Radio />}
-            label={`${card.brand} •••• ${card.last4}${card.expiry ? ` — Validade ${card.expiry}` : ''}`}
-          />
-        ))}
-        <FormControlLabel value="new" control={<Radio />} label="Novo cartão — inserir outro cartão" />
-      </RadioGroup>
-      {chosen ? (
-        <Button variant="contained" disabled={disabled} onClick={() => onSavedCard(chosen)}>
-          Pagar {formatBRL(amount)}
-        </Button>
-      ) : (
-        <CardPanel disabled={disabled} onSubmit={onNewCard} />
-      )}
-    </Stack>
-  );
-}
-
-interface MethodChooserProps {
-  config: ClientPaymentsConfig;
-  amount: Money;
-  savedCards: SavedCardOption[];
-  loading: boolean;
-  startPix: () => void;
-  startCard: (values: CardFormValues) => void;
-  startSavedCard: (card: SavedCardOption) => void;
-}
-
-/** One "Forma de pagamento" option card (PIX / Cartão). */
-function MethodCard(props: { title: string; subtitle: string; selected: boolean; onClick: () => void }) {
-  return (
-    <Button
-      variant="outlined"
-      onClick={props.onClick}
-      sx={{ flex: 1, justifyContent: 'flex-start', textAlign: 'left', borderWidth: props.selected ? 2 : 1 }}
-    >
-      <Stack alignItems="flex-start">
-        <Typography variant="subtitle2">{props.title}</Typography>
-        <Typography variant="caption" color="text.secondary">
-          {props.subtitle}
-        </Typography>
-      </Stack>
-    </Button>
-  );
-}
-
-/** Pre-charge phase: "Forma de pagamento" method cards, then the flow. */
-function MethodChooser(props: MethodChooserProps) {
-  const { config, amount, savedCards, loading, startPix, startCard, startSavedCard } = props;
-  const [method, setMethod] = useState<'PIX' | 'CARD'>('PIX');
-  if (config.tokenization === 'REDIRECT') {
-    return (
-      <Button variant="contained" disabled={loading} onClick={startPix}>
-        Continuar para o pagamento
-      </Button>
-    );
-  }
-  return (
-    <>
-      <Typography variant="subtitle2">Forma de pagamento</Typography>
-      <Stack direction="row" spacing={2}>
-        <MethodCard title="PIX" subtitle="Aprovação imediata" selected={method === 'PIX'} onClick={() => setMethod('PIX')} />
-        <MethodCard title="Cartão" subtitle="Crédito à vista" selected={method === 'CARD'} onClick={() => setMethod('CARD')} />
-      </Stack>
-      {method === 'PIX' ? (
-        <Button variant="contained" disabled={loading} onClick={startPix}>
-          Gerar QR Code PIX
-        </Button>
-      ) : (
-        <CardSection
-          amount={amount}
-          savedCards={savedCards}
-          disabled={loading}
-          onNewCard={startCard}
-          onSavedCard={startSavedCard}
-        />
-      )}
-    </>
-  );
-}
-
 /** Poll target: only charges that can still change server-side. */
 function pollRefOf(charge: ClientChargeView | null) {
   if (!charge || isFinalOnCreate(charge)) return null;
@@ -279,36 +104,46 @@ function pollRefOf(charge: ClientChargeView | null) {
 interface CheckoutGateProps {
   errorMessage: string | null;
   config: ClientPaymentsConfig | null | undefined;
+  copy: LegacyRefusalCopy;
 }
 
 /** Error / loading / payments-disabled gates ahead of the payment UI. */
-function checkoutGate({ errorMessage, config }: CheckoutGateProps) {
+function checkoutGate({ errorMessage, config, copy }: CheckoutGateProps) {
   if (errorMessage) return <Alert severity="error">{errorMessage}</Alert>;
   if (config === undefined) return <CircularProgress data-testid="checkout-payment-loading" />;
-  if (config === null) {
-    return <Alert severity="warning">Esta loja ainda não aceita pagamentos online.</Alert>;
-  }
+  if (config === null) return <Alert severity="warning">{copy.paymentsOff}</Alert>;
   return null;
 }
 
 /** In-flight phase: the created charge decides what the buyer sees. */
-function ChargePhase({ charge, amount }: { charge: ClientChargeView; amount: Money }) {
+function ChargePhase({
+  charge,
+  amount,
+  copy,
+}: {
+  charge: ClientChargeView;
+  amount: Money;
+  copy: CheckoutPaymentCopy;
+}) {
   if (charge.hostedCheckoutUrl && charge.status === 'PENDING') {
     return (
       <Stack spacing={2}>
-        <Typography>Você será direcionado para concluir o pagamento com segurança.</Typography>
+        <Typography>{copy.refusal.redirectNotice}</Typography>
         <Button variant="contained" href={charge.hostedCheckoutUrl}>
-          Pagar {formatBRL(amount)}
+          {copy.money.payAction(formatAmount(amount, copy.money))}
         </Button>
       </Stack>
     );
   }
-  if (charge.method === 'PIX' && charge.status === 'PENDING') return <PixPanel charge={charge} />;
+  if (charge.method === 'PIX' && charge.status === 'PENDING') {
+    return <PixPanel charge={charge} copy={copy.pix} />;
+  }
   return null;
 }
 
 export function CheckoutPayment(props: CheckoutPaymentProps) {
-  const { reference, amount, customer, tokenizeCard, savedCards = [], onPaid, onFailed } = props;
+  const { reference, amount, customer, tokenizeCard, savedCards = [], onPaid, onFailed, copy } =
+    props;
   const client = usePaymentsClient();
   const { config, error: configError } = useClientConfig(client);
   const [tokenizeError, setTokenizeError] = useState<string | null>(null);
@@ -325,7 +160,7 @@ export function CheckoutPayment(props: CheckoutPaymentProps) {
   const startCard = useCallback(
     async (values: CardFormValues) => {
       if (!config || !tokenizeCard) {
-        setTokenizeError('Pagamento com cartão indisponível.');
+        setTokenizeError(copy.refusal.cardUnavailable);
         return;
       }
       try {
@@ -340,7 +175,7 @@ export function CheckoutPayment(props: CheckoutPaymentProps) {
         setTokenizeError(err instanceof Error ? err.message : String(err));
       }
     },
-    [config, tokenizeCard, create, reference, customer],
+    [config, tokenizeCard, create, reference, customer, copy],
   );
 
   const startSavedCard = useCallback(
@@ -355,14 +190,14 @@ export function CheckoutPayment(props: CheckoutPaymentProps) {
   );
 
   const errorMessage = firstError(configError, tokenizeError, createError && createError.message);
-  const gate = checkoutGate({ errorMessage, config });
+  const gate = checkoutGate({ errorMessage, config, copy: copy.refusal });
   if (gate || config === undefined || config === null) return gate;
 
   return (
     <Stack spacing={2}>
-      <Typography variant="h6">Total: {formatBRL(amount)}</Typography>
+      <Typography variant="h6">{copy.money.totalLabel(formatAmount(amount, copy.money))}</Typography>
       {current ? (
-        <ChargePhase charge={current} amount={amount} />
+        <ChargePhase charge={current} amount={amount} copy={copy} />
       ) : (
         <MethodChooser
           config={config}
@@ -372,6 +207,7 @@ export function CheckoutPayment(props: CheckoutPaymentProps) {
           startPix={startPix}
           startCard={(values) => void startCard(values)}
           startSavedCard={startSavedCard}
+          copy={copy}
         />
       )}
     </Stack>

package/src/components/ConfirmCredentialSave.tsx

@@ -12,6 +12,8 @@ import {
 
 import type { CredentialFieldSpec } from '@12-apps/payments-backend';
 
+import { usePaymentsSettingsCopy } from './settings-copy-context';
+
 /**
  * The last look at the value that decides who gets paid.
  *
@@ -45,6 +47,7 @@ export function ConfirmCredentialSave({
   onCancel: () => void;
   onConfirm: () => void;
 }) {
+  const copy = usePaymentsSettingsCopy().confirmSave;
   return (
     <Dialog
       open={pending !== null}
@@ -54,13 +57,10 @@ export function ConfirmCredentialSave({
       data-testid="payments-confirm-credential"
       aria-labelledby="payments-confirm-credential-title"
     >
-      <DialogTitle id="payments-confirm-credential-title">
-        Confirme para onde vai o dinheiro
-      </DialogTitle>
+      <DialogTitle id="payments-confirm-credential-title">{copy.title}</DialogTitle>
       <DialogContent>
         <Typography variant="body2" color="text.secondary">
-          Todo pagamento recebido por esta loja será depositado na conta desta{' '}
-          {pending?.spec.label ?? 'credencial'}:
+          {copy.body(pending?.spec.label ?? copy.fieldFallback)}
         </Typography>
         <Box
           data-testid="payments-confirm-credential-value"
@@ -79,9 +79,7 @@ export function ConfirmCredentialSave({
         >
           {pending?.value}
         </Box>
-        <Typography variant="caption" color="text.secondary">
-          Um valor errado envia os pagamentos desta loja para outra pessoa, e não há como reverter.
-        </Typography>
+        <Typography variant="caption" color="text.secondary">{copy.warning}</Typography>
       </DialogContent>
       <DialogActions>
         {/*
@@ -90,7 +88,7 @@ export function ConfirmCredentialSave({
           go back and check than to press on.
         */}
         <Button onClick={onCancel} disabled={busy} data-testid="payments-confirm-credential-cancel">
-          Voltar e revisar
+          {copy.cancelAction}
         </Button>
         <Button
           variant="contained"
@@ -98,7 +96,7 @@ export function ConfirmCredentialSave({
           disabled={busy}
           data-testid="payments-confirm-credential-confirm"
         >
-          É essa, salvar
+          {copy.confirmAction}
         </Button>
       </DialogActions>
     </Dialog>

package/src/components/ConnectionCard.tsx

@@ -17,6 +17,7 @@ import type { ReactNode } from 'react';
 import type { ConnectedOAuthAccount, PaymentEnvironment } from '@12-apps/payments-backend';
 
 import { BTN_PRIMARY_SX, BTN_SECONDARY_SX, LINKISH_SX, T } from './panel-tokens';
+import { usePaymentsSettingsCopy } from './settings-copy-context';
 
 /**
  * The connect card's own pieces: what a connection IS, what authorizing
@@ -46,23 +47,25 @@ export function ConnectionFacts({
   account: ConnectedOAuthAccount | null;
   displayName: string;
 }) {
+  const copy = usePaymentsSettingsCopy().card;
+  const env = usePaymentsSettingsCopy().environment;
   // A fact's testid names its VALUE, not its row: the environment is asserted
   // with an exact `toHaveText`, so hanging the id on the grid — or even on the
   // row, which also carries the "AMBIENTE" label — makes that assertion read
   // the whole card. Every consumer of this id wants the one string.
   const facts: { key: string; value: string; testId?: string }[] = [
-    { key: 'Conta', value: account?.accountLabel ?? account?.accountId ?? `Conta ${displayName}` },
-    { key: 'Conexão', value: `Autorizada no ${displayName}` },
+    { key: copy.accountLabel, value: account?.accountLabel ?? account?.accountId ?? copy.accountHeading(displayName) },
+    { key: copy.connectionLabel, value: copy.authorizedAt(displayName) },
     {
-      key: 'Ambiente',
-      value: environment === 'PRODUCTION' ? 'Produção' : 'Sandbox (testes)',
+      key: copy.environmentLabel,
+      value: environment === 'PRODUCTION' ? env.production : copy.sandboxWithNote,
       testId: 'payments-connected-environment',
     },
   ];
   if (account?.connectedAt) {
     facts.push({
-      key: 'Conectada em',
-      value: new Date(account.connectedAt).toLocaleString('pt-BR'),
+      key: copy.connectedAtLabel,
+      value: new Date(account.connectedAt).toLocaleString(),
     });
   }
   return (
@@ -108,10 +111,11 @@ export function ConnectionFacts({
  * you end up back here.
  */
 export function ConnectSteps({ displayName }: { displayName: string }) {
+  const copy = usePaymentsSettingsCopy().card;
   const steps = [
-    `Entre na sua conta ${displayName} — dá para criar uma na hora, se ainda não tiver.`,
-    'Autorize o acesso na tela do provedor.',
-    'Você volta para cá com a conta conectada.',
+    copy.steps.signIn(displayName),
+    copy.steps.authorize,
+    copy.steps.comeBack,
   ];
   return (
     <Stack component="ol" spacing={1.1} sx={{ listStyle: 'none', m: 0, p: 0 }}>
@@ -159,32 +163,33 @@ export function DisconnectDialog(props: {
   /** The softer path: keep the connection, stop taking orders through it. */
   onPauseInstead?: () => void;
 }) {
+  const copy = usePaymentsSettingsCopy().card;
   const { displayName, receiving } = props;
   return (
     <Dialog open={props.open} onClose={props.onCancel} data-testid="payments-disconnect-confirm">
       <DialogTitle sx={{ fontSize: '16.5px', fontWeight: 700, letterSpacing: '-.01em', pb: '8px' }}>
-        Remover a conexão com {displayName}?
+        {copy.removeQuestion(displayName)}
       </DialogTitle>
       <DialogContent sx={{ pb: '4px' }}>
         <DialogContentText sx={{ fontSize: '13px', color: T.ink2, lineHeight: 1.55 }}>
           {receiving
-            ? 'A loja para de receber na hora e fica sem provedor ativo — pedidos novos não conseguem ser pagos até você conectar outro.'
-            : 'Esta conexão sai da loja. Você pode conectar de novo depois.'}
+            ? copy.removeConsequenceLive
+            : copy.removeConsequenceIdle}
         </DialogContentText>
         {/* The consequences, itemised. A single paragraph makes the reversible
             facts and the irreversible one weigh the same, and the one that
             costs money is the one an owner skims past. */}
         <Stack component="ul" spacing={1} sx={{ listStyle: 'none', m: 0, mt: '14px', p: 0 }}>
           {receiving ? (
-            <Consequence tone="bad">Pedidos novos deixam de ser cobrados imediatamente.</Consequence>
+            <Consequence tone="bad">{copy.removeStopsChargingNow}</Consequence>
           ) : null}
           <Consequence>
-            {`A autorização é revogada no ${displayName}. Sua conta e seu histórico continuam lá, intactos.`}
+            {copy.removeRevokes(displayName)}
           </Consequence>
           <Consequence>
-            {`Pagamentos já aprovados e estornos em andamento seguem normalmente pelo ${displayName}.`}
+            {copy.removeKeepsSettled(displayName)}
           </Consequence>
-          <Consequence>Para reconectar, os passos recomeçam do zero.</Consequence>
+          <Consequence>{copy.removeRestartsSetup}</Consequence>
         </Stack>
       </DialogContent>
       <DialogActions sx={{ display: 'flex', flexDirection: 'column', gap: '8px', p: '18px 22px 20px' }}>
@@ -199,7 +204,7 @@ export function DisconnectDialog(props: {
             sx={BTN_SECONDARY_SX}
             data-testid="payments-pause-instead"
           >
-            Só pausar o recebimento
+            {copy.pauseInstead}
           </Button>
         ) : null}
         <Button
@@ -211,10 +216,10 @@ export function DisconnectDialog(props: {
           data-testid="payments-disconnect-confirm-action"
           sx={{ ...BTN_PRIMARY_SX, background: T.bad, '&:hover': { background: '#a51f1f' } }}
         >
-          {props.busy ? <CircularProgress size={18} sx={{ color: '#fff' }} /> : 'Remover conexão'}
+          {props.busy ? <CircularProgress size={18} sx={{ color: '#fff' }} /> : copy.removeAction}
         </Button>
         <Button fullWidth onClick={props.onCancel} disabled={props.busy} sx={LINKISH_SX}>
-          Cancelar
+          {copy.cancel}
         </Button>
       </DialogActions>
     </Dialog>