@primer-io/react-native 2.45.0 → 3.0.0-beta.0

package/lib/module/Components/PrimerCheckoutProvider.js

@@ -0,0 +1,1059 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import PrimerHeadlessUniversalCheckoutAssetsManager from "../HeadlessUniversalCheckout/Managers/AssetsManager.js";
+import PrimerHeadlessUniversalCheckoutRawDataManager from "../HeadlessUniversalCheckout/Managers/PaymentMethodManagers/RawDataManager.js";
+import PrimerHeadlessUniversalCheckoutPaymentMethodNativeUIManager from "../HeadlessUniversalCheckout/Managers/PaymentMethodManagers/NativeUIManager.js";
+import PrimerHeadlessUniversalCheckoutVaultManager from "../HeadlessUniversalCheckout/Managers/VaultManager.js";
+import { PrimerHeadlessUniversalCheckout } from "../HeadlessUniversalCheckout/PrimerHeadlessUniversalCheckout.js";
+import { PrimerError } from "../models/PrimerError.js";
+import { PrimerAnalytics } from "./analytics.js";
+import { PrimerSessionIntent } from "../models/PrimerSessionIntent.js";
+import { fmt } from "./internal/debug.js";
+import { PrimerCheckoutContext } from "./internal/PrimerCheckoutContext.js";
+import { mergeTokens } from "./internal/theme/merge.js";
+import { ThemeContext } from "./internal/theme/ThemeContext.js";
+import { defaultDarkTokens, defaultLightTokens } from "./internal/theme/tokens/index.js";
+import { toError } from "./internal/utils/errors.js";
+import { GOOGLE_PAY, isGooglePaySupported } from "./internal/googlePay.js";
+import { APPLE_PAY, isApplePaySupported } from "./internal/applePay.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const LOG = '[PrimerCheckoutProvider]';
+const assetsManager = new PrimerHeadlessUniversalCheckoutAssetsManager();
+const initialCardFormState = {
+  isValid: false,
+  errors: {},
+  binData: null,
+  metadata: null,
+  requiredFields: []
+};
+const initialState = {
+  isReady: false,
+  error: null,
+  clientSession: null,
+  acceptedCardNetworks: null,
+  availablePaymentMethods: [],
+  paymentMethodResources: [],
+  isLoadingResources: false,
+  resourcesError: null,
+  paymentOutcome: null,
+  nativeUiInFlightType: null,
+  activeMethod: null,
+  cardFormState: initialCardFormState,
+  vaultedMethods: [],
+  vaultedIconUrisById: {},
+  isLoadingVaulted: false,
+  vaultedError: null,
+  activeVaultedMethodId: null,
+  selectedCardNetwork: null,
+  vaultDisplayOverride: null,
+  requiresVaultedCardCvv: false,
+  cvvInputVisible: false
+};
+
+/**
+ * Native `onCheckoutComplete` fires for every terminal checkout, including
+ * FAILED ones — so we inspect `payment.status` to pick the result screen.
+ */
+function buildPaymentOutcome(checkoutData) {
+  const payment = checkoutData?.payment;
+  if (payment?.status !== 'FAILED') {
+    return {
+      status: 'success',
+      data: checkoutData
+    };
+  }
+  const errorCode = payment.paymentFailureReason ?? 'payment-failed';
+  const description = payment.id ? `Payment ${payment.id} failed` : 'Payment failed';
+  return {
+    status: 'error',
+    error: new PrimerError('payment-failed', errorCode, description, undefined, undefined),
+    data: checkoutData
+  };
+}
+
+// Native validation errors carry a free-form `errorId` like `invalid-card-number`. The table
+// below routes each id to a `CardFormField`. First match wins. When native gains a typed
+// `inputElementType` field on the error object, swap this for a direct enum-keyed lookup.
+const ERROR_FIELD_TABLE = [{
+  test: id => id.includes('card') && id.includes('number'),
+  field: 'cardNumber'
+}, {
+  test: id => id.includes('expir'),
+  field: 'expiryDate'
+}, {
+  test: id => id.includes('cvv') || id.includes('cvc'),
+  field: 'cvv'
+}, {
+  test: id => id.includes('cardholder') || id.includes('card_holder'),
+  field: 'cardholderName'
+}];
+
+/** Map native validation errors to per-field typed errors the UI can render. */
+function parseValidationErrors(errors) {
+  const fieldErrors = {};
+  if (!errors) return fieldErrors;
+  for (const error of errors) {
+    const id = (error.errorId ?? '').toLowerCase();
+    const description = error.description ?? error.message ?? 'Invalid';
+    const match = ERROR_FIELD_TABLE.find(entry => entry.test(id));
+    if (match) fieldErrors[match.field] = description;
+  }
+  return fieldErrors;
+}
+export function PrimerCheckoutProvider({
+  clientToken,
+  settings,
+  theme,
+  onCheckoutComplete,
+  onTokenizationSuccess,
+  onBeforePaymentCreate,
+  onError,
+  children
+}) {
+  const [state, setState] = useState(initialState);
+  const [lightTokens] = useState(() => mergeTokens(defaultLightTokens, theme?.light));
+  const [darkTokens] = useState(() => mergeTokens(defaultDarkTokens, theme?.dark));
+
+  // Refs keep init useEffect deps to [clientToken] only.
+  const settingsRef = useRef(settings);
+  settingsRef.current = settings;
+  const onCheckoutCompleteRef = useRef(onCheckoutComplete);
+  onCheckoutCompleteRef.current = onCheckoutComplete;
+  const onTokenizationSuccessRef = useRef(onTokenizationSuccess);
+  onTokenizationSuccessRef.current = onTokenizationSuccess;
+  const onBeforePaymentCreateRef = useRef(onBeforePaymentCreate);
+  onBeforePaymentCreateRef.current = onBeforePaymentCreate;
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+
+  // Snapshot of current state for stable callbacks that need activeMethod.
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  // Analytics session state (reset per client token): SELECTION dedup + outcome correlation.
+  const selectionSentRef = useRef(new Set());
+  const lastAttemptedMethodRef = useRef(null);
+  const hadFailureRef = useRef(false);
+  const hadSuccessRef = useRef(false);
+  const becameReadyRef = useRef(false);
+  const trackSelection = useCallback(paymentMethod => {
+    if (selectionSentRef.current.has(paymentMethod)) return;
+    selectionSentRef.current.add(paymentMethod);
+    void PrimerAnalytics.trackEvent('PAYMENT_METHOD_SELECTION', {
+      paymentMethod
+    });
+  }, []);
+
+  // Attempt-start events shared by every pay path: REATTEMPTED (after failure), optional SUBMITTED, PROCESSING.
+  const trackAttemptStart = useCallback((paymentMethod, options) => {
+    lastAttemptedMethodRef.current = paymentMethod;
+    if (hadFailureRef.current) {
+      hadFailureRef.current = false;
+      void PrimerAnalytics.trackEvent('PAYMENT_REATTEMPTED', {
+        paymentMethod
+      });
+    }
+    if (options.submitted) {
+      void PrimerAnalytics.trackEvent('PAYMENT_SUBMITTED', {
+        paymentMethod
+      });
+    }
+    void PrimerAnalytics.trackEvent('PAYMENT_PROCESSING_STARTED', {
+      paymentMethod
+    });
+  }, []);
+
+  // Native manager. Lifecycle is driven by `state.activeMethod` — the method the user
+  // picked on the selection screen — so it survives the card-form view mount/unmount.
+  const managerRef = useRef(null);
+  // Vault manager is lazy — created on first vault fetch, reused across client-session updates,
+  // cleared on session teardown alongside `PrimerHeadlessUniversalCheckout.cleanUp()`.
+  const vaultManagerRef = useRef(null);
+  // Stashed so `retry()` can re-submit without needing the view to re-enter the form.
+  // Compensates for an iOS native bug (see the iOS-workaround note in `retry`), not a JS-side concern.
+  const lastRawDataRef = useRef(null);
+  // Shopper's co-badge pick. Ref (not just state) so `setRawData` reads it synchronously
+  // when merging it into each keystroke's payload — keeps the pick sticky without
+  // native-side state.
+  const selectedCardNetworkRef = useRef(null);
+  const lastManagerCallbacksRef = useRef(null);
+  // Marks the manager that `retry()` currently holds. Effect cleanup defers
+  // teardown of this manager so an in-flight submit/configure isn't destroyed.
+  const retryingManagerRef = useRef(null);
+  const pendingCleanupRef = useRef(null);
+
+  // -----------------------------------------------------------------------
+  // Session init — create headless checkout + wire session-level callbacks.
+  // -----------------------------------------------------------------------
+  useEffect(() => {
+    setState(initialState);
+    selectionSentRef.current = new Set();
+    lastAttemptedMethodRef.current = null;
+    hadFailureRef.current = false;
+    hadSuccessRef.current = false;
+    becameReadyRef.current = false;
+    let cancelled = false;
+    const initStartedAt = Date.now();
+    async function init() {
+      const userCallbacks = settingsRef.current?.headlessUniversalCheckoutCallbacks;
+      const callbacks = {
+        onAvailablePaymentMethodsLoad: availablePaymentMethods => {
+          // Flip isLoadingResources: true atomically with the new list so the hook
+          // doesn't render for one frame with new methods + stale resources.
+          // The fetch effect picks it up on the next tick via methodTypesSignature.
+          setState(prev => ({
+            ...prev,
+            availablePaymentMethods,
+            isLoadingResources: true,
+            resourcesError: null
+          }));
+          settingsRef.current?.headlessUniversalCheckoutCallbacks?.onAvailablePaymentMethodsLoad?.(availablePaymentMethods);
+        },
+        onClientSessionUpdate: clientSession => {
+          setState(prev => ({
+            ...prev,
+            clientSession
+          }));
+          settingsRef.current?.headlessUniversalCheckoutCallbacks?.onClientSessionUpdate?.(clientSession);
+        },
+        onError: (error, checkoutData) => {
+          setState(prev => {
+            // Init-time errors → `error`. Payment-time errors → `paymentOutcome` → error
+            // screen. This includes Google Pay's 'payment-cancelled', surfaced as a failure.
+            if (prev.isReady) {
+              return {
+                ...prev,
+                nativeUiInFlightType: null,
+                paymentOutcome: {
+                  status: 'error',
+                  error,
+                  data: checkoutData ?? null
+                }
+              };
+            }
+            return {
+              ...prev,
+              error
+            };
+          });
+          onErrorRef.current?.(error, checkoutData);
+          settingsRef.current?.headlessUniversalCheckoutCallbacks?.onError?.(error, checkoutData);
+        },
+        // Always-subscribed so paymentOutcome fires regardless of merchant callbacks.
+        onCheckoutComplete: checkoutData => {
+          // Native fires onCheckoutComplete for any finished checkout — including
+          // FAILED payments — so we have to read `payment.status` to decide which
+          // result screen to show. Backend statuses: SUCCESS | FAILED | PENDING.
+          setState(prev => ({
+            ...prev,
+            nativeUiInFlightType: null,
+            paymentOutcome: buildPaymentOutcome(checkoutData)
+          }));
+          onCheckoutCompleteRef.current?.(checkoutData);
+          settingsRef.current?.headlessUniversalCheckoutCallbacks?.onCheckoutComplete?.(checkoutData);
+        }
+      };
+      if (onTokenizationSuccessRef.current || userCallbacks?.onTokenizationSuccess) {
+        callbacks.onTokenizationSuccess = (paymentMethodTokenData, handler) => {
+          onTokenizationSuccessRef.current?.(paymentMethodTokenData, handler);
+          settingsRef.current?.headlessUniversalCheckoutCallbacks?.onTokenizationSuccess?.(paymentMethodTokenData, handler);
+        };
+      }
+      if (userCallbacks?.onCheckoutResume) {
+        callbacks.onCheckoutResume = (resumeToken, handler) => {
+          settingsRef.current?.headlessUniversalCheckoutCallbacks?.onCheckoutResume?.(resumeToken, handler);
+        };
+      }
+      if (onBeforePaymentCreateRef.current || userCallbacks?.onBeforePaymentCreate) {
+        callbacks.onBeforePaymentCreate = (checkoutPaymentMethodData, handler) => {
+          onBeforePaymentCreateRef.current?.(checkoutPaymentMethodData, handler);
+          settingsRef.current?.headlessUniversalCheckoutCallbacks?.onBeforePaymentCreate?.(checkoutPaymentMethodData, handler);
+        };
+      }
+      if (userCallbacks?.onTokenizationStart) {
+        callbacks.onTokenizationStart = paymentMethodType => {
+          settingsRef.current?.headlessUniversalCheckoutCallbacks?.onTokenizationStart?.(paymentMethodType);
+        };
+      }
+      if (userCallbacks?.onCheckoutPending) {
+        callbacks.onCheckoutPending = additionalInfo => {
+          settingsRef.current?.headlessUniversalCheckoutCallbacks?.onCheckoutPending?.(additionalInfo);
+        };
+      }
+      if (userCallbacks?.onCheckoutAdditionalInfo) {
+        callbacks.onCheckoutAdditionalInfo = additionalInfo => {
+          settingsRef.current?.headlessUniversalCheckoutCallbacks?.onCheckoutAdditionalInfo?.(additionalInfo);
+        };
+      }
+      if (userCallbacks?.onBeforeClientSessionUpdate) {
+        callbacks.onBeforeClientSessionUpdate = () => {
+          settingsRef.current?.headlessUniversalCheckoutCallbacks?.onBeforeClientSessionUpdate?.();
+        };
+      }
+      if (userCallbacks?.onPreparationStart) {
+        callbacks.onPreparationStart = paymentMethodType => {
+          settingsRef.current?.headlessUniversalCheckoutCallbacks?.onPreparationStart?.(paymentMethodType);
+        };
+      }
+      if (userCallbacks?.onPaymentMethodShow) {
+        callbacks.onPaymentMethodShow = paymentMethodType => {
+          settingsRef.current?.headlessUniversalCheckoutCallbacks?.onPaymentMethodShow?.(paymentMethodType);
+        };
+      }
+      const mergedSettings = {
+        ...settingsRef.current,
+        headlessUniversalCheckoutCallbacks: callbacks
+      };
+      const methods = await PrimerHeadlessUniversalCheckout.startWithClientToken(clientToken, mergedSettings);
+      if (!cancelled) {
+        // Setup must run after native init — Android's bridge resolves the SDK DI container here.
+        try {
+          await PrimerAnalytics.setup(clientToken);
+          void PrimerAnalytics.trackEvent('SDK_INIT_START');
+          void PrimerAnalytics.trackEvent('SDK_INIT_END');
+          void PrimerAnalytics.sendLog('Checkout components initialized', 'checkout-initialized', Date.now() - initStartedAt);
+        } catch (analyticsErr) {
+          console.warn(`${LOG} analytics setup failed ${fmt(analyticsErr)}`);
+        }
+
+        // Seed isLoadingResources atomically with isReady so consumers don't see a
+        // brief "ready but no resources loading" window before the fetch effect runs.
+        setState(prev => ({
+          ...prev,
+          isReady: true,
+          availablePaymentMethods: methods,
+          paymentMethodResources: [],
+          isLoadingResources: true,
+          resourcesError: null
+        }));
+        becameReadyRef.current = true;
+        void PrimerAnalytics.trackEvent('CHECKOUT_FLOW_STARTED');
+      }
+    }
+    init().catch(err => {
+      console.error(`${LOG} init failed ${fmt(err)}`);
+      // Best effort: setup may not have run yet (Android drops pre-init logs; iOS still ships).
+      const primerErr = err;
+      void PrimerAnalytics.setup(clientToken).then(() => PrimerAnalytics.sendErrorLog('Checkout initialization failed', 'checkout-init-failed', 'description' in primerErr ? primerErr.description : primerErr.message, primerErr instanceof Error ? primerErr.stack : undefined)).catch(() => {});
+      if (!cancelled) {
+        setState(prev => ({
+          ...prev,
+          error: err
+        }));
+      }
+    });
+    return () => {
+      cancelled = true;
+      // Session ends without a completed payment (unmount or token change) → funnel exit.
+      if (becameReadyRef.current && !hadSuccessRef.current) {
+        void PrimerAnalytics.trackEvent('PAYMENT_FLOW_EXITED');
+      }
+      // Vault manager is tied to the native session — let the next session recreate it.
+      vaultManagerRef.current = null;
+      void PrimerHeadlessUniversalCheckout.cleanUp();
+    };
+  }, [clientToken]);
+
+  // Single choke point: every pay path lands in `paymentOutcome`, so SUCCESS/FAILURE emit once per attempt.
+  useEffect(() => {
+    const outcome = state.paymentOutcome;
+    if (outcome === null) return;
+    const paymentMethod = lastAttemptedMethodRef.current ?? 'UNKNOWN';
+    if (outcome.status === 'success') {
+      // PENDING reaches the 'success' outcome but isn't a completed payment — don't count it.
+      if (outcome.data?.payment?.status === 'PENDING') return;
+      hadSuccessRef.current = true;
+      void PrimerAnalytics.trackEvent('PAYMENT_SUCCESS', {
+        paymentMethod,
+        paymentId: outcome.data?.payment?.id ?? 'unknown'
+      });
+      return;
+    }
+    hadFailureRef.current = true;
+    const paymentId = outcome.data?.payment?.id;
+    void PrimerAnalytics.trackEvent('PAYMENT_FAILURE', {
+      paymentMethod,
+      ...(paymentId ? {
+        paymentId
+      } : null)
+    });
+    void PrimerAnalytics.sendErrorLog('Payment failed', 'failed-payment', outcome.error?.description ?? outcome.error?.message);
+  }, [state.paymentOutcome]);
+
+  // -----------------------------------------------------------------------
+  // Payment method resource fetch — re-runs whenever the set of available
+  // method types changes (init, or onAvailablePaymentMethodsLoad firing post-ready).
+  // -----------------------------------------------------------------------
+  const methodTypesSignature = useMemo(() => state.availablePaymentMethods.map(m => m.paymentMethodType).sort().join('|'), [state.availablePaymentMethods]);
+  useEffect(() => {
+    if (!state.isReady) return;
+
+    // No methods configured → nothing to fetch. Clear the loading flag so
+    // consumers don't hang on `isLoading: true` forever (init sets it
+    // optimistically before we know the method list is empty).
+    if (state.availablePaymentMethods.length === 0) {
+      setState(prev => prev.isLoadingResources || prev.paymentMethodResources.length > 0 ? {
+        ...prev,
+        paymentMethodResources: [],
+        isLoadingResources: false
+      } : prev);
+      return;
+    }
+    let cancelled = false;
+    setState(prev => prev.isLoadingResources && prev.resourcesError === null ? prev : {
+      ...prev,
+      isLoadingResources: true,
+      resourcesError: null
+    });
+    assetsManager.getPaymentMethodResources().then(resources => {
+      if (!cancelled) {
+        setState(prev => ({
+          ...prev,
+          paymentMethodResources: resources,
+          isLoadingResources: false
+        }));
+      }
+    }).catch(err => {
+      console.warn(`${LOG} resources load failed ${fmt(err)}`);
+      if (!cancelled) {
+        setState(prev => ({
+          ...prev,
+          isLoadingResources: false,
+          resourcesError: toError(err)
+        }));
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [state.isReady, methodTypesSignature]);
+
+  // Shared fetch + icon-resolve, used by both the initial-load effect and the post-delete refresh.
+  const refreshVaultedMethods = useCallback(async () => {
+    if (!vaultManagerRef.current) {
+      const vm = new PrimerHeadlessUniversalCheckoutVaultManager();
+      await vm.configure();
+      vaultManagerRef.current = vm;
+      let requiresCvv = false;
+      try {
+        requiresCvv = await vm.requiresVaultedCardCvv();
+      } catch (cvvErr) {
+        console.warn(`${LOG} requiresVaultedCardCvv failed; defaulting to false ${fmt(cvvErr)}`);
+      }
+      setState(prev => prev.requiresVaultedCardCvv === requiresCvv ? prev : {
+        ...prev,
+        requiresVaultedCardCvv: requiresCvv
+      });
+    }
+    const methods = await vaultManagerRef.current.fetchVaultedPaymentMethods();
+    const iconEntries = await Promise.all(methods.map(async m => {
+      const network = m.paymentInstrumentData?.network;
+      if (!network) return [m.id, undefined];
+      try {
+        const uri = await assetsManager.getCardNetworkImageURL(network);
+        return [m.id, uri];
+      } catch (iconErr) {
+        console.warn(`${LOG} vault icon resolve failed for ${network} ${fmt(iconErr)}`);
+        return [m.id, undefined];
+      }
+    }));
+    const iconMap = {};
+    for (const [id, uri] of iconEntries) iconMap[id] = uri;
+    return {
+      methods,
+      iconMap
+    };
+  }, []);
+
+  // -----------------------------------------------------------------------
+  // Vaulted payment methods — lazy-configured after `isReady`, re-fetched on
+  // every client-session update. Brand-icon URIs are resolved at fetch time so
+  // the row can render synchronously.
+  // -----------------------------------------------------------------------
+  useEffect(() => {
+    // Key on `isReady` only. Native's `onClientSessionUpdate` only fires on session
+    // *mutation*, not on initial load, so waiting for `clientSession` would hang forever
+    // in the common case.
+    if (!state.isReady) return;
+    let cancelled = false;
+    setState(prev => prev.isLoadingVaulted && prev.vaultedError === null ? prev : {
+      ...prev,
+      isLoadingVaulted: true,
+      vaultedError: null
+    });
+    void (async () => {
+      try {
+        const {
+          methods,
+          iconMap
+        } = await refreshVaultedMethods();
+        if (cancelled) return;
+        setState(prev => ({
+          ...prev,
+          vaultedMethods: methods,
+          vaultedIconUrisById: iconMap,
+          isLoadingVaulted: false
+        }));
+      } catch (err) {
+        console.warn(`${LOG} vault fetch failed ${fmt(err)}`);
+        if (!cancelled) {
+          const vaultedError = toError(err);
+          setState(prev => ({
+            ...prev,
+            isLoadingVaulted: false,
+            vaultedError
+          }));
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [state.isReady, state.clientSession, refreshVaultedMethods]);
+
+  // Fetch the merchant's accepted card networks once the session is ready, and
+  // re-fetch when the client session mutates. Cached in context so chip-row consumers
+  // read synchronously.
+  useEffect(() => {
+    if (!state.isReady) return;
+    let cancelled = false;
+    assetsManager.getOrderedAllowedCardNetworks().then(networks => {
+      if (cancelled) return;
+      setState(prev => {
+        if (networks === null) {
+          return prev.acceptedCardNetworks === null ? prev : {
+            ...prev,
+            acceptedCardNetworks: null
+          };
+        }
+        const same = prev.acceptedCardNetworks?.length === networks.length && prev.acceptedCardNetworks.every((n, i) => n === networks[i]);
+        return same ? prev : {
+          ...prev,
+          acceptedCardNetworks: networks
+        };
+      });
+    }).catch(err => {
+      console.warn(`${LOG} getOrderedAllowedCardNetworks failed ${fmt(err)}`);
+      if (cancelled) return;
+      setState(prev => prev.acceptedCardNetworks === null ? prev : {
+        ...prev,
+        acceptedCardNetworks: null
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [state.isReady, state.clientSession]);
+
+  // -----------------------------------------------------------------------
+  // Raw-data manager lifecycle.
+  //
+  // The effect creates a manager for the current `activeMethod` and tears it down in
+  // cleanup. Because `activeMethod` is set by the method-selection screen (user intent)
+  // rather than the card-form view's mount/unmount, the manager survives nav transitions
+  // through processing/success/error — exactly when retry needs it alive.
+  //
+  // The single cleanup handles all three teardown paths:
+  //   • method change     — effect re-runs, cleanup destroys old, body builds new
+  //   • session end       — `isReady` or `activeMethod` flips, effect re-runs, cleanup destroys
+  //   • provider unmount  — final cleanup destroys
+  // -----------------------------------------------------------------------
+  useEffect(() => {
+    if (!state.isReady || !state.activeMethod) {
+      return;
+    }
+    const method = state.activeMethod;
+    let cancelled = false;
+    const manager = new PrimerHeadlessUniversalCheckoutRawDataManager();
+    managerRef.current = manager;
+
+    // Once per card-form session: first invalid → valid transition.
+    let detailsEnteredFired = false;
+    const callbacks = {
+      onValidation: (isValid, errors) => {
+        if (isValid && !detailsEnteredFired) {
+          detailsEnteredFired = true;
+          void PrimerAnalytics.trackEvent('PAYMENT_DETAILS_ENTERED', {
+            paymentMethod: method
+          });
+        }
+        const parsed = parseValidationErrors(errors);
+        setState(prev => ({
+          ...prev,
+          cardFormState: {
+            ...prev.cardFormState,
+            isValid,
+            errors: parsed
+          }
+        }));
+      },
+      onBinDataChange: binData => {
+        // A PAN edit can change the detected networks. If the shopper's co-badge
+        // pick is no longer among them, drop it and re-send the last payload
+        // without it — otherwise a stale `preferredNetwork` could reach
+        // tokenization (e.g. paste a new PAN and submit without another keystroke).
+        const pick = selectedCardNetworkRef.current;
+        const detected = binData.preferred ? [binData.preferred, ...binData.alternatives] : binData.alternatives;
+        const pickIsStale = pick !== null && !detected.some(n => n.network === pick);
+        if (pickIsStale) {
+          console.log(`${LOG} pick ${pick} not among detected networks — clearing`);
+          selectedCardNetworkRef.current = null;
+          const last = lastRawDataRef.current;
+          if (last && 'cardNetwork' in last) {
+            const stripped = {
+              ...last
+            };
+            delete stripped.cardNetwork;
+            void setRawData(stripped).catch(err => console.warn(`${LOG} re-send after pick clear failed ${fmt(err)}`));
+          }
+        }
+        setState(prev => ({
+          ...prev,
+          cardFormState: {
+            ...prev.cardFormState,
+            binData
+          },
+          ...(pickIsStale ? {
+            selectedCardNetwork: null
+          } : null)
+        }));
+      },
+      onMetadataChange: metadata => {
+        setState(prev => ({
+          ...prev,
+          cardFormState: {
+            ...prev.cardFormState,
+            metadata
+          }
+        }));
+      }
+    };
+    lastManagerCallbacksRef.current = callbacks;
+    void (async () => {
+      try {
+        await manager.configure({
+          paymentMethodType: method,
+          ...callbacks
+        });
+        if (cancelled) return;
+        const requiredFields = await manager.getRequiredInputElementTypes();
+        if (cancelled) return;
+        setState(prev => ({
+          ...prev,
+          cardFormState: {
+            ...prev.cardFormState,
+            requiredFields
+          }
+        }));
+      } catch (err) {
+        console.error(`${LOG} manager configure failed ${fmt(err)}`);
+      }
+    })();
+    return () => {
+      cancelled = true;
+      // If retry() holds this manager, defer destroy until retry's finally
+      // runs — otherwise we'd cleanUp() between its awaited configure/submit.
+      if (retryingManagerRef.current === manager) {
+        pendingCleanupRef.current = manager;
+        return;
+      }
+      manager.cleanUp().catch(err => console.warn(`${LOG} manager cleanUp failed ${fmt(err)}`));
+      manager.removeAllListeners();
+      if (managerRef.current === manager) {
+        managerRef.current = null;
+      }
+      lastManagerCallbacksRef.current = null;
+      selectedCardNetworkRef.current = null;
+      setState(prev => ({
+        ...prev,
+        cardFormState: initialCardFormState,
+        selectedCardNetwork: null
+      }));
+    };
+  }, [state.activeMethod, state.isReady]);
+
+  // -----------------------------------------------------------------------
+  // Actions — stable identities.
+  // -----------------------------------------------------------------------
+  const setActiveMethod = useCallback(method => {
+    if (method !== null) {
+      trackSelection(method);
+    }
+    setState(prev => prev.activeMethod === method ? prev : {
+      ...prev,
+      activeMethod: method
+    });
+  }, [trackSelection]);
+  const setRawData = useCallback(async data => {
+    // Keep the co-badge pick sticky: merge it into every card-data payload so it
+    // survives keystroke updates (native holds no selection state). The merged
+    // payload is what lands in `lastRawDataRef`, so `retry()` re-sends it too.
+    const network = selectedCardNetworkRef.current;
+    const payload = network && 'cardNumber' in data ? {
+      ...data,
+      cardNetwork: network
+    } : data;
+    lastRawDataRef.current = payload;
+    const manager = managerRef.current;
+    if (!manager) {
+      console.warn(`${LOG} setRawData: no manager (activeMethod=${stateRef.current.activeMethod})`);
+      return;
+    }
+    try {
+      await manager.setRawData(payload);
+    } catch (err) {
+      console.warn(`${LOG} setRawData failed: ${err instanceof PrimerError ? err.errorId : 'unknown'}`);
+      throw err;
+    }
+  }, []);
+  const setBillingAddress = useCallback(async address => {
+    const manager = managerRef.current;
+    if (!manager) {
+      console.warn(`${LOG} setBillingAddress: no manager (activeMethod=${stateRef.current.activeMethod})`);
+      return;
+    }
+    try {
+      await manager.setBillingAddress(address);
+    } catch (err) {
+      console.warn(`${LOG} setBillingAddress failed ${fmt(err)}`);
+      throw err;
+    }
+  }, []);
+  const selectCardNetwork = useCallback(async identifier => {
+    const m = managerRef.current;
+    if (!m) {
+      console.warn(`${LOG} selectCardNetwork: no manager (activeMethod=${stateRef.current.activeMethod})`);
+      throw new PrimerError('NO_ACTIVE_CARD_FORM', undefined, 'No active card form', undefined, undefined);
+    }
+    selectedCardNetworkRef.current = identifier;
+    // Re-send the last raw data so the pick applies immediately.
+    if (lastRawDataRef.current) {
+      await setRawData(lastRawDataRef.current);
+    }
+    setState(prev => prev.selectedCardNetwork === identifier ? prev : {
+      ...prev,
+      selectedCardNetwork: identifier
+    });
+  }, [setRawData]);
+  const submit = useCallback(async () => {
+    const manager = managerRef.current;
+    if (!manager) {
+      console.warn(`${LOG} submit: no manager`);
+      return;
+    }
+    trackAttemptStart(stateRef.current.activeMethod ?? 'PAYMENT_CARD', {
+      submitted: true
+    });
+    await manager.submit();
+  }, [trackAttemptStart]);
+  const retry = useCallback(async () => {
+    const method = stateRef.current.activeMethod;
+    const manager = managerRef.current;
+    if (!method || !manager) {
+      console.warn(`${LOG} retry: no active method or manager ${fmt({
+        method,
+        hasManager: !!manager
+      })}`);
+      return;
+    }
+    // iOS workaround: the native iOS RawDataManager nullifies its delegate on successful
+    // tokenization, so any post-tokenize failure would silently drop subsequent submit()
+    // outcomes. Reconfiguring here rebuilds the delegate binding; harmless on Android.
+    // (The "remove once the iOS SDK stops nullifying" reminder lives in the PR description.)
+    retryingManagerRef.current = manager;
+    try {
+      // Re-pass the original callbacks so the JS-wrapper's listeners get re-registered.
+      // Otherwise native would emit onValidation/onBinDataChange/onMetadataChange during
+      // the retry attempt with no JS-side subscribers → RN warns "no listeners registered".
+      const callbacks = lastManagerCallbacksRef.current;
+      await manager.configure(callbacks ? {
+        paymentMethodType: method,
+        ...callbacks
+      } : {
+        paymentMethodType: method
+      });
+      if (lastRawDataRef.current) {
+        await manager.setRawData(lastRawDataRef.current);
+      }
+      // Clear the previous outcome so the transitioner fires for the new attempt.
+      setState(prev => prev.paymentOutcome === null ? prev : {
+        ...prev,
+        paymentOutcome: null
+      });
+      trackAttemptStart(method, {
+        submitted: true
+      });
+      await manager.submit();
+    } catch (err) {
+      console.error(`${LOG} retry failed ${fmt(err)}`);
+      throw err;
+    } finally {
+      retryingManagerRef.current = null;
+      // Run a teardown that the effect cleanup deferred while retry was in flight.
+      const pending = pendingCleanupRef.current;
+      if (pending === manager) {
+        pendingCleanupRef.current = null;
+        pending.cleanUp().catch(err => console.warn(`${LOG} deferred cleanUp failed ${fmt(err)}`));
+        pending.removeAllListeners();
+        if (managerRef.current === pending) {
+          managerRef.current = null;
+        }
+        lastManagerCallbacksRef.current = null;
+        selectedCardNetworkRef.current = null;
+        setState(prev => ({
+          ...prev,
+          cardFormState: initialCardFormState,
+          selectedCardNetwork: null
+        }));
+      }
+    }
+  }, []);
+  const clearPaymentOutcome = useCallback(() => {
+    setState(prev => prev.paymentOutcome === null ? prev : {
+      ...prev,
+      paymentOutcome: null
+    });
+  }, []);
+
+  // NATIVE_UI methods (Google Pay today; Apple Pay / PayPal / web-redirect APMs later) ride the
+  // existing Headless NATIVE_UI path: start the native flow by type; outcomes arrive through the
+  // shared onCheckoutComplete/onError. Only one native-UI flow runs at a time.
+  const startNativeUI = useCallback(async paymentMethodType => {
+    // Ignore re-entrant taps: the in-list method row isn't disabled while loading, so a fast
+    // double-tap would otherwise spawn two native flows.
+    if (stateRef.current.nativeUiInFlightType !== null) {
+      return;
+    }
+    if (paymentMethodType === GOOGLE_PAY && !isGooglePaySupported(stateRef.current.availablePaymentMethods)) {
+      throw new PrimerError('google-pay-unavailable', 'google-pay-unavailable', 'Google Pay is not available on this device.', undefined, undefined);
+    }
+    if (paymentMethodType === APPLE_PAY && !isApplePaySupported(stateRef.current.availablePaymentMethods)) {
+      throw new PrimerError('apple-pay-unavailable', 'apple-pay-unavailable', 'Apple Pay is not available on this device.', undefined, undefined);
+    }
+    // Clear any stale outcome so the result screen re-fires for this attempt.
+    setState(prev => ({
+      ...prev,
+      paymentOutcome: null,
+      nativeUiInFlightType: paymentMethodType
+    }));
+    // Wallet/APM handoff: select + hand off to native, no form so no SUBMITTED (matches Web).
+    trackSelection(paymentMethodType);
+    trackAttemptStart(paymentMethodType, {
+      submitted: false
+    });
+    try {
+      const manager = new PrimerHeadlessUniversalCheckoutPaymentMethodNativeUIManager();
+      await manager.configure(paymentMethodType);
+      await manager.showPaymentMethod(PrimerSessionIntent.CHECKOUT);
+      // Success / failure arrive via onCheckoutComplete / onError; shopper-cancel via
+      // onError('payment-cancelled'). nativeUiInFlightType is reset in those handlers.
+    } catch (err) {
+      console.warn(`${LOG} startNativeUI(${paymentMethodType}) failed ${fmt(err)}`);
+      const error = err instanceof PrimerError ? err : new PrimerError('native-ui-start-failed', undefined, toError(err).message, undefined, undefined);
+      void PrimerAnalytics.sendErrorLog('Unable to present payment method', 'unable-to-present-payment-method', `${paymentMethodType}: ${error.description ?? error.message}`);
+      setState(prev => ({
+        ...prev,
+        nativeUiInFlightType: null,
+        paymentOutcome: {
+          status: 'error',
+          error,
+          data: null
+        }
+      }));
+      throw error;
+    }
+  }, [trackSelection, trackAttemptStart]);
+  const cancelNativeUI = useCallback(paymentMethodType => {
+    // The native sheet is a system surface JS can't force-close (FR-002b), so we only clear the
+    // in-flight flag, and only for the matching method. A real dismissal surfaces via
+    // onError('payment-cancelled').
+    setState(prev => prev.nativeUiInFlightType === paymentMethodType ? {
+      ...prev,
+      nativeUiInFlightType: null
+    } : prev);
+  }, []);
+  const selectVaultedMethodId = useCallback(id => {
+    setState(prev => {
+      // The id must exist among the current methods to be honoured.
+      if (!prev.vaultedMethods.some(m => m.id === id)) {
+        console.warn(`${LOG} selectVaultedMethodId: id ${id} not present in vaultedMethods`);
+        return prev;
+      }
+      // Already lite-with-this-id (no override to clear) → nothing to do.
+      if (prev.activeVaultedMethodId === id && prev.vaultDisplayOverride === null) {
+        return prev;
+      }
+      // Any tap commits the user's choice and clears any prior expand-override.
+      return {
+        ...prev,
+        activeVaultedMethodId: id,
+        vaultDisplayOverride: null
+      };
+    });
+  }, []);
+  const requestExpandedVaultDisplay = useCallback(() => {
+    setState(prev => prev.vaultDisplayOverride === 'expanded' ? prev : {
+      ...prev,
+      vaultDisplayOverride: 'expanded'
+    });
+  }, []);
+  const setCvvInputVisible = useCallback(visible => {
+    setState(prev => prev.cvvInputVisible === visible ? prev : {
+      ...prev,
+      cvvInputVisible: visible
+    });
+  }, []);
+
+  // Vanish fallback: if the user-selected method is no longer in `vaultedMethods`
+  // (mid-session client-session update removed it), clear the override so the
+  // hook falls back to the new originalDefault and the lite layout disappears.
+  useEffect(() => {
+    if (state.activeVaultedMethodId === null) return;
+    const stillPresent = state.vaultedMethods.some(m => m.id === state.activeVaultedMethodId);
+    if (stillPresent) return;
+    setState(prev => prev.activeVaultedMethodId === null && prev.vaultDisplayOverride === null ? prev : {
+      ...prev,
+      activeVaultedMethodId: null,
+      vaultDisplayOverride: null
+    });
+  }, [state.activeVaultedMethodId, state.vaultedMethods]);
+  const payFromVault = useCallback(async (vaultedPaymentMethodId, additionalData) => {
+    const vm = vaultManagerRef.current;
+    if (!vm) {
+      console.warn(`${LOG} payFromVault: vault manager not configured`);
+      return;
+    }
+    // Clear any stale outcome so PaymentOutcomeTransitioner re-fires for this attempt.
+    setState(prev => prev.paymentOutcome === null ? prev : {
+      ...prev,
+      paymentOutcome: null
+    });
+    // Vaulted pay is a card payment: same SUBMITTED → PROCESSING → outcome sequence.
+    trackAttemptStart('PAYMENT_CARD', {
+      submitted: true
+    });
+    try {
+      await vm.startPaymentFlow(vaultedPaymentMethodId, additionalData);
+    } catch (err) {
+      console.error(`${LOG} payFromVault failed ${fmt(err)}`);
+      if (additionalData?.cvv) {
+        const errorId = err?.errorId != null ? String(err.errorId) : 'UNKNOWN';
+        void PrimerAnalytics.trackEvent('VAULT_CVV_SUBMISSION_FAILED', {
+          vaultedMethodId: vaultedPaymentMethodId,
+          errorId
+        });
+      }
+      const primerError = err;
+      setState(prev => ({
+        ...prev,
+        paymentOutcome: {
+          status: 'error',
+          error: primerError,
+          data: null
+        }
+      }));
+    }
+  }, []);
+  const deleteVaultedPaymentMethod = useCallback(async vaultedPaymentMethodId => {
+    const vm = vaultManagerRef.current;
+    if (!vm) {
+      return Promise.reject({
+        errorId: 'VAULT_MANAGER_NOT_CONFIGURED',
+        description: 'Vault manager not configured'
+      });
+    }
+    if (!stateRef.current.vaultedMethods.some(m => m.id === vaultedPaymentMethodId)) {
+      return Promise.reject({
+        errorId: 'INVALID_VAULTED_METHOD_ID',
+        description: `No vaulted method with id ${vaultedPaymentMethodId}`
+      });
+    }
+    await vm.deleteVaultedPaymentMethod(vaultedPaymentMethodId);
+    // Refresh is best-effort: if it fails after a successful server-side delete,
+    // reconcile local state from what we know (drop the deleted id) rather than
+    // rejecting — otherwise the caller surfaces "delete failed" for a delete that
+    // actually succeeded.
+    let methods;
+    let iconMap;
+    try {
+      ({
+        methods,
+        iconMap
+      } = await refreshVaultedMethods());
+    } catch (refreshErr) {
+      console.warn(`${LOG} deleteVaultedPaymentMethod refresh failed ${fmt(refreshErr)}`);
+      methods = stateRef.current.vaultedMethods.filter(m => m.id !== vaultedPaymentMethodId);
+      iconMap = {
+        ...stateRef.current.vaultedIconUrisById
+      };
+      delete iconMap[vaultedPaymentMethodId];
+    }
+    // Promotion rule (matches iOS VaultedPaymentMethodManager.swift:18-31 and Android
+    // VaultViewModel.kt:136-148): if the deleted id was the user's explicit pick, replace it
+    // with the new top-of-list (or null when empty); otherwise leave the explicit pick alone.
+    setState(prev => {
+      const wasActive = prev.activeVaultedMethodId === vaultedPaymentMethodId;
+      const nextActiveId = wasActive ? methods[0]?.id ?? null : prev.activeVaultedMethodId;
+      const nextOverride = methods.length === 0 ? null : prev.vaultDisplayOverride;
+      return {
+        ...prev,
+        vaultedMethods: methods,
+        vaultedIconUrisById: iconMap,
+        activeVaultedMethodId: nextActiveId,
+        vaultDisplayOverride: nextOverride
+      };
+    });
+  }, [refreshVaultedMethods]);
+  const contextValue = useMemo(() => {
+    return {
+      isReady: state.isReady,
+      error: state.error,
+      clientSession: state.clientSession,
+      acceptedCardNetworks: state.acceptedCardNetworks,
+      availablePaymentMethods: state.availablePaymentMethods,
+      paymentMethodResources: state.paymentMethodResources,
+      isLoadingResources: state.isLoadingResources,
+      resourcesError: state.resourcesError,
+      settings: settingsRef.current,
+      paymentOutcome: state.paymentOutcome,
+      nativeUiInFlightType: state.nativeUiInFlightType,
+      activeMethod: state.activeMethod,
+      cardFormState: state.cardFormState,
+      vaultedMethods: state.vaultedMethods,
+      vaultedIconUrisById: state.vaultedIconUrisById,
+      isLoadingVaulted: state.isLoadingVaulted,
+      vaultedError: state.vaultedError,
+      activeVaultedMethodId: state.activeVaultedMethodId,
+      vaultDisplayOverride: state.vaultDisplayOverride,
+      selectedCardNetwork: state.selectedCardNetwork,
+      requiresVaultedCardCvv: state.requiresVaultedCardCvv,
+      cvvInputVisible: state.cvvInputVisible,
+      setActiveMethod,
+      setRawData,
+      setBillingAddress,
+      selectCardNetwork,
+      submit,
+      retry,
+      clearPaymentOutcome,
+      startNativeUI,
+      cancelNativeUI,
+      payFromVault,
+      selectVaultedMethodId,
+      requestExpandedVaultDisplay,
+      setCvvInputVisible,
+      deleteVaultedPaymentMethod
+    };
+  }, [state, startNativeUI, cancelNativeUI, setActiveMethod, setRawData, setBillingAddress, selectCardNetwork, submit, retry, clearPaymentOutcome, payFromVault, selectVaultedMethodId, requestExpandedVaultDisplay, setCvvInputVisible, deleteVaultedPaymentMethod]);
+  return /*#__PURE__*/_jsx(ThemeContext.Provider, {
+    value: {
+      lightTokens,
+      darkTokens
+    },
+    children: /*#__PURE__*/_jsx(PrimerCheckoutContext.Provider, {
+      value: contextValue,
+      children: children
+    })
+  });
+}
+//# sourceMappingURL=PrimerCheckoutProvider.js.map