@jimrising/easymerchantsdk-react-native 2.0.6 → 2.0.9

package/README.md

@@ -1,48 +1,62 @@
 # EasyMerchantSdk React Native Implementation
 
-To implement the EasyMerchantSdk in your React Native App project. Follow the below steps:
+This guide provides step-by-step instructions to integrate the EasyMerchantSdk into your React Native application for both Android and iOS platforms.
 
-## Add the sdk path in your project.
-To add the path of sdk in your project. Open your `package.json` file and inside the `dependencies` section, add the below code and set the path of the sdk where you store on your disk.
+## Prerequisites
+
+- Node.js and npm installed
+- React Native development environment set up
+- Ruby 3.2.8 (for iOS setup)
+- Xcode (for iOS development)
+- Android Studio (for Android development)
+
+## Installation
+
+### 1. Add the SDK to Your Project
+
+Add the EasyMerchantSdk to your project by including it in your `package.json` file under the `dependencies` section:
 
 ```json
 "dependencies": {
-  "@jimrising/easymerchantsdk-react-native": "^2.0.6"
-},
+  "@jimrising/easymerchantsdk-react-native": "^2.0.9"
+}
 ```
 
-or using command
-```cmd
-npm i @jimrising/easymerchantsdk-react-native
+Alternatively, install it using the following command:
+
+```bash
+npm install @jimrising/easymerchantsdk-react-native
 ```
 
-## Changes in android side.
-Now open your `android` folder and there is a `build.gradle` file. Open it and add the below code in it.
+### 2. Android Configuration
+
+1. Open the `android/build.gradle` file in your project.
+2. Add the following code to the `allprojects.repositories` section to ensure the SDK can access required dependencies:
+
 ```gradle
 allprojects {
     repositories {
         google()
         mavenCentral()
         maven { url 'https://jitpack.io' }
-           maven {
-            url = uri(properties.getProperty('GITHUB_URL'))
-            credentials {
-                username = properties.getProperty('GITHUB_USERNAME')
-                password = properties.getProperty('GITHUB_PASSWORD')
-            }
-        }
+        maven {
+               url = uri(properties.getProperty('GITHUB_URL'))
+               credentials {
+                   username = properties.getProperty('GITHUB_USERNAME')
+                   password = properties.getProperty('GITHUB_PASSWORD')
+               }
+           }
     }
 }
 ```
 
-## Changes in IOS side.
-Add below content inside the AppDelegate.swift File :-
+3. Sync your project with Gradle to apply the changes.
 
-## Requirements
-  - Ruby 3.2.8
+### 3. iOS Configuration
 
+1. **Update AppDelegate.swift**  
+   Create or modify the `AppDelegate.swift` file in your iOS project to include the following code:
 
-Create a new file named AppDelegate.swift
 ```swift
 import UIKit
 import easymerchantsdk
