@12-apps/payments-frontend 3.18.1 → 3.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.18.1",
+  "version": "3.20.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.",
@@ -22,7 +22,7 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@12-apps/payments-backend": "^4.25.0",
+    "@12-apps/payments-backend": "^4.26.0",
     "react-qr-code": "^2.2.0"
   },
   "peerDependencies": {

package/src/activation/screens/copy-en-US.ts

@@ -0,0 +1,110 @@
+import { EN_US_CARD_COPY } from '../../card';
+
+import type { ActivationStepCopy } from './copy';
+
+/**
+ * The twin of `./copy-pt-BR.ts`, key for key (FUT-764).
+ *
+ * A pack, not a default — see that file for the whole argument, and for the
+ * list of strings that deliberately do not move across the pair: **Checkout
+ * Integrado** (PagBank's own console label), **CPF** and its `000.000.000-00`
+ * mask (a Brazilian document and a FORMAT), the provider names, and this
+ * package's `{provider}` placeholder.
+ */
+export const EN_US_ACTIVATION_STEP_COPY: ActivationStepCopy = {
+  intro: {
+    title: 'Step 3 · Turn selling on',
+    cardBody: (amountLabel) =>
+      `Make a test charge${amountLabel ? ` of ${amountLabel}` : ''} on your own card. It is ` +
+      'refunded automatically, and it is what proves your shop can genuinely take money.',
+    realCharge: (amountLabel) =>
+      `We raise a real ${amountLabel} charge on your own account. Paying it is what proves your ` +
+      'shop can genuinely take money.',
+    payingYourself: (amountLabel) =>
+      `You are paying yourself: the ${amountLabel} leaves your payment method and lands in the ` +
+      "account that receives this shop's sales. There is no refund because the money never left " +
+      'your control.',
+  },
+  actions: {
+    chargeAndActivate: (amountLabel) =>
+      `Charge${amountLabel ? ` ${amountLabel}` : ''} and activate`,
+    payAndActivate: (amountLabel) => `Pay ${amountLabel} and activate`,
+    testAgain: 'Test again',
+    retry: 'Try again',
+    tryAgain: 'Try once more',
+    restart: 'I have switched it on — restart Step 3',
+    generateNewCharge: 'Generate a new charge',
+    checkNow: 'Check now',
+    alreadyPaidCheckNow: 'I have paid — check now',
+    setProviderOrder: 'Set the order between providers',
+    seePublishedStore: 'See the published shop',
+  },
+  awaiting: {
+    receivedTitle: 'Payment received — confirming',
+    receivedBody:
+      'We are confirming your payment with the provider. This usually takes a few seconds.',
+    declinedTitle: 'The payment was declined',
+    waitingTitle: 'Waiting for the payment…',
+    waitingBody: (amountLabel) =>
+      `We raised the ${amountLabel} charge and opened the provider's page in another tab. ` +
+      'Pay there and come back: we check for ourselves the moment it lands.',
+    lastChecked: (seconds) => `Last checked ${seconds}s ago`,
+    openPaymentPage: 'Open the payment page',
+    copyLink: 'Copy the link',
+    linkCopied: 'Link copied',
+    showLink: 'Show the link',
+    hideLink: 'Hide the link',
+  },
+  outcome: {
+    approvedTitle: 'Test charge approved',
+    refundedBody: (amountLabel) =>
+      `Your shop can take payments. The ${amountLabel} was refunded automatically.`,
+    refundPendingBody: (amountLabel) =>
+      `Your shop can take payments. The ${amountLabel} refund did not complete — ` +
+      'it will show up on your statement.',
+    someAmount: 'amount',
+    authenticatedNotActive: 'Authenticated, but not activated',
+    refusedTitle: (displayName) => `${displayName} refused to create the charge`,
+    refusedBody: (displayName) =>
+      `${displayName} refused to create the charge. That almost always means ` +
+      'Checkout Integrado is still switched off on your account. Nothing was charged — ' +
+      'we reopened Step 2 above: turn it on there and come back.',
+    unreachableTitle: 'We could not reach the provider',
+    expiredTitle: 'The charge expired',
+    settledTitle: 'Test charge confirmed',
+    settledBody: (amountLabel) =>
+      `Your shop can take payments. The ${amountLabel} stays in your account — ` +
+      'InfinitePay refunds are made in their own app.',
+    provenTitle: 'Test charge confirmed',
+    provenBody:
+      'Your shop has proved it can take money through this provider. We switched sales ' +
+      'on automatically — you can pause them with the button at the top whenever you like. ' +
+      'No further charge is needed.',
+    providerSaid: 'The provider answered:',
+    blockedTitle: 'Step 2 is still unconfirmed',
+    blockedBody:
+      'Confirm above that Checkout Integrado is enabled on your account. Without it the ' +
+      'provider creates no payment link at all, and this charge would fail.',
+  },
+  taxId: {
+    label: "Cardholder's CPF",
+    hint: 'PagBank requires it on every card charge.',
+    placeholder: '000.000.000-00',
+  },
+  charge: {
+    card: EN_US_CARD_COPY,
+    noTokenizer:
+      'Card tokenization is not implemented for {provider} yet, ' +
+      'so the verification charge cannot be made from here.',
+    chargeFailed: 'The test charge could not be completed.',
+    unreachable: 'Could not connect. Check your connection and try again.',
+  },
+  redirect: {
+    chargeExpired: 'The charge expired.',
+    confirmFailed: 'The test charge could not be confirmed.',
+    createFailed: 'The test charge could not be raised.',
+    confirmTimedOut:
+      'We could not confirm the payment in time. If you have already paid, the charge is ' +
+      'still valid — reload the page to check again.',
+  },
+};

package/src/activation/screens/copy-pt-BR.ts

@@ -0,0 +1,126 @@
+import { PT_BR_CARD_COPY } from '../../card';
+
+import type { ActivationStepCopy } from './copy';
+
+/**
+ * Everything step 3 says, in Portuguese (FUT-764).
+ *
+ * A pack, not a default. Nothing in this package reads it: `createActivationStep`
+ * still REQUIRES its copy, and a host that wants these words names them. That
+ * distinction is the one `copy.ts` and `settings-copy.ts` argue for — a default
+ * in the origin host's language reads as finished to the next host right up
+ * until an owner sees it — and it is why the eight packs already on
+ * `../../locales` are not a breach of it either.
+ *
+ * These sentences are here because they are the ACTIVATION STEP's vocabulary
+ * and not one product's voice: "a cobrança de teste é o que libera as vendas",
+ * "autenticado, mas não ativado", "última verificação há Ns". Every adopter
+ * would write them again, word for word, because they describe outcomes this
+ * package decides. They came from the first adopting host, where they had been
+ * maintained beside a screen that no longer lives there.
+ *
+ * ## What does NOT get translated, in either half
+ *
+ * **Checkout Integrado** is the exact label on PagBank's own console; an owner
+ * sent looking for "Integrated Checkout" is looking for a screen that does not
+ * exist. **CPF** and its `000.000.000-00` mask are a Brazilian document and a
+ * FORMAT — a translated mask shows a shape the field refuses. **PagBank** and
+ * **InfinitePay** are names. `{provider}` is this package's own placeholder,
+ * substituted after the sentence is chosen.
+ */
+export const PT_BR_ACTIVATION_STEP_COPY: ActivationStepCopy = {
+  intro: {
+    title: 'Passo 3 · Ative as vendas',
+    cardBody: (amountLabel) =>
+      `Faça uma cobrança de teste${amountLabel ? ` de ${amountLabel}` : ''} no seu próprio ` +
+      'cartão. Ela é estornada automaticamente e é o que comprova que sua loja consegue ' +
+      'receber de verdade.',
+    realCharge: (amountLabel) =>
+      `Geramos uma cobrança real de ${amountLabel} na sua própria conta. Pagar por ela é o que ` +
+      'comprova que sua loja consegue receber de verdade.',
+    payingYourself: (amountLabel) =>
+      `Você paga para si mesmo: os ${amountLabel} saem do seu meio de pagamento e caem na conta ` +
+      'que recebe as vendas desta loja. Não há estorno porque o valor não sai do seu controle.',
+  },
+  actions: {
+    chargeAndActivate: (amountLabel) => `Cobrar${amountLabel ? ` ${amountLabel}` : ''} e ativar`,
+    payAndActivate: (amountLabel) => `Pagar ${amountLabel} e ativar`,
+    testAgain: 'Testar novamente',
+    retry: 'Tentar novamente',
+    tryAgain: 'Tentar de novo',
+    restart: 'Já habilitei — recomeçar o Passo 3',
+    generateNewCharge: 'Gerar nova cobrança',
+    checkNow: 'Conferir agora',
+    alreadyPaidCheckNow: 'Já paguei — conferir agora',
+    setProviderOrder: 'Definir a ordem entre provedores',
+    seePublishedStore: 'Ver a loja publicada',
+  },
+  awaiting: {
+    receivedTitle: 'Pagamento recebido — confirmando',
+    receivedBody:
+      'Estamos confirmando seu pagamento com o provedor. Isso costuma levar poucos segundos.',
+    declinedTitle: 'O pagamento foi recusado',
+    waitingTitle: 'Aguardando o pagamento…',
+    waitingBody: (amountLabel) =>
+      `Geramos a cobrança de ${amountLabel} e abrimos a página do provedor em outra aba. ` +
+      'Pague por lá e volte aqui: conferimos sozinhos assim que o pagamento cair.',
+    lastChecked: (seconds) => `Última verificação há ${seconds}s`,
+    openPaymentPage: 'Abrir a página de pagamento',
+    copyLink: 'Copiar link',
+    linkCopied: 'Link copiado',
+    showLink: 'Ver o link',
+    hideLink: 'Esconder o link',
+  },
+  outcome: {
+    approvedTitle: 'Cobrança de teste aprovada',
+    refundedBody: (amountLabel) =>
+      `Sua loja já consegue receber pagamentos. O ${amountLabel} foi estornado automaticamente.`,
+    refundPendingBody: (amountLabel) =>
+      `Sua loja já consegue receber pagamentos. O estorno do ${amountLabel} não foi concluído — ` +
+      'ele aparecerá na sua fatura.',
+    someAmount: 'valor',
+    authenticatedNotActive: 'Autenticado, mas não ativado',
+    refusedTitle: (displayName) => `A ${displayName} recusou criar a cobrança`,
+    refusedBody: (displayName) =>
+      `A ${displayName} recusou criar a cobrança. Isso quase sempre significa que o ` +
+      'Checkout Integrado ainda está desligado na sua conta. Nada foi cobrado — ' +
+      'reabrimos o Passo 2 acima: habilite lá e volte aqui.',
+    unreachableTitle: 'Não conseguimos falar com o provedor',
+    expiredTitle: 'A cobrança expirou',
+    settledTitle: 'Cobrança de teste confirmada',
+    settledBody: (amountLabel) =>
+      `Sua loja já consegue receber pagamentos. O ${amountLabel} fica na sua conta — ` +
+      'estornos da InfinitePay são feitos no app dela.',
+    provenTitle: 'Cobrança de teste confirmada',
+    provenBody:
+      'Sua loja provou que consegue receber por este provedor. Ligamos as vendas ' +
+      'automaticamente — você pode pausar pelo botão no topo quando quiser. Nenhuma nova ' +
+      'cobrança é necessária.',
+    providerSaid: 'Resposta do provedor:',
+    blockedTitle: 'Falta confirmar o Passo 2',
+    blockedBody:
+      'Confirme acima que o Checkout Integrado está habilitado na sua conta. Sem ele o ' +
+      'provedor não cria nenhum link de pagamento, e esta cobrança falharia.',
+  },
+  taxId: {
+    label: 'CPF do titular',
+    hint: 'Exigido pelo PagBank em qualquer cobrança no cartão.',
+    placeholder: '000.000.000-00',
+  },
+  charge: {
+    card: PT_BR_CARD_COPY,
+    noTokenizer:
+      'Ainda não há tokenização de cartão implementada para {provider}, ' +
+      'então a cobrança de verificação não pode ser feita por aqui.',
+    chargeFailed: 'Não foi possível concluir a cobrança de teste.',
+    unreachable: 'Não foi possível conectar. Verifique sua conexão e tente novamente.',
+  },
+  redirect: {
+    chargeExpired: 'A cobrança expirou.',
+    confirmFailed: 'Não foi possível confirmar a cobrança de teste.',
+    createFailed: 'Não foi possível gerar a cobrança de teste.',
+    confirmTimedOut:
+      'Não conseguimos confirmar o pagamento a tempo. Se você já pagou, a cobrança continua ' +
+      'válida — recarregue a página para conferir de novo.',
+  },
+};

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

@@ -7,6 +7,7 @@ import { ArrowBackIcon } from "./icons";
 import { PaymentStatus } from "./payment-status";
 import type { BuyerInfo, CheckoutProviderConfig, SettlementCheckout } from "./types";
 import { CheckoutCopyProvider } from "./copy-context";
+import { OneClickProvider, useOneClick } from "./one-click";
 import { CheckoutComponentsProvider, useCheckoutComponents, type CheckoutComponents } from "./ui";
 import type { CheckoutViewCopy } from "./view-copy";
 import { useCheckoutController, type CheckoutHostPorts } from "./use-checkout-controller";
@@ -59,6 +60,17 @@ export interface CheckoutFlowProps extends CheckoutHostPorts {
   providerConfig?: CheckoutProviderConfig | null;
   /** Scopes the saved-card list to the store being paid. */
   tenantSlug?: string;
+  /**
+   * The buyer pressed a BUY button rather than opening a checkout — pay with
+   * their saved card and land them on Confirmação, with no tap in between.
+   *
+   * A REQUEST, never an instruction: it is honoured only where it can be, and
+   * degrades to the ordinary flow everywhere else — a store that finishes on
+   * the provider's page, a buyer with no CPF on file, a buyer with no saved
+   * card. See `./one-click.tsx` for the whole decision and why every clause
+   * narrows toward standing down.
+   */
+  oneClick?: boolean;
   /**
    * The host's Apple Pay merchant-validation port (FUT-472): exchange the
    * session's `validationURL` for an Apple merchant session, SERVER-SIDE.
@@ -167,13 +179,14 @@ function StatusStep({
 }
 
 function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Element {
-  const { copy, cart, defaultBuyer, settlement, taxIdOnFile = false, providerConfig, tenantSlug, confirmationExtra, validateApplePayMerchant, ...ports } = props;
+  const { copy, cart, defaultBuyer, settlement, taxIdOnFile = false, providerConfig, tenantSlug, confirmationExtra, validateApplePayMerchant, oneClick = false, ...ports } = props;
   // Resolved for NO method on purpose (FUT-595): the Dados step opens before
   // the picker, and the form is filled once — so it asks for the union of what
   // any chain member may need rather than re-opening after the choice. A chain
   // that declares nothing degrades to CPF-required, never to "ask nothing".
   const buyerFields = useMemo(() => buyerFieldsFor(providerConfig?.chain, null), [providerConfig]);
   const c = useCheckoutController(ports, defaultBuyer, taxIdOnFile, buyerFields, tenantSlug);
+  const armed = useOneClick({ requested: oneClick, config: providerConfig, taxIdOnFile, step: c.step, method: c.method, setMethod: c.setMethod });
 
   // A settlement settlement pays already-sent kitchen items — the cart is
   // legitimately empty here, so the empty-cart guard only applies to cart mode.
@@ -210,25 +223,27 @@ function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Ele
       ) : null}
 
       {c.step === "payment" ? (
-        <PaymentStep
-          method={c.method}
-          onMethodChange={c.setMethod}
-          order={c.order}
-          buyer={c.buyer}
-          creating={c.creating}
-          createError={c.createError}
-          errorField={c.errorField}
-          errorCode={c.errorCode}
-          onGenerate={(chosen) => void c.startPayment(chosen)}
-          onUseEmail={c.payWithEmail}
-          // Set only for a skipped-Dados flow (the controller decides); the
-          // payer block hides itself when it is absent.
-          onEditBuyer={c.editBuyer}
-          providerConfig={providerConfig}
-          tenantSlug={tenantSlug}
-          validateApplePayMerchant={validateApplePayMerchant}
-          onResolved={c.handleResolved}
-        />
+        <OneClickProvider armed={armed}>
+          <PaymentStep
+            method={c.method}
+            onMethodChange={c.setMethod}
+            order={c.order}
+            buyer={c.buyer}
+            creating={c.creating}
+            createError={c.createError}
+            errorField={c.errorField}
+            errorCode={c.errorCode}
+            onGenerate={(chosen) => void c.startPayment(chosen)}
+            onUseEmail={c.payWithEmail}
+            // Set only for a skipped-Dados flow (the controller decides); the
+            // payer block hides itself when it is absent.
+            onEditBuyer={c.editBuyer}
+            providerConfig={providerConfig}
+            tenantSlug={tenantSlug}
+            validateApplePayMerchant={validateApplePayMerchant}
+            onResolved={c.handleResolved}
+          />
+        </OneClickProvider>
       ) : null}
 
       {c.step === "status" ? (

package/src/components/checkout/one-click.tsx

@@ -0,0 +1,179 @@
+/**
+ * ONE-CLICK checkout — the buyer who already decided (FUT-1070).
+ *
+ * A storefront can offer a BUY button beside a product or a past order: press
+ * it and the shopper expects to have bought, not to be handed a form. The
+ * whole flow that follows already exists — Pagamento raises the order, the
+ * card path charges a saved instrument, Confirmação reports the outcome — and
+ * every step of it is a tap the buyer has already made by pressing that
+ * button. So one-click makes those taps, in order, and reaches the same
+ * terminal screen through the same code the ordinary flow uses.
+ *
+ * That reuse is the design, not an economy. A second charge path would be a
+ * second answer to "what does paying with a saved card do", and the two would
+ * eventually disagree about failover instruments, the unresolved-charge rule,
+ * or the poll cap — each of which is money.
+ *
+ * ## It arms, or it stands down. It never guesses.
+ *
+ * `armedFor` is the whole decision, and every clause narrows toward
+ * NOT arming, because the failure directions are not symmetric: standing down
+ * costs a buyer the taps they would have made anyway, and arming wrongly
+ * charges a card nobody chose.
+ *
+ * - **No request** — the host did not ask. This is every ordinary checkout.
+ * - **No CPF on file** — the buyer still has a Dados step to fill (FUT-465),
+ *   so there is no tap to skip and the flow opens where it always did. In
+ *   practice a buyer with a saved card has one; a buyer without one is a buyer
+ *   we have never charged.
+ * - **No protocol yet** (`config === null`, still loading or a fetch blip) —
+ *   the ordinary flow fails OPEN here and renders a picker the server may
+ *   refuse, which costs a tap. Arming on the same guess would raise a charge.
+ * - **The choice is not ours to ask** — a store that finishes on the
+ *   provider's own page has no card path in this browser at all, and the one
+ *   thing one-click must never do is redirect a checkout the moment it
+ *   renders. This is the InfinitePay shape, and it is why a store on a hosted
+ *   provider degrades to the ordinary hand-off screen with nothing else
+ *   changed.
+ * - **No card path** — the chain declares no CARD entry this browser can mint
+ *   or charge for.
+ *
+ * The last condition cannot be answered here at all: **whether the buyer has a
+ * saved card**. That list is fetched by the card path itself, scoped to the
+ * store, and asking for it twice would be two answers to one question. So an
+ * armed flow selects the card tile and the card view does the rest —
+ * {@link useOneClickPay} pays only once a SAVED card is the selection, which
+ * is a state the picker can only reach after the list came back non-empty. A
+ * buyer with no saved card therefore lands on Pagamento with the picker and
+ * the card form, which is exactly the ordinary step 2.
+ */
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  type JSX,
+  type ReactNode,
+} from "react";
+
+import { cardPathAvailable } from "./method-capability";
+import { methodChosenAtProvider } from "./providers/registry";
+import type { CheckoutProviderConfig, PaymentMethod } from "./types";
+
+/**
+ * Whether the flow above this subtree is running as one-click.
+ *
+ * CONTEXT rather than a prop, because the consumer is the card path — four
+ * layers down, behind the published `ProviderCheckoutScreen` contract that
+ * every provider screen implements. Threading a flag through it would widen a
+ * contract that three screens share for the benefit of one, and would oblige
+ * an out-of-tree screen to forward a prop it has no use for.
+ */
+const OneClickContext = createContext(false);
+
+/** Arm (or explicitly disarm) one-click for everything below. */
+export function OneClickProvider({
+  armed,
+  children,
+}: {
+  armed: boolean;
+  children: ReactNode;
+}): JSX.Element {
+  return <OneClickContext.Provider value={armed}>{children}</OneClickContext.Provider>;
+}
+
+/** Whether this subtree is a one-click checkout. `false` outside a provider. */
+export function useOneClickArmed(): boolean {
+  return useContext(OneClickContext);
+}
+
+/**
+ * Can this store honour a one-click request right now? See the module comment
+ * for why every clause narrows toward `false`.
+ *
+ * `step` is what keeps the answer honest over TIME rather than only at mount:
+ * a resumed hosted return opens on Confirmação, and a buyer who walked back to
+ * Dados is a buyer who took over. Neither is a checkout that should still be
+ * charging on its own.
+ */
+function armedFor(input: OneClickFlow): boolean {
+  const { requested, config, taxIdOnFile, step } = input;
+  if (!requested || !taxIdOnFile || step !== "payment" || !config) return false;
+  if (methodChosenAtProvider(config.chain?.[0]?.checkoutScreen, config)) return false;
+  return cardPathAvailable(config);
+}
+
+/** What the flow knows that decides whether one-click may run, and how it starts. */
+interface OneClickFlow {
+  /** The host asked for one-click on this checkout. */
+  requested: boolean;
+  /** The store's published protocol; `null` while it is still unknown. */
+  config: CheckoutProviderConfig | null | undefined;
+  /** The buyer's CPF is already saved, so there is no Dados step to fill. */
+  taxIdOnFile: boolean;
+  /** Which step the flow is showing — one-click only ever runs on Pagamento. */
+  step: string;
+  /** The method currently selected, or `null` before any choice. */
+  method: PaymentMethod | null;
+  /** Selecting a method — the same event a picker tile press is. */
+  setMethod: (method: PaymentMethod) => void;
+}
+
+/**
+ * Arm one-click for this render, and take the card tile for the buyer ONCE
+ * when it is armed.
+ *
+ * Selecting a method is what raises the order (`useAutoRaiseOrder`), so that
+ * one call starts everything downstream — and it is the same event a tile
+ * press is, which is why nothing else in the flow has to change.
+ *
+ * Once only, by ref. `setMethod` clears any order raised for a previous
+ * method, so a re-fire would discard a live charge and raise a second; and a
+ * buyer who switches to PIX after this ran must be allowed to stay there.
+ */
+export function useOneClick(flow: OneClickFlow): boolean {
+  const armed = armedFor(flow);
+  const { method, setMethod } = flow;
+  const taken = useRef(false);
+  useEffect(() => {
+    if (!armed || taken.current || method !== null) return;
+    taken.current = true;
+    setMethod("CARD");
+  }, [armed, method, setMethod]);
+  return armed;
+}
+
+/**
+ * Press "Pagar" for the buyer, ONCE, when a saved card is what is selected.
+ *
+ * `ready` is the caller's whole precondition and is deliberately narrow: a
+ * SAVED card is the current selection and no charge is in flight, has landed,
+ * or has already failed. It can only become true after the instrument list
+ * came back with something, which is what makes "the buyer has no saved card"
+ * a silent stand-down rather than a branch.
+ *
+ * The submit is held in a ref because `handlePay` is rebuilt every render;
+ * depending on it directly would re-run this effect constantly and leave the
+ * once-only guard as the only thing between a shopper and a second charge.
+ * One guard for one job: the ref fires it, `fired` decides whether it may.
+ *
+ * A DECLINE is terminal for one-click, and that is the point of listing
+ * `error` in `ready`: the buyer's own "Pagar R$ …" comes back under the
+ * refusal, and retrying a declined card automatically is how a shopper gets
+ * three identical declines they never asked for.
+ */
+export function useOneClickPay(input: {
+  armed: boolean;
+  ready: boolean;
+  pay: () => Promise<void>;
+}): void {
+  const { armed, ready } = input;
+  const submit = useRef(input.pay);
+  submit.current = input.pay;
+  const fired = useRef(false);
+  useEffect(() => {
+    if (!armed || !ready || fired.current) return;
+    fired.current = true;
+    void submit.current();
+  }, [armed, ready]);
+}

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

@@ -26,6 +26,7 @@ import { useCheckoutClientApi } from "./client-context";
 import { rememberHostedOrder } from "./hosted-return";
 import { useCheckoutNavigate, type CheckoutNavigate } from "./navigate-context";
 import type { CardChainLink } from "./method-capability";
+import { useOneClickArmed, useOneClickPay } from "./one-click";
 import type { BuyerInfo, CheckoutOrder, OrderStatus } from "./types";
 import { usePaymentPolling } from "./use-payment-polling";
 import type { CardCopy } from "../../card/copy";
@@ -339,6 +340,13 @@ export function useCardCheckout(
     { card, usingNewCard, selection, saveCard, validate, setFieldErrors },
     providerChain,
   );
+  // The tap a one-click buyer already made (`./one-click.tsx`). Nothing about
+  // the charge differs — this only presses the button, and only while a SAVED
+  // card is the selection, which is a state the picker reaches exactly when the
+  // instrument list came back with something. A buyer with no saved card is
+  // left on the form, which is the ordinary step 2.
+  const ready = !usingNewCard && !submit.submitting && !submit.submitted && submit.error === null;
+  useOneClickPay({ armed: useOneClickArmed(), ready, pay: submit.handlePay });
 
   return {
     savedCards,

package/src/locales.ts

@@ -1,3 +1,6 @@
+import type { ActivationStepCopy } from './activation/screens/copy';
+import { EN_US_ACTIVATION_STEP_COPY } from './activation/screens/copy-en-US';
+import { PT_BR_ACTIVATION_STEP_COPY } from './activation/screens/copy-pt-BR';
 import type { CardCopy } from './card/copy';
 import { EN_US_CARD_COPY, PT_BR_CARD_COPY } from './card';
 import type { CheckoutPaymentCopy } from './components/checkout-payment-copy';
@@ -40,6 +43,17 @@ import { PT_BR_PAYMENTS_SETTINGS_COPY } from './components/settings-pt-BR';
  */
 type LocalePack<T> = { readonly 'pt-BR': T; readonly 'en-US': T };
 
+/**
+ * Step 3's words (FUT-764). `createActivationStep` still REQUIRES its copy and
+ * reads nothing from here — a host that wants these names them, which is the
+ * distinction between a pack and a default. They arrived from the first
+ * adopting host, where they had outlived the screen they belonged to.
+ */
+export const ACTIVATION_STEP_COPY = {
+  'pt-BR': PT_BR_ACTIVATION_STEP_COPY,
+  'en-US': EN_US_ACTIVATION_STEP_COPY,
+} as const satisfies LocalePack<ActivationStepCopy>;
+
 export const CARD_COPY = {
   'pt-BR': PT_BR_CARD_COPY,
   'en-US': EN_US_CARD_COPY,
@@ -88,6 +102,7 @@ export const PLATFORM_HOMOLOGACAO_COPY = {
  * key them — while the root keeps exporting the pt-BR names it always has, so
  * no existing import moves.
  */
+export { EN_US_ACTIVATION_STEP_COPY } from './activation/screens/copy-en-US';
 export { EN_US_CARD_COPY } from './card';
 export { EN_US_CHECKOUT_PAYMENT_COPY } from './components/checkout-payment-en-US';
 export {