feat: 3ds via authentication module ios

example/metro.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 const { getDefaultConfig } = require('@react-native/metro-config');
 const { withMetroConfig } = require('react-native-monorepo-config');
 
-const root = path.resolve(__dirname, '..', 'packages', '@juspay-tech', 'react-native-hyperswitch');
+const root = path.resolve(__dirname, '..');
 
 /**
  * Metro configuration

example/package.json

@@ -12,6 +12,8 @@
     "adb": "adb reverse tcp:8081 tcp:8081"
   },
   "dependencies": {
+    "@juspay-tech/react-native-hyperswitch": "*",
+    "@juspay-tech/react-native-hyperswitch-3ds": "*",
     "@sentry/react-native": "^6.20.0",
     "react": "19.0.0",
     "react-native": "0.79.2",
@@ -36,5 +38,10 @@
     "react-native-builder-bob": "^0.40.8",
     "react-native-dotenv": "^3.4.11",
     "react-native-monorepo-config": "^0.1.9"
+  },
+  "hyperswitch": {
+    "ios": {
+      "authProvider": "trident"
+    }
   }
 }

example/src/App.tsx

@@ -1,12 +1,76 @@
+import { useState } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
 import { HyperProvider } from '@juspay-tech/react-native-hyperswitch';
 import PaymentScreen from './PaymentScreen';
+import AuthenticationScreen from './AuthenticationScreen';
+
+type Screen = 'payment' | 'authentication';
 
 export default function App() {
+  const [activeScreen, setActiveScreen] = useState<Screen>('payment');
+
   return (
     <HyperProvider
       publishableKey={process.env.HYPERSWITCH_PUBLISHABLE_KEY || ''}
     >
-      <PaymentScreen />
+      <View style={styles.container}>
+        <View style={styles.tabBar}>
+          <TouchableOpacity
+            style={[styles.tab, activeScreen === 'payment' && styles.activeTab]}
+            onPress={() => setActiveScreen('payment')}
+          >
+            <Text style={[styles.tabText, activeScreen === 'payment' && styles.activeTabText]}>
+              Payment
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.tab, activeScreen === 'authentication' && styles.activeTab]}
+            onPress={() => setActiveScreen('authentication')}
+          >
+            <Text style={[styles.tabText, activeScreen === 'authentication' && styles.activeTabText]}>
+              Authentication
+            </Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.content}>
+          {activeScreen === 'payment' ? <PaymentScreen /> : <AuthenticationScreen />}
+        </View>
+      </View>
     </HyperProvider>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  tabBar: {
+    flexDirection: 'row',
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+    paddingTop: 50,
+  },
+  tab: {
+    flex: 1,
+    paddingVertical: 15,
+    alignItems: 'center',
+    borderBottomWidth: 2,
+    borderBottomColor: 'transparent',
+  },
+  activeTab: {
+    borderBottomColor: '#007AFF',
+  },
+  tabText: {
+    fontSize: 16,
+    color: '#666',
+  },
+  activeTabText: {
+    color: '#007AFF',
+    fontWeight: '600',
+  },
+  content: {
+    flex: 1,
+  },
+});

example/src/AuthenticationScreen.tsx

@@ -0,0 +1,187 @@
+import {
+    isAvailable,
+    initializeThreeDS,
+    generateAReqParams,
+    recieveChallengeParamsFromRN,
+    generateChallenge,
+    threeDSProvider
+} from '@juspay-tech/react-native-hyperswitch-3ds';
+import { Text, View, StyleSheet, Button, ScrollView, Platform } from 'react-native';
+import { useState } from 'react';
+
+export default function AuthenticationScreen() {
+    const [threeDsResult, setThreeDsResult] = useState<string>('');
+    const [aReqResult, setAReqResult] = useState<string>('');
+    const [challengeParamsResult, setChallengeParamsResult] = useState<string>('');
+    const [challengeResult, setChallengeResult] = useState<string>('');
+
+    const handleInitThreeDs = () => {
+        try {
+            const configuration = {
+                provider: threeDSProvider.trident,
+                publishableKey: "pk_snd_test",
+            };
+
+            initializeThreeDS(configuration, 'sandbox', (status) => {
+                console.log('3DS Status:', status);
+                setThreeDsResult(`Status: ${status.status}\nMessage: ${status.message}`);
+            });
+        } catch (error) {
+            setThreeDsResult(`Error: ${error}`);
+            console.error('Failed to initialize 3DS session:', error);
+        }
+    };
+
+    const handleGenerateAReqParams = () => {
+        try {
+            const messageVersion = '2.1.0';
+            const directoryServerId = 'A0000001';
+            const cardBrand = 'visa';
+
+            generateAReqParams(
+                messageVersion,
+                (status, aReqParams) => {
+                    const result = `Status: ${status.status}\nMessage: ${status.message}\n\nAReq Params:\n${JSON.stringify(aReqParams, null, 2)}`;
+                    setAReqResult(result);
+                },
+                directoryServerId,
+                cardBrand
+            );
+        } catch (error) {
+            setAReqResult(`Error: ${error}`);
+        }
+    };
+
+    const handleReceiveChallengeParams = () => {
+        try {
+            const acsSignedContent = 'test_acs_signed_content';
+            const acsRefNumber = 'test_acs_ref_number';
+            const acsTransactionId = 'test_acs_transaction_id';
+            const threeDSRequestorAppURL = 'hyperswitch://challenge';
+            const threeDSServerTransId = 'test_server_trans_id';
+
+            recieveChallengeParamsFromRN(
+                acsSignedContent,
+                acsRefNumber,
+                acsTransactionId,
+                threeDSRequestorAppURL,
+                threeDSServerTransId,
+                (status) => {
+                    setChallengeParamsResult(`Status: ${status.status}\nMessage: ${status.message}`);
+                }
+            );
+        } catch (error) {
+            setChallengeParamsResult(`Error: ${error}`);
+        }
+    };
+
+    const handleGenerateChallenge = () => {
+        try {
+            generateChallenge((status) => {
+                setChallengeResult(`Status: ${status.status}\nMessage: ${status.message}`);
+            });
+        } catch (error) {
+            setChallengeResult(`Error: ${error}`);
+        }
+    };
+
+    return (
+        <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
+            <Text style={styles.headerText}>Hyperswitch Auth Module Test</Text>
+            <Text style={styles.infoText}>Module Available: {isAvailable ? '✓ Yes' : '✗ No'}</Text>
+
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>1. Initialize 3DS Session</Text>
+                <Button
+                    title="Initialize 3DS"
+                    onPress={handleInitThreeDs}
+                />
+                {threeDsResult ? (
+                    <Text style={styles.resultText}>{threeDsResult}</Text>
+                ) : null}
+            </View>
+
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>2. Generate AReq Params</Text>
+                <Button
+                    title="Generate AReq Params"
+                    onPress={handleGenerateAReqParams}
+                />
+                {aReqResult ? (
+                    <Text style={styles.resultText}>{aReqResult}</Text>
+                ) : null}
+            </View>
+
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>3. Receive Challenge Params</Text>
+                <Button
+                    title="Receive Challenge Params"
+                    onPress={handleReceiveChallengeParams}
+                />
+                {challengeParamsResult ? (
+                    <Text style={styles.resultText}>{challengeParamsResult}</Text>
+                ) : null}
+            </View>
+
+            <View style={styles.section}>
+                <Text style={styles.sectionTitle}>4. Generate Challenge</Text>
+                <Button
+                    title="Generate Challenge"
+                    onPress={handleGenerateChallenge}
+                />
+                {challengeResult ? (
+                    <Text style={styles.resultText}>{challengeResult}</Text>
+                ) : null}
+            </View>
+        </ScrollView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+    },
+    contentContainer: {
+        padding: 20,
+        paddingTop: 50,
+    },
+    headerText: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        textAlign: 'center',
+        marginBottom: 10,
+        color: '#333',
+    },
+    infoText: {
+        fontSize: 16,
+        textAlign: 'center',
+        marginBottom: 20,
+        color: '#666',
+    },
+    section: {
+        marginBottom: 30,
+        padding: 15,
+        backgroundColor: '#f8f8f8',
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: '#e0e0e0',
+    },
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        marginBottom: 10,
+        color: '#333',
+    },
+    resultText: {
+        marginTop: 10,
+        padding: 12,
+        backgroundColor: '#fff',
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: '#ddd',
+        fontSize: 12,
+        fontFamily: Platform.select({ ios: 'Courier', android: 'monospace' }),
+        color: '#333',
+    },
+});

packages/@juspay-tech/react-native-hyperswitch-3ds/Hyperswitch3ds.podspec

@@ -0,0 +1,53 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+# Read provider configuration from consumer app's package.json
+# Use CocoaPods installation_root to reliably find the project root
+provider = 'core'
+
+begin
+  # Get the project root (where Podfile is located) and go up one level to find package.json
+  project_root = Pod::Config.instance.installation_root
+  app_package_path = File.join(project_root, "..", "package.json")
+
+  if File.exist?(app_package_path)
+    app_package = JSON.parse(File.read(app_package_path))
+    provider = app_package.dig('hyperswitch', 'ios', 'authProvider') || 'core'
+  end
+rescue => e
+  # Fallback to 'core' if there's any error reading the configuration
+  provider = 'core'
+end
+
+Pod::Spec.new do |s|
+  s.name         = "Hyperswitch3ds"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => ".git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  if provider == 'netcetera'
+    s.dependency "hyperswitch-sdk-ios-authentication/netcetera3ds"
+  elsif provider == 'trident'
+    s.dependency "hyperswitch-sdk-ios-authentication/trident"
+  elsif provider == 'cardinal'
+    s.dependency "hyperswitch-sdk-ios-authentication/cardinal"
+  else
+    s.dependency "hyperswitch-sdk-ios-authentication"
+  end
+
+# Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+# See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+if respond_to?(:install_modules_dependencies, true)
+  install_modules_dependencies(s)
+else
+  s.dependency "React-Core"
+end
+end