@transfergratis/react-native-sdk 0.1.25 → 0.1.28

package/src/components/EnhancedCameraView.web.tsx

@@ -27,6 +27,7 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
   videoDuration = 10,
   onSilentCapture,
   silentCaptureResult,
+  captureStabilizationDelayMs = 2500,
 }) => {
   const { t } = useI18n();
   
@@ -63,6 +64,24 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
     };
   }, [stream]);
 
+  // Build video constraints for quality (min + ideal improve Android/Samsung web quality; higher ideal for documents)
+  const getVideoConstraints = useCallback((): MediaTrackConstraints => {
+    const isHigh = quality === 'high';
+    const isMedium = quality === 'medium';
+    return {
+      facingMode: cameraType === 'front' ? 'user' : 'environment',
+      // min forces Android Chrome to use at least this resolution (avoids 640x480 default)
+      width: {
+        min: isHigh ? 1280 : isMedium ? 960 : 640,
+        ideal: isHigh ? 2560 : isMedium ? 1280 : 640,
+      },
+      height: {
+        min: isHigh ? 720 : isMedium ? 540 : 480,
+        ideal: isHigh ? 1440 : isMedium ? 720 : 480,
+      },
+    };
+  }, [cameraType, quality]);
+
   const checkPermissions = async () => {
     try {
       if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
@@ -70,8 +89,11 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
         return;
       }
 
-      // Test camera permission
-      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      // Use same constraints as startCamera so Android Chrome doesn't cache low resolution (e.g. 640x480)
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: getVideoConstraints(),
+        audio: enableVideo,
+      });
       stream.getTracks().forEach(track => track.stop());
 
       setHasPermission(true);
@@ -88,16 +110,32 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
         stream.getTracks().forEach(track => track.stop());
       }
 
