@sanctum-key/react-native-sdk 1.0.61 → 1.0.62

package/src/components/KYCElements/IDCardCapture.tsx

@@ -99,6 +99,23 @@ const isUsableBarcodeText = (value: unknown, allowShortBarcode: boolean): value
   return !isDecoderError && trimmed.length > 0 && (allowShortBarcode || value.length > 50);
 };
 
+/**
+ * Keep barcode extraction payloads aligned with extract_mrz_text responses.
+ * The barcode formatter historically returned its decoded fields under
+ * `data`; downstream consumers expect all machine-readable document data
+ * under `parsed_data` regardless of whether it came from MRZ or a barcode.
+ */
+const normalizeBarcodePayload = (payload: unknown): unknown => {
+  if (!payload || typeof payload !== 'object' || Array.isArray(payload)) return payload;
+
+  const record = payload as Record<string, unknown>;
+  if (Object.prototype.hasOwnProperty.call(record, 'parsed_data')) return record;
+  if (!Object.prototype.hasOwnProperty.call(record, 'data')) return record;
+
+  const { data, ...metadata } = record;
+  return { ...metadata, data: data };
+};
+
 interface IDCardCaptureProps {
   component: TemplateComponent;
   value?: Record<string, IIDCardPayload>;
@@ -497,7 +514,26 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     const isLandscape = screenWidth > screenHeight;
     let xMin, xMax, yMin, yMax;
     
-    if (Platform.OS === 'web') {
+    if (scanPhase === 'barcode') {
+      // Keep the barcode target deliberately compact so users move close
+      // enough for dense PDF417 and linear bars to remain individually sharp.
+      // Pixel caps prevent the guide from becoming oversized on tablets.
+      const guideWidthPx = Math.min(
+        screenWidth * (isLandscape ? 0.68 : 0.82),
+        isLandscape ? 620 : 440,
+      );
+      const guideHeightPx = Math.min(
+        guideWidthPx / (isLandscape ? 4.2 : 3.2),
+        screenHeight * (isLandscape ? 0.34 : 0.12),
+      );
+      const guideWidthPercent = (guideWidthPx / screenWidth) * 100;
+      const guideHeightPercent = (guideHeightPx / screenHeight) * 100;
+
+      xMin = (100 - guideWidthPercent) / 2;
+      xMax = xMin + guideWidthPercent;
+      yMin = (100 - guideHeightPercent) / 2;
+      yMax = yMin + guideHeightPercent;
+    } else if (Platform.OS === 'web') {
       const boxWidthPercent = isLandscape ? 0.40 : 0.85;
       xMin = isLandscape ? 30 : 7.5; 
       xMax = xMin + (boxWidthPercent * 100);
@@ -624,7 +660,13 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     
     try {
       let imagePathForUpload = capturePath;
-      const overlayBbox = cameraConfig.overlay.bbox;
+      // Barcode mode has a deliberately tighter visual guide, but this method
+      // saves the verified document image. If OBB bounds are unavailable, keep
+      // using the original full-card fallback rather than cropping to the
+      // barcode-only window.
+      const overlayBbox = scanPhaseRef.current === 'barcode'
+        ? { xMin: 5, yMin: 34, xMax: 95, yMax: 66 }
+        : cameraConfig.overlay.bbox;
         
       // Prefer the backend-detected card bounds. Front verification returns the
       // detect_face OBB-derived bbox; back verification returns extract_mrz's
@@ -705,7 +747,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       setTimeout(() => {
         if (cameraGenerationRef.current !== captureGeneration) return;
         setShowCamera(false); actions.showCustomStepper(true);
-        setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
+        setSilentCaptureResult(prev => ({ ...prev, success: false, isAnalyzing: false, error: '' }));
         isProcessingCaptureRef.current = false;
         setIsProcessingCapture(false); setProcessingImagePath(null);
         scanPhaseRef.current = 'image';
@@ -780,10 +822,11 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       let parsedDictionary;
       
       if (isHIC && barcodeString.length < 50) {
-        parsedDictionary = { data: { card_number: barcodeString, barcode_type: "1D" } };
+        parsedDictionary = { parsed_data: { card_number: barcodeString, barcode_type: "1D" } };
       } else {
         const token = await authentification();
-        parsedDictionary = await kycService.formatBarcodeData({ textInput: barcodeString, token }, env);
+        const formattedBarcode = await kycService.formatBarcodeData({ textInput: barcodeString, token }, env);
+        parsedDictionary = normalizeBarcodePayload(formattedBarcode);
       }
       if (isStaleBarcode()) return;
       if (!parsedDictionary) throw new Error("Could not parse the barcode data.");
@@ -1117,10 +1160,11 @@ const handleSilentCapture = async (
         if (isValidScan) {
           let parsedDictionary;
           if (isHIC && barcodeData.length < 50) {
-            parsedDictionary = { data: { card_number: barcodeData, barcode_type: "1D" } };
+            parsedDictionary = { parsed_data: { card_number: barcodeData, barcode_type: "1D" } };
           } else {
             const token = await authentification();
-            parsedDictionary = await kycService.formatBarcodeData({ textInput: barcodeData, token }, env);
+            const formattedBarcode = await kycService.formatBarcodeData({ textInput: barcodeData, token }, env);
+            parsedDictionary = normalizeBarcodePayload(formattedBarcode);
           }
           if (isStaleFrame()) {
             clearTimeout(watchdog);
@@ -1327,7 +1371,8 @@ const handleSilentCapture = async (
               overlayComponent={
                 <IdCardOverlay
                   xMin={cameraConfig.overlay.bbox.xMin} yMin={cameraConfig.overlay.bbox.yMin} xMax={cameraConfig.overlay.bbox.xMax} yMax={cameraConfig.overlay.bbox.yMax}
-                  instructions={cameraConfig.overlay.guideText} cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0 as number} isSuccess={silentCaptureResult.success || scanPhase === 'barcode'} language={state.currentLanguage}
+                  instructions={cameraConfig.overlay.guideText} cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0 as number} isSuccess={silentCaptureResult.success} language={state.currentLanguage}
+                  mode={scanPhase === 'barcode' ? 'barcode' : 'document'}
                   stepperProps={{
                     back: () => {
                       if (currentSide === 'back') {
@@ -1342,21 +1387,6 @@ const handleSilentCapture = async (
                 />
               }
             />
-            {scanPhase === 'barcode' && !isBusy && (
-              <View style={styles.barcodePromptContainer}>
-                <View style={styles.barcodePromptContent}>
-                  <View style={styles.barcodeIconContainer}><Text style={styles.barcodeIcon}>✓</Text></View>
-                  <View style={styles.barcodeTextContainer}>
-                    <Text style={styles.barcodePromptTitle}>{state.currentLanguage === 'en' ? 'Image Verified' : 'Image Vérifiée'}</Text>
-                    <Text style={styles.barcodePromptDesc}>
-                      {state.currentLanguage === 'en' 
-                        ? 'Proceed to scan the barcode. Move closer but ensure it is fully visible in the frame.' 
-                        : 'Procédez au scan du code-barres. Rapprochez-vous, mais assurez-vous qu\'il soit entièrement visible dans le cadre.'}
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            )}
             {!isBusy && silentCaptureResult.isAnalyzing && (
               <View style={styles.topAnalyzingPillContainer}>
                 <View style={styles.topAnalyzingPill}>
@@ -1622,13 +1652,6 @@ const styles = StyleSheet.create({
   qrCodeWrapper: { padding: 20, backgroundColor: '#FFFFFF', borderRadius: 20, borderWidth: 2, borderColor: '#E2E8F0', marginBottom: 16, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.05, shadowRadius: 10 },
   listeningContainer: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#F0FDF4', paddingVertical: 12, paddingHorizontal: 20, borderRadius: 12, marginBottom: 24, borderWidth: 1, borderColor: '#BBF7D0' },
   listeningText: { marginLeft: 12, color: '#166534', fontSize: 14, fontWeight: '600' },
-  barcodePromptContainer: { position: 'absolute', top: Platform.OS === 'android' ? 60 : 75, left: 0, right: 0, alignItems: 'center', zIndex: 150, paddingHorizontal: 24, },
-  barcodePromptContent: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(15, 23, 42, 0.85)', paddingVertical: 14, paddingHorizontal: 20, borderRadius: 16, borderWidth: 1, borderColor: 'rgba(255, 255, 255, 0.15)', shadowColor: '#000', shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.3, shadowRadius: 12, elevation: 10, maxWidth: 400, ...Platform.select({ web: { backdropFilter: 'blur(8px)' } as any, ios: { backdropFilter: 'blur(8px)' } as any, }), },
-  barcodeIconContainer: { width: 36, height: 36, borderRadius: 18, backgroundColor: 'rgba(45, 189, 96, 0.2)', justifyContent: 'center', alignItems: 'center', marginRight: 14, borderWidth: 1, borderColor: 'rgba(45, 189, 96, 0.5)', },
-  barcodeIcon: { fontSize: 16, color: '#2DBD60', fontWeight: 'bold', },
-  barcodeTextContainer: { flex: 1, },
-  barcodePromptTitle: { color: '#2DBD60', fontSize: 16, fontWeight: '700', marginBottom: 4, },
-  barcodePromptDesc: { color: '#F8FAFC', fontSize: 14, fontWeight: '500', lineHeight: 20, },
   storeLinksContainer: { width: '100%', alignItems: 'center', marginBottom: 24, paddingTop: 16, borderTopWidth: 1, borderTopColor: '#E2E8F0' },
   storeLinksTitle: { fontSize: 14, color: '#64748B', fontWeight: '600', marginBottom: 12 },
   storeButtonsRow: { flexDirection: 'row', gap: 12, width: '100%', justifyContent: 'center' },

package/src/components/OverLay/IdCard.tsx

@@ -28,6 +28,7 @@ const IdCardOverlay = ({
     stepperProps,
     isSuccess,
     language = 'en',
+    mode = 'document',
     xMin: xMinPercent = 5,
     xMax: xMaxPercent = 95,
     yMin: yMinPercent = 34,
@@ -63,18 +64,29 @@ const IdCardOverlay = ({
 
     const docTypeFormatted = formatDocType(stepperProps?.selectedDocumentType);
     const sideText = getSideText(stepperProps?.side);
+    const isBarcodeMode = mode === 'barcode';
 
-    const bottomTitle = language === 'en'
-        ? `Position the ${sideText} of your ${docTypeFormatted}`
-        : `Positionnez le ${sideText} de votre ${docTypeFormatted}`;
+    const bottomTitle = isBarcodeMode
+        ? (language === 'en' ? 'Center the barcode in the yellow guide' : 'Centrez le code-barres dans le guide jaune')
+        : (language === 'en'
+            ? `Position the ${sideText} of your ${docTypeFormatted}`
+            : `Positionnez le ${sideText} de votre ${docTypeFormatted}`);
 
-    const bottomSubtitle = language === 'en'
-        ? 'Ensure all details are clear and readable.'
-        : 'Assurez-vous que tous les détails sont lisibles.';
+    const bottomSubtitle = isBarcodeMode
+        ? (language === 'en'
+            ? 'Move closer until it almost fills the guide. Keep both ends visible.'
+            : 'Rapprochez-vous jusqu’à presque remplir le guide. Gardez les deux extrémités visibles.')
+        : (language === 'en'
+            ? 'Ensure all details are clear and readable.'
+            : 'Assurez-vous que tous les détails sont lisibles.');
 
-    const helperText = language === 'en'
-        ? 'No glare  •  All corners visible  •  Hold steady'
-        : 'Pas de reflets  •  Coins visibles  •  Maintenez stable';
+    const helperText = isBarcodeMode
+        ? (language === 'en'
+            ? 'Barcode only  •  Keep level  •  Hold steady'
+            : 'Code-barres uniquement  •  Bien droit  •  Restez stable')
+        : (language === 'en'
+            ? 'No glare  •  All corners visible  •  Hold steady'
+            : 'Pas de reflets  •  Coins visibles  •  Maintenez stable');
 
     // --- SVG Constants ---
     const CORNER_SIZE = 40;
@@ -117,8 +129,8 @@ const IdCardOverlay = ({
                         />
                     </Mask>
                     <LinearGradient id="scanBorderGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-                        <Stop offset="0%" stopColor="#4ADE80" />
-                        <Stop offset="100%" stopColor="#22C55E" />
+                        <Stop offset="0%" stopColor={isBarcodeMode ? '#FDE047' : '#4ADE80'} />
+                        <Stop offset="100%" stopColor={isBarcodeMode ? '#F59E0B' : '#22C55E'} />
                     </LinearGradient>
                 </Defs>
 
@@ -133,11 +145,26 @@ const IdCardOverlay = ({
                     height={boxHeight}
                     rx={BORDER_RADIUS}
                     ry={BORDER_RADIUS}
-                    stroke={isSuccess ? '#2DBD60' : "rgba(255,255,255,0.25)"}
-                    strokeWidth={isSuccess ? 3 : 1.5}
+                    stroke={isSuccess ? '#2DBD60' : (isBarcodeMode ? 'rgba(250, 204, 21, 0.8)' : 'rgba(255,255,255,0.25)')}
+                    strokeWidth={isSuccess || isBarcodeMode ? 3 : 1.5}
                     fill="transparent"
                 />
 
+                {isBarcodeMode && (
+                    <Rect
+                        x={xMin + 8}
+                        y={yMin + 8}
+                        width={Math.max(0, boxWidth - 16)}
+                        height={Math.max(0, boxHeight - 16)}
+                        rx={Math.max(4, BORDER_RADIUS - 6)}
+                        ry={Math.max(4, BORDER_RADIUS - 6)}
+                        stroke="rgba(253, 224, 71, 0.45)"
+                        strokeWidth={1}
+                        strokeDasharray="8 7"
+                        fill="transparent"
+                    />
+                )}
+
                 {/* Professional Corner Guides */}
                 <AnimatedG opacity={cornerOpacity || 1}>
                     {/* Top Left */}
@@ -177,7 +204,21 @@ const IdCardOverlay = ({
 
             {/* Scanning animation */}
             {!isSuccess && (
-                <ScanningLine yMin={yMin} yMax={yMax} screenWidth={container.width} height={container.height} />
+                <ScanningLine
+                    yMin={yMin}
+                    yMax={yMax}
+                    screenWidth={container.width}
+                    height={container.height}
+                    xMin={isBarcodeMode ? xMin : 0}
+                    xMax={isBarcodeMode ? xMax : undefined}
+                    color={isBarcodeMode ? '#FACC15' : '#22C55E'}
+                />
+            )}
+
+            {isBarcodeMode && (
+                <View style={[styles.barcodeFrameLabel, { left: xMin, top: Math.max(8, yMin - 34) }]} pointerEvents="none">
+                    <Text style={styles.barcodeFrameLabelText}>{language === 'en' ? 'BARCODE TARGET' : 'ZONE CODE-BARRES'}</Text>
+                </View>
             )}
 
             {/* Top UI Zone */}
@@ -287,4 +328,20 @@ const styles = StyleSheet.create({
         fontSize: 12,
         fontWeight: '500',
     },
-});
+    barcodeFrameLabel: {
+        position: 'absolute',
+        zIndex: 12,
+        backgroundColor: 'rgba(15, 23, 42, 0.82)',
+        borderWidth: 1,
+        borderColor: 'rgba(250, 204, 21, 0.55)',
+        borderRadius: 6,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+    },
+    barcodeFrameLabelText: {
+        color: '#FDE047',
+        fontSize: 10,
+        fontWeight: '800',
+        letterSpacing: 1.2,
+    },
+});

package/src/components/OverLay/type.ts

@@ -15,7 +15,9 @@ export interface IdCardOverlayProps {
     orientation?: 'center' | 'left' | 'right';
     isAnalyzing?: boolean;
     isSuccess?: boolean;
-    language: string
+    language: string;
+    /** Changes the guide geometry and copy for the dedicated barcode phase. */
+    mode?: 'document' | 'barcode';
 }
 
 
@@ -93,4 +95,4 @@ export interface EnhancedCameraViewProps {
 export interface CheckTemplateTypeResponse {
     template_path: string;
     lpips_score: number;
-}
+}

package/src/components/Svgs/scanningLine.tsx

@@ -7,12 +7,18 @@ interface ScanningLineProps {
     yMax: number;
     screenWidth: number;
     height: number;
+    xMin?: number;
+    xMax?: number;
+    color?: string;
 }
 
-const ScanningLine = ({ yMin, yMax, screenWidth, height }: ScanningLineProps): React.ReactElement => {
+const ScanningLine = ({ yMin, yMax, screenWidth, height, xMin = 0, xMax, color = '#22C55E' }: ScanningLineProps): React.ReactElement => {
     const animatedValue = useRef(new Animated.Value(0)).current;
 
     const boxHeight = yMax - yMin;
+    const lineWidth = Math.max(0, (xMax ?? screenWidth) - xMin);
+    const glowHeight = Math.min(40, Math.max(12, boxHeight * 0.3));
+    const scanEnd = Math.max(yMin, yMax - glowHeight - 4);
 
     useEffect(() => {
         const startAnimation = () => {
@@ -36,7 +42,7 @@ const ScanningLine = ({ yMin, yMax, screenWidth, height }: ScanningLineProps): R
 
     const translateY = animatedValue.interpolate({
         inputRange: [0, 0.5, 1],
-        outputRange: [yMin, yMax, yMin], 
+        outputRange: [yMin, scanEnd, yMin],
     });
 
     return (
@@ -44,32 +50,33 @@ const ScanningLine = ({ yMin, yMax, screenWidth, height }: ScanningLineProps): R
             style={[
                 styles.container,
                 {
-                    width: screenWidth,
+                    left: xMin,
+                    width: lineWidth,
                     height: height,
                     transform: [{ translateY }],
                 },
             ]}
             pointerEvents="none"
         >
-            <Svg height="4" width={screenWidth}>
+            <Svg height="4" width={lineWidth}>
                 <Defs>
                     <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
                         <Stop offset="0%" stopColor="transparent" stopOpacity="0" />
-                        <Stop offset="50%" stopColor="#22C55E" stopOpacity="1" />
+                        <Stop offset="50%" stopColor={color} stopOpacity="1" />
                         <Stop offset="100%" stopColor="transparent" stopOpacity="0" />
                     </LinearGradient>
                 </Defs>
-                <Rect x="0" y="0" width={screenWidth} height="4" fill="url(#grad)" />
+                <Rect x="0" y="0" width={lineWidth} height="4" fill="url(#grad)" />
             </Svg>
             
-            <Svg height="40" width={screenWidth} style={{ marginTop: -2 }}>
+            <Svg height={glowHeight} width={lineWidth} style={{ marginTop: -2 }}>
                  <Defs>
                     <LinearGradient id="glow" x1="0%" y1="0%" x2="0%" y2="100%">
-                        <Stop offset="0%" stopColor="#22C55E" stopOpacity="0.4" />
-                        <Stop offset="100%" stopColor="#22C55E" stopOpacity="0" />
+                        <Stop offset="0%" stopColor={color} stopOpacity="0.4" />
+                        <Stop offset="100%" stopColor={color} stopOpacity="0" />
                     </LinearGradient>
-                </Defs>
-                <Rect x="0" y="0" width={screenWidth} height="40" fill="url(#glow)" />
+                 </Defs>
+                <Rect x="0" y="0" width={lineWidth} height={glowHeight} fill="url(#glow)" />
             </Svg>
         </Animated.View>
     );
@@ -84,4 +91,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default ScanningLine;
+export default ScanningLine;

package/src/components/TemplateKYCExample.tsx

@@ -4,6 +4,7 @@ import { TemplateKYCFlow } from './TemplateKYCFlowRefactored';
 import { KYCTemplate, VerificationState } from '../types/KYC.types';
 import { KycEnvironment, BackendEnvironment } from '../types/env.types';
 import { sdkLogger } from '../utils/logger'; // 🚨 IMPORT SDK LOGGER
+import type { DeviceSecurityCheckResult, DeviceSecurityPolicy } from '../security/deviceSecurity';
 
 const advancedVerificationTemplate: KYCTemplate = {
   id: 1,
@@ -60,6 +61,8 @@ export interface TemplateKYCExampleProps {
   onSessionSave?: (sessionId: string) => void;
   kyc_session_id?: string;
   templateConfig?: Record<string, string>;
+  deviceSecurityPolicy?: DeviceSecurityPolicy;
+  onDeviceSecurityCheck?: (result: DeviceSecurityCheckResult) => void;
 }
 
 export function TemplateKYCExample({
@@ -80,6 +83,8 @@ export function TemplateKYCExample({
   onSessionSave,
   kyc_session_id,
   templateConfig,
+  deviceSecurityPolicy,
+  onDeviceSecurityCheck,
 }: TemplateKYCExampleProps): JSX.Element {
 
   const handleComplete = (data: VerificationState) => {
@@ -167,8 +172,10 @@ export function TemplateKYCExample({
           referenceId={referenceId}
           onSessionSave={onSessionSave}
           kyc_session_id={kyc_session_id}
+          deviceSecurityPolicy={deviceSecurityPolicy}
+          onDeviceSecurityCheck={onDeviceSecurityCheck}
         />
       </View>
     </SafeAreaView>
   );
-}
+}