@@ -50,7 +64,7 @@ import React
 
 @UIApplicationMain
 class AppDelegate: UIResponder, UIApplicationDelegate {
-var window: UIWindow?
+    var window: UIWindow?
 
     func application(
         _ application: UIApplication,
@@ -76,7 +90,7 @@ var window: UIWindow?
 
         let rootView = RCTRootView(
             bridge: validBridge,
-            moduleName: "EasyMerchantTestApp",    // replace it with your app name
+            moduleName: "EasyMerchantTestApp", // Replace with your app name
             initialProperties: nil
         )
 
@@ -85,8 +99,8 @@ var window: UIWindow?
         rootViewController.view = rootView
         self.window?.rootViewController = rootViewController
         self.window?.makeKeyAndVisible()
-      
-      if let easyMerchantSdkPlugin = bridge?.module(for: EasyMerchantSdkPlugin.self) as? EasyMerchantSdkPlugin {
+
+        if let easyMerchantSdkPlugin = bridge?.module(for: EasyMerchantSdkPlugin.self) as? EasyMerchantSdkPlugin {
             easyMerchantSdkPlugin.setViewController(rootViewController)
         } else {
             print("Failed to retrieve EasyMerchantSdkPlugin instance from React Native bridge.")
@@ -96,154 +110,43 @@ var window: UIWindow?
 }
 ```
 
-inside the PodFile add below
-```pod 
+2. **Update Podfile**  
+   Open your `ios/Podfile` and add the following to include the EasyMerchantSdk pod:
+
+```ruby
+require_relative '../node_modules/react-native/scripts/react_native_pods'
+require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
-  require_relative '../node_modules/react-native/scripts/react_native_pods'
-  require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+platform :ios, '16.0'
 
-  platform :ios, 16.0
-  
-  pod 'easymerchantsdk', :path => '../node_modules/easymerchantsdk-react-native/ios'
+pod 'easymerchantsdk', :path => '../node_modules/easymerchantsdk-react-native/ios'
 ```
 
+3. Run `pod install` in the `ios` directory to install the dependencies:
 
+```bash
+cd ios
+pod install
+```
 
-## How to call the sdk in `App.js`.
-you can call the sdk using below example:
+## Usage in Your React Native App
 
+To integrate the EasyMerchantSdk into your React Native application, you can use the provided `App.js` as a reference. Below is a summary of how to call the SDK in your `App.js`:
 
-```javascript
+1. **Import Necessary Modules**  
+   Ensure you import the required React Native components and the EasyMerchantSdk NativeModules:
 
+```javascript
 import React, { useState, useEffect } from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  TextInput,
-  Button,
-  Alert,
-  ScrollView,
-  Platform,
-  NativeModules,
-  Switch,
-  TouchableOpacity,
-  NativeEventEmitter,
-  KeyboardAvoidingView,
-  Keyboard,
-  TouchableWithoutFeedback,
-  Modal,
-} from 'react-native';
+import { StyleSheet, Text, View, TextInput, Button, Alert, ScrollView, Platform, NativeModules, Switch, TouchableOpacity, NativeEventEmitter, KeyboardAvoidingView, Keyboard, TouchableWithoutFeedback, Modal } from 'react-native';
 
 const { RNEasymerchantsdk, EasyMerchantSdk } = NativeModules;
+```
 
-// Dropdown Component
-const Dropdown = ({ value, onValueChange, options, placeholder }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  // Handler to close modal when tapping outside
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <View style={styles.dropdownContainer} pointerEvents="box-none">
-      <TouchableOpacity
-        style={styles.dropdownButton}
-        onPress={() => setIsOpen(!isOpen)}
-      >
-        <Text style={styles.dropdownButtonText}>
-          {value || placeholder}
-        </Text>
-        <Text style={styles.dropdownArrow}>
-          {isOpen ? '▲' : '▼'}
-        </Text>
-      </TouchableOpacity>
-      {Platform.OS === 'android' ? (
-        <Modal
-          visible={isOpen}
-          transparent={true}
-          animationType="fade"
-          onRequestClose={handleClose}
-        >
-          <TouchableWithoutFeedback onPress={handleClose}>
-            <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.2)' }}>
-              <View style={[styles.dropdownOptions, { position: 'absolute', top: '30%', left: 20, right: 20, maxHeight: 300, elevation: 20 }]}>
-                <ScrollView
-                  style={[styles.dropdownScrollView, { maxHeight: 280 }]}
-                  showsVerticalScrollIndicator={true}
-                  persistentScrollbar={true}
-                  nestedScrollEnabled={true}
-                  keyboardShouldPersistTaps="handled"
-                >
-                  {options.map((option, index) => (
-                    <TouchableOpacity
-                      key={index}
-                      style={styles.dropdownOption}
-                      onPress={() => {
-                        onValueChange(option);
-                        setIsOpen(false);
-                      }}
-                    >
-                      <Text style={styles.dropdownOptionText}>{option}</Text>
-                    </TouchableOpacity>
-                  ))}
-                </ScrollView>
-              </View>
-            </View>
-          </TouchableWithoutFeedback>
-        </Modal>
-      ) : (
-        isOpen && (
-          <View style={styles.dropdownOptions}>
-            <ScrollView
-              style={styles.dropdownScrollView}
-              showsVerticalScrollIndicator={true}
-              persistentScrollbar={true}
-              nestedScrollEnabled={true}
-              keyboardShouldPersistTaps="handled"
-            >
-              {options.map((option, index) => (
-                <TouchableOpacity
-                  key={index}
-                  style={styles.dropdownOption}
-                  onPress={() => {
-                    onValueChange(option);
-                    setIsOpen(false);
-                  }}
-                >
-                  <Text style={styles.dropdownOptionText}>{option}</Text>
-                </TouchableOpacity>
-              ))}
-            </ScrollView>
-          </View>
-        )
-      )}
-    </View>
-  );
-};
-
-// Custom Filled Button Component
-const FilledButton = ({ title, onPress, disabled = false, style = {}, textStyle = {} }) => {
-  return (
-    <TouchableOpacity
-      style={[
-        styles.filledButton,
-        disabled && styles.filledButtonDisabled,
-        style,
-      ]}
-      onPress={onPress}
-      disabled={disabled}
-    >
-      <Text style={[
-        styles.filledButtonText,
-        disabled && styles.filledButtonTextDisabled,
-        textStyle,
-      ]}>
-        {title}
-      </Text>
-    </TouchableOpacity>
-  );
-};
+2. **Set Up Configuration**  
+   Define the configuration object for the SDK, including payment details, theme settings, and other parameters. The provided `App.js` includes a comprehensive `externalConfig` object that you can customize:
 
+```javascript
 const externalConfig = {
   amount: '',
   email: '',
@@ -257,11 +160,11 @@ const externalConfig = {
   billingInfo: {
     visibility: { billing: false, additional: false },
     billing: {
-      address: 'San Fran, Punjab',
-      country: 'USA',
-      state: 'California',
-      city: 'Paris',
-      postal_code: '234234',
+      address: 'Address',
+      country: 'Country',
+      state: 'State',
+      city: 'City',
+      postal_code: '000000',
     },
     billingRequired: {
       address: true,
@@ -271,30 +174,32 @@ const externalConfig = {
       postal_code: true,
     },
     additional: {
-
+      name: 'Test User',
+      email_address: 'test@gmail.com',
       phone_number: '2140871329',
       description: 'Test',
     },
     additionalRequired: {
-
+      name: true,
+      email_address: true,
       phone_number: true,
       description: false,
     },
   },
-      themeConfiguration: {
-      bodyBackgroundColor: '#1E3A8A',
-      containerBackgroundColor: '#1E40AF',
-      primaryFontColor: '#FFFFFF',
-      secondaryFontColor: '#BFDBFE',
-      primaryButtonBackgroundColor: '#3B82F6',
-      primaryButtonHoverColor: '#2563EB',
-      primaryButtonFontColor: '#FFFFFF',
-      secondaryButtonBackgroundColor: '#1D4ED8',
-      secondaryButtonHoverColor: '#1E40AF',
-      secondaryButtonFontColor: '#FFFFFF',
-      borderRadius: '8',
-      fontSize: '14',
-    },
+  themeConfiguration: {
+    bodyBackgroundColor: '#1E3A8A',
+    containerBackgroundColor: '#1E40AF',
+    primaryFontColor: '#FFFFFF',
+    secondaryFontColor: '#BFDBFE',
+    primaryButtonBackgroundColor: '#3B82F6',
+    primaryButtonHoverColor: '#2563EB',
+    primaryButtonFontColor: '#FFFFFF',
+    secondaryButtonBackgroundColor: '#1D4ED8',
+    secondaryButtonHoverColor: '#1E40AF',
+    secondaryButtonFontColor: '#FFFFFF',
+    borderRadius: '8',
+    fontSize: '14',
+  },
   grailPayParams: {
     role: 'business',
     timeout: 10,
@@ -306,7 +211,7 @@ const externalConfig = {
   recurringData: {
     allowCycles: 2,
     intervals: ['daily', 'weekly', 'monthly'],
-    recurringStartType: 'custom',
+    recurringStartType:  'custom',
     recurringStartDate: new Date().toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }),
   },
   androidConfig: {
@@ -329,7 +234,8 @@ const externalConfig = {
         { name: 'postal_code', required: true, value: '1432456' },
       ],
       additional: [
-
+        { name: 'name', required: true, value: 'Test User 7' },
+        { name: 'email_address', required: true, value: 'usertest@gmail.com' },
         { name: 'phone_number', required: true, value: '8978967895' },
         { name: 'description', required: true, value: 'Hi This is description' },
       ],
@@ -353,139 +259,56 @@ const externalConfig = {
     },
   },
 };
+```
 
-const App = () => {
-  const [amount, setAmount] = useState(externalConfig.amount);
-  const [email, setEmail] = useState(externalConfig.email);
-  const [name, setName] = useState('');
-  const [environment, setEnvironment] = useState('sandbox');
-  const [isRecurring, setIsRecurring] = useState(externalConfig.isRecurring);
-  const [isAuthenticatedACH, setAuthenticatedACH] = useState(externalConfig.isAuthenticatedACH);
-  const [isSecureAuthentication, setSecureAuthentication] = useState(externalConfig.isSecureAuthentication);
-  const [isBillingVisible, setBillingVisible] = useState(externalConfig.isBillingVisible);
-  const [isAdditionalVisible, setAdditionalVisible] = useState(externalConfig.isAdditionalVisible);
-  const [emailEditable, setEmailEditable] = useState(externalConfig.emailEditable); // Android
-  const [isEmail, setIsEmail] = useState(externalConfig.isEmail); // iOS
-  const [billingInfo, setBillingInfo] = useState(externalConfig.billingInfo);
-  const [themeConfiguration, setThemeConfiguration] = useState(externalConfig.themeConfiguration);
-  const [grailPayParams, setGrailPayParams] = useState(externalConfig.grailPayParams);
-  const [recurringData, setRecurringData] = useState(externalConfig.recurringData);
-  const [androidConfig, setAndroidConfig] = useState(externalConfig.androidConfig);
-  const [result, setResult] = useState('');
-  const [referenceToken, setReferenceToken] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [showSecretKey, setShowSecretKey] = useState(false);
-  const metadata = {
-    metaKey: 'metaValue',
-    metaKLey1: 'metaValue1',
-    metaKLey2: 'metaValue2',
-    metaKLey3: 'metaValue3',
-    metaKLey4: 'metaValue4',
-  };
-
-const [apiKeys, setApiKeys] = useState({
-  sandbox: {
-    apiKey: 'sandboxApiKey',
-    secretKey: 'sandboxSecretKey',
-  },
-  staging: {
-    apiKey: 'stagingApiKey',
-    secretKey: 'stagingSecretKey',
-  },
-});
-  const [isEnvironmentLoading, setIsEnvironmentLoading] = useState(false);
-  const [showConfig, setShowConfig] = useState(true);
-
-  // Debug useEffect to track payment method changes
-  useEffect(() => {
-    console.log('Payment methods state changed:', androidConfig.paymentMethod);
-  }, [androidConfig.paymentMethod]);
-
-  // Debug useEffect to track theme configuration changes
-  useEffect(() => {
-    console.log('Theme configuration changed:', themeConfiguration);
-  }, [themeConfiguration]);
+3. **Handle Payments**  
+   Use the `handlePayment` function to initiate payments. This function validates inputs and calls platform-specific billing functions (`handleAndroidBilling` for Android and `handleIosBilling` for iOS). Example:
 
-  // Debug useEffect to track Android appearance settings changes
-  useEffect(() => {
-    console.log('Android appearance settings changed:', androidConfig.appearanceSettings);
-  }, [androidConfig.appearanceSettings]);
+```javascript
+const handlePayment = async () => {
+  if (!amount || isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {
+    return Alert.alert('Error', 'Please enter a valid amount');
+  }
 
+  if (isRecurring && (!recurringData.intervals || recurringData.intervals.length === 0)) {
+    return Alert.alert('Error', 'Please select at least one interval for recurring payment');
+  }
 
-  useEffect(() => {
-    const updateEnvironment = async () => {
-      const { apiKey, secretKey } = apiKeys[environment];
+  setLoading(true);
 
-      if (Platform.OS === 'ios') {
-        setIsEnvironmentLoading(true);
-        try {
-          await EasyMerchantSdk.setViewController();
-          await EasyMerchantSdk.configureEnvironment(environment, apiKey, secretKey);
-          console.log(`iOS Environment configured: ${environment} with key ${apiKey}`);
-        } catch (err) {
-          console.error('iOS Initialization Error:', err);
-          Alert.alert('Error', `Failed to configure iOS environment: ${err.message}`);
-        } finally {
-          setIsEnvironmentLoading(false);
-        }
-      }
-    };
+  try {
+    if (Platform.OS === 'android') {
+      await handleAndroidBilling();
+    } else {
+      await handleIosBilling();
+    }
+  } finally {
+    setLoading(false);
+  }
+};
+```
 
-    updateEnvironment();
-  }, [environment, apiKeys]);
+4. **Event Listeners for Android**  
+   Set up event listeners for payment success, status, and errors using `NativeEventEmitter`:
 
+```javascript
 useEffect(() => {
-  if (Platform.OS !== 'android') {
-    console.log('Event listeners skipped: not Android');
-    return;
-  }
-
-  if (!RNEasymerchantsdk) {
-    console.warn('RNEasymerchantsdk native module is not available.');
-    return;
-  }
+  if (Platform.OS !== 'android') return;
 
   const easyMerchantEvents = new NativeEventEmitter(RNEasymerchantsdk);
 
   const successSub = easyMerchantEvents.addListener('PaymentSuccess', (data) => {
-    console.log('Payment success event:', data);
-
-    try {
-      const parsed = JSON.parse(data.response);
-      console.log('Parsed PaymentSuccess:', parsed);
-
-      const billing = safeParseMaybeJSON(parsed.billingInfo);
-      const additional = safeParseMaybeJSON(parsed.additional_info);
-
-      console.log('Billing Info:', billing);
-      console.log('Additional Info:', additional);
-
-      // Replace raw with parsed versions
-      parsed.billingInfo = billing;
-      parsed.additional_info = additional;
-
-      setResult(JSON.stringify(parsed, null, 2));
-    } catch (err) {
-      console.error('Error parsing PaymentSuccess response:', err);
-    }
+    const parsed = JSON.parse(data.response);
+    setResult(JSON.stringify(parsed, null, 2));
   });
 
   const statusSub = easyMerchantEvents.addListener('PaymentStatus', (data) => {
-    console.log('Raw Payment status event:', data);
-
-    try {
-      const parsed = JSON.parse(data.statusResponse);
-      console.log('Parsed PaymentStatus:', parsed);
-
-      setResult(JSON.stringify(parsed, null, 2));
-    } catch (err) {
-      console.error('Error parsing PaymentStatus response:', err);
-    }
+    const parsed = JSON.parse(data.statusResponse);
+    setResult(JSON.stringify(parsed, null, 2));
   });
 
   const statusErrorSub = easyMerchantEvents.addListener('PaymentStatusError', (data) => {
-    console.log('Payment status error event:', data);
-    setResult(`Status Error: ${JSON.stringify(data)}`);
+    setResult(`Status Error: ${JSON.stringify(data.error, null, 2)}`);
   });
 
   return () => {
@@ -494,1493 +317,21 @@ useEffect(() => {
     statusErrorSub.remove();
   };
 }, []);
+```
 
+5. **UI Components**  
+   The provided `App.js` includes custom components like `Dropdown` and `FilledButton` for a user-friendly interface. Customize the styles in the `StyleSheet` to match your app's design.
 
-const safeParseMaybeJSON = (value) => {
-  if (typeof value === 'string') {
-    try {
-      return JSON.parse(value);
-    } catch (e) {
-      console.warn('Failed to parse JSON string:', value);
-      return value;
-    }
-  }
-  return value;
-};
-
-  useEffect(() => {
-    setBillingInfo(prev => ({
-      ...prev,
-      visibility: {
-        billing: isBillingVisible,
-        additional: isAdditionalVisible,
-      },
-    }));
-  }, [isBillingVisible, isAdditionalVisible]);
-
-  const updateBillingInfo = (section, field, value) => {
-    setBillingInfo(prev => ({
-      ...prev,
-      [section]: {
-        ...prev[section],
-        [field]: value,
-      },
-    }));
-  };
-
-  const updateAndroidConfig = (field, value) => {
-    setAndroidConfig(prev => ({
-      ...prev,
-      [field]: value,
-    }));
-  };
-
-  const updateAndroidConfigFields = (section, index, field, value) => {
-    setAndroidConfig(prev => ({
-      ...prev,
-      fields: {
-        ...prev.fields,
-        [section]: prev.fields[section].map((item, i) =>
-          i === index ? { ...item, [field]: value } : item
-        ),
-      },
-    }));
-  };
-
-  const updateAndroidConfigAppearanceSettings = (field, value) => {
-    setAndroidConfig(prev => ({
-      ...prev,
-      appearanceSettings: {
-        ...prev.appearanceSettings,
-        [field]: value,
-      },
-    }));
-  };
-
-  const updateThemeConfiguration = (field, value) => {
-    setThemeConfiguration(prev => ({
-      ...prev,
-      [field]: value,
-    }));
-  };
-
-  const updateGrailPayParams = (field, value) => {
-    setGrailPayParams(prev => ({
-      ...prev,
-      [field]: value,
-    }));
-  };
-
-  const updateRecurringData = (field, value) => {
-    setRecurringData(prev => ({
-      ...prev,
-      [field]: value,
-    }));
-  };
-
-  const togglePaymentMethod = (method) => {
-    console.log('Toggling payment method:', method);
-    setAndroidConfig(prev => {
-      const currentMethods = prev.paymentMethod;
-      console.log('Current payment methods before toggle:', currentMethods);
-      const isCurrentlySelected = currentMethods.includes(method);
-      console.log('Is currently selected:', isCurrentlySelected);
-
-      let newMethods;
-      if (isCurrentlySelected) {
-        // If deselecting and it's the only method, don't allow deselection
-        if (currentMethods.length === 1) {
-          console.log('Cannot deselect last payment method, keeping current state');
-          return prev; // Keep the current state
-        }
-        // Remove the method
-        newMethods = currentMethods.filter(m => m !== method);
-        console.log('Removing method, new methods:', newMethods);
-      } else {
-        // Add the method
-        newMethods = [...currentMethods, method];
-        console.log('Adding method, new methods:', newMethods);
-      }
-
-      const updatedConfig = {
-        ...prev,
-        paymentMethod: newMethods,
-      };
-      console.log('Updated android config payment methods:', updatedConfig.paymentMethod);
-      return updatedConfig;
-    });
-  };
-
-  const toggleInterval = (interval) => {
-    setRecurringData(prev => ({
-      ...prev,
-      intervals: prev.intervals.includes(interval)
-        ? prev.intervals.filter(i => i !== interval)
-        : [...prev.intervals, interval],
-    }));
-  };
-
-  const handlePayment = async () => {
-    if (!amount || isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {
-      return Alert.alert('Error', 'Please enter a valid amount');
-    }
-
-    // Validate that at least one interval is selected when recurring payment is enabled
-    if (isRecurring && (!recurringData.intervals || recurringData.intervals.length === 0)) {
-      return Alert.alert('Error', 'Please select at least one interval for recurring payment');
-    }
-
-    setLoading(true);
-
-    // Add a timeout to ensure loading state is reset even if SDK blocks execution
-    const timeoutId = setTimeout(() => {
-      setLoading(false);
-    }, 3000); // 3 second timeout
-
-    try {
-      if (Platform.OS === 'android') {
-        await handleAndroidBilling();
-      } else {
-        await handleIosBilling();
-      }
-    } finally {
-      clearTimeout(timeoutId);
-      setLoading(false);
-    }
-  };
-
-const handleAndroidBilling = async () => {
-
-const { apiKey, secretKey } = apiKeys[environment];
-
-console.log('Selected payment methods for Android:', androidConfig.paymentMethod);
-console.log('Full androidConfig.paymentMethod:', JSON.stringify(androidConfig.paymentMethod));
-
-// Create a fresh copy of payment methods to ensure no reference issues
-const selectedPaymentMethods = [...androidConfig.paymentMethod];
-console.log('Fresh copy of payment methods:', selectedPaymentMethods);
-console.log('Payment method contains "ach":', selectedPaymentMethods.includes('ach'));
-console.log('Payment method contains "card":', selectedPaymentMethods.includes('card'));
-
-// Log ACH-specific configurations when ACH is selected
-if (selectedPaymentMethods.includes('ach')) {
-  console.log('=== ACH CONFIGURATION DEBUG ===');
-  console.log('authenticatedACH setting:', isAuthenticatedACH);
-  console.log('secureAuthentication setting:', isSecureAuthentication);
-  console.log('saveAccount setting:', androidConfig.saveAccount);
-}
-
-// Try different payment method format for ACH-only scenario
-let finalPaymentMethods = selectedPaymentMethods;
-if (selectedPaymentMethods.length === 1 && selectedPaymentMethods.includes('ach')) {
-  // Try using a different format for ACH-only
-  finalPaymentMethods = ['ach'];
-  console.log('Using ACH-only format:', finalPaymentMethods);
-}
-
-   const config = {
-          amount,
-          apiKey: apiKey,
-          secretKey: secretKey,
-          jsonConfig: {
-            environment,
-            amount,
-            tokenOnly: false,
-                  currency: androidConfig.currency,
-                  saveCard: androidConfig.saveCard,
-                  saveAccount: androidConfig.saveAccount,
-                  authenticatedACH: isAuthenticatedACH,
-                  secureAuthentication: isSecureAuthentication,
-
-                  showReceipt: androidConfig.showReceipt,
-                  showDonate: androidConfig.showDonate,
-                  showTotal: androidConfig.showTotal,
-                  showSubmitButton: androidConfig.showSubmitButton,
-                  paymentMethod: finalPaymentMethods,
-                  // Try different configuration approaches for ACH-only
-                  ...(finalPaymentMethods.length === 1 && finalPaymentMethods.includes('ach') && {
-                    paymentMethods: ['ach'],
-                    allowedPaymentMethods: ['ach'],
-                    disableCard: true,
-                  }),
-
-            emailEditable,
-            email,
-                name: name,
-                fields: {
-                  ...androidConfig.fields,
-                  visibility: {
-                    billing: isBillingVisible,
-                    additional: isAdditionalVisible,
-                  },
-                },
-
-                 metadata,
-
-
-                ...(isRecurring && {
-                  recurring: {
-                    enableRecurring: true,
-                    recurringData,
-                  },
-                }),
-                grailPayParams,
-                appearanceSettings: androidConfig.appearanceSettings,
-
-
-          },
-        };
-
-          console.log('ENV API Keys =>', {
-            env: environment,
-            apiKeyFromEnv: apiKey,
-            secretKeyFromEnv: secretKey,
-          });
-
-          console.log('Config API Key =>', config.apiKey);
-          console.log('Config Secret Key =>', config.secretKey);
-          console.log('Full config being sent to Android SDK:', JSON.stringify(config, null, 2));
-console.log('=== THEME CONFIGURATION DEBUG ===');
-console.log('Android appearanceSettings:', JSON.stringify(androidConfig.appearanceSettings, null, 2));
-
-
-
-  try {
-const response = await RNEasymerchantsdk.makePayment(config);
-console.log('Full payment response:', response);
-
-const parsedResponse = {
-  ...response,
-  billingInfo: safeParseMaybeJSON(response.billingInfo),
-  additional_info: safeParseMaybeJSON(response.additional_info),
-};
-
-console.log('Parsed safe response:', parsedResponse);
-
-setResult(JSON.stringify(parsedResponse, null, 2));
-  } catch (error) {
-    setResult(`Error: ${error.message}`);
-    Alert.alert('Payment Error', error.message);
-  } finally {
-    setLoading(false);
-  }
-};
-
-  const handleIosBilling = async () => {
-
-    console.log('Selected payment methods for iOS:', androidConfig.paymentMethod);
-console.log('Full androidConfig.paymentMethod for iOS:', JSON.stringify(androidConfig.paymentMethod));
-
-// Create a fresh copy of payment methods for iOS and convert to iOS format
-const selectedPaymentMethodsIOS = [...androidConfig.paymentMethod];
-console.log('Fresh copy of payment methods for iOS:', selectedPaymentMethodsIOS);
-console.log('Payment method contains "ach" (iOS):', selectedPaymentMethodsIOS.includes('ach'));
-console.log('Payment method contains "card" (iOS):', selectedPaymentMethodsIOS.includes('card'));
-
-// Convert Android payment method names to iOS format
-let finalPaymentMethodsIOS = selectedPaymentMethodsIOS.map(method => {
-  if (method === 'card') return 'Card';
-  if (method === 'ach') return 'Bank';
-  return method;
-});
-
-console.log('Converted payment methods for iOS:', finalPaymentMethodsIOS);
-console.log('=== iOS THEME CONFIGURATION DEBUG ===');
-console.log('iOS themeConfiguration:', JSON.stringify(themeConfiguration, null, 2));
-
-    try {
-      const result = await EasyMerchantSdk.billing(
-        amount,
-        androidConfig.currency || 'usd',
-        billingInfo,
-        finalPaymentMethodsIOS,
-        themeConfiguration,
-        false, // tokenOnly
-        androidConfig.saveCard,
-        androidConfig.saveAccount,
-        isAuthenticatedACH,
-        grailPayParams,
-        'Submit',
-        isRecurring,
-        isRecurring ? recurringData.allowCycles : 0,
-        isRecurring ? recurringData.intervals : [],
-        isRecurring ? recurringData.recurringStartType : '',
-        isRecurring ? recurringData.recurringStartDate : '',
-        isSecureAuthentication,
-        androidConfig.showReceipt,
-        androidConfig.showTotal,
-        androidConfig.showSubmitButton,
-        isEmail,
-        email,
-        name,
-        metadata
-      );
-
-      const refToken = result?.additionalInfo?.threeDSecureStatus?.data?.ref_token;
-      if (refToken) setReferenceToken(refToken);
-      setResult(JSON.stringify(result, null, 2));
-    } catch (error) {
-      console.error('Billing Error:', error);
-      setResult(`Billing Error: ${error.message || JSON.stringify(error)}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCheckStatus = async () => {
-    setLoading(true);
-    try {
-      const response = await RNEasymerchantsdk.checkPaymentStatus();
-      console.log('Full payment response:', response);
-      setResult(JSON.stringify(response, null, 2));
-    } catch (error) {
-      setResult(`Error: ${error.message}`);
-      Alert.alert('Status Check Error', error.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handlePaymentReference = async () => {
-    if (Platform.OS === 'android') {
-      setResult('Payment Reference not supported on Android');
-      return;
-    }
-    try {
-      const response = await EasyMerchantSdk.paymentReference(referenceToken);
-      setResult(`Payment Reference:\n${JSON.stringify(response, null, 2)}`);
-    } catch (error) {
-      setResult(`Payment Reference Error: ${error.message || JSON.stringify(error)}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <KeyboardAvoidingView
-      style={styles.container}
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
-    >
-      <ScrollView
-        contentContainerStyle={styles.scrollContent}
-        keyboardShouldPersistTaps="handled"
-        showsVerticalScrollIndicator={false}
-      >
-        <Text style={styles.title}>EasyMerchant SDK</Text>
-
-
-
-        <Text style={styles.sectionTitle}>Basic Info</Text>
-        <Text style={styles.label}>Amount</Text>
-        <TextInput
-          style={styles.input}
-          placeholder="Enter amount (e.g., 10.00)"
-          placeholderTextColor="#999999"
-          keyboardType="decimal-pad"
-          value={amount}
-          onChangeText={setAmount}
-        />
-        <Text style={styles.label}>Email</Text>
-        <TextInput
-          style={styles.input}
-          placeholder="Enter email"
-          placeholderTextColor="#999999"
-          keyboardType="email-address"
-          value={email}
-          onChangeText={setEmail}
-        />
-        <Text style={styles.label}>Name</Text>
-        <TextInput
-          style={styles.input}
-          placeholder="Enter name"
-          placeholderTextColor="#999999"
-          value={name}
-          onChangeText={setName}
-        />
-
-        <View style={styles.buttonGroup}>
-          <FilledButton
-            title="Pay"
-            onPress={handlePayment}
-            disabled={loading}
-          />
-          {Platform.OS === 'ios' && (
-            <FilledButton
-              title="Payment Ref"
-              onPress={handlePaymentReference}
-              disabled={loading}
-            />
-          )}
-        </View>
-
-
-
-
-
-        <View style={styles.toggleContainer}>
-          <Text style={styles.label}>Show Configurations</Text>
-          <Switch
-            value={showConfig}
-            onValueChange={setShowConfig}
-            trackColor={{ false: '#ccc', true: '#2563EB' }}
-            thumbColor={showConfig ? '#fff' : '#f4f3f4'}
-          />
-        </View>
-
-        {showConfig && (
-          <>
-           <Text style={styles.sectionTitle}>Environment</Text>
-               <View style={styles.pickerContainer}>
-                 <Text style={styles.label}>Select Environment</Text>
-                 <View style={styles.buttonGroup}>
-                   <TouchableOpacity
-                     style={[
-                       styles.environmentButton,
-                       { backgroundColor: environment === 'sandbox' ? '#2563EB' : '#ccc' },
-                     ]}
-                     onPress={() => {
-                       console.log('Sandbox tapped, setting environment to sandbox');
-                       setEnvironment('sandbox');
-                     }}
-                     disabled={isEnvironmentLoading || environment === 'sandbox'}
-                   >
-                     <Text style={styles.buttonText}>Sandbox</Text>
-                   </TouchableOpacity>
-                   <TouchableOpacity
-                     style={[
-                       styles.environmentButton,
-                       { backgroundColor: environment === 'staging' ? '#2563EB' : '#ccc' },
-                     ]}
-                     onPress={() => {
-                       console.log('Staging tapped, setting environment to staging');
-                       setEnvironment('staging');
-                     }}
-                     disabled={isEnvironmentLoading || environment === 'staging'}
-                   >
-                     <Text style={styles.buttonText}>Staging</Text>
-                   </TouchableOpacity>
-                 </View>
-               </View>
-
-               <Text style={styles.sectionTitle}>{environment === 'sandbox' ? 'Sandbox' : 'Staging'} API Credentials</Text>
-               <Text style={styles.label}>API Key</Text>
-               <TextInput
-                 style={styles.input}
-                 value={apiKeys[environment].apiKey}
-                 onChangeText={value =>
-                   setApiKeys(prev => ({
-                     ...prev,
-                     [environment]: { ...prev[environment], apiKey: value },
-                   }))
-                 }
-                 placeholder={`Enter ${environment === 'sandbox' ? 'Sandbox' : 'Staging'} API Key`}
-                 placeholderTextColor="#999999"
-               />
-               <Text style={styles.label}>Secret Key</Text>
-               <View style={styles.inputContainer}>
-                 <TextInput
-                   style={[styles.input, { flex: 1 }]}
-                   value={apiKeys[environment].secretKey}
-                   onChangeText={value =>
-                     setApiKeys(prev => ({
-                       ...prev,
-                       [environment]: { ...prev[environment], secretKey: value },
-                     }))
-                   }
-                   placeholder={`Enter ${environment === 'sandbox' ? 'Sandbox' : 'Staging'} Secret Key`}
-                   placeholderTextColor="#999999"
-                   secureTextEntry={!showSecretKey}
-                 />
-                 <TouchableOpacity
-                   style={styles.eyeButton}
-                   onPress={() => setShowSecretKey(prev => !prev)}
-                 >
-                   <Text style={styles.eyeIcon}>{showSecretKey ? '👁️' : '👁️‍🗨️'}</Text>
-                 </TouchableOpacity>
-               </View>
-
-
-
-
-
-            <Text style={styles.sectionTitle}>Payment Options</Text>
-            <View style={styles.toggleContainer}>
-              <Text style={styles.label}>Recurring Payment</Text>
-              <Switch
-                value={isRecurring}
-                onValueChange={setIsRecurring}
-                trackColor={{ false: '#ccc', true: '#2563EB' }}
-                thumbColor={isRecurring ? '#fff' : '#f4f3f4'}
-              />
-            </View>
-            <View style={styles.toggleContainer}>
-              <Text style={styles.label}>Authenticated ACH</Text>
-              <Switch
-                value={isAuthenticatedACH}
-                onValueChange={setAuthenticatedACH}
-                trackColor={{ false: '#ccc', true: '#2563EB' }}
-                thumbColor={isAuthenticatedACH ? '#fff' : '#f4f3f4'}
-              />
-            </View>
-            <View style={styles.toggleContainer}>
-              <Text style={styles.label}>3DS</Text>
-              <Switch
-                value={isSecureAuthentication}
-                onValueChange={setSecureAuthentication}
-                trackColor={{ false: '#ccc', true: '#2563EB' }}
-                thumbColor={isSecureAuthentication ? '#fff' : '#f4f3f4'}
-              />
-            </View>
-            <View style={styles.toggleContainer}>
-              <Text style={styles.label}>Billing Visible</Text>
-              <Switch
-                value={isBillingVisible}
-                onValueChange={setBillingVisible}
-                trackColor={{ false: '#ccc', true: '#2563EB' }}
-                thumbColor={isBillingVisible ? '#fff' : '#f4f3f4'}
-              />
-            </View>
-            <View style={styles.toggleContainer}>
-              <Text style={styles.label}>Additional Info Visible</Text>
-              <Switch
-                value={isAdditionalVisible}
-                onValueChange={setAdditionalVisible}
-                trackColor={{ false: '#ccc', true: '#2563EB' }}
-                thumbColor={isAdditionalVisible ? '#fff' : '#f4f3f4'}
-              />
-            </View>
-                        <Text style={styles.label}>Payment Methods (Shared)</Text>
-            <Text style={styles.debugText}>
-              Selected: {androidConfig.paymentMethod.join(', ') || 'None'}
-            </Text>
-            <View style={styles.buttonGroup}>
-              <FilledButton
-                title="Card"
-                onPress={() => togglePaymentMethod('card')}
-                disabled={loading}
-                style={[
-                  { flex: 1 },
-                  androidConfig.paymentMethod.includes('card')
-                    ? { backgroundColor: '#2563EB' }
-                    : { backgroundColor: '#E5E7EB' }
-                ]}
-                textStyle={androidConfig.paymentMethod.includes('card')
-                  ? { color: '#fff' }
-                  : { color: '#374151' }
-                }
-              />
-              <FilledButton
-                title="ACH"
-                onPress={() => togglePaymentMethod('ach')}
-                disabled={loading}
-                style={[
-                  { flex: 1 },
-                  androidConfig.paymentMethod.includes('ach')
-                    ? { backgroundColor: '#2563EB' }
-                    : { backgroundColor: '#E5E7EB' }
-                ]}
-                textStyle={androidConfig.paymentMethod.includes('ach')
-                  ? { color: '#fff' }
-                  : { color: '#374151' }
-                }
-              />
-            </View>
-            {Platform.OS === 'android' && (
-              <View style={styles.toggleContainer}>
-                <Text style={styles.label}>Email Editable</Text>
-                <Switch
-                  value={emailEditable}
-                  onValueChange={setEmailEditable}
-                  trackColor={{ false: '#ccc', true: '#2563EB' }}
-                  thumbColor={emailEditable ? '#fff' : '#f4f3f4'}
-                />
-              </View>
-            )}
-            {Platform.OS === 'ios' && (
-              <View style={styles.toggleContainer}>
-                <Text style={styles.label}>Allow Email Editable</Text>
-                <Switch
-                  value={isEmail}
-                  onValueChange={setIsEmail}
-                  trackColor={{ false: '#ccc', true: '#2563EB' }}
-                  thumbColor={isEmail ? '#fff' : '#f4f3f4'}
-                />
-              </View>
-            )}
-
-            <Text style={styles.sectionTitle}>Billing Info</Text>
-
-            {/* Billing Required Switches */}
-            <Text style={styles.subsectionTitle}>Billing Required Fields</Text>
-            <Text style={styles.label}>Billing Required: Address</Text>
-            <Switch
-              value={billingInfo.billingRequired.address}
-              onValueChange={value => updateBillingInfo('billingRequired', 'address', value)}
-              trackColor={{ false: '#ccc', true: '#2563EB' }}
-              thumbColor={billingInfo.billingRequired.address ? '#fff' : '#f4f3f4'}
-            />
-            <Text style={styles.label}>Billing Required: Country</Text>
-            <Switch
-              value={billingInfo.billingRequired.country}
-              onValueChange={value => updateBillingInfo('billingRequired', 'country', value)}
-              trackColor={{ false: '#ccc', true: '#2563EB' }}
-              thumbColor={billingInfo.billingRequired.country ? '#fff' : '#f4f3f4'}
-            />
-            <Text style={styles.label}>Billing Required: State</Text>
-            <Switch
-              value={billingInfo.billingRequired.state}
-              onValueChange={value => updateBillingInfo('billingRequired', 'state', value)}
-              trackColor={{ false: '#ccc', true: '#2563EB' }}
-              thumbColor={billingInfo.billingRequired.state ? '#fff' : '#f4f3f4'}
-            />
-            <Text style={styles.label}>Billing Required: City</Text>
-            <Switch
-              value={billingInfo.billingRequired.city}
-              onValueChange={value => updateBillingInfo('billingRequired', 'city', value)}
-              trackColor={{ false: '#ccc', true: '#2563EB' }}
-              thumbColor={billingInfo.billingRequired.city ? '#fff' : '#f4f3f4'}
-            />
-            <Text style={styles.label}>Billing Required: Postal Code</Text>
-            <Switch
-              value={billingInfo.billingRequired.postal_code}
-              onValueChange={value => updateBillingInfo('billingRequired', 'postal_code', value)}
-              trackColor={{ false: '#ccc', true: '#2563EB' }}
-              thumbColor={billingInfo.billingRequired.postal_code ? '#fff' : '#f4f3f4'}
-            />
-
-            {/* Billing Fields Section */}
-            <Text style={styles.subsectionTitle}>Billing Fields</Text>
-            {billingInfo.billingRequired.address && (
-              <>
-                <Text style={styles.label}>Billing Address</Text>
-                <TextInput
-                  style={styles.input}
-                  value={billingInfo.billing.address}
-                  onChangeText={value => updateBillingInfo('billing', 'address', value)}
-                  placeholder="Enter billing address"
-                  placeholderTextColor="#999999"
-                />
-              </>
-            )}
-            {billingInfo.billingRequired.country && (
-              <>
-                <Text style={styles.label}>Billing Country</Text>
-                <Dropdown
-                  value={billingInfo.billing.country}
-                  onValueChange={value => updateBillingInfo('billing', 'country', value)}
-                  options={[
-                    "Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra",
-                      "Angola", "Anguilla", "Antarctica", "Antigua and Barbuda", "Argentina",
-                      "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan",
-                      "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus",
-                      "Belgium", "Belize", "Benin", "Bermuda", "Bhutan",
-                      "Bolivia", "Bosnia and Herzegovina", "Botswana", "Bouvet Island", "Brazil",
-                      "British Indian Ocean Territory", "Brunei Darussalam", "Bulgaria", "Burkina Faso", "Burundi",
-                      "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Cayman Islands",
-                      "Central African Republic", "Chad", "Chile", "China", "Christmas Island",
-                      "Cocos (Keeling) Islands", "Colombia", "Comoros", "Congo", "Congo, Democratic Republic of the",
-                      "Cook Islands", "Costa Rica", "Croatia", "Cuba", "Curaçao",
-                      "Cyprus", "Czech Republic", "Côte d'Ivoire", "Denmark", "Djibouti",
-                      "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador",
-                      "Equatorial Guinea", "Eritrea", "Estonia", "Eswatini", "Ethiopia",
-                      "Falkland Islands (Malvinas)", "Faroe Islands", "Fiji", "Finland", "France",
-                      "French Guiana", "French Polynesia", "French Southern Territories", "Gabon", "Gambia",
-                      "Georgia", "Germany", "Ghana", "Gibraltar", "Greece",
-                      "Greenland", "Grenada", "Guadeloupe", "Guam", "Guatemala",
-                      "Guernsey", "Guinea", "Guinea-Bissau", "Guyana", "Haiti",
-                      "Heard Island and McDonald Islands", "Holy See", "Honduras", "Hong Kong", "Hungary",
-                      "Iceland", "India", "Indonesia", "Iran", "Iraq",
-                      "Ireland", "Isle of Man", "Israel", "Italy", "Jamaica",
-                      "Japan", "Jersey", "Jordan", "Kazakhstan", "Kenya",
-                      "Kiribati", "Korea (Democratic People's Republic of)", "Korea, Republic of", "Kuwait", "Kyrgyzstan",
-                      "Lao People's Democratic Republic", "Latvia", "Lebanon", "Lesotho", "Liberia",
-                      "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macao",
-                      "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali",
-                      "Malta", "Marshall Islands", "Martinique", "Mauritania", "Mauritius",
-                      "Mayotte", "Mexico", "Micronesia (Federated States of)", "Moldova", "Monaco",
-                      "Mongolia", "Montenegro", "Montserrat", "Morocco", "Mozambique",
-                      "Myanmar", "Namibia", "Nauru", "Nepal", "Netherlands",
-                      "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria",
-                      "Niue", "Norfolk Island", "North Macedonia", "Northern Mariana Islands", "Norway",
-                      "Oman", "Pakistan", "Palau", "Palestine, State of", "Panama",
-                      "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Pitcairn",
-                      "Poland", "Portugal", "Puerto Rico", "Qatar", "Romania",
-                      "Russian Federation", "Rwanda", "Réunion", "Saint Barthélemy", "Saint Helena, Ascension and Tristan da Cunha",
-                      "Saint Kitts and Nevis", "Saint Lucia", "Saint Martin (French part)", "Saint Pierre and Miquelon", "Saint Vincent and the Grenadines",
-                      "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal",
-                      "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Sint Maarten (Dutch part)",
-                      "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa",
-                      "South Georgia and the South Sandwich Islands", "South Sudan", "Spain", "Sri Lanka", "Sudan",
-                      "Suriname", "Svalbard and Jan Mayen", "Sweden", "Switzerland", "Syrian Arab Republic",
-                      "Taiwan, Province of China", "Tajikistan", "Tanzania", "Thailand", "Timor-Leste",
-                      "Togo", "Tokelau", "Tonga", "Trinidad and Tobago", "Tunisia",
-                      "Turkey", "Turkmenistan", "Tuvalu", "Uganda", "Ukraine",
-                      "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan",
-                      "Vanuatu", "Venezuela", "Viet Nam", "Western Sahara", "Yemen",
-                      "Zambia", "Zimbabwe", "Åland Islands"
-                  ]}
-                  placeholder="Select country"
-                />
-              </>
-            )}
-            {billingInfo.billingRequired.state && (
-              <>
-                <Text style={styles.label}>Billing State</Text>
-                <TextInput
-                  style={styles.input}
-                  value={billingInfo.billing.state}
-                  onChangeText={value => updateBillingInfo('billing', 'state', value)}
-                  placeholder="Enter state"
-                  placeholderTextColor="#999999"
-                />
-              </>
-            )}
-            {billingInfo.billingRequired.city && (
-              <>
-                <Text style={styles.label}>Billing City</Text>
-                <TextInput
-                  style={styles.input}
-                  value={billingInfo.billing.city}
-                  onChangeText={value => updateBillingInfo('billing', 'city', value)}
-                  placeholder="Enter city"
-                  placeholderTextColor="#999999"
-                />
-              </>
-            )}
-            {billingInfo.billingRequired.postal_code && (
-              <>
-                <Text style={styles.label}>Billing Postal Code</Text>
-                <TextInput
-                  style={styles.input}
-                  value={billingInfo.billing.postal_code}
-                  onChangeText={value => updateBillingInfo('billing', 'postal_code', value)}
-                  placeholder="Enter postal code"
-                  placeholderTextColor="#999999"
-                />
-              </>
-            )}
-
-            <Text style={styles.sectionTitle}>Additional Info</Text>
-
-            {/* Additional Required Switches */}
-            <Text style={styles.subsectionTitle}>Additional Required Fields</Text>
-
-
-            <Text style={styles.label}>Additional Required: Phone Number</Text>
-            <Switch
-              value={billingInfo.additionalRequired.phone_number}
-              onValueChange={value => updateBillingInfo('additionalRequired', 'phone_number', value)}
-              trackColor={{ false: '#ccc', true: '#2563EB' }}
-              thumbColor={billingInfo.additionalRequired.phone_number ? '#fff' : '#f4f3f4'}
-            />
-            <Text style={styles.label}>Additional Required: Description</Text>
-            <Switch
-              value={billingInfo.additionalRequired.description}
-              onValueChange={value => updateBillingInfo('additionalRequired', 'description', value)}
-              trackColor={{ false: '#ccc', true: '#2563EB' }}
-              thumbColor={billingInfo.additionalRequired.description ? '#fff' : '#f4f3f4'}
-            />
-
-            {/* Additional Fields Section */}
-            <Text style={styles.subsectionTitle}>Additional Fields</Text>
-
-            {billingInfo.additionalRequired.phone_number && (
-              <>
-                <Text style={styles.label}>Additional: Phone Number</Text>
-                <View style={styles.phoneRow}>
-                  <TextInput
-                    style={styles.countryCodeInput}
-                    value={billingInfo.additional.country_code || '+1'}
-                    onChangeText={value => {
-                      // Only allow a '+' at the start, followed by up to 4 digits
-                      let filtered = value.replace(/[^+0-9]/g, '');
-                      if (!filtered.startsWith('+')) filtered = '+' + filtered.replace(/\+/g, '');
-                      filtered = filtered.slice(0, 5);
-                      // Update country code and combined phone number
-                      const phone = billingInfo.additional.phone_number || '';
-                      const phoneOnly = phone.slice((billingInfo.additional.country_code || '+1').replace('+', '').length);
-                      const combined = filtered.replace('+', '') + phoneOnly;
-                      updateBillingInfo('additional', 'country_code', filtered);
-                      updateBillingInfo('additional', 'phone_number', combined);
-                    }}
-                    placeholder="+1"
-                    placeholderTextColor="#999999"
-                    keyboardType="phone-pad"
-                    maxLength={5}
-                  />
-                  <TextInput
-                    style={[styles.input, { flex: 1, marginBottom: 0 }]}
-                    value={(billingInfo.additional.phone_number || '').slice((billingInfo.additional.country_code || '+1').replace('+', '').length)}
-                    onChangeText={value => {
-                      // Only allow digits and limit to 10 characters
-                      const numericValue = value.replace(/[^0-9]/g, '').slice(0, 10);
-                      const code = (billingInfo.additional.country_code || '+1').replace('+', '');
-                      updateBillingInfo('additional', 'phone_number', code + numericValue);
-                    }}
-                    placeholder="Enter phone number"
-                    placeholderTextColor="#999999"
-                    keyboardType="phone-pad"
-                    maxLength={10}
-                  />
-                </View>
-              </>
-            )}
-            {billingInfo.additionalRequired.description && (
-              <>
-                <Text style={styles.label}>Additional: Description</Text>
-                <TextInput
-                  style={styles.input}
-                  value={billingInfo.additional.description}
-                  onChangeText={value => updateBillingInfo('additional', 'description', value)}
-                  placeholder="Enter description"
-                  placeholderTextColor="#999999"
-                />
-              </>
-            )}
-
-            {/* Android Appearance Settings */}
-            {Platform.OS === 'android' && (
-              <>
-                <Text style={styles.sectionTitle}>Android Appearance Settings</Text>
-                <Text style={styles.label}>Body Background Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={androidConfig.appearanceSettings.bodyBackgroundColor}
-                    onChangeText={value => updateAndroidConfigAppearanceSettings('bodyBackgroundColor', value)}
-                    placeholder="Enter body background color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: androidConfig.appearanceSettings.bodyBackgroundColor }]} />
-                </View>
-                <Text style={styles.label}>Container Background Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={androidConfig.appearanceSettings.containerBackgroundColor}
-                    onChangeText={value => updateAndroidConfigAppearanceSettings('containerBackgroundColor', value)}
-                    placeholder="Enter container background color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: androidConfig.appearanceSettings.containerBackgroundColor }]} />
-                </View>
-                <Text style={styles.label}>Primary Font Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={androidConfig.appearanceSettings.primaryFontColor}
-                    onChangeText={value => updateAndroidConfigAppearanceSettings('primaryFontColor', value)}
-                    placeholder="Enter primary font color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: androidConfig.appearanceSettings.primaryFontColor }]} />
-                </View>
-                <Text style={styles.label}>Secondary Font Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={androidConfig.appearanceSettings.secondaryFontColor}
-                    onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryFontColor', value)}
-                    placeholder="Enter secondary font color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: androidConfig.appearanceSettings.secondaryFontColor }]} />
-                </View>
-                <Text style={styles.label}>Primary Button Background Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={androidConfig.appearanceSettings.primaryButtonBackgroundColor}
-                    onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonBackgroundColor', value)}
-                    placeholder="Enter primary button background color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: androidConfig.appearanceSettings.primaryButtonBackgroundColor }]} />
-                </View>
-                <Text style={styles.label}>Primary Button Hover Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={androidConfig.appearanceSettings.primaryButtonHoverColor}
-                    onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonHoverColor', value)}
-                    placeholder="Enter primary button hover color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: androidConfig.appearanceSettings.primaryButtonHoverColor }]} />
-                </View>
-                <Text style={styles.label}>Primary Button Font Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={androidConfig.appearanceSettings.primaryButtonFontColor}
-                    onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonFontColor', value)}
-                    placeholder="Enter primary button font color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: androidConfig.appearanceSettings.primaryButtonFontColor }]} />
-                </View>
-                <Text style={styles.label}>Secondary Button Background Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={androidConfig.appearanceSettings.secondaryButtonBackgroundColor}
-                    onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonBackgroundColor', value)}
-                    placeholder="Enter secondary button background color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: androidConfig.appearanceSettings.secondaryButtonBackgroundColor }]} />
-                </View>
-                <Text style={styles.label}>Secondary Button Hover Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={androidConfig.appearanceSettings.secondaryButtonHoverColor}
-                    onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonHoverColor', value)}
-                    placeholder="Enter secondary button hover color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: androidConfig.appearanceSettings.secondaryButtonHoverColor }]} />
-                </View>
-                <Text style={styles.label}>Secondary Button Font Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={androidConfig.appearanceSettings.secondaryButtonFontColor}
-                    onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonFontColor', value)}
-                    placeholder="Enter secondary button font color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: androidConfig.appearanceSettings.secondaryButtonFontColor }]} />
-                </View>
-                <Text style={styles.label}>Border Radius</Text>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.borderRadius}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('borderRadius', value)}
-                  placeholder="Enter border radius"
-                  placeholderTextColor="#999999"
-                />
-                <Text style={styles.label}>Font Size</Text>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.fontSize}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('fontSize', value)}
-                  placeholder="Enter font size"
-                  placeholderTextColor="#999999"
-                />
-
-              </>
-            )}
-
-            {/* iOS Theme Configuration */}
-            {Platform.OS === 'ios' && (
-              <>
-                <Text style={styles.sectionTitle}>Theme Configuration (iOS)</Text>
-                <Text style={styles.label}>Body Background Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={themeConfiguration.bodyBackgroundColor}
-                    onChangeText={value => updateThemeConfiguration('bodyBackgroundColor', value)}
-                    placeholder="Enter body background color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: themeConfiguration.bodyBackgroundColor }]} />
-                </View>
-                <Text style={styles.label}>Container Background Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={themeConfiguration.containerBackgroundColor}
-                    onChangeText={value => updateThemeConfiguration('containerBackgroundColor', value)}
-                    placeholder="Enter container background color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: themeConfiguration.containerBackgroundColor }]} />
-                </View>
-                <Text style={styles.label}>Primary Font Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={themeConfiguration.primaryFontColor}
-                    onChangeText={value => updateThemeConfiguration('primaryFontColor', value)}
-                    placeholder="Enter primary font color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: themeConfiguration.primaryFontColor }]} />
-                </View>
-                <Text style={styles.label}>Secondary Font Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={themeConfiguration.secondaryFontColor}
-                    onChangeText={value => updateThemeConfiguration('secondaryFontColor', value)}
-                    placeholder="Enter secondary font color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: themeConfiguration.secondaryFontColor }]} />
-                </View>
-                <Text style={styles.label}>Primary Button Background Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={themeConfiguration.primaryButtonBackgroundColor}
-                    onChangeText={value => updateThemeConfiguration('primaryButtonBackgroundColor', value)}
-                    placeholder="Enter primary button background color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: themeConfiguration.primaryButtonBackgroundColor }]} />
-                </View>
-                <Text style={styles.label}>Primary Button Hover Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={themeConfiguration.primaryButtonHoverColor}
-                    onChangeText={value => updateThemeConfiguration('primaryButtonHoverColor', value)}
-                    placeholder="Enter primary button hover color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: themeConfiguration.primaryButtonHoverColor }]} />
-                </View>
-                <Text style={styles.label}>Primary Button Font Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={themeConfiguration.primaryButtonFontColor}
-                    onChangeText={value => updateThemeConfiguration('primaryButtonFontColor', value)}
-                    placeholder="Enter primary button font color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: themeConfiguration.primaryButtonFontColor }]} />
-                </View>
-                <Text style={styles.label}>Secondary Button Background Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={themeConfiguration.secondaryButtonBackgroundColor}
-                    onChangeText={value => updateThemeConfiguration('secondaryButtonBackgroundColor', value)}
-                    placeholder="Enter secondary button background color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: themeConfiguration.secondaryButtonBackgroundColor }]} />
-                </View>
-                <Text style={styles.label}>Secondary Button Hover Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={themeConfiguration.secondaryButtonHoverColor}
-                    onChangeText={value => updateThemeConfiguration('secondaryButtonHoverColor', value)}
-                    placeholder="Enter secondary button hover color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: themeConfiguration.secondaryButtonHoverColor }]} />
-                </View>
-                <Text style={styles.label}>Secondary Button Font Color</Text>
-                <View style={styles.colorInputContainer}>
-                  <TextInput
-                    style={[styles.input, { flex: 1 }]}
-                    value={themeConfiguration.secondaryButtonFontColor}
-                    onChangeText={value => updateThemeConfiguration('secondaryButtonFontColor', value)}
-                    placeholder="Enter secondary button font color"
-                    placeholderTextColor="#999999"
-                  />
-                  <View style={[styles.colorPreview, { backgroundColor: themeConfiguration.secondaryButtonFontColor }]} />
-                </View>
-                <Text style={styles.label}>Border Radius</Text>
-                <TextInput
-                  style={styles.input}
-                  value={themeConfiguration.borderRadius}
-                  onChangeText={value => updateThemeConfiguration('borderRadius', value)}
-                  placeholder="Enter border radius"
-                  placeholderTextColor="#999999"
-                />
-                <Text style={styles.label}>Font Size</Text>
-                <TextInput
-                  style={styles.input}
-                  value={themeConfiguration.fontSize}
-                  onChangeText={value => updateThemeConfiguration('fontSize', value)}
-                  placeholder="Enter font size"
-                  placeholderTextColor="#999999"
-                />
-
-              </>
-            )}
-
-            {/* GrailPay Parameters */}
-            <Text style={styles.sectionTitle}>GrailPay Parameters</Text>
-            <Text style={styles.label}>Role</Text>
-            <TextInput
-              style={styles.input}
-              value={grailPayParams.role}
-              onChangeText={value => updateGrailPayParams('role', value)}
-              placeholder="Enter role"
-              placeholderTextColor="#999999"
-            />
-            <Text style={styles.label}>Timeout</Text>
-            <TextInput
-              style={styles.input}
-              value={String(grailPayParams.timeout)}
-              onChangeText={value => updateGrailPayParams('timeout', parseInt(value) || 10)}
-              placeholder="Enter timeout"
-              placeholderTextColor="#999999"
-            />
-            <Text style={styles.label}>Is Sandbox</Text>
-            <Switch
-              value={grailPayParams.isSandbox}
-              onValueChange={value => updateGrailPayParams('isSandbox', value)}
-              trackColor={{ false: '#ccc', true: '#2563EB' }}
-              thumbColor={grailPayParams.isSandbox ? '#fff' : '#f4f3f4'}
-            />
-            <Text style={styles.label}>Branding Name</Text>
-            <TextInput
-              style={styles.input}
-              value={grailPayParams.brandingName}
-              onChangeText={value => updateGrailPayParams('brandingName', value)}
-              placeholder="Enter branding name"
-              placeholderTextColor="#999999"
-            />
-            <Text style={styles.label}>Finder Subtitle</Text>
-            <TextInput
-              style={styles.input}
-              value={grailPayParams.finderSubtitle}
-              onChangeText={value => updateGrailPayParams('finderSubtitle', value)}
-              placeholder="Enter finder subtitle"
-              placeholderTextColor="#999999"
-            />
-            <Text style={styles.label}>Search Placeholder</Text>
-            <TextInput
-              style={styles.input}
-              value={grailPayParams.searchPlaceholder}
-              onChangeText={value => updateGrailPayParams('searchPlaceholder', value)}
-              placeholder="Enter search placeholder"
-              placeholderTextColor="#999999"
-            />
-
-            {/* Recurring Data */}
-            <Text style={styles.sectionTitle}>Recurring Data</Text>
-            <Text style={styles.label}>Allow Cycles (Minimum 2)</Text>
-            <TextInput
-              style={styles.input}
-              value={String(recurringData.allowCycles)}
-              onChangeText={value => updateRecurringData('allowCycles', parseInt(value) || 2)}
-              placeholder="Enter allowed cycles"
-              placeholderTextColor="#999999"
-            />
-                        <Text style={styles.label}>Intervals</Text>
-            <View style={styles.buttonGroup}>
-              <FilledButton
-                title="Daily"
-                onPress={() => toggleInterval('daily')}
-                disabled={loading}
-                style={[
-                  { flex: 1 },
-                  recurringData.intervals.includes('daily')
-                    ? { backgroundColor: '#2563EB' }
-                    : { backgroundColor: '#E5E7EB' }
-                ]}
-                textStyle={[
-                  { fontSize: 14 },
-                  recurringData.intervals.includes('daily')
-                    ? { color: '#fff' }
-                    : { color: '#374151' }
-                ]}
-              />
-              <FilledButton
-                title="Weekly"
-                onPress={() => toggleInterval('weekly')}
-                disabled={loading}
-                style={[
-                  { flex: 1 },
-                  recurringData.intervals.includes('weekly')
-                    ? { backgroundColor: '#2563EB' }
-                    : { backgroundColor: '#E5E7EB' }
-                ]}
-                textStyle={[
-                  { fontSize: 14 },
-                  recurringData.intervals.includes('weekly')
-                    ? { color: '#fff' }
-                    : { color: '#374151' }
-                ]}
-              />
-              <FilledButton
-                title="Monthly"
-                onPress={() => toggleInterval('monthly')}
-                disabled={loading}
-                style={[
-                  { flex: 1 },
-                  recurringData.intervals.includes('monthly')
-                    ? { backgroundColor: '#2563EB' }
-                    : { backgroundColor: '#E5E7EB' }
-                ]}
-                textStyle={[
-                  { fontSize: 14 },
-                  recurringData.intervals.includes('monthly')
-                    ? { color: '#fff' }
-                    : { color: '#374151' }
-                ]}
-              />
-            </View>
-            <Text style={styles.label}>Recurring Start Type</Text>
-            <Dropdown
-              value={recurringData.recurringStartType}
-              onValueChange={value => updateRecurringData('recurringStartType', value)}
-              options={Platform.OS === 'android' ? ['Custom', 'Fixed'] : ['custom', 'fixed']}
-              placeholder="Select start type"
-            />
-            <Text style={styles.label}>Recurring Start Date</Text>
-            <TextInput
-              style={[styles.input, styles.dateInput]}
-              value={recurringData.recurringStartDate}
-              onChangeText={value => updateRecurringData('recurringStartDate', value)}
-              placeholder="MM/DD/YYYY"
-              placeholderTextColor="#999999"
-              returnKeyType="done"
-              onSubmitEditing={() => Keyboard.dismiss()}
-            />
-          </>
-        )}
-
-        <Text style={styles.sectionTitle}>SDK Response</Text>
-        <Text selectable style={styles.result}>{result || 'No response yet'}</Text>
-      </ScrollView>
-    </KeyboardAvoidingView>
-  );
-
-};
-
-export default App;
-
-const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#F9FAFB' },
-  scrollContent: { flexGrow: 1, padding: 20 },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 16,
-    marginTop: 50,
-    textAlign: 'center',
-  },
-  sectionTitle: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    marginTop: 20,
-    marginBottom: 10,
-  },
-  subsectionTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginTop: 15,
-    marginBottom: 8,
-    color: '#374151',
-  },
-  input: {
-    height: 40,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    borderRadius: 5,
-    paddingHorizontal: 10,
-    marginBottom: 10,
-    backgroundColor: '#FFFFFF',
-    color: '#000000',
-  },
-  dateInput: {
-    backgroundColor: '#fff',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  pickerContainer: {
-    marginBottom: 20,
-  },
-  toggleContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  label: {
-    fontSize: 16,
-    fontWeight: '500',
-    marginBottom: 5,
-  },
-  buttonGroup: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 20,
-    marginTop: 20,
-    gap: 10,
-
-  },
-  result: {
-    fontSize: 14,
-    fontFamily: 'monospace',
-    color: '#333',
-    marginTop: 20,
-  },
-  environmentButton: {
-    flex: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    borderRadius: 5,
-    marginHorizontal: 5,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  buttonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '500',
-  },
-  inputContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      borderColor: '#ccc',
-      borderWidth: 1,
-      borderRadius: 5,
-      marginBottom: 10,
-    },
-    eyeButton: {
-      padding: 10,
-    },
-    eyeIcon: {
-      fontSize: 20,
-      color: '#333',
-    },
-  // New styles for FilledButton
-  filledButton: {
-    flex: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    borderRadius: 5,
-    marginHorizontal: 5,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#2563EB', // Primary color for filled buttons
-  },
-  filledButtonDisabled: {
-    backgroundColor: '#ccc',
-    opacity: 0.7,
-  },
-  filledButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '500',
-  },
-  filledButtonTextDisabled: {
-    color: '#888',
-  },
-  debugText: {
-    fontSize: 12,
-    color: '#666',
-    fontStyle: 'italic',
-    marginBottom: 5,
-  },
-  // Dropdown Styles
-  dropdownContainer: {
-    position: 'relative',
-    marginBottom: 20,
-    zIndex: 9998,
-  },
-  dropdownButton: {
-    height: 40,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    borderRadius: 5,
-    paddingHorizontal: 10,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-  },
-  dropdownButtonText: {
-    fontSize: 16,
-    color: '#333',
-  },
-  dropdownArrow: {
-    fontSize: 12,
-    color: '#666',
-  },
-  dropdownOptions: {
-    position: 'absolute',
-    top: 45,
-    left: 0,
-    right: 0,
-    backgroundColor: '#fff',
-    borderColor: '#ccc',
-    borderWidth: 1,
-    borderRadius: 5,
-    zIndex: 9999,
-    maxHeight: 200,
-    elevation: 5,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-  },
-  dropdownScrollView: {
-    maxHeight: 180,
-  },
-  dropdownOption: {
-    paddingVertical: 12,
-    paddingHorizontal: 15,
-    borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
-    backgroundColor: '#fff',
-  },
-  dropdownOptionText: {
-    fontSize: 16,
-    color: '#333',
-  },
-  // Color preview styles
-  colorInputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 10,
-    gap: 10,
-  },
-  colorPreview: {
-    width: 30,
-    height: 30,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: '#ccc',
-  },
-  phoneRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 10,
-    gap: 8,
-  },
-  countryCodeInput: {
-    width: 70,
-    height: 40,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    borderRadius: 5,
-    paddingHorizontal: 10,
-    backgroundColor: '#FFFFFF',
-    color: '#000000',
-    textAlign: 'center',
-    alignSelf: 'stretch',
-    marginBottom: 0,
-  },
-});
-
-
-
-
-```
+## Notes
 
-You can send `null` if billing info not available.
+- **Billing Info**: You can send `null` for billing info if it is not available.
+- **Environment Configuration**: The SDK supports `sandbox` and `staging` environments. Ensure you configure the correct API keys for each environment.
+- **Payment Methods**: The SDK supports `card` and `ach` payment methods, with options to toggle them in the UI.
+- **Recurring Payments**: Ensure at least one interval (`daily`, `weekly`, `monthly`) is selected when enabling recurring payments.
+- **Theming**: Customize the appearance using `themeConfiguration` (iOS) or `androidConfig.appearanceSettings` (Android) to match your app's branding.
 
+## Troubleshooting
 
-  
+- **iOS Bridge Initialization**: If you see "Failed to retrieve EasyMerchantSdkPlugin instance" in the console, ensure the `easymerchantsdk` pod is correctly installed and linked.
+- **Android Payment Issues**: Verify that `paymentMethod` is correctly formatted (`['card', 'ach']`) and that API keys are valid.
+- **Pod Installation**: If `pod install` fails, ensure Ruby 3.2.8 is installed and run `pod install --repo-update`.