feat: add prebuilt PrimerCardForm and payment outcome flow (ACC-6495)

Author: OnurVar

example/src/screens/CheckoutComponentsListScreen.tsx

@@ -130,12 +130,12 @@ export function CheckoutComponentsListScreen() {
           clientToken={checkoutToken}
           settings={settings}
           onCheckoutComplete={checkoutData => {
-            console.log('Checkout complete:', checkoutData);
-            setSheetVisible(false);
+            console.log('Checkout complete:', JSON.stringify(checkoutData));
+            // Don't close the sheet here — the flow renders the Success screen
+            // and auto-dismisses after 5s. Closing manually would skip it.
           }}
           onError={error => {
-            console.error('Checkout error:', error);
-            Alert.alert('Checkout Error', error.errorId ?? 'Unknown error');
+            console.error('Checkout error:', JSON.stringify(error));
           }}>
           <PrimerCheckoutSheet
             visible={sheetVisible}

example/src/screens/CustomCardFormScreen.tsx

@@ -105,7 +105,7 @@ function ThemePicker({
 }
 
 function CardForm() {
-  const cardForm = useCardForm({collectCardholderName: true});
+  const cardForm = useCardForm();
   const [themeIndex, setThemeIndex] = useState(0);
   const [disabledPreview, setDisabledPreview] = useState(false);
   const current = THEMES[themeIndex]!;

src/Components/PrimerCardForm.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import type { TextStyle } from 'react-native';
+import { useTheme } from './internal/theme';
+import type { PrimerTokens } from './internal/theme';
+import { useLocalization } from './internal/localization';
+import { useCardForm } from './hooks/useCardForm';
+import { CardNumberInput } from './inputs/CardNumberInput';
+import { ExpiryDateInput } from './inputs/ExpiryDateInput';
+import { CVVInput } from './inputs/CVVInput';
+import { CardholderNameInput } from './inputs/CardholderNameInput';
+import type { PrimerTextInputRef } from './types/CardInputTypes';
+import type { PrimerCardFormProps } from './types/PrimerCardFormTypes';
+
+export function PrimerCardForm({
+  onSubmitStart,
+  autoFocus = false,
+  style,
+  testID = 'primer-card-form',
+}: PrimerCardFormProps) {
+  const form = useCardForm();
+  const { t } = useLocalization();
+  const tokens = useTheme();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const cardRef = useRef<PrimerTextInputRef>(null);
+  const expiryRef = useRef<PrimerTextInputRef>(null);
+  const cvvRef = useRef<PrimerTextInputRef>(null);
+  const nameRef = useRef<PrimerTextInputRef>(null);
+
+  // Delay tracks NavigationContainer's 250ms push; focusing sooner opens the
+  // keyboard mid-slide and jumps the layout.
+  useEffect(() => {
+    if (!autoFocus) return;
+    const handle = setTimeout(() => cardRef.current?.focus(), 300);
+    return () => clearTimeout(handle);
+  }, [autoFocus]);
+
+  const disabled = form.isSubmitting;
+  const canSubmit = form.isValid && !form.isSubmitting;
+
+  const handlePay = () => {
+    if (!canSubmit) return;
+    onSubmitStart?.();
+    form.submit();
+  };
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      <CardNumberInput
+        ref={cardRef}
+        cardForm={form}
+        editable={!disabled}
+        returnKeyType="next"
+        onSubmitEditing={() => expiryRef.current?.focus()}
+        testID={`${testID}-card-number`}
+      />
+
+      <View style={styles.row}>
+        <View style={styles.halfField}>
+          <ExpiryDateInput
+            ref={expiryRef}
+            cardForm={form}
+            editable={!disabled}
+            returnKeyType="next"
+            onSubmitEditing={() => cvvRef.current?.focus()}
+            testID={`${testID}-expiry`}
+          />
+        </View>
+        <View style={styles.halfField}>
+          <CVVInput
+            ref={cvvRef}
+            cardForm={form}
+            editable={!disabled}
+            returnKeyType="next"
+            onSubmitEditing={() => nameRef.current?.focus()}
+            testID={`${testID}-cvv`}
+          />
+        </View>
+      </View>
+
+      <CardholderNameInput
+        ref={nameRef}
+        cardForm={form}
+        editable={!disabled}
+        returnKeyType="done"
+        onSubmitEditing={handlePay}
+        testID={`${testID}-cardholder-name`}
+      />
+
+      <TouchableOpacity
+        onPress={handlePay}
+        disabled={!canSubmit}
+        activeOpacity={0.7}
+        style={[styles.payButton, !canSubmit && styles.payButtonDisabled]}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !canSubmit, busy: form.isSubmitting }}
+        accessibilityLabel={t('accessibility_card_form_submit_label')}
+        accessibilityHint={
+          form.isSubmitting
+            ? t('accessibility_card_form_submit_loading')
+            : canSubmit
+              ? t('accessibility_card_form_submit_hint')
+              : t('accessibility_card_form_submit_disabled')
+        }
+        testID={`${testID}-submit`}
+      >
+        {form.isSubmitting ? (
+          <ActivityIndicator color={tokens.colors.background} />
+        ) : (
+          <Text style={styles.payButtonText}>{t('primer_common_button_pay')}</Text>
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+function createStyles(tokens: PrimerTokens) {
+  const { colors, spacing, typography, radii } = tokens;
+  /* eslint-disable react-native/no-unused-styles */
+  return StyleSheet.create({
+    container: {
+      gap: spacing.medium,
+      width: '100%',
+    },
+    halfField: {
+      flex: 1,
+    },
+    payButton: {
+      alignItems: 'center',
+      backgroundColor: colors.primary,
+      borderRadius: radii.medium,
+      justifyContent: 'center',
+      marginTop: spacing.small,
+      minHeight: 44,
+      padding: spacing.medium,
+      width: '100%',
+    },
+    payButtonDisabled: {
+      opacity: 0.5,
+    },
+    payButtonText: {
+      color: colors.background,
+      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',
+    },
+    row: {
+      flexDirection: 'row',
+      gap: spacing.medium,
+    },
+  });
+  /* eslint-enable react-native/no-unused-styles */
+}