feat: update react native sdk to support pay now

android/build.gradle

@@ -38,7 +38,7 @@ def getExtOrIntegerDefault(name) {
 }
 
 // Update this value to the latest Android SDK version published on Maven
-def transact_version = "3.12.0"
+def transact_version = "3.13.0"
 
 android {
   namespace "com.atomicfi.transactreactnative"

atomicfi-transact-react-native.podspec

@@ -20,13 +20,13 @@ Pod::Spec.new do |s|
   # 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)
-    s.dependency "AtomicSDK", "3.22.0"
+    s.dependency "AtomicSDK", "3.23.0"
     s.pod_target_xcconfig = {
       "DEFINES_MODULE" => "YES",
     }
   else
     s.dependency "React-Core"
-    s.dependency "AtomicSDK", "3.22.0"
+    s.dependency "AtomicSDK", "3.23.0"
 
     # Don't install the dependencies when we run `pod install` in the old architecture.
     if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then

example/screens/TransactScreen.tsx

@@ -39,6 +39,7 @@ const TransactScreen: React.FC<Props> = () => {
   const [useDeeplink, setUseDeeplink] = useState(false);
   const [deeplinkCompanyId, setDeeplinkCompanyId] = useState('');
   const [singleSwitch, setSingleSwitch] = useState(false);
+  const [paymentsInput, setPaymentsInput] = useState('');
 
   const products = [
     { key: Product.DEPOSIT, label: 'Deposit' },
@@ -98,8 +99,11 @@ const TransactScreen: React.FC<Props> = () => {
       return;
     }
 
-    if (useDeeplink && !deeplinkCompanyId.trim()) {
-      Alert.alert('Error', 'Please enter a Company ID when using deeplink');
+    if (useDeeplink && !deeplinkCompanyId.trim() && !paymentsInput.trim()) {
+      Alert.alert(
+        'Error',
+        'Please enter a Company ID or Payments when using deeplink'
+      );
       return;
     }
 
@@ -115,13 +119,27 @@ const TransactScreen: React.FC<Props> = () => {
       ],
     };
 
-    // Add deeplink configuration if enabled and company ID is provided
-    if (useDeeplink && deeplinkCompanyId.trim()) {
-      config.deeplink = {
-        step: 'login-company',
-        companyId: deeplinkCompanyId.trim(),
-        singleSwitch: singleSwitch,
-      };
+    // Add deeplink configuration if enabled
+    if (useDeeplink) {
+      if (paymentsInput.trim()) {
+        // If payments input is provided, use pay-now step
+        const paymentsArray = paymentsInput
+          .split(',')
+          .map((p) => p.trim())
+          .filter((p) => p.length > 0);
+
+        config.deeplink = {
+          step: 'pay-now',
+          payments: paymentsArray,
+        };
+      } else if (deeplinkCompanyId.trim()) {
+        // Otherwise use login-company step if company ID is provided
+        config.deeplink = {
+          step: 'login-company',
+          companyId: deeplinkCompanyId.trim(),
+          singleSwitch: singleSwitch,
+        };
+      }
     }
 
     Atomic.transact({
@@ -311,19 +329,36 @@ const TransactScreen: React.FC<Props> = () => {
             </View>
 
             {selectedProduct === Product.SWITCH && (
-              <View style={styles.switchGroup}>
-                <Text style={styles.label}>Single Switch</Text>
-                <View style={styles.switchContainer}>
-                  <Text style={styles.switchLabel}>Off</Text>
-                  <Switch
-                    value={singleSwitch}
-                    onValueChange={setSingleSwitch}
-                    trackColor={{ false: '#d1d5db', true: '#3b82f6' }}
-                    thumbColor="#fff"
+              <>
+                <View style={styles.switchGroup}>
+                  <Text style={styles.label}>Single Switch</Text>
+                  <View style={styles.switchContainer}>
+                    <Text style={styles.switchLabel}>Off</Text>
+                    <Switch
+                      value={singleSwitch}
+                      onValueChange={setSingleSwitch}
+                      trackColor={{ false: '#d1d5db', true: '#3b82f6' }}
+                      thumbColor="#fff"
+                    />
+                    <Text style={styles.switchLabel}>On</Text>
+                  </View>
+                </View>
+                <View style={styles.inputGroup}>
+                  <Text style={styles.label}>Payments (pay-now step)</Text>
+                  <TextInput
+                    style={styles.input}
+                    value={paymentsInput}
+                    onChangeText={setPaymentsInput}
+                    placeholder="Enter payments (e.g. telecom)"
+                    placeholderTextColor="#9ca3af"
+                    autoCapitalize="none"
                   />
-                  <Text style={styles.switchLabel}>On</Text>
+                  <Text style={styles.helperText}>
+                    Comma-separated values. If provided, uses pay-now step
+                    instead of login-company.
+                  </Text>
                 </View>
-              </View>
+              </>
             )}
           </>
         )}
@@ -384,6 +419,11 @@ const styles = StyleSheet.create({
     color: '#1f2937',
     backgroundColor: '#ffffff',
   },
+  helperText: {
+    fontSize: 12,
+    color: '#6b7280',
+    marginTop: 4,
+  },
   customUrlInput: {
     marginTop: 12,
   },

src/index.tsx

@@ -44,11 +44,12 @@ interface Customer {
 }
 
 interface DeeplinkOptions {
-  step?: 'loginCompany' | 'loginPayroll' | 'addCard' | string;
+  step?: 'loginCompany' | 'loginPayroll' | 'addCard' | 'pay-now' | string;
   companyId?: string;
   connectorId?: string;
   companyName?: string;
   singleSwitch?: boolean;
+  payments?: string[];
 }
 
 interface Config {