@12-apps/payments-frontend 3.34.4 → 3.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.34.4",
+  "version": "3.36.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.",

package/src/card/fields.tsx

@@ -3,6 +3,10 @@ import type { JSX } from "react";
 
 import { useCheckoutCopy } from "../components/checkout/copy-context";
 import { useCheckoutComponents } from "../components/checkout/ui";
+import {
+  StickyPayBar,
+  useCheckoutLayout,
+} from "../components/checkout/payment-step-layout";
 
 import {
   cvvLength,
@@ -110,7 +114,9 @@ function ExpiryCvvFields({
   const { Input } = useCheckoutComponents();
   const copy = useCheckoutCopy().card.fields;
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    // Side by side while "Validade (MM/AA)" fits whole; stacked below that
+    // (a phone's Pagamento card, FUT-3525) rather than cut to "Validade (MM/…".
+    <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2, "& > *": { flex: "1 1 170px" } }}>
       <Input
         label={copy.expiryLabel}
         type="text"
@@ -216,7 +222,14 @@ export function NewCardForm({
   );
 }
 
-/** Sticky primary "Pagar" action — pinned to the bottom of the viewport on mobile. */
+/**
+ * The primary "Pagar" action.
+ *
+ * On the Pagamento step it is the step's pay bar (FUT-3525): pinned to the
+ * bottom of the viewport with the total beside it on a phone, in the form on
+ * a computer. Composed anywhere else it keeps the look it always had —
+ * pinned to the bottom on a small screen, in the form on a wide one.
+ */
 export function CardPayBar({
   totalLabel,
   submitting,
@@ -227,6 +240,23 @@ export function CardPayBar({
   onPay: () => void;
 }): JSX.Element {
   const { Button } = useCheckoutComponents();
+  const inStep = useCheckoutLayout() !== null;
+  const button = (
+    <Button
+      variant="solid"
+      color="primary"
+      size="lg"
+      fullWidth
+      loading={submitting}
+      disabled={submitting}
+      onClick={onPay}
+      dataTestId="card-pay"
+    >
+      Pagar {totalLabel}
+    </Button>
+  );
+  if (inStep)
+    return <StickyPayBar dataTestId="card-pay-bar">{button}</StickyPayBar>;
   return (
     <Box
       data-testid="card-pay-bar"
@@ -242,18 +272,7 @@ export function CardPayBar({
         borderColor: "divider",
       }}
     >
-      <Button
-        variant="solid"
-        color="primary"
-        size="lg"
-        fullWidth
-        loading={submitting}
-        disabled={submitting}
-        onClick={onPay}
-        dataTestId="card-pay"
-      >
-        Pagar {totalLabel}
-      </Button>
+      {button}
     </Box>
   );
 }

package/src/components/checkout/card-view.tsx

@@ -8,15 +8,30 @@ import {
   type CardTokenizationConfig,
 } from "../../card";
 
+import { useRefreshOnCartChanged } from "./cart-changed";
 import { useCheckoutCopy } from "./copy-context";
 import { UNRESOLVED_CODE } from "./failure-codes";
 import { StalledWait } from "./stalled-wait";
 import type { CheckoutBasketIdentity } from "./basket";
 import type { CardChainLink } from "./method-capability";
 import type { BuyerInfo, CheckoutOrder, OnCheckoutResolved } from "./types";
+import { useCheckoutLayout } from "./payment-step-layout";
 import { useCheckoutComponents } from "./ui";
 import { useCardCheckout, type CardCheckout } from "./use-card-checkout";
 
+/** The pane's heading — left out inside the Pagamento step, where the "Cartão" tab names the pane (FUT-3525). */
+function CardHeading(): JSX.Element | null {
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.card;
+  const inStep = useCheckoutLayout() !== null;
+  if (inStep) return null;
+  return (
+    <Text variant="heading" size="md" weight="bold" as="h2">
+      {copy.heading}
+    </Text>
+  );
+}
+
 /**
  * Post-submit confirmation state: timeout > error > spinner.
  *
@@ -179,8 +194,6 @@ export function CardView({
    */
   basket?: CheckoutBasketIdentity;
 }): JSX.Element {
-  const { Text } = useCheckoutComponents();
-  const copy = useCheckoutCopy().screens.card;
   const cc = useCardCheckout(
     order,
     buyer,
@@ -192,21 +205,22 @@ export function CardView({
     freshInstrument,
     { tenantSlug, basket },
   );
-  // A charge NOBODY can confirm yet is not a decline (FUT-563). Some provider
-  // may be holding the buyer's money, so it gets its own presentation: the
-  // danger heading "Não foi possível pagar" contradicts the body's "não pague
-  // de novo" and pushes the buyer toward exactly the retry it forbids.
+  // A charge NOBODY can confirm yet is not a decline (FUT-563): a provider may
+  // hold the money, and "Não foi possível pagar" over "não pague de novo"
+  // pushes the buyer toward exactly the retry it forbids.
   const unresolved = cc.errorCode === UNRESOLVED_CODE;
+  useRefreshOnCartChanged(cc.errorCode); // re-priced by the host (FUT-1139)
 
   if (cc.submitted) {
     return <SubmittedState card={cc} />;
   }
 
   return (
-    <Box data-testid="card-view" sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-      <Text variant="heading" size="md" weight="bold" as="h2">
-        {copy.heading}
-      </Text>
+    <Box
+      data-testid="card-view"
+      sx={{ display: "flex", flexDirection: "column", gap: 2 }}
+    >
+      <CardHeading />
 
       <CardInstrumentFields card={cc} />
 

package/src/components/checkout/cart-changed.tsx

@@ -0,0 +1,273 @@
+import { Box } from "@mui/material";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type JSX,
+  type ReactNode,
+} from "react";
+
+import type { CheckoutBasketIdentity } from "./basket";
+import { useCheckoutCopy } from "./copy-context";
+import type {
+  BuyerInfo,
+  CheckoutOrder,
+  CreateOrderRequest,
+  CreateOrderResult,
+  PaymentMethod,
+} from "./types";
+import { useCheckoutComponents } from "./ui";
+
+/**
+ * THE CART MOVED UNDER A PREPARED PAYMENT (FUT-1139).
+ *
+ * An order is raised the moment the buyer picks a method, and it prices the
+ * cart as it stood THEN. Another tab can add a line, a store can move a price,
+ * a product can stop selling — and the card charge or the PIX code on screen
+ * still asks for the old amount. Paying it settles the old order and the
+ * server closes the cart, so whatever changed was neither charged nor kept.
+ *
+ * Two halves, both here:
+ *
+ * - the SERVER refuses a card charge whose order no longer matches the cart,
+ *   with {@link CART_CHANGED_CODE}, after re-pricing the order to the cart as it
+ *   stands. The card form then re-reads that order, so the pay bar shows the
+ *   amount that will actually be charged before the buyer presses it again;
+ * - the SCREEN notices on its own that the basket it was raised from is not the
+ *   basket in front of it (the host's signature, `./basket.ts`), and says so
+ *   with one control that brings the payment up to date. That is the only
+ *   warning a PIX buyer can get: a QR code is paid outside the app.
+ */
+
+/** The refusal a host answers when the order no longer prices the cart. */
+export const CART_CHANGED_CODE = "CART_CHANGED";
+
+interface RaisedFrom {
+  order: CheckoutOrder;
+  signature: string | null;
+}
+
+/**
+ * Whether the basket in front of the checkout is no longer the one `order` was
+ * raised from.
+ *
+ * The basket is recorded when the ORDER changes — a re-raise or a refresh
+ * hands back a new object, so it is re-recorded and the warning clears — and
+ * only once the host's cart has answered (`ready`): a loading cart reports the
+ * EMPTY signature, and recording that would read every real cart as changed.
+ * A host that passes no basket never sees the warning, which is the behaviour
+ * before this existed.
+ */
+export function useBasketChanged(
+  order: CheckoutOrder | null,
+  basket: CheckoutBasketIdentity | undefined,
+): boolean {
+  const [raised, setRaised] = useState<RaisedFrom | null>(null);
+  const ready = basket?.ready === true;
+  const signature = basket?.signature ?? null;
+  useEffect(() => {
+    setRaised((prev) => {
+      if (order === null) return null;
+      if (prev?.order === order || !ready) return prev;
+      return { order, signature };
+    });
+    // A cart change re-runs this and keeps `prev`: only a NEW order records, so
+    // the raised basket never follows the cart it is compared with.
+  }, [order, ready, signature]);
+  if (order === null || raised === null || raised.order !== order || !ready) return false;
+  return raised.signature !== signature;
+}
+
+/** The step's "bring this payment up to date", with what the buyer must see of it. */
+export interface OrderRefresh {
+  run: () => void;
+  /** A refresh is on its way — the control waits rather than firing twice. */
+  pending: boolean;
+  /** The last refresh failed, in the host's words; null otherwise. */
+  error: string | null;
+}
+
+/**
+ * Re-price the order IN PLACE: ask the host for the order again and swap it in
+ * without dropping the one on screen first.
+ *
+ * Unlike raising a payment (`./start-payment.ts`), nothing is cleared before
+ * the answer: the card form keeps what the buyer typed, and the refusal that
+ * sent us here stays on screen while the amount under it corrects itself. The
+ * answer is routed exactly as a raise is (`route`, which is
+ * `routeRaisedOrder`), so a re-priced order that is already PAID or must finish
+ * on the provider's page goes where a raised one would.
+ *
+ * Three guards, each against something a review found:
+ *
+ * - one refresh at a time — a second tap while one is out does nothing;
+ * - an answer for an order the screen has moved on from (the buyer switched
+ *   method, or raised the payment again) is DROPPED rather than resurrected;
+ * - a failure is KEPT here and shown by {@link CartChangedBoundary}, because the
+ *   step's own create-error slot is hidden whenever an order is on screen.
+ */
+export function useOrderRefresh(input: {
+  order: CheckoutOrder | null;
+  buyer: BuyerInfo;
+  saveProfile: boolean;
+  createOrder: (request: CreateOrderRequest) => Promise<CreateOrderResult>;
+  route: (order: CheckoutOrder) => void;
+}): OrderRefresh {
+  const { order, buyer, saveProfile, createOrder, route } = input;
+  const offline = useCheckoutCopy().screens.transport.offline;
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const current = useRef(order);
+  const inFlight = useRef(false);
+  useEffect(() => {
+    current.current = order;
+  }, [order]);
+  // A failure is about the order it was raised for: once another is on screen
+  // (a method switch, a fresh raise) it is no longer true, and must not stay up.
+  const orderId = order?.orderId;
+  const method = order?.method;
+  useEffect(() => {
+    setError(null);
+  }, [orderId, method]);
+  const run = useCallback(() => {
+    if (!order || inFlight.current) return;
+    inFlight.current = true;
+    setPending(true);
+    setError(null);
+    void createOrder({ method: order.method, buyer, saveProfile })
+      .catch((): CreateOrderResult => ({ ok: false, error: { code: "NETWORK", message: offline, field: null } }))
+      .then((result) => {
+        inFlight.current = false;
+        setPending(false);
+        // The same order still on screen — by id and method, since a re-priced
+        // order comes back as a new object for the same id.
+        const now = current.current;
+        if (!now || now.orderId !== order.orderId || now.method !== order.method) return;
+        if (!result.ok) setError(result.error.message);
+        else route(result.data);
+      });
+  }, [order, buyer, saveProfile, createOrder, route, offline]);
+  return { run, pending, error };
+}
+
+/**
+ * How this step brings a payment up to date with the cart (FUT-1139): a PIX
+ * code is minted again — the amount is IN the code — and a card order is
+ * re-priced in place so the form keeps what was typed.
+ */
+export function paymentRefresh(
+  order: CheckoutOrder | null,
+  onGenerate: (method: PaymentMethod) => void,
+  onRefreshOrder: (() => void) | undefined,
+): (() => void) | null {
+  if (!order) return null;
+  if (order.method === "CARD" && onRefreshOrder) return onRefreshOrder;
+  return () => onGenerate(order.method);
+}
+
+const PaymentRefreshContext = createContext<(() => void) | null>(null);
+
+/** Hands the payment panes the step's "bring this payment up to date". */
+export function PaymentRefreshProvider({
+  refresh,
+  children,
+}: {
+  refresh: (() => void) | null;
+  children: ReactNode;
+}): JSX.Element {
+  return <PaymentRefreshContext.Provider value={refresh}>{children}</PaymentRefreshContext.Provider>;
+}
+
+/**
+ * The card pane's half: a charge the host refused with
+ * {@link CART_CHANGED_CODE} re-reads the order, once per refusal.
+ */
+export function useRefreshOnCartChanged(errorCode: string | null): void {
+  const refresh = useContext(PaymentRefreshContext);
+  // Held in a ref: the step hands down a fresh closure on every render, and
+  // keying the effect on it would re-fire the refresh after each re-price for
+  // as long as the refusal stays on screen.
+  const latest = useRef(refresh);
+  useEffect(() => {
+    latest.current = refresh;
+  }, [refresh]);
+  useEffect(() => {
+    if (errorCode === CART_CHANGED_CODE) latest.current?.();
+  }, [errorCode]);
+}
+
+/**
+ * The payment pane, with the step's warning above it when the cart moved, and
+ * the refresh handed down to the card form. Nothing changes on screen while the
+ * basket is the one the order was raised from.
+ */
+export function CartChangedBoundary({
+  order,
+  basket,
+  creating,
+  onGenerate,
+  refresh,
+  children,
+}: {
+  order: CheckoutOrder | null;
+  /** Absent for a settlement: it pays a balance, not the cart, so its basket is no signal. */
+  basket: CheckoutBasketIdentity | undefined;
+  creating: boolean;
+  onGenerate: (method: PaymentMethod) => void;
+  refresh: OrderRefresh | undefined;
+  children: ReactNode;
+}): JSX.Element {
+  const changed = useBasketChanged(order, basket) && !creating;
+  const run = paymentRefresh(order, onGenerate, refresh?.run);
+  const pending = refresh?.pending ?? false;
+  const error = refresh?.error ?? null;
+  // ONE tree shape whether or not the warning shows: wrapping the pane only
+  // while it does would remount the card form the moment the refresh lands,
+  // dropping what the buyer typed and the refusal that explains the new total.
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
+      {(changed || error) && run ? <CartChangedNotice onRefresh={run} pending={pending} error={error} /> : null}
+      <PaymentRefreshProvider refresh={run}>{children}</PaymentRefreshProvider>
+    </Box>
+  );
+}
+
+/** "Seu carrinho mudou" — what the step says, and the one thing to do about it. */
+function CartChangedNotice({
+  onRefresh,
+  pending = false,
+  error = null,
+}: {
+  onRefresh: () => void;
+  pending?: boolean;
+  /** A refresh that failed, in the host's words: said, with the same control to try again. */
+  error?: string | null;
+}): JSX.Element {
+  const { Alert, Button } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.cartChanged;
+  return (
+    <Box data-testid="checkout-cart-changed" sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
+      {error ? (
+        <Alert variant="danger" title={copy.refreshFailed} description={error} showIcon data-testid="checkout-cart-changed-error" />
+      ) : (
+        <Alert variant="warning" title={copy.heading} description={copy.support} showIcon />
+      )}
+      <Box>
+        <Button
+          variant="solid"
+          color="primary"
+          size="md"
+          onClick={onRefresh}
+          loading={pending}
+          disabled={pending}
+          dataTestId="checkout-cart-changed-refresh"
+        >
+          {copy.refreshAction}
+        </Button>
+      </Box>
+    </Box>
+  );
+}

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

@@ -1,29 +1,20 @@
-import { Box } from "@mui/material";
 import { useMemo, type JSX, type ReactNode } from "react";
 
 import type { CheckoutBasketIdentity } from "./basket";
 import { buyerFieldsFor } from "./buyer-fields";
 import { EmptyCart, PaymentStep } from "./checkout-steps";
 import { DadosStep } from "./dados-step";
-import { ArrowBackIcon } from "./icons";
 import { PaymentStatus } from "./payment-status";
 import type { BackActionEmphasis } from "./payment-status-parts";
 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 { CheckoutComponentsProvider, type CheckoutComponents } from "./ui";
 import type { CheckoutViewCopy } from "./view-copy";
-import { STEP_COLUMN_MAX } from "./payment-step-layout";
+import { CheckoutFrame, FlowHeader } from "./checkout-frame";
+import type { CheckoutDeliverySummary, CheckoutSummaryLine } from "./payment-summary";
 import { useCheckoutController, type CheckoutHostPorts } from "./use-checkout-controller";
 
-/** Step ids are the flow's own contract; the labels beside them are host copy. */
-function stepperSteps(copy: CheckoutViewCopy): { id: string; label: string }[] {
-  return [
-    { id: "dados", label: copy.steps.dados },
-    { id: "payment", label: copy.steps.payment },
-    { id: "status", label: copy.steps.status },
-  ];
-}
 
 /** What the flow reads off the host's cart — display facts, never money math. */
 export interface CheckoutCartView {
@@ -33,6 +24,19 @@ export interface CheckoutCartView {
   totalItems: number;
   /** Host-rendered discount itemization under the pay-bar total (FUT-246). */
   discountLines?: ReactNode;
+  /**
+   * The cart's lines, worded by the host, for the order summary the Pagamento
+   * step shows beside the payment on a computer (FUT-3525). Absent, the
+   * summary shows the total alone.
+   */
+  lines?: CheckoutSummaryLine[];
+  /**
+   * Where the order is delivered, and the host's way back to change it — set
+   * only for a delivery (FUT-3525). Absent, no address is shown.
+   */
+  delivery?: CheckoutDeliverySummary;
+  /** The host's note control, shown in the Pagamento step's summary (FUT-3525). */
+  orderNote?: ReactNode;
   /**
    * WHICH basket this is, so a payment raised from another one cannot resume
    * itself over it (FUT-1213).
@@ -147,36 +151,6 @@ function statusTotalLabel(
   return order?.totalLabel ?? settlement?.totalLabel ?? cart.totalLabel;
 }
 
-/**
- * The slim checkout header — the flow's only nav: a step-aware back link
- * (Pagamento → Dados, else the menu).
- *
- * Deliberately nothing else. A "limpar carrinho" trash used to sit on the right
- * of the Dados step; it was removed because emptying the cart is a CART action
- * and belongs where the cart is edited — the drawer, which already offers a
- * per-line remove. Offering it here put a destructive control next to the form
- * a buyer is filling in, one tap away from the field they are typing into.
- */
-function CheckoutHeader({ copy, step, onBack }: { copy: CheckoutViewCopy; step: string; onBack: () => void }): JSX.Element {
-  const { Button } = useCheckoutComponents();
-  return (
-    <Box sx={{ minHeight: 36, display: "flex", alignItems: "center", gap: 1 }}>
-      <Button variant="text" color="neutral" size="sm" icon={<ArrowBackIcon fontSize="small" />} iconPosition="left" onClick={onBack} dataTestId="checkout-back">
-        {step === "dados" ? copy.dados.keepShopping : copy.dados.back}
-      </Button>
-    </Box>
-  );
-}
-
-/** Compact 50px progress header so the form stays above the fold on mobile. */
-function ProgressHeader({ copy, step, completed }: { copy: CheckoutViewCopy; step: string; completed: Set<string> }): JSX.Element {
-  const { Stepper } = useCheckoutComponents();
-  return (
-    <Box sx={{ height: 50, display: "flex", flexDirection: "column", justifyContent: "center" }}>
-      <Stepper steps={stepperSteps(copy)} activeId={step} completed={completed} orientation="horizontal" size="sm" data-testid="checkout-stepper" />
-    </Box>
-  );
-}
 
 /**
  * The 3-step flow body, below the slot provider. Ported from the storefront's
@@ -297,6 +271,7 @@ function PagamentoStep({
       errorField={c.errorField}
       errorCode={c.errorCode}
       onGenerate={(chosen) => void c.startPayment(chosen)}
+      refresh={c.refresh}
       onUseEmail={c.payWithEmail}
       // Set only for a skipped-Dados flow (the controller decides); the payer
       // block hides itself when it is absent.
@@ -307,8 +282,11 @@ function PagamentoStep({
       cartTotals={cart}
       totalOverride={settlementTotalOverride(settlement)}
       discountLines={cart.discountLines}
-      // Retrying a refused card: the saved card that failed is not chosen for
-      // them again (FUT-1145).
+      // The order around the payment, for the summary (FUT-3525).
+      lines={cart.lines}
+      delivery={cart.delivery}
+      orderNote={cart.orderNote}
+      // Retrying a refused card: the failed saved card is not chosen again (FUT-1145).
       freshInstrument={c.freshInstrument}
       // The card path parks an order of its own for a 3-D Secure challenge, so
       // it needs the same basket the flow was mounted for (FUT-1213).
@@ -341,46 +319,52 @@ function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Ele
   }
 
   return (
-    // Pagamento alone takes the host's full width (its PIX pane, FUT-3367).
-    <Box sx={{ display: "flex", flexDirection: "column", gap: { xs: 2, sm: 3 }, width: "100%", mx: "auto", maxWidth: c.step === "payment" ? "none" : STEP_COLUMN_MAX }}>
-      <CheckoutHeader copy={copy} step={c.step} onBack={c.back} />
-
-      <ProgressHeader copy={copy} step={c.step} completed={c.completed} />
+    <CheckoutFrame payment={c.step === "payment"}>
+      <FlowHeader copy={copy} step={c.step} completed={c.completed} onBack={c.back} />
 
-      {c.step === "dados" ? (
-        <DadosStep
-          copy={copy.dados}
-          buyer={c.buyer}
-          onBuyerChange={c.setBuyer}
-          saveProfile={c.saveProfile}
-          onSaveProfileChange={c.setSaveProfile}
-          createError={c.createError}
-          errorField={c.errorField}
-          onContinue={c.goToPayment}
-          cartTotals={cart}
-          buyerFields={buyerFields}
-          discountLines={cart.discountLines}
-          totalOverride={settlementTotalOverride(settlement)}
-        />
-      ) : null}
+          {c.step === "dados" ? (
+            <DadosStep
+              copy={copy.dados}
+              buyer={c.buyer}
+              onBuyerChange={c.setBuyer}
+              saveProfile={c.saveProfile}
+              onSaveProfileChange={c.setSaveProfile}
+              createError={c.createError}
+              errorField={c.errorField}
+              onContinue={c.goToPayment}
+              cartTotals={cart}
+              buyerFields={buyerFields}
+              discountLines={cart.discountLines}
+              totalOverride={settlementTotalOverride(settlement)}
+            />
+          ) : null}
 
-      {c.step === "payment" ? (
-        <OneClickProvider armed={armed}>
-          <PagamentoStep
-            c={c}
-            cart={cart}
-            settlement={settlement}
-            providerConfig={providerConfig}
-            tenantSlug={tenantSlug}
-            validateApplePayMerchant={validateApplePayMerchant}
-          />
-        </OneClickProvider>
-      ) : null}
+          {c.step === "payment" ? (
+            <OneClickProvider armed={armed}>
+              <PagamentoStep
+                c={c}
+                cart={cart}
+                settlement={settlement}
+                providerConfig={providerConfig}
+                tenantSlug={tenantSlug}
+                validateApplePayMerchant={validateApplePayMerchant}
+              />
+            </OneClickProvider>
+          ) : null}
 
-      {c.step === "status" ? (
-        <StatusStep copy={copy} c={c} settlement={settlement} cart={cart} confirmationExtra={confirmationExtra} confirmationHero={confirmationHero} confirmationFooter={confirmationFooter} backActionEmphasis={backActionEmphasis} />
-      ) : null}
-    </Box>
+          {c.step === "status" ? (
+            <StatusStep
+              copy={copy}
+              c={c}
+              settlement={settlement}
+              cart={cart}
+              confirmationExtra={confirmationExtra}
+              confirmationHero={confirmationHero}
+              confirmationFooter={confirmationFooter}
+              backActionEmphasis={backActionEmphasis}
+            />
+          ) : null}
+    </CheckoutFrame>
   );
 }