@12-apps/payments-frontend 3.17.0 → 3.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.17.0",
+  "version": "3.18.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.22.0",
+    "@12-apps/payments-backend": "^4.25.0",
     "react-qr-code": "^2.2.0"
   },
   "peerDependencies": {

package/src/activation/public.ts

@@ -0,0 +1,90 @@
+/**
+ * The ACTIVATION step's whole public surface — the two protocols, and the
+ * screens that render them (FUT-463, FUT-763, FUT-764).
+ *
+ * A file of its own rather than another block on the root barrel, which is at
+ * its size cap: a barrel that has to be trimmed to accept a new capability is
+ * one that starts hiding capabilities to stay small. Every name below is
+ * re-exported from the root unchanged, so nothing an adopter imports moves.
+ */
+// ---------------------------------------------------------------------------
+// The REDIRECT ACTIVATION protocol (FUT-463, packaged by FUT-763) — proving a
+// connection can charge, for a provider whose payer pays on its own page.
+//
+// `renderVerification` above stays what it was: the package decides where the
+// step appears and the host owns the screen. What moved is the protocol behind
+// it — resume-on-mount, the return trip's ids, the refusal/expiry/transport
+// distinctions, the bounded wait. Every one of those was learned from a payment
+// that went wrong, and no second host should have to learn them again.
+// ---------------------------------------------------------------------------
+export {
+  useRedirectActivation,
+  type RedirectActivation,
+  type RedirectActivationOptions,
+} from './use-redirect-activation';
+export { type RedirectActivationCopy } from './copy';
+export {
+  creationFailure,
+  postActivation,
+  refusedByProvider,
+  settleActivationPoll,
+  type ActivationClock,
+  type ActivationPendingBody,
+  type ActivationPollBody,
+  type RedirectActivationState,
+  type SettlePollIo,
+} from './redirect-state';
+export {
+  clearReturnedSettlement,
+  takeReturnedSettlement,
+  RETURNED_SETTLEMENT_KEY,
+} from './returned-settlement';
+
+// ---------------------------------------------------------------------------
+// The ACTIVATION CHARGE (FUT-463, packaged by FUT-763) — proving a connection
+// can charge, for a provider whose payer pays HERE.
+//
+// A connection is not a capability: a completed grant says the owner authorized
+// us, not that the account can take money. The owner's own card goes through
+// the SAME path a shopper's does — same fields, same validation, same
+// browser-side encryption — for one cent, refunded immediately.
+//
+// The sibling of `useRedirectActivation` for the other half of the same step.
+// As there, the SCREEN stays the host's.
+// ---------------------------------------------------------------------------
+export {
+  useActivationCharge,
+  type ActivationCharge,
+  type ActivationChargeOptions,
+  type ActivationChargeState,
+} from './use-activation-charge';
+export { type ActivationChargeCopy } from './charge-copy';
+
+// ---------------------------------------------------------------------------
+// The ACTIVATION STEP's SCREENS (FUT-764) — the six settled outcomes, the
+// outstanding-payment panel with its link fallback, the two flows and the
+// router between them.
+//
+// The protocol hooks above shipped without them, leaving `renderVerification`
+// as "the host owns the screen". That reads as a boundary and is not one: the
+// screens are a rendering of THIS package's state machines, and the origin
+// host's copies carried a paragraph each about a real payment that went wrong —
+// an owner who paid four times, a dead end blaming a store for a key that was
+// never going to exist, a refusal wearing another failure's clothes. None of
+// that is host knowledge, and a second adopter deriving it again would be
+// deriving it from the same payments.
+//
+// The SENTENCES stay the host's, required and defaultless, as everywhere here.
+// ---------------------------------------------------------------------------
+export {
+  createActivationStep,
+  type ActivationStepConfig,
+  type ActivationStepProps,
+  type CardSurface,
+  type ActivationActionCopy,
+  type ActivationAwaitingCopy,
+  type ActivationIntroCopy,
+  type ActivationOutcomeCopy,
+  type ActivationStepCopy,
+  type ActivationTaxIdCopy,
+} from './screens';

package/src/activation/screens/activation-step.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import type { ComponentType, JSX } from 'react';
+
+import { tokenizerFor } from '../../card/tokenize';
+
+import { CardVerification, type CardSurface } from './card-verification';
+import { ActivationCopyProvider } from './copy-context';
+import type { ActivationStepCopy } from './copy';
+import { ProvenState } from './states';
+import { RedirectVerification } from './redirect-verification';
+
+/**
+ * Step 3 of connecting a provider — "connected" and "can charge" are different
+ * facts, and this is the one that proves the second (FUT-463, screens packaged
+ * by FUT-764's burn-down).
+ *
+ * `PaymentProviderSettings` decides WHERE this step appears; what it looks like
+ * and how it behaves is here. The split it replaces put the protocol in this
+ * package and the whole screen in the host, which meant every adopter rewrote
+ * six outcome panels, a polling display, a link fallback and a router between
+ * two flows — and the origin host's copies of them carry a paragraph each about
+ * a real payment that went wrong. None of that is host knowledge. The
+ * SENTENCES are, and they stay a required, defaultless port.
+ *
+ * What the host still answers:
+ *
+ * - `verifyChargeUrl` — its own endpoint. The route shape is the host's.
+ * - `copy` — every word, in the owner's language.
+ * - `formatAmount` — how this product writes money.
+ * - `CardSurface` — its design system and card words, for the card flow's
+ *   fields, so the owner meets the SAME form their shoppers will.
+ * - `validateTaxId` — the host's validator, already bound to its own words.
+ */
+
+/** What the settings surface hands the step, plus what only the host knows. */
+export interface ActivationStepProps {
+  provider: string;
+  /** The provider's human name — the refusal screens have to say who refused. */
+  displayName: string;
+  /** A stored connection exists — there is an account to charge through. */
+  connected: boolean;
+  /** A real charge already landed — say so, and charge nothing. */
+  proven: boolean;
+  /** An earlier setup step is unconfirmed: withhold the pay button, nothing else. */
+  blocked: boolean;
+  /** The walkthrough is on an earlier step: show only what has already settled. */
+  hidden: boolean;
+  onVerified: () => void;
+  /** The provider refused to mint a link — reopen the step that explains why. */
+  onSetupIncomplete: () => void;
+  /** Who is paying: the signed-in owner, read from the host's own session. */
+  ownerEmail: string;
+  /** The storefront this connection now takes money for. */
+  storeUrl: string;
+  /** Where the owner goes once this is done: the failover chain. */
+  onProviderOrder: () => void;
+}
+
+export interface ActivationStepConfig {
+  /** Where this host mints, polls and discards the activation charge. */
+  verifyChargeUrl: (provider: string) => string;
+  /** Every sentence the step renders. Required, and there is no default. */
+  copy: ActivationStepCopy;
+  /** How this product writes an amount in cents. */
+  formatAmount: (cents: number) => string;
+  /** The host's providers around the card fields — its design system, its words. */
+  CardSurface: CardSurface;
+  /** The host's tax-id validator, already bound to its own refusals. */
+  validateTaxId: (value: string) => string | undefined;
+  /**
+   * Where the return trip's ids are parked.
+   *
+   * Optional, and a host that has shipped this flow before should pass the name
+   * it already used. An owner can be on the provider's site paying RIGHT NOW
+   * across a deploy: their ids are in `sessionStorage` under the old key, and
+   * reading a different one on the way back would find nothing and offer to
+   * mint a charge for a payment they had just made.
+   */
+  storageKey?: string;
+}
+
+/**
+ * Bind the step to one host, once.
+ *
+ * A factory rather than a component with a dozen props, for the reason every
+ * mount in this package is one: the returned component's IDENTITY has to be
+ * stable, and a host composing it inline inside `renderVerification` would
+ * remount the whole step — and re-fetch, and lose a half-typed card — on every
+ * render of the page above it.
+ */
+export function createActivationStep(
+  config: ActivationStepConfig,
+): ComponentType<ActivationStepProps> {
+  function ActivationStep(props: ActivationStepProps): JSX.Element | null {
+    return (
+      <ActivationCopyProvider copy={config.copy}>
+        <ActivationBody {...props} config={config} />
+      </ActivationCopyProvider>
+    );
+  }
+  ActivationStep.displayName = 'ActivationStep';
+  return ActivationStep;
+}
+
+/** The router between the two flows, inside the copy provider. */
+function ActivationBody({
+  config,
+  provider,
+  displayName,
+  connected,
+  proven,
+  blocked,
+  hidden,
+  onVerified,
+  onSetupIncomplete,
+  ownerEmail,
+  storeUrl,
+  onProviderOrder,
+}: ActivationStepProps & { config: ActivationStepConfig }): JSX.Element | null {
+  // Nothing to verify until the account is connected: steps 1 and 2 come first.
+  if (!connected) return null;
+
+  if (proven) {
+    return <ProvenState storeUrl={storeUrl} onProviderOrder={onProviderOrder} />;
+  }
+
+  /**
+   * A card form this provider could never satisfy is worse than no form.
+   *
+   * A REDIRECT provider's buyer pays on ITS page, so there is no card to
+   * tokenize here and no public key to do it with. Rendering the fields anyway
+   * produced a dead end that blamed the store — "the card public key is not
+   * available for this store, reconnect the provider" — an instruction that
+   * cannot work, for a key that was never going to exist.
+   *
+   * It still gets a REAL charge, just minted as a link instead.
+   */
+  if (!tokenizerFor(provider)) {
+    return (
+      <RedirectVerification
+        verifyChargeUrl={config.verifyChargeUrl(provider)}
+        displayName={displayName}
+        blocked={blocked}
+        hidden={hidden}
+        storageKey={config.storageKey}
+        formatAmount={config.formatAmount}
+        onVerified={onVerified}
+        onSetupIncomplete={onSetupIncomplete}
+      />
+    );
+  }
+
+  // The card flow settles synchronously, so it has nothing outstanding to
+  // report from an earlier step — hiding it is still correct there.
+  if (hidden) return null;
+  return (
+    <CardVerification
+      verifyChargeUrl={config.verifyChargeUrl(provider)}
+      provider={provider}
+      ownerEmail={ownerEmail}
+      onVerified={onVerified}
+      CardSurface={config.CardSurface}
+      validateTaxId={config.validateTaxId}
+      formatAmount={config.formatAmount}
+    />
+  );
+}

package/src/activation/screens/awaiting-payment.tsx

@@ -0,0 +1,227 @@
+'use client';
+
+import { Box, Button, Stack, Typography } from '@mui/material';
+import { useEffect, useState, type JSX } from 'react';
+
+import { BTN_PRIMARY_SX, BTN_SECONDARY_SX, LINKISH_SX, T } from '../../components/panel-tokens';
+
+import { useActivationCopy } from './copy-context';
+import { Notice } from './notice';
+
+/**
+ * How long ago the provider was last asked, ticking.
+ *
+ * A second's resolution, from a value the POLL owns — not a counter this
+ * component increments, which would drift away from the requests actually being
+ * made and end up reassuring the owner about polling that had stopped.
+ */
+function useSecondsSince(timestamp: number): number | null {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    // Through the setter, never a closed-over binding — a counter that carried
+    // its own previous value would keep counting after the poll stopped.
+    const timer = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+  if (!timestamp) return null;
+  return Math.max(0, Math.round((now - timestamp) / 1000));
+}
+
+/** "3s ago", or nothing at all before the first answer. */
+function LastChecked({ lastCheckedAt }: { lastCheckedAt: number }): JSX.Element | null {
+  const { awaiting } = useActivationCopy();
+  const seconds = useSecondsSince(lastCheckedAt);
+  if (seconds === null) return null;
+  return (
+    <Typography
+      sx={{ fontSize: '11.5px', color: T.ink3 }}
+      data-testid="verify-charge-last-checked"
+    >
+      {awaiting.lastChecked(seconds)}
+    </Typography>
+  );
+}
+
+/**
+ * The return-trip variant. There is nothing to open and nothing to pay —
+ * showing a pay button to someone who has just paid is how one owner,
+ * reasonably reading it as "it did not work", paid four times.
+ */
+function ConfirmingReturn({
+  lastCheckedAt,
+  onCheckNow,
+}: {
+  lastCheckedAt: number;
+  onCheckNow: () => Promise<void>;
+}): JSX.Element {
+  const { awaiting, actions } = useActivationCopy();
+  return (
+    <Stack spacing={1} data-testid="verify-charge-confirming">
+      <Notice tone="info" title={awaiting.receivedTitle} description={awaiting.receivedBody} />
+      <LastChecked lastCheckedAt={lastCheckedAt} />
+      <Stack direction="row">
+        <Button sx={LINKISH_SX} onClick={() => void onCheckNow()} data-testid="verify-charge-check-now">
+          {actions.checkNow}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}
+
+/**
+ * The payment link: opened, copied, or read — but no longer SHOUTED.
+ *
+ * It used to be printed in full underneath, and the reason was sound: a blocked
+ * popup, a closed tab or a phone in the owner's hand all end at "I need the
+ * address", and a button that only knows how to `window.open` serves none of
+ * them. But a hosted-checkout URL can be ~400 characters of opaque blob, so the
+ * longest thing on the screen was the one thing nobody reads — directly above
+ * the sentence saying a payment was outstanding.
+ *
+ * So it is folded away rather than removed. Copy handles the ordinary case in
+ * one click; "show the link" still yields a real, selectable anchor, which is
+ * what a browser with no clipboard permission (and every non-secure origin has
+ * none) falls back to. Dropping the address entirely would have re-created the
+ * dead end with a tidier layout.
+ */
+function LinkActions({ checkoutUrl }: { checkoutUrl: string }): JSX.Element {
+  const { awaiting } = useActivationCopy();
+  const [copied, setCopied] = useState(false);
+  const [shown, setShown] = useState(false);
+  return (
+    <Stack spacing={1}>
+      <Stack direction="row" spacing={1} alignItems="center" sx={{ flexWrap: 'wrap' }}>
+        <Button
+          sx={BTN_PRIMARY_SX}
+          onClick={() => window.open(checkoutUrl, '_blank', 'noopener')}
+          data-testid="verify-charge-open-link"
+        >
+          {awaiting.openPaymentPage}
+        </Button>
+        <Button
+          sx={BTN_SECONDARY_SX}
+          onClick={() => {
+            void navigator.clipboard
+              ?.writeText(checkoutUrl)
+              .then(() => setCopied(true))
+              // No clipboard permission: reveal the anchor instead, which is
+              // the fallback that actually works on a non-secure origin.
+              .catch(() => setShown(true));
+          }}
+          data-testid="verify-charge-copy-link"
+        >
+          {copied ? awaiting.linkCopied : awaiting.copyLink}
+        </Button>
+        <Button
+          sx={LINKISH_SX}
+          onClick={() => setShown((open) => !open)}
+          data-testid="verify-charge-toggle-link"
+        >
+          {shown ? awaiting.hideLink : awaiting.showLink}
+        </Button>
+      </Stack>
+      {shown ? (
+        <Box
+          component="a"
+          href={checkoutUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          data-testid="verify-charge-checkout-url"
+          sx={{
+            display: 'block',
+            fontFamily: T.mono,
+            fontSize: '12px',
+            wordBreak: 'break-all',
+            userSelect: 'text',
+            color: T.ink2,
+            p: '10px 12px',
+            borderRadius: '8px',
+            background: T.bg2,
+            border: `1px solid ${T.line2}`,
+          }}
+        >
+          {checkoutUrl}
+        </Box>
+      ) : null}
+    </Stack>
+  );
+}
+
+/**
+ * A payment ATTEMPT was refused while this link stayed live.
+ *
+ * Rendered inside the waiting panel rather than replacing it, because the
+ * charge is still there to be paid and the fix is another method on the SAME
+ * link. Replacing the panel would take the link away and offer to generate a
+ * second real charge for a first one nobody cancelled.
+ */
+function DeclinedNotice({ message }: { message: string }): JSX.Element {
+  const { awaiting } = useActivationCopy();
+  return (
+    <Notice
+      tone="warn"
+      title={awaiting.declinedTitle}
+      description={message}
+      dataTestId="verify-charge-declined"
+    />
+  );
+}
+
+/**
+ * The link is live and the owner is paying it on the provider's site (FUT-463).
+ *
+ * The tab was already opened for them, from inside the click that generated the
+ * charge (see `useRedirectActivation`) — pressing the pay button IS the request
+ * to go and pay, and making them hunt for a second button afterwards was the
+ * extra step this screen exists to remove. So this panel is the fallback, and
+ * it has to be a real one.
+ *
+ * "I already paid — check now" exists because the poll runs every few seconds
+ * and someone who has just paid should not have to wonder whether the screen
+ * noticed. It asks the provider, exactly as the timer does.
+ */
+export function AwaitingPayment({
+  checkoutUrl,
+  amountLabel,
+  declined,
+  lastCheckedAt,
+  onCheckNow,
+}: {
+  /** Null on a return trip: the owner has PAID and we are only confirming. */
+  checkoutUrl: string | null;
+  amountLabel: string;
+  /** A refused attempt on this still-payable charge, in the owner's language. */
+  declined?: string;
+  lastCheckedAt: number;
+  onCheckNow: () => Promise<void>;
+}): JSX.Element {
+  const { awaiting, actions } = useActivationCopy();
+  if (!checkoutUrl) {
+    return <ConfirmingReturn lastCheckedAt={lastCheckedAt} onCheckNow={onCheckNow} />;
+  }
+
+  return (
+    <Stack spacing={1} data-testid="verify-charge-awaiting">
+      {declined ? <DeclinedNotice message={declined} /> : null}
+      {/*
+        The waiting title leads, because that is the screen's STATE and it is
+        what the owner came back to check. The amount and the "we opened a tab"
+        explanation are context for it; as the headline they described a thing
+        that had already happened and left the owner to infer that the screen
+        was still watching.
+      */}
+      <Notice
+        tone="info"
+        title={awaiting.waitingTitle}
+        description={awaiting.waitingBody(amountLabel)}
+      />
+      <LinkActions checkoutUrl={checkoutUrl} />
+      <Stack direction="row" spacing={1} alignItems="center">
+        <LastChecked lastCheckedAt={lastCheckedAt} />
+        <Button sx={LINKISH_SX} onClick={() => void onCheckNow()} data-testid="verify-charge-check-now">
+          {actions.alreadyPaidCheckNow}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}

package/src/activation/screens/card-verification.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import { Button, Stack, Typography } from '@mui/material';
+import type { ComponentType, JSX, ReactNode } from 'react';
+
+import { NewCardForm } from '../../card/fields';
+import { detectBrand, onlyDigits } from '../../card/format';
+import { formatCpf } from '../../card/cpf';
+import { useCheckoutComponents } from '../../components/checkout/ui';
+import { BTN_PRIMARY_SX, T } from '../../components/panel-tokens';
+import { useActivationCharge, type ActivationCharge } from '../use-activation-charge';
+
+import { useActivationCopy } from './copy-context';
+import { StepPanel } from './notice';
+import { FailedState, PassedState } from './states';
+
+/**
+ * Step 3 for a provider whose payer pays HERE: tokenize, charge, settle.
+ *
+ * This is the SAME form a shopper fills in at checkout — the package's own
+ * `NewCardForm`, rendered through the host's slot binding, not a second form
+ * shaped almost like it. A verification that exercised a different form, a
+ * different validator or a different tokenizer would prove something about that
+ * path instead of the one that takes real money.
+ *
+ * The PROTOCOL is `useActivationCharge`'s: validate locally before anything
+ * leaves the browser, require a real public key, send only the token, pass only
+ * on the server's own answer, and keep the card typed in on a refusal.
+ */
+
+/** The host's card-entry providers — its design system and its card words. */
+export type CardSurface = ComponentType<{ children: ReactNode }>;
+
+/** The card + tax-id fields and the one button that runs the charge. */
+function ChargeForm({
+  verification,
+  amountLabel,
+  validateTaxId,
+}: {
+  verification: ActivationCharge;
+  amountLabel: string | null;
+  validateTaxId: (value: string) => string | undefined;
+}): JSX.Element {
+  const { taxId, actions } = useActivationCopy();
+  const { Input } = useCheckoutComponents();
+  const { card, setCard, fieldErrors, setFieldErrors, cpf, setCpf, cpfError, state } = verification;
+  const submitting = state.kind === 'submitting';
+
+  return (
+    <Stack spacing={2} data-testid="verify-charge-form">
+      <NewCardForm
+        card={card}
+        fieldErrors={fieldErrors}
+        brand={detectBrand(onlyDigits(card.number))}
+        setCard={setCard}
+        setFieldErrors={setFieldErrors}
+      />
+      <Input
+        label={taxId.label}
+        type="text"
+        inputMode="numeric"
+        variant="outlined"
+        size="md"
+        fullWidth
+        placeholder={taxId.placeholder}
+        value={formatCpf(cpf)}
+        error={Boolean(cpfError)}
+        helperText={cpfError ?? taxId.hint}
+        onChange={(event) => setCpf(onlyDigits(event.target.value))}
+        onBlur={() => validateTaxId(cpf)}
+        data-testid="verify-charge-cpf"
+      />
+      <Button
+        sx={{ ...BTN_PRIMARY_SX, width: '100%' }}
+        disabled={submitting}
+        onClick={() => void verification.submit()}
+        data-testid="verify-charge-submit"
+      >
+        {actions.chargeAndActivate(amountLabel)}
+      </Button>
+    </Stack>
+  );
+}
+
+/** What a settled card charge says — the only two ends this flow has. */
+function CardOutcome({
+  state,
+  amountLabel,
+  onRetry,
+}: {
+  state: ActivationCharge['state'];
+  amountLabel: string | null;
+  onRetry: () => void;
+}): JSX.Element | null {
+  if (state.kind === 'passed') {
+    return <PassedState amountLabel={amountLabel} refunded={state.refunded} onRetry={onRetry} />;
+  }
+  if (state.kind === 'failed') {
+    return (
+      <FailedState
+        reason={state.reason}
+        providerMessage={state.providerMessage}
+        onRetry={onRetry}
+      />
+    );
+  }
+  return null;
+}
+
+export function CardVerification({
+  verifyChargeUrl,
+  provider,
+  ownerEmail,
+  onVerified,
+  CardSurface: Surface,
+  validateTaxId,
+  formatAmount,
+}: {
+  verifyChargeUrl: string;
+  provider: string;
+  /** Who is paying — the signed-in owner. The host reads its own session. */
+  ownerEmail: string;
+  onVerified: () => void;
+  CardSurface: CardSurface;
+  validateTaxId: (value: string) => string | undefined;
+  formatAmount: (cents: number) => string;
+}): JSX.Element {
+  const copy = useActivationCopy();
+  const verification = useActivationCharge({
+    verifyChargeUrl,
+    provider,
+    email: ownerEmail,
+    onVerified,
+    copy: copy.charge,
+  });
+  // The verification endpoint answers the amount alongside the store's card
+  // key, and `useActivationCharge` reads both out of that one body — where this
+  // screen's origin asked the same URL a second time for the amount alone.
+  //
+  // `null` is the window before it has answered. Nothing guesses a cent there,
+  // because not every provider will take one, so the sentences below simply do
+  // not name an amount until there is one to name.
+  const amountLabel =
+    verification.amountCents === null ? null : formatAmount(verification.amountCents);
+  const settled = verification.state.kind === 'passed' || verification.state.kind === 'failed';
+
+  return (
+    <StepPanel dataTestId="verify-charge">
+      <Stack spacing={0.5}>
+        <Typography sx={{ fontSize: '14px', fontWeight: 650, color: T.ink }} component="h2">
+          {copy.intro.title}
+        </Typography>
+        <Typography sx={{ fontSize: '12.5px', color: T.ink3, lineHeight: 1.5 }}>
+          {copy.intro.cardBody(amountLabel)}
+        </Typography>
+      </Stack>
+
+      <CardOutcome state={verification.state} amountLabel={amountLabel} onRetry={verification.reset} />
+
+      {/*
+        No standing "provider is active" banner here.
+
+        It was rendered from `enabled` alone, which is a claim about a stored
+        flag and not about whether money moves — so a store whose charges were
+        all refused with `403 ACCESS_DENIED` was greeted with "you are
+        receiving through this provider" every time it reloaded, directly above
+        the form that had just disproven it. What a passing charge says is said
+        by `PassedState`, in this session, about a charge that actually
+        happened.
+      */}
+      {settled ? null : (
+        <Surface>
+          <ChargeForm
+            verification={verification}
+            amountLabel={amountLabel}
+            validateTaxId={validateTaxId}
+          />
+        </Surface>
+      )}
+    </StepPanel>
+  );
+}