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

package/src/Components/internal/screens/useStatusScreenHeight.ts

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { useSheetHeight } from '../checkout-sheet';
+
+export function useStatusScreenHeight(height: number) {
+  const { requestHeight } = useSheetHeight();
+
+  useEffect(() => {
+    const release = requestHeight(height);
+    return release;
+  }, [height, requestHeight]);
+}

package/src/Components/internal/theme/ThemeContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import type { PrimerTokens } from './types';
+
+interface ThemeContextValue {
+  lightTokens: PrimerTokens;
+  darkTokens: PrimerTokens;
+}
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null);

package/src/Components/internal/theme/index.ts

@@ -0,0 +1,12 @@
+export { usePrimerTheme } from './usePrimerTheme';
+export type {
+  PrimerTokens,
+  PrimerColorTokens,
+  PrimerSpacingTokens,
+  PrimerTypographyTokens,
+  PrimerTypographyStyle,
+  PrimerRadiusTokens,
+  PrimerBorderTokens,
+  PrimerThemeOverride,
+} from './types';
+// NOTE: ThemeContext is intentionally NOT exported — internal to the theme module only

package/src/Components/internal/theme/merge.ts

@@ -0,0 +1,27 @@
+import type { PrimerTokens, PrimerThemeOverride } from './types';
+
+type ModeOverride = PrimerThemeOverride['light'];
+
+function stripNullish<T extends object>(obj: Partial<T>): Partial<T> {
+  const result: Partial<T> = {};
+  for (const key in obj) {
+    if (obj[key] != null) {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}
+
+export function mergeTokens(base: PrimerTokens, override: ModeOverride): PrimerTokens {
+  if (override == null) {
+    return base;
+  }
+
+  return {
+    colors: override.colors ? { ...base.colors, ...stripNullish(override.colors) } : base.colors,
+    spacing: override.spacing ? { ...base.spacing, ...stripNullish(override.spacing) } : base.spacing,
+    typography: override.typography ? { ...base.typography, ...stripNullish(override.typography) } : base.typography,
+    radii: override.radii ? { ...base.radii, ...stripNullish(override.radii) } : base.radii,
+    borders: override.borders ? { ...base.borders, ...stripNullish(override.borders) } : base.borders,
+  };
+}

package/src/Components/internal/theme/tokens/dark.ts

@@ -0,0 +1,89 @@
+import type { PrimerTokens } from '../types';
+
+// Values derived from iOS DesignTokensDark.swift (Style Dictionary generated, dark theme).
+// Source: /Users/onurvar/Projects/primer-sdk-ios/Sources/PrimerSDK/Classes/CheckoutComponents/Internal/Tokens/DesignTokensDark.swift
+// Spacing, typography, radii, and borders are mode-independent and match light defaults.
+export const defaultDarkTokens: PrimerTokens = {
+  colors: {
+    primary: '#2f98ff', // primerColorBrand — unchanged in dark (0.184, 0.596, 1.0)
+    background: '#171619', // dark primerColorGray000 (0.090, 0.086, 0.098)
+    surface: '#292929', // dark primerColorGray100 (0.161, 0.161, 0.161)
+    overlay: 'rgba(0,0,0,0.7)',
+    textPrimary: '#efefef', // dark primerColorGray900 (0.937, 0.937, 0.937)
+    textSecondary: '#c7c7c7', // dark primerColorGray600 (0.780, 0.780, 0.780)
+    textPlaceholder: '#767577', // dark primerColorGray500 (0.463, 0.459, 0.467)
+    textDisabled: '#858585', // dark primerColorGray400 (0.522, 0.522, 0.522)
+    textNegative: '#f6bfbf', // dark primerColorRed900 (0.965, 0.749, 0.749)
+    textLink: '#4aaeff', // dark primerColorBlue900 (0.290, 0.682, 1.0)
+    border: '#424242', // dark primerColorGray200 (0.259, 0.259, 0.259)
+    borderFocused: '#2f98ff', // dark primerColorBrand — unchanged
+    borderError: '#e46d70', // dark primerColorRed500 (0.894, 0.427, 0.439)
+    borderDisabled: '#292929', // dark primerColorGray100 (0.161, 0.161, 0.161)
+    iconPrimary: '#efefef', // dark primerColorGray900
+    iconDisabled: '#858585', // dark primerColorGray400
+    iconNegative: '#e46d70', // dark primerColorRed500
+    iconPositive: '#27b17d', // dark primerColorGreen500 (0.153, 0.694, 0.490)
+    error: '#e46d70', // dark primerColorRed500
+    success: '#27b17d', // dark primerColorGreen500
+  },
+  spacing: {
+    xxsmall: 2,
+    xsmall: 4,
+    small: 8,
+    medium: 12,
+    large: 16,
+    xlarge: 20,
+    xxlarge: 24,
+    xxxlarge: 32,
+  },
+  typography: {
+    fontFamily: 'Inter',
+    titleXLarge: {
+      fontSize: 24,
+      fontWeight: '600',
+      lineHeight: 32,
+      letterSpacing: -0.6,
+      fontFamily: 'Inter',
+    },
+    titleLarge: {
+      fontSize: 16,
+      fontWeight: '600',
+      lineHeight: 20,
+      letterSpacing: -0.2,
+      fontFamily: 'Inter',
+    },
+    bodyLarge: {
+      fontSize: 16,
+      fontWeight: '400',
+      lineHeight: 20,
+      letterSpacing: -0.2,
+      fontFamily: 'Inter',
+    },
+    bodyMedium: {
+      fontSize: 14,
+      fontWeight: '400',
+      lineHeight: 20,
+      letterSpacing: 0,
+      fontFamily: 'Inter',
+    },
+    bodySmall: {
+      fontSize: 12,
+      fontWeight: '400',
+      lineHeight: 16,
+      letterSpacing: 0,
+      fontFamily: 'Inter',
+    },
+  },
+  radii: {
+    none: 0,
+    xsmall: 2,
+    small: 4,
+    medium: 8,
+    large: 12,
+  },
+  borders: {
+    default: 1,
+    input: 1,
+    strong: 2,
+  },
+};

package/src/Components/internal/theme/tokens/index.ts

@@ -0,0 +1,2 @@
+export { defaultLightTokens } from './light';
+export { defaultDarkTokens } from './dark';

package/src/Components/internal/theme/tokens/light.ts

@@ -0,0 +1,88 @@
+import type { PrimerTokens } from '../types';
+
+// Values derived from iOS DesignTokens.swift (Style Dictionary generated, light theme).
+// Source: /Users/onurvar/Projects/primer-sdk-ios/Sources/PrimerSDK/Classes/CheckoutComponents/Internal/Tokens/DesignTokens.swift
+export const defaultLightTokens: PrimerTokens = {
+  colors: {
+    primary: '#2f98ff', // primerColorBrand (0.184, 0.596, 1.0)
+    background: '#ffffff', // primerColorBackground (1.0, 1.0, 1.0)
+    surface: '#f5f5f5', // primerColorGray100 (0.961, 0.961, 0.961)
+    overlay: 'rgba(0,0,0,0.5)',
+    textPrimary: '#212121', // primerColorTextPrimary (0.129, 0.129, 0.129)
+    textSecondary: '#757575', // primerColorTextSecondary (0.459, 0.459, 0.459)
+    textPlaceholder: '#9e9e9e', // primerColorTextPlaceholder (0.620, 0.620, 0.620)
+    textDisabled: '#bdbdbd', // primerColorTextDisabled (0.741, 0.741, 0.741)
+    textNegative: '#b4324b', // primerColorTextNegative (0.706, 0.196, 0.294)
+    textLink: '#2270f4', // primerColorTextLink (0.133, 0.439, 0.957)
+    border: '#e0e0e0', // primerColorBorderOutlinedDefault (0.878, 0.878, 0.878)
+    borderFocused: '#2f98ff', // primerColorBorderOutlinedFocus (0.184, 0.596, 1.0)
+    borderError: '#ff7279', // primerColorBorderOutlinedError (1.0, 0.447, 0.475)
+    borderDisabled: '#eeeeee', // primerColorBorderOutlinedDisabled (0.933, 0.933, 0.933)
+    iconPrimary: '#212121', // primerColorIconPrimary (0.129, 0.129, 0.129)
+    iconDisabled: '#bdbdbd', // primerColorIconDisabled (0.741, 0.741, 0.741)
+    iconNegative: '#ff7279', // primerColorIconNegative (1.0, 0.447, 0.475)
+    iconPositive: '#3eb68f', // primerColorIconPositive (0.243, 0.714, 0.561)
+    error: '#ff7279', // primerColorRed500 (1.0, 0.447, 0.475)
+    success: '#3eb68f', // primerColorGreen500 (0.243, 0.714, 0.561)
+  },
+  spacing: {
+    xxsmall: 2, // primerSpaceXxsmall
+    xsmall: 4, // primerSpaceXsmall
+    small: 8, // primerSpaceSmall
+    medium: 12, // primerSpaceMedium
+    large: 16, // primerSpaceLarge
+    xlarge: 20, // primerSpaceXlarge
+    xxlarge: 24, // primerSpaceXxlarge
+    xxxlarge: 32, // primerSizeXlarge (scale extension: 8×base)
+  },
+  typography: {
+    fontFamily: 'Inter', // primerTypographyBrand
+    titleXLarge: {
+      fontSize: 24, // primerTypographyTitleXlargeSize
+      fontWeight: '600', // primerTypographyTitleXlargeWeight 550 → nearest RN value
+      lineHeight: 32, // primerTypographyTitleXlargeLineHeight
+      letterSpacing: -0.6, // primerTypographyTitleXlargeLetterSpacing
+      fontFamily: 'Inter', // primerTypographyTitleXlargeFont
+    },
+    titleLarge: {
+      fontSize: 16, // primerTypographyTitleLargeSize
+      fontWeight: '600', // primerTypographyTitleLargeWeight 550 → nearest RN value
+      lineHeight: 20, // primerTypographyTitleLargeLineHeight
+      letterSpacing: -0.2, // primerTypographyTitleLargeLetterSpacing
+      fontFamily: 'Inter', // primerTypographyTitleLargeFont
+    },
+    bodyLarge: {
+      fontSize: 16, // primerTypographyBodyLargeSize
+      fontWeight: '400', // primerTypographyBodyLargeWeight
+      lineHeight: 20, // primerTypographyBodyLargeLineHeight
+      letterSpacing: -0.2, // primerTypographyBodyLargeLetterSpacing
+      fontFamily: 'Inter', // primerTypographyBodyLargeFont
+    },
+    bodyMedium: {
+      fontSize: 14, // primerTypographyBodyMediumSize
+      fontWeight: '400', // primerTypographyBodyMediumWeight
+      lineHeight: 20, // primerTypographyBodyMediumLineHeight
+      letterSpacing: 0, // primerTypographyBodyMediumLetterSpacing
+      fontFamily: 'Inter', // primerTypographyBodyMediumFont
+    },
+    bodySmall: {
+      fontSize: 12, // primerTypographyBodySmallSize
+      fontWeight: '400', // primerTypographyBodySmallWeight
+      lineHeight: 16, // primerTypographyBodySmallLineHeight
+      letterSpacing: 0, // primerTypographyBodySmallLetterSpacing
+      fontFamily: 'Inter', // primerTypographyBodySmallFont
+    },
+  },
+  radii: {
+    none: 0,
+    xsmall: 2, // primerRadiusXsmall
+    small: 4, // primerRadiusSmall / primerRadiusBase
+    medium: 8, // primerRadiusMedium
+    large: 12, // primerRadiusLarge
+  },
+  borders: {
+    default: 1,
+    input: 1,
+    strong: 2,
+  },
+};

package/src/Components/internal/theme/types.ts

@@ -0,0 +1,89 @@
+export interface PrimerColorTokens {
+  primary: string;
+  background: string;
+  surface: string;
+  overlay: string;
+  textPrimary: string;
+  textSecondary: string;
+  textPlaceholder: string;
+  textDisabled: string;
+  textNegative: string;
+  textLink: string;
+  border: string;
+  borderFocused: string;
+  borderError: string;
+  borderDisabled: string;
+  iconPrimary: string;
+  iconDisabled: string;
+  iconNegative: string;
+  iconPositive: string;
+  error: string;
+  success: string;
+}
+
+export interface PrimerSpacingTokens {
+  xxsmall: number;
+  xsmall: number;
+  small: number;
+  medium: number;
+  large: number;
+  xlarge: number;
+  xxlarge: number;
+  xxxlarge: number;
+}
+
+export interface PrimerTypographyStyle {
+  fontSize: number;
+  fontWeight: string;
+  lineHeight: number;
+  letterSpacing: number;
+  fontFamily: string;
+}
+
+export interface PrimerTypographyTokens {
+  fontFamily: string;
+  titleXLarge: PrimerTypographyStyle;
+  titleLarge: PrimerTypographyStyle;
+  bodyLarge: PrimerTypographyStyle;
+  bodyMedium: PrimerTypographyStyle;
+  bodySmall: PrimerTypographyStyle;
+}
+
+export interface PrimerRadiusTokens {
+  none: number;
+  xsmall: number;
+  small: number;
+  medium: number;
+  large: number;
+}
+
+export interface PrimerBorderTokens {
+  default: number;
+  input: number;
+  strong: number;
+}
+
+export interface PrimerTokens {
+  colors: PrimerColorTokens;
+  spacing: PrimerSpacingTokens;
+  typography: PrimerTypographyTokens;
+  radii: PrimerRadiusTokens;
+  borders: PrimerBorderTokens;
+}
+
+export interface PrimerThemeOverride {
+  light?: {
+    colors?: Partial<PrimerColorTokens>;
+    spacing?: Partial<PrimerSpacingTokens>;
+    typography?: Partial<PrimerTypographyTokens>;
+    radii?: Partial<PrimerRadiusTokens>;
+    borders?: Partial<PrimerBorderTokens>;
+  };
+  dark?: {
+    colors?: Partial<PrimerColorTokens>;
+    spacing?: Partial<PrimerSpacingTokens>;
+    typography?: Partial<PrimerTypographyTokens>;
+    radii?: Partial<PrimerRadiusTokens>;
+    borders?: Partial<PrimerBorderTokens>;
+  };
+}

package/src/Components/internal/theme/usePrimerTheme.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { useColorScheme } from 'react-native';
+import { ThemeContext } from './ThemeContext';
+import { defaultDarkTokens, defaultLightTokens } from './tokens';
+import type { PrimerTokens } from './types';
+
+export function usePrimerTheme(): PrimerTokens {
+  const theme = useContext(ThemeContext);
+  const colorScheme = useColorScheme();
+
+  const light = theme?.lightTokens ?? defaultLightTokens;
+  const dark = theme?.darkTokens ?? defaultDarkTokens;
+
+  return colorScheme === 'dark' ? dark : light;
+}

package/src/Components/internal/ui/CheckoutButton.tsx

@@ -0,0 +1,84 @@
+import { useMemo } from 'react';
+import { ActivityIndicator, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import type { TextStyle } from 'react-native';
+import { usePrimerTheme } from '../theme';
+import type { PrimerTokens } from '../theme';
+
+export interface CheckoutButtonProps {
+  title: string;
+  onPress: () => void;
+  variant: 'primary' | 'outlined';
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+export function CheckoutButton({ title, onPress, variant, loading = false, disabled = false }: CheckoutButtonProps) {
+  const tokens = usePrimerTheme();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const buttonStyle = variant === 'primary' ? styles.primaryButton : styles.outlinedButton;
+  const textStyle = variant === 'primary' ? styles.primaryText : styles.outlinedText;
+  const spinnerColor = variant === 'primary' ? tokens.colors.background : tokens.colors.textPrimary;
+  const isInteractive = !disabled && !loading;
+  const showDisabledTint = disabled && !loading;
+
+  return (
+    <TouchableOpacity
+      style={[buttonStyle, showDisabledTint && styles.disabled]}
+      onPress={onPress}
+      disabled={!isInteractive}
+      activeOpacity={0.7}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !isInteractive, busy: loading }}
+    >
+      {loading ? <ActivityIndicator color={spinnerColor} /> : <Text style={textStyle}>{title}</Text>}
+    </TouchableOpacity>
+  );
+}
+
+function createStyles(tokens: PrimerTokens) {
+  const { colors, spacing, typography, radii, borders } = tokens;
+
+  const baseButton = {
+    alignItems: 'center' as const,
+    borderRadius: radii.medium,
+    justifyContent: 'center' as const,
+    padding: spacing.medium,
+    width: '100%' as const,
+  };
+
+  const baseText = {
+    fontFamily: typography.titleLarge.fontFamily,
+    fontSize: typography.titleLarge.fontSize,
+    fontWeight: typography.titleLarge.fontWeight as TextStyle['fontWeight'],
+    letterSpacing: typography.titleLarge.letterSpacing,
+    lineHeight: typography.titleLarge.lineHeight,
+    textAlign: 'center' as const,
+  };
+
+  /* eslint-disable react-native/no-unused-styles */
+  return StyleSheet.create({
+    disabled: {
+      opacity: 0.5,
+    },
+    outlinedButton: {
+      ...baseButton,
+      backgroundColor: colors.background,
+      borderColor: colors.border,
+      borderWidth: borders.default,
+    },
+    outlinedText: {
+      ...baseText,
+      color: colors.textPrimary,
+    },
+    primaryButton: {
+      ...baseButton,
+      backgroundColor: colors.primary,
+    },
+    primaryText: {
+      ...baseText,
+      color: colors.background,
+    },
+  });
+  /* eslint-enable react-native/no-unused-styles */
+}

package/src/Components/internal/ui/PaymentMethodButton.tsx

@@ -0,0 +1,132 @@
+import { useMemo } from 'react';
+import { Image, Text, TouchableOpacity, StyleSheet, View } from 'react-native';
+import type { TextStyle } from 'react-native';
+import { PrimerGooglePayButton as PrimerGooglePayNativeButton } from '../../../HeadlessUniversalCheckout/Components/PrimerGooglePayButton';
+import { usePrimerTheme } from '../theme';
+import type { PrimerTokens } from '../theme';
+import { usePrimerLocalization } from '../localization';
+import type { PaymentMethodButtonProps } from '../../types/PrimerPaymentMethodListTypes';
+
+export const PAYMENT_METHOD_BUTTON_HEIGHT = 44;
+const BUTTON_HEIGHT = PAYMENT_METHOD_BUTTON_HEIGHT;
+
+export function PaymentMethodButton({ item, onPress }: PaymentMethodButtonProps) {
+  const tokens = usePrimerTheme();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+  const { t } = usePrimerLocalization();
+
+  // Native-view methods (e.g. Google Pay) render the SDK's own display-only button as the whole
+  // row; pointerEvents="none" lets the row's TouchableOpacity own the tap, not the native button.
+  if (item.nativeViewName === 'PrimerGooglePayButton') {
+    return (
+      <TouchableOpacity style={styles.nativeButton} onPress={onPress} activeOpacity={0.7}>
+        <View style={styles.nativeButton} pointerEvents="none">
+          <PrimerGooglePayNativeButton style={styles.nativeButton} />
+        </View>
+      </TouchableOpacity>
+    );
+  }
+
+  const isCard = item.type === 'PAYMENT_CARD';
+  // Branded button: full-color background + logo (PayPal, Klarna, iDEAL…).
+  // PAYMENT_CARD must never take this path — it always renders outlined with the
+  // "Pay with card" label, even if the native resource exposes a logo/background.
+  const isColorStyle = !isCard && item.backgroundColor != null && item.logo != null;
+  // Only the flat surcharge has a single amount we can display on the button.
+  // `perNetwork` (PAYMENT_CARD) depends on the card the user enters — skip here.
+  const surchargeLabel = item.surcharge?.kind === 'flat' ? `+${item.surcharge.amount}` : null;
+
+  if (isCard) {
+    return (
+      <TouchableOpacity style={[styles.button, styles.outlinedButton]} onPress={onPress} activeOpacity={0.7}>
+        {item.logo != null && <Image source={{ uri: item.logo }} style={styles.icon} resizeMode="contain" />}
+        <Text style={styles.outlinedText}>{t('primer_card_form_title')}</Text>
+        {surchargeLabel != null && <Text style={styles.surchargeDark}>{surchargeLabel}</Text>}
+      </TouchableOpacity>
+    );
+  }
+
+  if (isColorStyle) {
+    return (
+      <TouchableOpacity
+        style={[styles.button, { backgroundColor: item.backgroundColor }]}
+        onPress={onPress}
+        activeOpacity={0.7}
+      >
+        <Image source={{ uri: item.logo }} style={styles.logo} resizeMode="contain" />
+        {surchargeLabel != null && <Text style={styles.surchargeLight}>{surchargeLabel}</Text>}
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <TouchableOpacity style={[styles.button, styles.outlinedButton]} onPress={onPress} activeOpacity={0.7}>
+      {item.logo != null && <Image source={{ uri: item.logo }} style={styles.logo} resizeMode="contain" />}
+      {surchargeLabel != null && <Text style={styles.surchargeDark}>{surchargeLabel}</Text>}
+    </TouchableOpacity>
+  );
+}
+
+function createStyles(tokens: PrimerTokens) {
+  const { colors, spacing, radii, borders, typography } = tokens;
+
+  /* eslint-disable react-native/no-unused-styles */
+  return StyleSheet.create({
+    button: {
+      alignItems: 'center',
+      borderRadius: radii.medium,
+      flexDirection: 'row',
+      height: BUTTON_HEIGHT,
+      justifyContent: 'center',
+      overflow: 'hidden',
+      paddingHorizontal: spacing.small,
+      width: '100%',
+    },
+    icon: {
+      height: 20,
+      marginRight: spacing.small,
+      width: 20,
+    },
+    logo: {
+      height: BUTTON_HEIGHT * 0.5,
+      width: '40%',
+    },
+    nativeButton: {
+      height: BUTTON_HEIGHT,
+      width: '100%',
+    },
+    outlinedButton: {
+      backgroundColor: colors.background,
+      borderColor: colors.border,
+      borderWidth: borders.default,
+    },
+    outlinedText: {
+      color: colors.textPrimary,
+      fontFamily: typography.titleLarge.fontFamily,
+      fontSize: typography.titleLarge.fontSize,
+      fontWeight: typography.titleLarge.fontWeight as TextStyle['fontWeight'],
+      letterSpacing: typography.titleLarge.letterSpacing,
+      lineHeight: typography.titleLarge.lineHeight,
+      textAlign: 'center',
+    },
+    surchargeDark: {
+      color: colors.textSecondary,
+      fontFamily: typography.bodySmall.fontFamily,
+      fontSize: typography.bodySmall.fontSize,
+      fontWeight: typography.bodySmall.fontWeight as TextStyle['fontWeight'],
+      marginLeft: spacing.small,
+      position: 'absolute',
+      right: spacing.small,
+    },
+    surchargeLight: {
+      color: colors.background,
+      fontFamily: typography.bodySmall.fontFamily,
+      fontSize: typography.bodySmall.fontSize,
+      fontWeight: typography.bodySmall.fontWeight as TextStyle['fontWeight'],
+      opacity: 0.8,
+      position: 'absolute',
+      right: spacing.small,
+    },
+  });
+  /* eslint-enable react-native/no-unused-styles */
+}

package/src/Components/internal/ui/VaultedCardCvvRow.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import type { TextStyle } from 'react-native';
+
+import { usePrimerLocalization } from '../localization';
+import { usePrimerTheme } from '../theme';
+import type { PrimerTokens } from '../theme';
+import { PrimerTextInput } from '../../inputs/PrimerTextInput';
+import type { PrimerTextInputRef } from '../../types/CardInputTypes';
+
+const lockIcon = require('../screens/assets/lock.png');
+
+const ICON_SIZE = 20;
+const INPUT_WIDTH = 119;
+
+export interface VaultedCardCvvRowProps {
+  value: string;
+  onChangeValue: (next: string) => void;
+  /** Network-specific CVV abbreviation from the card descriptor (CVV / CVC / CID / CVN / CVE / CVP2). */
+  cvvLabel: string;
+  /** Network-specific CVV length (3 or 4). */
+  maxLength: number;
+  /** When true, the input auto-focuses and opens the keyboard on mount. */
+  autoFocus?: boolean;
+  error?: string;
+}
+
+export function VaultedCardCvvRow({
+  value,
+  onChangeValue,
+  cvvLabel,
+  maxLength,
+  autoFocus = false,
+  error,
+}: VaultedCardCvvRowProps) {
+  const tokens = usePrimerTheme();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+  const { t } = usePrimerLocalization();
+  const inputRef = useRef<PrimerTextInputRef>(null);
+
+  useEffect(() => {
+    if (!autoFocus) return;
+    inputRef.current?.focus();
+  }, [autoFocus, maxLength]);
+
+  const handleChangeText = (next: string) => {
+    onChangeValue(next.replace(/\D/g, ''));
+  };
+
+  return (
+    <View style={styles.row}>
+      <View style={styles.left}>
+        <Image source={lockIcon} style={styles.icon} resizeMode="contain" />
+        <Text style={styles.caption} numberOfLines={2}>
+          {t('primer_vault_cvv_hint_with_label', { label: cvvLabel })}
+        </Text>
+      </View>
+      <View style={styles.inputWrap}>
+        <PrimerTextInput
+          ref={inputRef}
+          value={value}
+          onChangeText={handleChangeText}
+          keyboardType="number-pad"
+          maxLength={maxLength}
+          secureTextEntry
+          autoComplete="cc-csc"
+          showLabel={false}
+          placeholder={cvvLabel}
+          accessibilityLabel={t('accessibility_vaulted_method_cvv', { label: cvvLabel })}
+          error={error}
+        />
+      </View>
+    </View>
+  );
+}
+
+function createStyles(tokens: PrimerTokens) {
+  const { colors, spacing, typography } = tokens;
+
+  /* eslint-disable react-native/no-unused-styles */
+  return StyleSheet.create({
+    caption: {
+      color: colors.textSecondary,
+      flex: 1,
+      fontFamily: typography.bodySmall.fontFamily,
+      fontSize: typography.bodySmall.fontSize,
+      fontWeight: typography.bodySmall.fontWeight as TextStyle['fontWeight'],
+      letterSpacing: typography.bodySmall.letterSpacing,
+      lineHeight: typography.bodySmall.lineHeight,
+    },
+    icon: {
+      height: ICON_SIZE,
+      tintColor: colors.textSecondary,
+      width: ICON_SIZE,
+    },
+    inputWrap: {
+      width: INPUT_WIDTH,
+    },
+    left: {
+      alignItems: 'center',
+      flex: 1,
+      flexDirection: 'row',
+      gap: spacing.small,
+      minWidth: 0,
+    },
+    row: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: spacing.medium,
+      width: '100%',
+    },
+  });
+  /* eslint-enable react-native/no-unused-styles */
+}