@12-apps/payments-frontend 1.16.0 → 1.18.0

package/src/components/checkout/method-capability.ts

@@ -140,6 +140,51 @@ function toCardLink(link: CheckoutChainLink): CardChainLink {
   };
 }
 
+/**
+ * Everything the Google Pay button needs to mint a token (FUT-471), or `null`
+ * when the button must not render.
+ *
+ * Read off the chain HEAD only, like the checkout screen: the wallet token is
+ * minted against ONE gateway's `gatewayMerchantId`, so only the provider the
+ * walk tries first can charge it — a tail entry's declaration cannot be
+ * honoured from this browser.
+ *
+ * FAILS CLOSED, deliberately the opposite of `offeredMethods`' fail-open: a
+ * missing config only costs the buyer a button they still have the card form
+ * without, while rendering one on a store that cannot charge wallets sends a
+ * buyer through the wallet sheet into a guaranteed refusal. Every clause
+ * narrows toward NOT rendering: no config, no chain, a head that cannot CARD,
+ * no `GOOGLE_PAY` declaration, no gateway parameters, no merchant id.
+ */
+export function googlePayConfig(
+  config: CheckoutProviderConfig | null,
+): { gateway: string; gatewayMerchantId: string } | null {
+  const head = config?.chain?.[0];
+  if (!head?.methods.includes("CARD")) return null;
+  if (!head.wallets?.includes("GOOGLE_PAY")) return null;
+  const params = head.googlePay;
+  if (!params?.gatewayMerchantId) return null;
+  return { gateway: params.gateway, gatewayMerchantId: params.gatewayMerchantId };
+}
+
+/**
+ * Whether the chain head declares Apple Pay (FUT-472) — the capability half
+ * of the button's gate; the DEVICE half (`ApplePaySession` exists and can
+ * pay) is `applePaySupported()` in `apple-pay-button.tsx`, because it is a
+ * browser fact, not a store fact.
+ *
+ * FAILS CLOSED like {@link googlePayConfig}, and read off the HEAD for the
+ * same reason: the Apple token is decrypted with the head merchant's
+ * certificate, so only the provider the walk tries first can charge it.
+ * Unlike Google there are no client parameters to publish — merchant
+ * validation runs server-side through the host's port.
+ */
+export function applePayDeclared(config: CheckoutProviderConfig | null): boolean {
+  const head = config?.chain?.[0];
+  if (!head?.methods.includes("CARD")) return false;
+  return head.wallets?.includes("APPLE_PAY") ?? false;
+}
+
 /**
  * The methods the picker may offer, from the chain's declared capabilities
  * (FUT-698). `null` config — still loading, or a fetch blip — fails OPEN like

package/src/components/checkout/providers/pix-and-card.tsx

@@ -12,37 +12,22 @@
  */
 import type { JSX } from "react";
 
-import { CardView } from "../card-view";
-import { cardChain, cardTokenization } from "../method-capability";
 import { PixView } from "../pix-view";
+import { WalletCardPane } from "../wallet-pane";
 
 import type { ProviderCheckoutScreenProps } from "./types";
 
