@jimrising/easymerchantsdk-react-native 2.0.7 → 2.1.0

package/README.md

@@ -1,41 +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. The SDK supports identical parameters for both platforms, with differences only in the method calls for initiating payments and handling responses.
 
-## 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.7"
-},
+  "@jimrising/easymerchantsdk-react-native": "^2.1.0"
+}
 ```
 
-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')
+            }
+        }
     }
 }
 ```
 
-## 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
@@ -43,7 +64,7 @@ import React
 
 @UIApplicationMain
 class AppDelegate: UIResponder, UIApplicationDelegate {
-var window: UIWindow?
+    var window: UIWindow?
 
     func application(
         _ application: UIApplication,
@@ -69,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
         )
 
@@ -78,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.")
@@ -89,154 +110,45 @@ 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'
+
+platform :ios, '16.0'
 
-  require_relative '../node_modules/react-native/scripts/react_native_pods'
-  require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+pod 'easymerchantsdk', :path => '../node_modules/easymerchantsdk-react-native/ios'
+```
+
+3. Run `pod install` in the `ios` directory to install the dependencies:
 
-  platform :ios, 16.0
-  
-  pod 'easymerchantsdk', :path => '../node_modules/easymerchantsdk-react-native/ios'
+```bash
+cd ios
+pod install
 ```
 
+## 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. The parameters for Android and iOS are identical, but the method calls differ slightly.
 
-## How to call the sdk in `App.js`.
-you can call the sdk using below example:
+### 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>
-  );
-};
+### 2. Set Up Configuration
 
-// 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>
-  );
-};
+Define the configuration object for the SDK, which is shared between Android and iOS. The provided `App.js` includes a comprehensive `externalConfig` object that you can customize:
 
+```javascript
 const externalConfig = {
   amount: '',
   email: '',
@@ -250,11 +162,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,
@@ -276,20 +188,20 @@ const externalConfig = {
       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,
@@ -301,10 +213,10 @@ const externalConfig = {
   recurringData: {
     allowCycles: 2,
     intervals: ['daily', 'weekly', 'monthly'],
-  recurringStartType: Platform.OS === 'android' ? ['Custom', 'Fixed'] : ['custom', 'fixed'],
+    recurringStartType: Platform.OS === 'android' ? 'Custom' : 'custom',
     recurringStartDate: new Date().toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }),
   },
-  androidConfig: {
+  configur: {
     currency: 'usd',
     saveCard: true,
     saveAccount: true,
@@ -349,139 +261,173 @@ 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',
+### 3. Handle Payments
+
+The `handlePayment` function validates inputs and calls platform-specific billing functions. The parameters are identical for both platforms, but the method calls differ.
+
+#### Android: `handleAndroidBilling`
+
+```javascript
+const handleAndroidBilling = async () => {
+  const { apiKey, secretKey } = apiKeys[environment];
+  const selectedPaymentMethods = [...configur.paymentMethod];
+
+  const config = {
+    amount,
+    apiKey,
+    secretKey,
+    jsonConfig: {
+      environment,
+      amount,
+      tokenOnly: false,
+      currency: configur.currency,
+      saveCard: configur.saveCard,
+      saveAccount: configur.saveAccount,
+      authenticatedACH: isAuthenticatedACH,
+      secureAuthentication: isSecureAuthentication,
+      showReceipt: configur.showReceipt,
+      showDonate: configur.showDonate,
+      showTotal: configur.showTotal,
+      showSubmitButton: configur.showSubmitButton,
+      paymentMethod: selectedPaymentMethods,
+      emailEditable,
+      email,
+      name,
+      fields: {
+        ...configur.fields,
+        visibility: {
+          billing: isBillingVisible,
+          additional: isAdditionalVisible,
+        },
+      },
+      metadata,
+      ...(isRecurring && {
+        recurring: {
+          enableRecurring: true,
+          recurringData,
+        },
+      }),
+      grailPayParams,
+      appearanceSettings: configur.appearanceSettings,
+    },
   };
 
-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]);
-
-  // Debug useEffect to track Android appearance settings changes
-  useEffect(() => {
-    console.log('Android appearance settings changed:', androidConfig.appearanceSettings);
-  }, [androidConfig.appearanceSettings]);
-
-
-  useEffect(() => {
-    const updateEnvironment = async () => {
-      const { apiKey, secretKey } = apiKeys[environment];
-
-      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 {
+    const response = await RNEasymerchantsdk.makePayment(config);
+    const parsedResponse = {
+      ...JSON.parse(response?.response || '{}'),
+      billingInfo: safeParseMaybeJSON(response?.billingInfo),
+      additional_info: safeParseMaybeJSON(response?.additional_info),
     };
+    setResult(JSON.stringify(parsedResponse, null, 2));
+  } catch (error) {
+    setResult(`Error: ${error.message ?? JSON.stringify(error)}`);
+    Alert.alert('Payment Error', error.message ?? 'Unknown error');
+  } finally {
+    setLoading(false);
+  }
+};
+```
 
-    updateEnvironment();
-  }, [environment, apiKeys]);
+#### iOS: `handleIosBilling`
 
-useEffect(() => {
-  if (Platform.OS !== 'android') {
-    console.log('Event listeners skipped: not Android');
-    return;
+```javascript
+const handleIosBilling = async () => {
+  const selectedPaymentMethodsIOS = [...configur.paymentMethod].map(method => 
+    method === 'card' ? 'Card' : method === 'ach' ? 'Bank' : method
+  );
+
+  try {
+    const result = await EasyMerchantSdk.billing(
+      amount,
+      'usd', // Default currency
+      billingInfo,
+      selectedPaymentMethodsIOS,
+      themeConfiguration,
+      false, // tokenOnly
+      true, // saveCard
+      true, // saveAccount
+      isAuthenticatedACH,
+      grailPayParams,
+      'Submit',
+      isRecurring,
+      isRecurring ? recurringData.allowCycles : 0,
+      isRecurring ? recurringData.intervals : [],
+      isRecurring ? recurringData.recurringStartType : '',
+      isRecurring ? recurringData.recurringStartDate : '',
+      isSecureAuthentication,
+      true, // showReceipt
+      true, // showTotal
+      true, // 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) {
+    setResult(`Billing Error: ${error.message || JSON.stringify(error)}`);
+  } finally {
+    setLoading(false);
   }
+};
+```
+
+#### Main Payment Handler
 
-  if (!RNEasymerchantsdk) {
-    console.warn('RNEasymerchantsdk native module is not available.');
-    return;
+```javascript
+const handlePayment = async () => {
+  if (!amount || isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {
+    return Alert.alert('Error', 'Please enter a valid amount');
   }
 
-  const easyMerchantEvents = new NativeEventEmitter(RNEasymerchantsdk);
+  if (isRecurring && (!recurringData.intervals || recurringData.intervals.length === 0)) {
+    return Alert.alert('Error', 'Please select at least one interval for recurring payment');
+  }
 
-  const successSub = easyMerchantEvents.addListener('PaymentSuccess', (data) => {
-    console.log('Payment success event:', data);
+  setLoading(true);
+  const timeoutId = setTimeout(() => setLoading(false), 3000);
 
-    try {
-      const parsed = JSON.parse(data.response);
-      console.log('Parsed PaymentSuccess:', parsed);
+  try {
+    if (Platform.OS === 'android') {
+      await handleAndroidBilling();
+    } else {
+      await handleIosBilling();
+    }
+  } finally {
+    clearTimeout(timeoutId);
+    setLoading(false);
+  }
+};
+```
 
-      const billing = safeParseMaybeJSON(parsed.billingInfo);
-      const additional = safeParseMaybeJSON(parsed.additional_info);
+### 4. Event Listeners for Android
 
-      console.log('Billing Info:', billing);
-      console.log('Additional Info:', additional);
+Set up event listeners for payment success, status, and errors using `NativeEventEmitter` (Android only):
 
-      // Replace raw with parsed versions
-      parsed.billingInfo = billing;
-      parsed.additional_info = additional;
+```javascript
+useEffect(() => {
+  if (Platform.OS !== 'android') return;
 
-      setResult(JSON.stringify(parsed, null, 2));
-    } catch (err) {
-      console.error('Error parsing PaymentSuccess response:', err);
-    }
+  const easyMerchantEvents = new NativeEventEmitter(RNEasymerchantsdk);
+
+  const successSub = easyMerchantEvents.addListener('PaymentSuccess', (data) => {
+    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 () => {
@@ -490,1525 +436,26 @@ useEffect(() => {
     statusErrorSub.remove();
   };
 }, []);
+```
 
+### 5. UI Components
 
-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: Name</Text>
-            <Switch
-              value={billingInfo.additionalRequired.name}
-              onValueChange={value => updateBillingInfo('additionalRequired', 'name', value)}
-              trackColor={{ false: '#ccc', true: '#2563EB' }}
-              thumbColor={billingInfo.additionalRequired.name ? '#fff' : '#f4f3f4'}
-            />
-            <Text style={styles.label}>Additional Required: Email Address</Text>
-            <Switch
-              value={billingInfo.additionalRequired.email_address}
-              onValueChange={value => updateBillingInfo('additionalRequired', 'email_address', value)}
-              trackColor={{ false: '#ccc', true: '#2563EB' }}
-              thumbColor={billingInfo.additionalRequired.email_address ? '#fff' : '#f4f3f4'}
-            />
-            <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.name && (
-              <>
-                <Text style={styles.label}>Additional: Name</Text>
-                <TextInput
-                  style={styles.input}
-                  value={billingInfo.additional.name}
-                  onChangeText={value => updateBillingInfo('additional', 'name', value)}
-                  placeholder="Enter name"
-                  placeholderTextColor="#999999"
-                />
-              </>
-            )}
-            {billingInfo.additionalRequired.email_address && (
-              <>
-                <Text style={styles.label}>Additional: Email Address</Text>
-                <TextInput
-                  style={styles.input}
-                  value={billingInfo.additional.email_address}
-                  onChangeText={value => updateBillingInfo('additional', 'email_address', value)}
-                  placeholder="Enter email address"
-                  placeholderTextColor="#999999"
-                />
-              </>
-            )}
-            {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,
+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.
 
-  },
-  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 `billingInfo` 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 (mapped to `Card` and `Bank` on iOS). Toggle them in the UI as needed.
+- **Recurring Payments**: Ensure at least one interval (`daily`, `weekly`, `monthly`) is selected when enabling recurring payments.
+- **Theming**: Customize the appearance using `themeConfiguration` for iOS or `configur.appearanceSettings` for Android to match your app's branding. The parameters are identical for both platforms.
+- **Method Differences**:
+    - **Android**: Use `RNEasymerchantsdk.makePayment(config)` with a JSON configuration object.
+    - **iOS**: Use `EasyMerchantSdk.billing(...)` with parameters passed directly.
+    - iOS supports an additional `paymentReference` method for checking payment status using a reference token.
 
+## 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. Ensure `GITHUB_URL`, `GITHUB_USERNAME`, and `GITHUB_PASSWORD` are correctly set in your Gradle properties.
+- **Pod Installation**: If `pod install` fails, ensure Ruby 3.2.8 is installed and run `pod install --repo-update`.