-      const constraints = {
-        video: {
-          facingMode: cameraType === 'front' ? 'user' : 'environment',
-          width: { ideal: quality === 'high' ? 1920 : quality === 'medium' ? 1280 : 640 },
-          height: { ideal: quality === 'high' ? 1080 : quality === 'medium' ? 720 : 480 },
-        },
+      const constraints: MediaStreamConstraints = {
+        video: getVideoConstraints(),
         audio: enableVideo,
       };
 
-      const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+      let newStream: MediaStream;
+      try {
+        newStream = await navigator.mediaDevices.getUserMedia(constraints);
+      } catch (err) {
+        const name = err instanceof Error ? err.name : '';
+        // On some Android devices, min constraints can fail; fallback to ideal only
+        if (name === 'OverconstrainedError') {
+          const fallbackConstraints: MediaStreamConstraints = {
+            video: {
+              facingMode: cameraType === 'front' ? 'user' : 'environment',
+              width: { ideal: quality === 'high' ? 2560 : quality === 'medium' ? 1280 : 640 },
+              height: { ideal: quality === 'high' ? 1440 : quality === 'medium' ? 720 : 480 },
+            },
+            audio: enableVideo,
+          };
+          newStream = await navigator.mediaDevices.getUserMedia(fallbackConstraints);
+        } else {
+          throw err;
+        }
+      }
+
       setStream(newStream);
 
       if (videoRef.current) {
@@ -159,11 +197,19 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
       canvas.width = video.videoWidth;
       canvas.height = video.videoHeight;
 
-      // Draw the current video frame to canvas
-      context.drawImage(video, 0, 0);
+      // For front camera: draw flipped so captured image matches non-mirrored preview (no mirror confusion)
+      if (cameraType === 'front') {
+        context.save();
+        context.translate(canvas.width, 0);
+        context.scale(-1, 1);
+        context.drawImage(video, 0, 0);
+        context.restore();
+      } else {
+        context.drawImage(video, 0, 0);
+      }
 
-      // Convert to base64
-      const imageDataUrl = canvas.toDataURL('image/jpeg', 0.8);
+      // Convert to base64 (0.95 for document/ID capture clarity; backend can exploit text better)
+      const imageDataUrl = canvas.toDataURL('image/jpeg', 0.95);
 
       onSilentCapture?.({
         success: true,
@@ -176,21 +222,29 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
         error: error instanceof Error ? error.message : 'Failed to capture photo',
       });
     }
-  }, [isInitialized, onError, onSilentCapture]);
+  }, [isInitialized, cameraType, onError, onSilentCapture]);
 
 
-  // Automatically take a silent photo every 5 seconds when ready
+  // Stabilization delay then auto-capture every 5s; stop as soon as capture is validated (no more new captures)
   useEffect(() => {
-    if (!showCamera || !isInitialized) {
+    if (!showCamera || !isInitialized || silentCaptureResult?.success) {
       return;
     }
 
-    const intervalId = setInterval(() => {
+    const delayMs = Math.max(0, captureStabilizationDelayMs);
+    const intervalMs = 5000;
+    let intervalId: ReturnType<typeof setInterval> | null = null;
+
+    const timeoutId = setTimeout(() => {
       captureSilentPhoto();
-    }, 5000);
+      intervalId = setInterval(captureSilentPhoto, intervalMs);
+    }, delayMs);
 
-    return () => clearInterval(intervalId);
-  }, [showCamera, isInitialized, captureSilentPhoto]);
+    return () => {
+      clearTimeout(timeoutId);
+      if (intervalId) clearInterval(intervalId);
+    };
+  }, [showCamera, isInitialized, captureStabilizationDelayMs, captureSilentPhoto, silentCaptureResult?.success]);
 
   const startVideoRecording = useCallback(async () => {
     try {
@@ -299,7 +353,7 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
 
   return (
     <View style={[styles.container, style]}>
-      {/* Video element */}
+      {/* Video element; no mirror for front camera so preview matches final photo and doesn't confuse users */}
       <video
         ref={videoRef}
         style={{
@@ -307,6 +361,7 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
           width: '100%',
           height: '100%',
           objectFit: 'cover',
+          transform: cameraType === 'front' ? 'scaleX(-1)' : undefined,
         }}
         autoPlay
         playsInline

package/src/components/KYCElements/EmailVerificationTemplate.tsx

@@ -4,6 +4,7 @@ import { TemplateComponent, LocalizedText } from '../../types/KYC.types';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { useI18n } from '../../hooks/useI18n';
 import { Button } from '../ui/Button';
+import kycService, { errorMessage } from '../../modules/api/KYCService';
 
 interface EmailVerificationTemplateProps {
     component: TemplateComponent;
@@ -15,14 +16,21 @@ interface EmailVerificationTemplateProps {
 
 type VerificationStep = 'email' | 'otp';
 
+/** RFC-style email validation: local@domain.tld */
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const isValidEmail = (value: string): boolean => EMAIL_REGEX.test((value || '').trim());
+
 export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps> = ({
     component,
     value,
     onValueChange,
     error: propError,
 }) => {
-    const { actions, getLocalizedText } = useTemplateKYCFlowContext();
+    const { actions, getLocalizedText, state, apiKey } = useTemplateKYCFlowContext();
     const { t } = useI18n();
+
+    const auth = apiKey ? { apiKey } : (state.session.token ? { token: state.session.token } : undefined);
     // const config = component.config as EmailVerificationConfig; // Keep for future use
 
     // State
@@ -40,8 +48,9 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
     const sendButtonText = t('common.sendCode') || 'Send Verification Code';
     const buttonText = step === 'email' ? sendButtonText : verifyButtonText;
 
-    const handleSendCode = () => {
-        if (!email || !email.includes('@')) {
+    const handleSendCode = async () => {
+        const trimmed = email.trim();
+        if (!trimmed || !isValidEmail(trimmed)) {
             setLocalError(t('errors.invalidEmail') || 'Please enter a valid email address');
             return;
         }
@@ -49,16 +58,18 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
         setLocalError(null);
         setIsSimulating(true);
 
-        // Simulate API call to send code
-        setTimeout(() => {
-            setIsSimulating(false);
+        try {
+            await kycService.sendEmailVerificationCode(trimmed, auth);
             setStep('otp');
-            // For demo purposes, we could show an alert or toast here with the code
-            // But we'll just expect them to know 123456 or type anything for now if not strict
-        }, 1500);
+        } catch (err: any) {
+            const msg = errorMessage(err) ?? err?.message ?? (t('errors.sendCodeFailed') || 'Failed to send verification code');
+            setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
+        } finally {
+            setIsSimulating(false);
+        }
     };
 
-    const handleVerifyCode = () => {
+    const handleVerifyCode = async () => {
         if (!otp || otp.length < 4) {
             setLocalError(t('errors.invalidCode') || 'Please enter the 6-digit code');
             return;
@@ -67,24 +78,17 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
         setLocalError(null);
         setIsSimulating(true);
 
-        // Simulate verification API
-        setTimeout(() => {
+        try {
+            await kycService.verifyEmailCode(otp.trim(), auth);
+            const data = { email, otp, verified: true };
+            onValueChange(data);
+            actions.nextComponent(data);
+        } catch (err: any) {
+            const msg = errorMessage(err) ?? err?.message ?? (t('errors.wrongCode') || 'Invalid verification code');
+            setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
+        } finally {
             setIsSimulating(false);
-
-            // Mock validation logic
-            // Let's accept '123456' as the correct code or any code for testing if strictly requested?
-            // User said "verify with error message" implying we should support failure.
-            // Let's say if code is "000000" it fails, otherwise success, OR hardcode a success one.
-            // User said "verify with error message and next component if is a good one"
-            // Let's make "123456" the good one for clarity.
-
-            if (otp === '123456') {
-                onValueChange({ email, otp, verified: true });
-                actions.nextComponent();
-            } else {
-                setLocalError(t('errors.wrongCode') || 'Invalid verification code. Try 123456');
-            }
-        }, 1500);
+        }
     };
 
     const onChangeEmail = (text: string) => {
@@ -160,12 +164,22 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
 
                 {step === 'otp' && (
                     <TouchableOpacity
-                        onPress={() => {
-                            // Resend logic
-                            Alert.alert(
-                                t('common.codeResent') || 'Code Resent',
-                                t('common.codeResentMessage', { email }) || 'Code resent to ' + email
-                            );
+                        onPress={async () => {
+                            if (isSimulating) return;
+                            setLocalError(null);
+                            setIsSimulating(true);
+                            try {
+                                await kycService.sendEmailVerificationCode(email.trim(), auth);
+                                Alert.alert(
+                                    t('common.codeResent') || 'Code Resent',
+                                    t('common.codeResentMessage', { email }) || 'Code resent to ' + email
+                                );
+                            } catch (err: any) {
+                                const msg = errorMessage(err) ?? err?.message ?? (t('errors.sendCodeFailed') || 'Failed to send code');
+                                setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
+                            } finally {
+                                setIsSimulating(false);
+                            }
                         }}
                         style={styles.resendButton}
                         disabled={isSimulating}

package/src/components/KYCElements/IDCardCapture.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { View, Text, StyleSheet, Image, ScrollView, Platform, Modal, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, Image, ScrollView, Platform, Modal, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { TemplateComponent, LocalizedText, GovernmentDocumentType, ISilentCaptureResult, IBbox, GovernmentDocumentTypeShorted, GovernmentDocumentTypeBackend } from '../../types/KYC.types';
@@ -12,7 +12,7 @@ import { backVerification, checkTemplateType, frontVerification } from '../../mo
 import { getDocumentTypeInfo } from '../../utils/get-document-type-info';
 import pathToBase64 from '../../utils/pathToBase64';
 import kycService, { truncateFields } from '../../modules/api/KYCService';
-import { cropByObb, cropImageWithBBox, cropImageWithBBoxWithTolerance } from '../../utils/cropByObb';
+import { cropByObb, cropImageWithBBox, cropImageWithBBoxWithTolerance, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from '../../utils/cropByObb';
 import { isMobileWeb } from '../../utils/deviceDetection';
 import { logger } from '../../utils/logger';
 
@@ -252,6 +252,16 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
             setSilentCaptureResult((prev) => ({ ...prev, templatePath: templatePath }));
           }
           if (templateType.card_obb) {
+            const obbConfidence = getObbConfidence((templateType as any).card_obb);
+            if (obbConfidence !== null && obbConfidence < OBB_CONFIDENCE_THRESHOLD) {
+              setSilentCaptureResult((prev) => ({
+                ...prev,
+                isAnalyzing: false,
+                success: false,
+                error: t('kyc.idCardCapture.cardNotFullyInFrame'),
+              }));
+              return;
+            }
             let bbox: IBbox | undefined;
             try {
               const crop = await cropByObb(result?.path || '', (templateType as any).card_obb);
@@ -314,8 +324,14 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           }).catch((e: any) => {
             console.log("error front verification", e);
             logger.log("error front verification", truncateFields(e));
-            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: e?.message || 'Erreur de détection du MRZ' }));
-            // showAlert('Erreur', e?.message || 'Erreur de détection du MRZ');
+            const isCardNotFullyInFrame =
+              e?.message === 'CARD_NOT_FULLY_IN_FRAME' ||
+              e?.message?.includes('entirement') ||
+              e?.message?.includes('fully in frame');
+            const errorMessage = isCardNotFullyInFrame
+              ? t('kyc.idCardCapture.cardNotFullyInFrame')
+              : (e?.message || 'Erreur de détection du MRZ');
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: errorMessage }));
           });
         } catch (error: any) {
           console.log("Error setting up frontVerification call", error);
@@ -351,8 +367,14 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           }
         }).catch((e: any) => {
           logger.log("error back verification", truncateFields(e));
-          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: e?.message || 'Erreur de détection du MRZ' }));
-          // showAlert('Erreur', e?.message || 'Erreur de détection du MRZ');
+          const isCardNotFullyInFrame =
+            e?.message === 'CARD_NOT_FULLY_IN_FRAME' ||
+            e?.message?.includes('entirement') ||
+            e?.message?.includes('fully in frame');
+          const errorMessage = isCardNotFullyInFrame
+            ? t('kyc.idCardCapture.cardNotFullyInFrame')
+            : (e?.message || 'Erreur de détection du MRZ');
+          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: errorMessage }));
         })
       }
 
@@ -452,9 +474,11 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
       if (!currentUrl.searchParams.has('kyc_id') && state.session.session_id) {
         currentUrl.searchParams.set('kyc_id', state.session.session_id);
       }
-      // Ajouter l'étape actuelle pour permettre à l'utilisateur de continuer au bon endroit
-      if (!currentUrl.searchParams.has('step')) {
-        currentUrl.searchParams.set('step', String(state.currentComponentIndex));
+      currentUrl.searchParams.set('component_index', String(state.currentComponentIndex));
+      if (countrySelectionData?.code) {
+        currentUrl.searchParams.set('country', countrySelectionData.code);
+        if (countrySelectionData.documentType) currentUrl.searchParams.set('document_type', countrySelectionData.documentType);
+        if (countrySelectionData.region) currentUrl.searchParams.set('region', countrySelectionData.region);
       }
       return `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${encodeURIComponent(currentUrl.toString())}`;
     } catch (error) {
@@ -469,6 +493,22 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
 
 
 
+  // En reprise sur un autre appareil: afficher un chargement tant que les données de session ne sont pas restaurées
+  const isResumingSession = Boolean(state.session.session_id && state.currentComponentIndex > 0);
+  const sessionDataRestored = state.session.sessionDataRestored !== false;
+  if (isResumingSession && !sessionDataRestored && (!countrySelectionData || !selectedDocumentType)) {
+    return (
+      <View style={styles.root}>
+        <View style={[styles.container, { justifyContent: 'center', alignItems: 'center' }]}>
+          <ActivityIndicator size="large" color="#2DBD60" />
+          <Text style={[styles.description, { marginTop: 16 }]}>
+            {state.currentLanguage === 'en' ? 'Loading your session...' : 'Chargement de votre session...'}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
   // Vérifier si les données sont disponibles, sinon afficher un message d'erreur
   if (!countrySelectionData || !selectedDocumentType) {
     return (
@@ -506,6 +546,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           showSwitchCamera={true}
           onSilentCapture={handleSilentCapture}
           silentCaptureResult={silentCaptureResult}
+          captureStabilizationDelayMs={3000}
           enableFlash={cameraConfig.flashMode === 'auto' || cameraConfig.flashMode === 'on'}
           overlayComponent={<IdCardOverlay
             xMin={cameraConfig.overlay.bbox.xMin}
@@ -752,7 +793,7 @@ const styles = StyleSheet.create({
     height: '100%',
   },
   previewContainer: {
-    width: '100%',
+    width: '95%',
     backgroundColor: 'white',
     margin: 10,
     borderRadius: 10,

package/src/components/KYCElements/WelcomeTemplate.tsx

@@ -150,7 +150,7 @@ export const WelcomeTemplate: React.FC<WelcomeTemplateProps> = ({
 
         {/* Get Started Button */}
         <Button
-          title={buttonText}
+          title={buttonText?.length === 0 ? t('kyc.welcome.getStarted') || 'Get Started' : buttonText}
           fullWidth
           onPress={handleGetStarted}
           style={{ paddingVertical: 20, marginTop: 36 }}
@@ -175,6 +175,7 @@ const styles = StyleSheet.create({
     shadowRadius: 1.84,
     elevation: 3,
     maxWidth: 760,
+    width: '94%',
   },
   title: {
     fontSize: 24,

package/src/components/OverLay/type.ts

@@ -81,6 +81,8 @@ export interface EnhancedCameraViewProps {
     onVideoRecordingStart?: () => void;
     onVideoRecordingStop?: (result: { success: boolean; path?: string; error?: string }) => void;
     videoDuration?: number;
+    /** Delay in ms before first auto-capture (lets camera focus and user position document). Recommended 2500–3000 for ID/document capture. */
+    captureStabilizationDelayMs?: number;
 }
 
 export interface CheckTemplateTypeResponse {

package/src/components/TemplateKYCExample.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, SafeAreaView } from 'react-native';
 import { TemplateKYCFlow } from './TemplateKYCFlowRefactored';
 import { KYCTemplate, VerificationState } from '../types/KYC.types';
-import { KycEnvironment } from '../types/env.types';
+import { KycEnvironment, BackendEnvironment } from '../types/env.types';
 
 
 
@@ -144,10 +144,12 @@ export const TemplateKYCExample: React.FC<{
   API_KEY?: string;
   templateId?: string;
   template?: KYCTemplate;
-  env?: KycEnvironment;
+  env?: KycEnvironment;           // Flow execution: PRODUCTION (full AI) or SANDBOX (skip AI)
+  serverEnv?: BackendEnvironment; // Backend to call: PRODUCTION or TEST (API URL)
   existingSessionId?: string;
-  initialStep?: number;
-}> = ({ onComplete, onCancel, onError, language, API_KEY, templateId, template, env = 'PRODUCTION', existingSessionId, initialStep }) => {
+  initialComponentIndex?: number;
+  initialCountryResume?: { code: string; documentType: string; region?: string };
+}> = ({ onComplete, onCancel, onError, language, API_KEY, templateId, template, env = 'PRODUCTION', serverEnv, existingSessionId, initialComponentIndex, initialCountryResume }) => {
   const handleComplete = (data: VerificationState) => {
     console.log('KYC Template completed with data:', data);
     onComplete(data);
@@ -180,8 +182,10 @@ export const TemplateKYCExample: React.FC<{
           language={language} // ou "en" pour l'anglais
           API_KEY={API_KEY}
           env={env}
+          serverEnv={serverEnv}
           existingSessionId={existingSessionId}
-          initialStep={initialStep}
+          initialComponentIndex={initialComponentIndex}
+          initialCountryResume={initialCountryResume}
         />
       </View>
     </SafeAreaView>

package/src/components/TemplateKYCFlowRefactored.tsx

@@ -18,7 +18,8 @@ import { EmailVerificationTemplate } from './KYCElements/EmailVerificationTempla
 import { PhoneVerificationTemplate } from './KYCElements/PhoneVerificationTemplate';
 import { PersonalInformationTemplate } from './KYCElements/PersonalInformationTemplate';
 import { AdditionalDocumentsTemplate } from './KYCElements/AdditionalDocumentsTemplate';
-import { KycEnvironment } from '../types/env.types';
+import { KycEnvironment, BackendEnvironment } from '../types/env.types';
+import KYCConfig from '../config/KYCConfig';
 
 interface TemplateKYCFlowProps {
   template?: KYCTemplate;        // Format SDK direct (existing, now optional)
@@ -28,9 +29,13 @@ interface TemplateKYCFlowProps {
   language?: string;
   onCancel?: () => void;
   API_KEY?: string;              // Required if templateId is used
-  env?: KycEnvironment;           // Environment mode: PRODUCTION or SANDBOX
+  env?: KycEnvironment;           // Flow execution: PRODUCTION (full AI) or SANDBOX (skip AI)
+  serverEnv?: BackendEnvironment; // Backend to call: PRODUCTION or TEST (API URL)
   existingSessionId?: string;
-  initialStep?: number;          // Initial step index to resume verification
+  /** Index in template.components (0-based) to resume at — e.g. from URL component_index or template table */
+  initialComponentIndex?: number;
+  /** Pays / type de document depuis l'URL de reprise (reprise multi-appareil) */
+  initialCountryResume?: { code: string; documentType: string; region?: string };
 }
 
 export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
@@ -42,12 +47,21 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
   onCancel,
   API_KEY,
   env = 'PRODUCTION',
+  serverEnv,
   existingSessionId,
-  initialStep,
+  initialComponentIndex,
+  initialCountryResume,
 }) => {
   const { t } = useI18n();
   const { template: loadedTemplate, isLoading, error, loadTemplate } = useTemplateLoader();
 
+  // Which backend URL to call (independent from flow env)
+  useEffect(() => {
+    if (serverEnv !== undefined) {
+      KYCConfig.setBackendEnvironment(serverEnv);
+    }
+  }, [serverEnv]);
+
   // Validate props
   useEffect(() => {
     if (!providedTemplate && !templateId) {
@@ -136,7 +150,8 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
       apiKey={API_KEY}
       env={env}
       existingSessionId={existingSessionId}
-      initialStep={initialStep}
+      initialComponentIndex={initialComponentIndex}
+      initialCountryResume={initialCountryResume}
     >
       <TemplateKYCFlowContent onCancel={OnCancel} />
     </TemplateKYCFlowProvider>
@@ -241,7 +256,10 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
         {(state.showCustomStepper && state.session.isInitialized) ? (
           <View style={styles.header}>
             <Text style={styles.progressText}>
-              {t('kyc.step', { current: state.currentComponentIndex + 1, total: state.template.components.length })}
+              {t('kyc.step', {
+                current: (state.template.components.findIndex(c => c.id === currentComponent.id) + 1) || (state.currentComponentIndex + 1),
+                total: state.template.components.length,
+              })}
             </Text>
             <View style={styles.progressContainer}>
               <View style={styles.progressBar}>

package/src/config/KYCConfig.ts

@@ -6,7 +6,7 @@ class KYCConfig {
 
     private backendUrls: Record<BackendEnvironment, string> = {
         PRODUCTION: 'https://service.sanctumkey.com/api/v1',
-        TEST: 'https://test-service.sanctumkey.com/api/v1', // Placeholder URL
+        TEST: 'https://kyc-backend.transfergratis.net/api/v1', // Placeholder URL
     };
 
     private constructor() { }