-export function PixAndCardScreen({
-  order,
-  buyer,
-  config,
-  tenantSlug,
-  onResolved,
-  pollIntervalMs,
-}: ProviderCheckoutScreenProps): JSX.Element | null {
+export function PixAndCardScreen(props: ProviderCheckoutScreenProps): JSX.Element | null {
+  const { order, onResolved, pollIntervalMs } = props;
   if (order?.method === "PIX") {
     return <PixView order={order} onResolved={onResolved} pollIntervalMs={pollIntervalMs} />;
   }
   if (order?.method === "CARD") {
-    return (
-      <CardView
-        order={order}
-        buyer={buyer}
-        providerConfig={cardTokenization(config)}
-        // The whole chain (FUT-563): one instrument is minted per provider so
-        // the charge survives the first one failing, with nothing re-typed.
-        providerChain={cardChain(config)}
-        tenantSlug={tenantSlug}
-        onResolved={onResolved}
-        pollIntervalMs={pollIntervalMs}
-      />
-    );
+    // The card pane, with its wallet fast lane above the form (FUT-471/472).
+    // The pane reads the chain itself (FUT-563: one instrument per provider,
+    // so the charge survives the first one failing with nothing re-typed) and
+    // renders exactly the old CardView for a store with no wallet.
+    return <WalletCardPane {...props} order={order} />;
   }
   // No order yet — the shell is still showing the picker, and raises one as
   // soon as a method is chosen.

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

@@ -52,6 +52,14 @@ export interface ProviderCheckoutScreenProps {
   tenantSlug?: string;
   /** The shell's polling cadence, passed through so tests can shorten it. */
   pollIntervalMs?: number;
+  /**
+   * The host's Apple Pay merchant-validation port (FUT-472): exchange the
+   * session's `validationURL` for an Apple merchant session, SERVER-SIDE —
+   * the merchant identity certificate must never reach a browser. Optional;
+   * absent, the Apple Pay sheet cannot start and the pane says so while the
+   * card form stays the way to pay.
+   */
+  validateApplePayMerchant?: (validationURL: string) => Promise<unknown>;
   /** A terminal status — the shell moves to Confirmação. */
   onResolved: (status: OrderStatus) => void;
 }

package/src/components/checkout/transport.ts

@@ -21,6 +21,7 @@ import { err, ok, type Result } from "../../result";
 import type {
   ChargeCardInput,
   ChargeOutcome,
+  ChargeWalletInput,
   CheckoutProviderConfig,
   OrderStatus,
 } from "./types";
@@ -45,11 +46,13 @@ export interface CheckoutTransport {
   headers?: () => HeadersInit | Promise<HeadersInit>;
 }
 
-/** The five calls the buyer checkout makes, pre-bound to a {@link CheckoutTransport}. */
+/** The six calls the buyer checkout makes, pre-bound to a {@link CheckoutTransport}. */
 export interface CheckoutClient {
   getConfig(tenantSlug: string): Promise<Result<CheckoutProviderConfig>>;
   getStatus(ref: string): Promise<Result<OrderStatus>>;
   charge(input: ChargeCardInput): Promise<Result<ChargeOutcome>>;
+  /** A wallet instrument against the same `/charge` route (FUT-471/472). */
+  chargeWallet(input: ChargeWalletInput): Promise<Result<ChargeOutcome>>;
   listInstruments(tenantSlug?: string): Promise<SavedCard[]>;
   refreshBrowserKey(input: { orderId: string }): Promise<Result<{ publicKey: string | null }>>;
 }
@@ -112,6 +115,36 @@ function ambientFetch(input: RequestInfo | URL, init?: RequestInit): Promise<Res
   return globalThis.fetch(input, init);
 }
 
+/**
+ * The FLAT card-charge body the shipped client has always sent. Pinned from
+ * both ends by `charge-wire.contract.test.ts`; nothing here may re-nest it.
+ */
+function flatChargeBody(input: ChargeCardInput): string {
+  return JSON.stringify({
+    orderId: input.orderId,
+    token: input.token,
+    // One instrument per provider (FUT-563) — the server hands each provider
+    // in the chain its own, which is what lets a card charge fail over.
+    ...(input.tokensByProvider ? { tokensByProvider: input.tokensByProvider } : {}),
+    saveCard: input.saveCard,
+    cardMeta: input.cardMeta,
+    taxId: input.taxId,
+  });
+}
+
+/**
+ * The same flat wire with `wallet` in place of `token` (FUT-471): the mount's
+ * draft reader takes either, and a body naming both would carry two
+ * instruments for one charge. Pinned by `wallet-wire.contract.test.ts`.
+ */
+function flatWalletBody(input: ChargeWalletInput): string {
+  return JSON.stringify({
+    orderId: input.orderId,
+    wallet: input.wallet,
+    taxId: input.taxId,
+  });
+}
+
 /**
  * The five checkout calls, bound to one transport.
  *
@@ -156,22 +189,10 @@ export function createCheckoutClient(transport: CheckoutTransport = {}): Checkou
       ),
 
     charge: (input) =>
-      call<ChargeOutcome>("/charge", {
-        method: "POST",
-        // The FLAT body the shipped client has always sent. Pinned from both
-        // ends by `charge-wire.contract.test.ts`; nothing here may re-nest it.
-        body: JSON.stringify({
-          orderId: input.orderId,
-          token: input.token,
-          // One instrument per provider (FUT-563) — the server hands each
-          // provider in the chain its own, which is what lets a card charge
-          // fail over.
-          ...(input.tokensByProvider ? { tokensByProvider: input.tokensByProvider } : {}),
-          saveCard: input.saveCard,
-          cardMeta: input.cardMeta,
-          taxId: input.taxId,
-        }),
-      }),
+      call<ChargeOutcome>("/charge", { method: "POST", body: flatChargeBody(input) }),
+
+    chargeWallet: (input) =>
+      call<ChargeOutcome>("/charge", { method: "POST", body: flatWalletBody(input) }),
 
     listInstruments: async (tenantSlug) => {
       // Scoped to the store when known (FUT-697): only cards the store's ACTIVE

package/src/components/checkout/types.ts

@@ -12,6 +12,14 @@
 /** Payment methods offered at checkout. Mirrors `Payment.method` (FUT-42). */
 export type PaymentMethod = "PIX" | "CARD";
 
+/**
+ * The digital wallets a chain entry can charge (FUT-471/472). Mirrors the
+ * backend's `WalletType` — a wallet is not a fourth method: it is another way
+ * of producing the CARD instrument, so it rides the CARD tile and the CARD
+ * charge.
+ */
+export type CheckoutWalletType = "GOOGLE_PAY" | "APPLE_PAY";
+
 /**
  * Order lifecycle, aligned with the FUT-43 backend:
  * - `AWAITING_PAYMENT` — order created, charge raised, not yet reconciled (the
@@ -198,6 +206,20 @@ export interface ChargeCardInput {
   taxId?: string;
 }
 
+/**
+ * Input to charge a WALLET instrument against an order (FUT-471/472) —
+ * `ChargeCardInput`'s wallet sibling, posted to the same `/charge` route. One
+ * shape for both wallets because the wire is one shape: `key` is whatever the
+ * wallet handed the browser (Google's `tokenizationData.token`, Apple's
+ * serialized `token.paymentData`), forwarded verbatim and never persisted.
+ */
+export interface ChargeWalletInput {
+  orderId: string;
+  wallet: { type: CheckoutWalletType; key: string };
+  /** Buyer CPF for the provider charge (`customer.tax_id`); never persisted. */
+  taxId?: string;
+}
+
 /** A buyer field a provider asks for, as `/config` publishes it (FUT-595). */
 export interface CheckoutCustomerField {
   key: "name" | "email" | "taxId" | "phone";
@@ -236,6 +258,25 @@ export interface CheckoutChainLink {
    * never shown a field for.
    */
   customerSchema?: CheckoutCustomerField[];
+  /**
+   * The digital wallets THIS entry's card charge accepts (FUT-471/472).
+   *
+   * Optional, and the DEGRADE DIRECTION IS CLOSED — the opposite of
+   * `customerSchema`'s above, because the stakes invert: a chain that asks for
+   * nothing produces a refused charge, but a wallet button on a store whose
+   * server cannot charge wallets produces a buyer who authorized a payment on
+   * the wallet sheet and was then refused. Absent (an older host) means NO
+   * wallet buttons, which is exactly what that host's charge route supports.
+   */
+  wallets?: CheckoutWalletType[];
+  /**
+   * Google Pay's `PAYMENT_GATEWAY` tokenizationSpecification parameters for
+   * THIS entry (FUT-471), or absent/`null` when it cannot run Google Pay.
+   * `gatewayMerchantId: null` means the connection carries no merchant id yet
+   * — the button must not render, because a token minted against a missing id
+   * charges nobody.
+   */
+  googlePay?: { gateway: string; gatewayMerchantId: string | null } | null;
   /**
    * The buyer screen THIS provider's flow needs (FUT-596) — an opaque id the
    * adapter declares and `providers/registry.ts` resolves to a component.

package/src/components/checkout/use-wallet-charge.ts

@@ -0,0 +1,129 @@
+import { useEffect, useState } from "react";
+
+import { useCheckoutClientApi } from "./client-context";
+import { UNRESOLVED_CODE } from "./failure-codes";
+import { rememberHostedOrder } from "./hosted-return";
+import { useCheckoutNavigate } from "./navigate-context";
+import type { BuyerInfo, CheckoutOrder, CheckoutWalletType, OrderStatus } from "./types";
+import { usePaymentPolling } from "./use-payment-polling";
+
+/**
+ * The submit half of a WALLET payment (FUT-471/472) — `useCardSubmit`'s
+ * sibling, minus everything a wallet does not have: no form to validate, no
+ * instrument to mint per provider (the wallet key is chain-head-bound, see the
+ * backend's `core/card-instrument.ts`), no vault opt-in. What remains is the
+ * same money path: charge → classify the outcome → poll for the async
+ * confirmation → bubble the terminal status up.
+ *
+ * One hook for BOTH wallets, because the wire is one shape — the buttons only
+ * differ in how they acquire the key.
+ */
+
+/**
+ * Where the wallet payment stands. `idle` renders the buttons and the card
+ * form; anything else replaces them — a live "pay" control under a charge that
+ * may already be holding the buyer's money is the double-payment invitation
+ * the card view already refuses to render.
+ */
+export type WalletPhase = "idle" | "charging" | "polling";
+
+/** Everything a wallet pane renders — state plus the one submit entry point. */
+export interface WalletCharge {
+  phase: WalletPhase;
+  /** The refusal to show above the form, when the charge came back refused. */
+  error: string | null;
+  /** The refusal's machine code — an UNRESOLVED charge is not a decline. */
+  errorCode: string | null;
+  /** The charge is unresolved: no pay control may render (FUT-563). */
+  unresolved: boolean;
+  pollError: string | null;
+  /** The healthy-poll cap elapsed while still AWAITING (FUT-191). */
+  pollTimedOut: boolean;
+  /**
+   * Charge the wallet's key. The button calls this once the sheet resolves.
+   * Resolves `true` when the charge was ACCEPTED — paid, confirming, or
+   * handed to the provider's page — and `false` on a refusal or decline, so a
+   * sheet that must be completed with a status (Apple's) can be honest.
+   */
+  payWithKey(type: CheckoutWalletType, key: string): Promise<boolean>;
+}
+
+/**
+ * Healthy-poll cap for the wallet AWAITING wait — the card path's own cap
+ * (FUT-191): 36 polls ≈ 90 s at the 2500 ms default interval.
+ */
+const WALLET_AWAITING_POLL_CAP = 36;
+
+/** The wallet charge state machine. See the module comment. */
+export function useWalletCharge(
+  order: CheckoutOrder,
+  buyer: BuyerInfo,
+  onResolved: (status: OrderStatus) => void,
+  pollIntervalMs = 2500,
+): WalletCharge {
+  const [phase, setPhase] = useState<WalletPhase>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [errorCode, setErrorCode] = useState<string | null>(null);
+  const client = useCheckoutClientApi();
+  const navigate = useCheckoutNavigate();
+
+  const { status, error: pollError, timedOut: pollTimedOut } = usePaymentPolling(order.orderId, {
+    enabled: phase === "polling",
+    intervalMs: pollIntervalMs,
+    maxHealthyPolls: WALLET_AWAITING_POLL_CAP,
+  });
+
+  useEffect(() => {
+    if (status && status !== "AWAITING_PAYMENT") onResolved(status);
+  }, [status, onResolved]);
+
+  const payWithKey = async (type: CheckoutWalletType, key: string): Promise<boolean> => {
+    setError(null);
+    setErrorCode(null);
+    setPhase("charging");
+
+    const charged = await client.chargeWallet({
+      orderId: order.orderId,
+      wallet: { type, key },
+      // The CPF the Dados step collected — the provider's required-field gate
+      // reads it from the charge, the payable row has nowhere to keep it.
+      taxId: buyer.taxId,
+    });
+    if (!charged.ok) {
+      setError(charged.error);
+      setErrorCode(charged.code ?? null);
+      // Back to idle — but an UNRESOLVED code sets `unresolved`, and the pane
+      // reads that as "render NO pay control" (FUT-563): some provider may be
+      // holding the money, and a live button under "não pague de novo" is what
+      // the buyer's thumb reaches for.
+      setPhase("idle");
+      return false;
+    }
+    // A provider that demands its own page to finish (redirect 3-D Secure,
+    // FUT-698): park the order and hand the buyer over, exactly as the card
+    // path does. `phase` stays as-is — the tab is navigating away.
+    if (charged.data.hostedCheckoutUrl) {
+      rememberHostedOrder(order);
+      navigate(charged.data.hostedCheckoutUrl);
+      return true;
+    }
+    // A business outcome (declined → FAILED) shows the status screen; an
+    // accepted charge begins polling for the async confirmation.
+    if (charged.data.status !== "AWAITING_PAYMENT") {
+      onResolved(charged.data.status);
+      return charged.data.status === "PAID";
+    }
+    setPhase("polling");
+    return true;
+  };
+
+  return {
+    phase,
+    error,
+    errorCode,
+    unresolved: errorCode === UNRESOLVED_CODE,
+    pollError,
+    pollTimedOut,
+    payWithKey,
+  };
+}

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

@@ -0,0 +1,187 @@
+import { Box, Divider } from "@mui/material";
+import { useState, type JSX } from "react";
+
+import { ApplePayButton, applePaySupported } from "./apple-pay-button";
+import { CardView } from "./card-view";
+import { GooglePayButton } from "./google-pay-button";
+import {
+  applePayDeclared,
+  cardChain,
+  cardTokenization,
+  googlePayConfig,
+} from "./method-capability";
+import type { ProviderCheckoutScreenProps } from "./providers/types";
+import { useCheckoutComponents } from "./ui";
+import { useWalletCharge, type WalletCharge } from "./use-wallet-charge";
+
+/**
+ * The CARD pane with its wallet fast lane (FUT-471/472).
+ *
+ * A wallet is not a fourth method — it is another way of producing the CARD
+ * instrument — so it renders INSIDE the card pane, above the form, and only
+ * when the chain head declared the wallet capability (both gates fail closed:
+ * `googlePayConfig` / `applePayDeclared` + the device's own support). A store
+ * with no wallet renders exactly the card view it always did.
+ *
+ * One pane owns BOTH submit paths' visibility so they cannot invite a double
+ * payment: while a wallet charge is in flight or being confirmed, the card
+ * form and every wallet button are REPLACED by the processing state — the same
+ * rule `card-view.tsx` applies to its own pay bar, one level up.
+ */
+
+/** The screen props narrowed to a raised order — what this pane requires. */
+type WalletPaneProps = ProviderCheckoutScreenProps & {
+  order: NonNullable<ProviderCheckoutScreenProps["order"]>;
+};
+
+/** Post-submit confirmation, error > timeout > spinner — the card view's order. */
+function WalletProcessing({ wallet }: { wallet: WalletCharge }): JSX.Element {
+  const { Alert, LoadingState } = useCheckoutComponents();
+  if (wallet.pollError) {
+    return (
+      <Alert
+        variant="danger"
+        title="Não foi possível confirmar o pagamento"
+        description={wallet.pollError}
+        showIcon
+        data-testid="wallet-poll-error"
+      />
+    );
+  }
+  if (wallet.pollTimedOut) {
+    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."
+        showIcon
+        data-testid="wallet-poll-timeout"
+      />
+    );
+  }
+  return (
+    <LoadingState
+      variant="spinner"
+      size="md"
+      message="Processando pagamento…"
+      dataTestId="wallet-processing"
+    />
+  );
+}
+
+/**
+ * An UNRESOLVED wallet charge (FUT-563): some provider may be holding the
+ * buyer's money, so the pane shows the warning and NO pay control of any kind
+ * — no wallet button, no card form. Same presentation rule as the card view's
+ * own unresolved state.
+ */
+function WalletUnresolved({ message }: { message: string }): JSX.Element {
+  const { Alert } = useCheckoutComponents();
+  return (
+    <Alert
+      variant="warning"
+      title="Estamos confirmando seu pagamento"
+      description={message}
+      showIcon
+      data-testid="wallet-unresolved"
+    />
+  );
+}
+
+/**
+ * The wallet buttons the store's chain head supports, or null when there are
+ * none to offer. The divider renders only once SOMETHING sits above it: Apple
+ * availability is known synchronously (feature-detect), Google's arrives when
+ * `isReadyToPay` approves (`onReady`) — a bare "ou pague com cartão" with
+ * nothing above it would caption an empty space.
+ */
+function WalletButtons({
+  props,
+  wallet,
+  onSheetError,
+}: {
+  props: WalletPaneProps;
+  wallet: WalletCharge;
+  onSheetError: (message: string) => void;
+}): JSX.Element | null {
+  const { Text } = useCheckoutComponents();
+  const [googleReady, setGoogleReady] = useState(false);
+  const googlePay = googlePayConfig(props.config);
+  const applePay = applePayDeclared(props.config) && applePaySupported();
+  if (!googlePay && !applePay) return null;
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
+      {applePay ? (
+        <ApplePayButton
+          order={props.order}
+          onAuthorized={(key) => wallet.payWithKey("APPLE_PAY", key)}
+          onError={onSheetError}
+          validateMerchant={props.validateApplePayMerchant}
+        />
+      ) : null}
+      {googlePay ? (
+        <GooglePayButton
+          order={props.order}
+          params={googlePay}
+          onKey={(key) => void wallet.payWithKey("GOOGLE_PAY", key)}
+          onError={onSheetError}
+          onReady={() => setGoogleReady(true)}
+        />
+      ) : null}
+      {applePay || googleReady ? (
+        <Divider>
+          <Text variant="caption" size="xs" color="secondary" as="span">
+            ou pague com cartão
+          </Text>
+        </Divider>
+      ) : null}
+    </Box>
+  );
+}
+
+/** The CARD pane: wallet fast lane above, the card form below. */
+export function WalletCardPane(props: WalletPaneProps): JSX.Element {
+  const { Alert } = useCheckoutComponents();
+  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
+  // refused, merchant validation unavailable, the sheet errored) — shown
+  // beside the form, which stays usable.
+  const [sheetError, setSheetError] = useState<string | null>(null);
+
+  if (wallet.phase !== "idle") return <WalletProcessing wallet={wallet} />;
+  if (wallet.unresolved) return <WalletUnresolved message={wallet.error ?? ""} />;
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+      <WalletButtons props={props} wallet={wallet} onSheetError={setSheetError} />
+      {wallet.error ? (
+        <Alert
+          variant="danger"
+          title="Não foi possível pagar"
+          description={wallet.error}
+          showIcon
+          data-testid="wallet-error"
+        />
+      ) : null}
+      {sheetError && !wallet.error ? (
+        <Alert
+          variant="danger"
+          title="Não foi possível pagar"
+          description={sheetError}
+          showIcon
+          data-testid="wallet-sheet-error"
+        />
+      ) : null}
+      <CardView
+        order={order}
+        buyer={buyer}
+        providerConfig={cardTokenization(config)}
+        providerChain={cardChain(config)}
+        tenantSlug={tenantSlug}
+        onResolved={onResolved}
+        pollIntervalMs={pollIntervalMs}
+      />
+    </Box>
+  );
+}

