@jimrising/easymerchantsdk-react-native 2.1.6 → 2.1.7

package/README.md

@@ -1,11 +1,12 @@
 # EasyMerchant SDK React Native Integration
 
-This guide provides step-by-step instructions for integrating the EasyMerchant SDK into a React Native application for Android and iOS platforms. The SDK supports a unified configuration structure with minor differences in method calls for initiating payments and handling responses. The provided `App.js` demonstrates a fully configurable payment interface supporting card payments, ACH transfers, recurring payments, 3D Secure authentication, and customizable billing/additional information fields.
+This guide provides step-by-step instructions for integrating the EasyMerchant SDK into a React Native application for both Android and iOS platforms. The SDK supports a unified configuration structure with minor platform-specific differences in method calls for initiating payments and handling responses. The provided `App.js` demonstrates a fully configurable payment interface supporting card payments, ACH transfers, recurring payments, 3D Secure authentication, and customizable billing/additional information fields with a user-friendly UI.
+
 
 ## Prerequisites
 
 - **Node.js and npm**: Version 16 or higher.
-- **React Native Environment**: Set up as per the [official documentation](https://reactnative.dev/docs/environment-setup).
+- **React Native Environment**: Set up as per the [official React Native documentation](https://reactnative.dev/docs/environment-setup).
 - **Ruby**: Version 3.2.8 or higher for iOS setup (required for CocoaPods).
 - **Xcode**: Version 14 or higher for iOS development.
 - **Android Studio**: For Android development, with Gradle configured.
@@ -19,7 +20,7 @@ Add the EasyMerchant SDK to your `package.json` under `dependencies`:
 
 ```json
 "dependencies": {
-  "@jimrising/easymerchantsdk-react-native": "^2.1.6"
+  "@jimrising/easymerchantsdk-react-native": "^2.1.7"
 }
 ```
 
@@ -61,8 +62,9 @@ GITHUB_PASSWORD=your-github-token
 
 ### 3. iOS Configuration
 
-1. **Update AppDelegate.swift**  
-   Modify `ios/AppDelegate.swift` to initialize the React Native bridge and set up the EasyMerchant SDK:
+1. **Update AppDelegate.swift**
+
+Modify `ios/AppDelegate.swift` to initialize the React Native bridge and set up the EasyMerchant SDK:
 
 ```swift
 import UIKit
@@ -117,8 +119,9 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
 }
 ```
 
-2. **Update Podfile**  
-   In `ios/Podfile`, add the EasyMerchant SDK pod:
+2. **Update Podfile**
+
+In `ios/Podfile`, add the EasyMerchant SDK pod:
 
 ```ruby
 platform :ios, '16.0'
@@ -138,7 +141,7 @@ pod install --repo-update
 
 ## Usage
 
-The provided `App.js` is a complete implementation showcasing the EasyMerchant SDK's capabilities. Below is a guide to integrating and using the SDK in your React Native application.
+The provided `App.js` is a complete implementation showcasing the EasyMerchant SDK's capabilities with a configurable UI. Below is a guide to integrating and using the SDK in your React Native application.
 
 ### 1. Import Required Modules
 
@@ -157,148 +160,98 @@ const { RNEasymerchantsdk, EasyMerchantSdk } = NativeModules;
 
 ### 2. Define Configuration
 
-Define a configuration object for payment settings. Below is an example based on `App.js`:
+Define a unified payment configuration object for both platforms, as shown in `App.js`:
 
 ```javascript
-const externalConfig = {
-  amount: '',
-  email: '',
-  isRecurring: false,
-  isAuthenticatedACH: false,
-  isSecureAuthentication: false,
-  isBillingVisible: false,
-  isAdditionalVisible: false,
-  emailEditable: true, // Android-specific
-  isEmail: true, // iOS-specific
-  billingInfo: {
+const [amount, setAmount] = useState('5.0');
+const [email, setEmail] = useState('john.doe@example.com');
+const [name, setName] = useState('John Doe');
+const [environment, setEnvironment] = useState('sandbox');
+const [isRecurring, setIsRecurring] = useState(false);
+const [isAuthenticatedACH, setAuthenticatedACH] = useState(true);
+const [isSecureAuthentication, setSecureAuthentication] = useState(true);
+const [isEmail, setIsEmail] = useState(true);
+const [themeConfiguration, setThemeConfiguration] = useState({
+  theme: 'light',
+  bodyBackgroundColor: '#121212',
+  containerBackgroundColor: '#1E1E1E',
+  primaryFontColor: '#FFFFFF',
+  secondaryFontColor: '#B0B0B0',
+  primaryButtonBackgroundColor: '#2563EB',
+  primaryButtonHoverColor: '#1D4ED8',
+  primaryButtonFontColor: '#FFFFFF',
+  secondaryButtonBackgroundColor: '#374151',
+  secondaryButtonHoverColor: '#4B5563',
+  secondaryButtonFontColor: '#E5E7EB',
+  borderRadius: '8',
+  fontSize: '16',
+  fontWeight: 500,
+  fontFamily: '"Inter", sans-serif'
+});
+const [grailPayParams, setGrailPayParams] = useState({
+  role: 'business',
+  timeout: 10,
+  isSandbox: true,
+  brandingName: 'Lyfecycle Payments',
+  finderSubtitle: 'Search for your bank',
+  searchPlaceholder: 'Enter bank name',
+});
+const [recurringData, setRecurringData] = useState({
+  allowCycles: 2,
+  intervals: ['daily', 'weekly', 'monthly'],
+  recurringStartType: 'fixed',
+  recurringStartDate: new Date().toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' }),
+});
+const [paymentConfig, setPaymentConfig] = useState({
+  currency: 'usd',
+  saveCard: true,
+  saveAccount: true,
+  showReceipt: true,
+  showDonate: false,
+  showTotal: true,
+  showSubmitButton: true,
+  paymentMethods: ['card', 'ach'],
+  fields: {
     visibility: { billing: false, additional: false },
-    billing: {
-      address: 'San Fran, Punjab',
-      country: 'USA',
-      state: 'California',
-      city: 'Paris',
-      postal_code: '234234',
-    },
-    billingRequired: {
-      address: true,
-      country: true,
-      state: true,
-      city: false,
-      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',
-  },
-  grailPayParams: {
-    role: 'business',
-    timeout: 10,
-    isSandbox: true,
-    brandingName: 'Lyfecycle Payments',
-    finderSubtitle: 'Search for your bank',
-    searchPlaceholder: 'Enter bank name',
+    billing: [
+      { name: 'address', required: true, value: '123 Main Street, Suite 100' },
+      { name: 'country', required: true, value: 'United States' },
+      { name: 'state', required: true, value: 'California' },
+      { name: 'city', required: false, value: 'San Francisco' },
+      { name: 'postal_code', required: true, value: '94105' },
+    ],
+    additional: [
+      { name: 'phone_number', required: false, value: '+1-555-123-4567' },
+      { name: 'description', required: true, value: 'Test payment for development purposes' },
+    ],
   },
-  recurringData: {
-    allowCycles: 2,
-    intervals: ['daily', 'weekly', 'monthly'],
-    recurringStartType: 'custom',
-    recurringStartDate: new Date().toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }),
+});
+const [apiKeys, setApiKeys] = useState({
+  sandbox: {
+    apiKey: 'apiKey',
+    secretKey: 'secretKey',
   },
-  androidConfig: {
-    currency: 'usd',
-    saveCard: true,
-    saveAccount: true,
-    showReceipt: true,
-    showDonate: false,
-    showTotal: true,
-    showSubmitButton: true,
-    paymentMethods: ['card', 'ach'],
-    name: '',
-    fields: {
-      visibility: { billing: false, additional: false },
-      billing: [
-        { name: 'address', required: true, value: 'New Address' },
-        { name: 'country', required: true, value: 'India' },
-        { name: 'state', required: true, value: 'California' },
-        { name: 'city', required: true, value: 'Goa' },
-        { 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' },
-      ],
-    },
-    appearanceSettings: {
-      theme: 'dark',
-      bodyBackgroundColor: '#0F5132',
-      containerBackgroundColor: '#166534',
-      primaryFontColor: '#FFFFFF',
-      secondaryFontColor: '#D1FAE5',
-      primaryButtonBackgroundColor: '#059669',
-      primaryButtonHoverColor: '#047857',
-      primaryButtonFontColor: '#FFFFFF',
-      secondaryButtonBackgroundColor: '#065F46',
-      secondaryButtonHoverColor: '#064E3B',
-      secondaryButtonFontColor: '#FFFFFF',
-      borderRadius: '8',
-      fontSize: '14',
-      fontWeight: 500,
-      fontFamily: '"Inter", sans-serif',
-    },
+  staging: {
+    apiKey: 'apiKey',
+    secretKey: 'secretKey',
   },
-};
+});
 ```
 
 This configuration includes:
 - **Basic Info**: `amount`, `email`, `name`.
-- **Payment Options**: Toggles for recurring payments, authenticated ACH, 3D Secure, and visibility of billing/additional fields.
-- **Billing Info**: Configurable billing and additional fields with required flags.
-- **Theming**: `themeConfiguration` for iOS and `androidConfig.appearanceSettings` for Android.
-- **GrailPay Params**: Settings for bank search UI (e.g., role, timeout, branding).
-- **Recurring Data**: Options for recurring payment cycles and intervals.
-- **Android Config**: Android-specific settings, including payment methods and fields.
+- **Environment**: `sandbox` or `staging` with corresponding API keys.
+- **Payment Options**: Toggles for recurring payments, authenticated ACH, 3D Secure, and email editability.
+- **Billing and Additional Fields**: Configurable fields with visibility and required flags.
+- **Theming**: Unified `themeConfiguration` for both platforms.
+- **GrailPay Params**: Settings for bank search UI.
+- **Recurring Data**: Options for recurring payment cycles, intervals, and start date.
 
 ### 3. Initialize Environment
 
 Configure the SDK environment (`sandbox` or `staging`) with API keys and secret keys:
 
 ```javascript
-const [apiKeys, setApiKeys] = useState({
-  sandbox: {
-    apiKey: 'your-sandbox-api-key',
-    secretKey: 'your-sandbox-secret-key',
-  },
-  staging: {
-    apiKey: 'your-staging-api-key',
-    secretKey: 'your-staging-secret-key',
-  },
-});
-
 useEffect(() => {
   const updateEnvironment = async () => {
     const { apiKey, secretKey } = apiKeys[environment];
@@ -324,7 +277,54 @@ useEffect(() => {
 
 ### 4. Handle Payments
 
-The `handlePayment` function validates inputs and delegates to platform-specific billing handlers. At least one payment method (`card` or `ach`) and a valid amount are required. For recurring payments, at least one interval must be selected.
+The `buildPaymentConfiguration` function creates a unified configuration object, and the `handlePayment` function validates inputs and delegates to platform-specific handlers. At least one payment method (`card` or `ach`) and a valid amount are required. For recurring payments, at least one interval must be selected.
+
+#### Unified Configuration Builder
+
+```javascript
+const buildPaymentConfiguration = ({
+  amount, environment, paymentConfig, themeConfiguration, grailPayParams,
+  recurringData, isRecurring, isAuthenticatedACH, isSecureAuthentication,
+  email, name, isEmail, metadata, apiKey, secretKey
+}) => {
+  const selectedPaymentMethods = [...paymentConfig.paymentMethods];
+  const config = {
+    environment,
+    amount,
+    currency: 'usd',
+    tokenOnly: false,
+    saveCard: paymentConfig.saveCard,
+    saveAccount: paymentConfig.saveAccount,
+    submitButtonText: 'Submit',
+    authenticatedACH: isAuthenticatedACH,
+    secureAuthentication: isSecureAuthentication,
+    showReceipt: paymentConfig.showReceipt,
+    showDonate: paymentConfig.showDonate,
+    showTotal: paymentConfig.showTotal,
+    showSubmitButton: paymentConfig.showSubmitButton,
+    paymentMethods: selectedPaymentMethods,
+    apiKey,
+    secretKey,
+    fields: {
+      visibility: paymentConfig.fields.visibility,
+      billing: paymentConfig.fields.billing,
+      additional: paymentConfig.fields.additional
+    },
+    appearanceSettings: themeConfiguration,
+    email,
+    name,
+    isEmail,
+    metadata,
+    grailPayParams,
+    is_recurring: isRecurring,
+    numOfCycle: recurringData.allowCycles,
+    recurringIntervals: recurringData.intervals,
+    recurringStartDateType: recurringData.recurringStartType,
+    recurringStartDate: recurringData.recurringStartDate
+  };
+  return config;
+};
+```
 
 #### Main Payment Handler
 
@@ -336,147 +336,70 @@ const handlePayment = async () => {
   if (isRecurring && (!recurringData.intervals || recurringData.intervals.length === 0)) {
     return Alert.alert('Error', 'Please select at least one interval for recurring payment');
   }
-  if (!androidConfig.paymentMethods || androidConfig.paymentMethods.length === 0) {
+  if (!paymentConfig.paymentMethods || paymentConfig.paymentMethods.length === 0) {
     return Alert.alert('Error', 'Please select at least one payment method');
   }
 
   setLoading(true);
   const timeoutId = setTimeout(() => setLoading(false), 3000);
   try {
-    if (Platform.OS === 'android') {
-      await handleAndroidBilling();
-    } else {
-      await handleIosBilling();
-    }
-  } finally {
-    clearTimeout(timeoutId);
-    setLoading(false);
-  }
-};
-```
-
-#### Android Billing
-
-```javascript
-const handleAndroidBilling = async () => {
-  const { apiKey, secretKey } = apiKeys[environment];
-  const selectedPaymentMethods = [...androidConfig.paymentMethods];
-  let finalPaymentMethods = selectedPaymentMethods;
-  if (selectedPaymentMethods.length === 1 && selectedPaymentMethods.includes('ach')) {
-    finalPaymentMethods = ['ach'];
-  }
-
-  const config = {
-    amount,
-    apiKey,
-    secretKey,
-    jsonConfig: {
-      environment,
+    const config = buildPaymentConfiguration({
       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,
-      paymentMethods: finalPaymentMethods,
-      ...(finalPaymentMethods.length === 1 && finalPaymentMethods.includes('ach') && {
-        paymentMethods: ['ach'],
-        allowedPaymentMethods: ['ach'],
-        disableCard: true,
-      }),
-      emailEditable,
+      environment,
+      paymentConfig,
+      themeConfiguration,
+      grailPayParams,
+      recurringData,
+      isRecurring,
+      isAuthenticatedACH,
+      isSecureAuthentication,
       email,
       name,
-      fields: {
-        ...androidConfig.fields,
-        visibility: { billing: isBillingVisible, additional: isAdditionalVisible },
-      },
-      metadata: {
-        account_id: 1,
-        metaKLey1: 'metaValue1',
-        metaKLey2: 'metaValue2',
-        metaKLey3: 'metaValue3',
-        metaKLey4: 'metaValue4',
-      },
-      ...(isRecurring && {
-        recurring: {
-          enableRecurring: true,
-          recurringData,
-        },
-      }),
-      grailPayParams,
-      appearanceSettings: androidConfig.appearanceSettings,
-    },
-  };
-
-  try {
-    const response = await RNEasymerchantsdk.makePayment(config);
-    const raw = response?.response ? JSON.parse(response.response) : {};
-    const parsedResponse = {
-      ...raw,
-      billingInfo: safeParseMaybeJSON(raw.billingInfo),
-      additional_info: safeParseMaybeJSON(raw.additional_info),
-    };
-    setResult(JSON.stringify(parsedResponse, null, 2));
+      isEmail,
+      metadata,
+      apiKey: apiKeys[environment].apiKey,
+      secretKey: apiKeys[environment].secretKey
+    });
+    await handlePlatformPayment(config);
   } catch (error) {
-    setResult(`Error: ${error.message || 'Unknown error'}`);
-    Alert.alert('Payment Error', error.message || 'An error occurred during payment');
+    console.error('Payment Error:', error);
+    setResult(`Error: ${error.message ?? JSON.stringify(error)}`);
+    Alert.alert('Payment Error', error.message ?? 'Unknown error');
+  } finally {
+    clearTimeout(timeoutId);
+    setLoading(false);
   }
 };
 ```
 
-#### iOS Billing
+#### Platform-Specific Payment Handler
 
 ```javascript
-const handleIosBilling = async () => {
-  const selectedPaymentMethodsIOS = androidConfig.paymentMethods.map(method =>
-    method === 'card' ? 'Card' : method === 'ach' ? 'Bank' : method
-  );
-
+const handlePlatformPayment = async (config) => {
   try {
-    const result = await EasyMerchantSdk.billing(
-      amount,
-      androidConfig.currency || 'usd',
-      billingInfo,
-      selectedPaymentMethodsIOS,
-      themeConfiguration,
-      false,
-      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,
-      {
-        account_id: 1,
-        metaKLey1: 'metaValue1',
-        metaKLey2: 'metaValue2',
-        metaKLey3: 'metaValue3',
-        metaKLey4: 'metaValue4',
-      }
-    );
-    const refToken = result?.additionalInfo?.threeDSecureStatus?.data?.ref_token;
-    if (refToken) setReferenceToken(refToken);
-    setResult(JSON.stringify(result, null, 2));
+    if (Platform.OS === 'android') {
+      const response = await RNEasymerchantsdk.makePayment(config);
+      const raw = response?.response ? JSON.parse(response.response) : {};
+      const parsedResponse = {
+        ...raw,
+        billingInfo: safeParseMaybeJSON(raw.billingInfo),
+        additional_info: safeParseMaybeJSON(raw.additional_info),
+      };
+      console.log('Android Payment Response:', parsedResponse);
+      setResult(JSON.stringify(parsedResponse, null, 2));
+    } else {
+      const configString = JSON.stringify(config);
+      console.log('iOS Config as String:', configString);
+      const result = await EasyMerchantSdk.billingWithConfig(configString);
+      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 || 'Unknown error'}`);
-    Alert.alert('Billing Error', error.message || 'An error occurred during billing');
+    const platform = Platform.OS === 'android' ? 'Android' : 'iOS';
+    console.error(`${platform} Payment Error:`, error);
+    setResult(`Error: ${error.message ?? JSON.stringify(error)}`);
+    Alert.alert('Payment Error', error.message ?? 'Unknown error');
   }
 };
 ```
@@ -540,32 +463,195 @@ useEffect(() => {
 }, []);
 ```
 
+## UI Components
+
+The `App.js` includes custom UI components to enhance user interaction:
+
+### Dropdown Component
+
+A custom dropdown for selecting options like country or recurring start type, with platform-specific handling for Android (Modal) and iOS (View):
+
+```javascript
+const Dropdown = ({ value, onValueChange, options, placeholder }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleClose = () => setIsOpen(false);
+
+  return (
+    <View style={styles.dropdownContainer}>
+      <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>
+  );
+};
+```
+
+### Expandable Section Component
+
+A collapsible section for organizing configuration settings:
+
+```javascript
+const ExpandableSection = ({ title, children, isExpanded, onToggle }) => {
+  return (
+    <View style={styles.expandableSection}>
+      <TouchableOpacity
+        style={styles.sectionHeader}
+        onPress={onToggle}
+        activeOpacity={0.7}
+      >
+        <Text style={styles.sectionHeaderTitle}>{title}</Text>
+        <Text style={styles.expandIcon}>
+          {isExpanded ? '▼' : '▶'}
+        </Text>
+      </TouchableOpacity>
+      {isExpanded && (
+        <View style={styles.sectionContent}>
+          {children}
+        </View>
+      )}
+    </View>
+  );
+};
+```
+
+### Filled Button Component
+
+A reusable button component for actions like toggling payment methods or initiating payments:
+
+```javascript
+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>
+  );
+};
+```
+
 ## Notes
 
-- **Billing Info**: Set `billingInfo` to `null` if not needed. Use `billingRequired` and `additionalRequired` to configure required fields.
+- **Billing Info**: Set `paymentConfig.fields.billing` or `additional` to an empty array if not needed. Use `paymentConfig.fields.visibility` to control visibility and `required` flags for field validation.
 - **Payment Methods**:
-    - Android: `['card', 'ach']` (lowercase).
-    - iOS: `['Card', 'Bank']` (capitalized).
-    - Ensure at least one payment method is selected in `androidConfig.paymentMethods`.
+  - Android: `['card', 'ach']` (lowercase).
+  - iOS: `['Card', 'Bank']` (capitalized, mapped internally).
+  - Ensure at least one payment method is selected in `paymentConfig.paymentMethods`.
 - **Recurring Payments**: Requires at least one interval (`daily`, `weekly`, `monthly`) when enabled.
 - **Security**: Store API keys and secret keys securely (e.g., in environment variables or secure storage).
 - **Platform Differences**:
-    - **Android**: Uses `RNEasymerchantsdk.makePayment(config)` with a JSON config object. Handles payment methods as lowercase (`['card', 'ach']`).
-    - **iOS**: Uses `EasyMerchantSdk.billing(...)` with parameters passed directly. Payment methods are capitalized (`['Card', 'Bank']`).
-    - iOS supports `paymentReference` for status checks; Android uses `checkPaymentStatus`.
+  - **Android**: Uses `RNEasymerchantsdk.makePayment(config)` with a JSON config object.
+  - **iOS**: Uses `EasyMerchantSdk.billingWithConfig(configString)` with a JSON string.
+  - iOS supports `paymentReference` for status checks; Android uses `checkPaymentStatus`.
+- **UI Features**:
+  - Expandable sections for configuration management.
+  - Dropdown for selecting countries and recurring start types.
+  - Modal popup to view and confirm configuration before payment.
+  - Color preview for theme configuration inputs.
+  - Secure text entry toggle for secret key input.
 
 ## Troubleshooting
 
-- **iOS Bridge Initialization**: If "Failed to retrieve EasyMerchantSdkPlugin instance" appears, verify the `easymerchantsdk` pod is installed correctly. Run `pod install --repo-update` and check `AppDelegate.swift` for correct bridge setup.
+- **iOS Bridge Initialization**:
+  - **Error**: "Failed to retrieve EasyMerchantSdkPlugin instance."
+  - **Solution**: Verify the `easymerchantsdk` pod is installed correctly. Run `pod install --repo-update` and check `AppDelegate.swift` for correct bridge setup.
 - **Android Payment Issues**:
-    - Ensure `paymentMethods` includes at least one valid method (`['card', 'ach']`).
-    - Validate API keys and secret keys.
-    - Check `gradle.properties` for correct `GITHUB_USERNAME` and `GITHUB_PASSWORD`.
-    - Log the `config` object to verify payment method inclusion (e.g., `console.log(JSON.stringify(config, null, 2))`).
-- **Pod Installation**: If `pod install` fails, ensure Ruby 3.2.8 or higher is installed and run `pod install --repo-update`.
+  - Ensure `paymentConfig.paymentMethods` includes at least one valid method (`['card', 'ach']`).
+  - Validate API keys and secret keys in `apiKeys[environment]`.
+  - Check `gradle.properties` for correct `GITHUB_USERNAME` and `GITHUB_PASSWORD`.
+  - Log the `config` object to verify payment method inclusion (e.g., `console.log(JSON.stringify(config, null, 2))`).
+- **Pod Installation**:
+  - **Error**: `pod install` fails.
+  - **Solution**: Ensure Ruby 3.2.8 or higher is installed and run `pod install --repo-update`.
 - **Payment Failures**:
-    - Check console logs for detailed errors.
-    - Ensure `amount` is a positive number.
-    - Verify at least one payment method is selected.
-    - Confirm API keys match the selected environment (`sandbox` or `staging`).
-- **Payment Method Errors**: If payment fails due to invalid methods, ensure `androidConfig.paymentMethods` contains valid entries (`['card', 'ach']` for Android, `['Card', 'Bank']` for iOS) and that ACH-specific settings (`authenticatedACH`, `secureAuthentication`) are correctly configured when `ach` is selected.
+  - Check console logs for detailed errors.
+  - Ensure `amount` is a positive number.
+  - Verify at least one payment method is selected.
+  - Confirm API keys match the selected environment (`sandbox` or `staging`).
+- **Payment Method Errors**:
+  - **Issue**: Payment fails due to invalid methods.
+  - **Solution**: Ensure `paymentConfig.paymentMethods` contains valid entries (`['card', 'ach']` for Android, mapped to `['Card', 'Bank']` for iOS) and that ACH-specific settings (`isAuthenticatedACH`, `isSecureAuthentication`) are correctly configured when `ach` is selected.
+- **UI Issues**:
+  - **Dropdown Not Displaying**: Ensure `zIndex` is set correctly for the dropdown container (e.g., `zIndex: 9998`).
+  - **Modal Overlap**: Verify `elevation` and `shadow` properties for Android modals to prevent overlap.
+  - **Keyboard Overlap**: Ensure `KeyboardAvoidingView` is configured with the correct `behavior` and `keyboardVerticalOffset`.