package/src/components/platform/ConnectApplicationPanel.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { Box, Button, Stack, Typography } from '@mui/material';
+import type { ReactNode } from 'react';
+
+import type { ConnectApplicationReport, PaymentEnvironment } from '@12-apps/payments-backend';
+
+import { CARD_SX, ConnectEnvironmentCard } from './ConnectEnvironmentCard';
+
+/**
+ * The platform's PagBank Connect application, per environment (FUT-479,
+ * packaged by FUT-573).
+ *
+ * The application every store authorizes against is registered by hand, so
+ * nothing in the product could say what is registered, in which environment,
+ * or with which redirect URI. This panel is the consult
+ * (`GET /oauth2/application/{client_id}`) made permanent: per environment —
+ * sandbox and produção are separate applications — it shows what PagBank has
+ * on file, including the exact redirect_uri, and flags a mismatch against the
+ * callback the deployment actually uses (a mismatch is a silent OAuth
+ * failure). Read-only: creating an application stays a deliberate manual act.
+ *
+ * Dumb by design: the HOST fetches the report from its own mounted route
+ * (`consultConnectApplications` in `@12-apps/payments-backend`) and passes it
+ * here, so the host page is a thin mount — page chrome, auth and loading
+ * belong to the host; the screen itself lives in this package.
+ */
+export interface ConnectApplicationPanelProps {
+  /** The consult report, as the backend's `consultConnectApplications` answers. */
+  report: ConnectApplicationReport;
+  /** Re-run the consult. Omitted, the refresh button is not rendered. */
+  onRefresh?: () => void;
+  /**
+   * Which host-side variables feed one environment's application — the host's
+   * own configuration surface, rendered as a collapsible per-environment help
+   * when provided.
+   */
+  configVarsFor?: (environment: PaymentEnvironment) => string[];
+}
+
+export function ConnectApplicationPanel(props: ConnectApplicationPanelProps): ReactNode {
+  const { report, onRefresh, configVarsFor } = props;
+  return (
+    <Stack spacing={2} data-testid="connect-application-panel">
+      <Stack spacing={0.5} data-testid="connect-expected-redirect" sx={CARD_SX}>
+        <Typography variant="caption" color="text.secondary" fontWeight={600}>
+          Callback desta instalação (o valor que precisa estar registrado)
+        </Typography>
+        <Box
+          component="code"
+          sx={{ fontFamily: 'monospace', fontSize: 13, wordBreak: 'break-all' }}
+        >
+          {report.expectedRedirectUri}
+        </Box>
+      </Stack>
+      {report.environments.map((status) => (
+        <ConnectEnvironmentCard
+          key={status.environment}
+          status={status}
+          configVars={configVarsFor?.(status.environment)}
+        />
+      ))}
+      {onRefresh ? (
+        <Box>
+          <Button
+            variant="outlined"
+            size="small"
+            onClick={() => onRefresh()}
+            data-testid="connect-refresh"
+          >
+            Consultar novamente
+          </Button>
+        </Box>
+      ) : null}
+    </Stack>
+  );
+}