@jimrising/easymerchantsdk-react-native 2.0.4 → 2.0.6

package/README.md

@@ -7,7 +7,7 @@ To add the path of sdk in your project. Open your `package.json` file and inside
 
 ```json
 "dependencies": {
-  "@jimrising/easymerchantsdk-react-native": "^2.0.4"
+  "@jimrising/easymerchantsdk-react-native": "^2.0.6"
 },
 ```
 
@@ -129,10 +129,121 @@ import {
   Switch,
   TouchableOpacity,
   NativeEventEmitter,
+  KeyboardAvoidingView,
+  Keyboard,
+  TouchableWithoutFeedback,
+  Modal,
 } from 'react-native';
 
 const { RNEasymerchantsdk, EasyMerchantSdk } = NativeModules;
 
+// Dropdown Component
+const Dropdown = ({ value, onValueChange, options, placeholder }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Handler to close modal when tapping outside
+  const handleClose = () => setIsOpen(false);
+
+  return (
+    <View style={styles.dropdownContainer} pointerEvents="box-none">
+      <TouchableOpacity
+        style={styles.dropdownButton}
+        onPress={() => setIsOpen(!isOpen)}
+      >
+        <Text style={styles.dropdownButtonText}>
+          {value || placeholder}
+        </Text>
+        <Text style={styles.dropdownArrow}>
+          {isOpen ? '▲' : '▼'}
+        </Text>
+      </TouchableOpacity>
+      {Platform.OS === 'android' ? (
+        <Modal
+          visible={isOpen}
+          transparent={true}
+          animationType="fade"
+          onRequestClose={handleClose}
+        >
+          <TouchableWithoutFeedback onPress={handleClose}>
+            <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.2)' }}>
+              <View style={[styles.dropdownOptions, { position: 'absolute', top: '30%', left: 20, right: 20, maxHeight: 300, elevation: 20 }]}>
+                <ScrollView
+                  style={[styles.dropdownScrollView, { maxHeight: 280 }]}
+                  showsVerticalScrollIndicator={true}
+                  persistentScrollbar={true}
+                  nestedScrollEnabled={true}
+                  keyboardShouldPersistTaps="handled"
+                >
+                  {options.map((option, index) => (
+                    <TouchableOpacity
+                      key={index}
+                      style={styles.dropdownOption}
+                      onPress={() => {
+                        onValueChange(option);
+                        setIsOpen(false);
+                      }}
+                    >
+                      <Text style={styles.dropdownOptionText}>{option}</Text>
+                    </TouchableOpacity>
+                  ))}
+                </ScrollView>
+              </View>
+            </View>
+          </TouchableWithoutFeedback>
+        </Modal>
+      ) : (
+        isOpen && (
+          <View style={styles.dropdownOptions}>
+            <ScrollView
+              style={styles.dropdownScrollView}
+              showsVerticalScrollIndicator={true}
+              persistentScrollbar={true}
+              nestedScrollEnabled={true}
+              keyboardShouldPersistTaps="handled"
+            >
+              {options.map((option, index) => (
+                <TouchableOpacity
+                  key={index}
+                  style={styles.dropdownOption}
+                  onPress={() => {
+                    onValueChange(option);
+                    setIsOpen(false);
+                  }}
+                >
+                  <Text style={styles.dropdownOptionText}>{option}</Text>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+          </View>
+        )
+      )}
+    </View>
+  );
+};
+
+// Custom Filled Button Component
+const FilledButton = ({ title, onPress, disabled = false, style = {}, textStyle = {} }) => {
+  return (
+    <TouchableOpacity
+      style={[
+        styles.filledButton,
+        disabled && styles.filledButtonDisabled,
+        style,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <Text style={[
+        styles.filledButtonText,
+        disabled && styles.filledButtonTextDisabled,
+        textStyle,
+      ]}>
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
 const externalConfig = {
   amount: '',
   email: '',
@@ -141,8 +252,8 @@ const externalConfig = {
   isSecureAuthentication: false,
   isBillingVisible: false,
   isAdditionalVisible: false,
-  emailEditable: true, 
-  isEmail: true, 
+  emailEditable: true,
+  isEmail: true,
   billingInfo: {
     visibility: { billing: false, additional: false },
     billing: {
@@ -160,34 +271,30 @@ const externalConfig = {
       postal_code: true,
     },
     additional: {
-      name: 'Test User',
-      email_address: 'test@gmail.com',
-      phone_number: '21408713290',
+
+      phone_number: '2140871329',
       description: 'Test',
     },
     additionalRequired: {
-      name: true,
-      email_address: true,
+
       phone_number: true,
       description: false,
     },
   },
-  themeConfiguration: {
-    bodyBackgroundColor: '#0f1715',
-    containerBackgroundColor: '#152321',
-    primaryFontColor: '#FFFFFF',
-    secondaryFontColor: '#A0B5A4',
-    primaryButtonBackgroundColor: '#10B981',
-    primaryButtonHoverColor: '#059669',
-    primaryButtonFontColor: '#FFFFFF',
-    secondaryButtonBackgroundColor: '#374151',
-    secondaryButtonHoverColor: '#4B5563',
-    secondaryButtonFontColor: '#E5E7EB',
-    borderRadius: '8',
-    fontSize: '14',
-    fontWeight: 500,
-    fontFamily: '"Inter", sans-serif',
-  },
+      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,
@@ -198,9 +305,9 @@ const externalConfig = {
   },
   recurringData: {
     allowCycles: 2,
-    intervals: ['daily','weekly', 'monthly'],
+    intervals: ['daily', 'weekly', 'monthly'],
     recurringStartType: 'custom',
-    recurringStartDate: '07/08/2030',
+    recurringStartDate: new Date().toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }),
   },
   androidConfig: {
     currency: 'usd',
@@ -211,7 +318,7 @@ const externalConfig = {
     showTotal: true,
     showSubmitButton: true,
     paymentMethod: ['card', 'ach'],
-    name: 'Pavan',
+    name: '',
     fields: {
       visibility: { billing: false, additional: false },
       billing: [
@@ -222,28 +329,27 @@ const externalConfig = {
         { name: 'postal_code', required: true, value: '1432456' },
       ],
       additional: [
-        { name: 'name', required: true, value: 'Test User 7' },
-        { name: 'email_address', required: true, value: 'usertest@gmail.com' },
+
         { name: 'phone_number', required: true, value: '8978967895' },
         { name: 'description', required: true, value: 'Hi This is description' },
       ],
     },
     appearanceSettings: {
       theme: 'dark',
-      bodyBackgroundColor: '#121212',
-      containerBackgroundColor: '#1E1E1E',
+      bodyBackgroundColor: '#0F5132',
+      containerBackgroundColor: '#166534',
       primaryFontColor: '#FFFFFF',
-      secondaryFontColor: '#B0B0B0',
-      primaryButtonBackgroundColor: '#2563EB',
-      primaryButtonHoverColor: '#1D4ED8',
+      secondaryFontColor: '#D1FAE5',
+      primaryButtonBackgroundColor: '#059669',
+      primaryButtonHoverColor: '#047857',
       primaryButtonFontColor: '#FFFFFF',
-      secondaryButtonBackgroundColor: '#374151',
-      secondaryButtonHoverColor: '#4B5563',
-      secondaryButtonFontColor: '#E5E7EB',
+      secondaryButtonBackgroundColor: '#065F46',
+      secondaryButtonHoverColor: '#064E3B',
+      secondaryButtonFontColor: '#FFFFFF',
       borderRadius: '8',
       fontSize: '14',
-      fontWeight: '500',
-      fontFamily: 'Inter, sans-serif',
+      fontWeight: 500,
+      fontFamily: '"Inter", sans-serif',
     },
   },
 };
@@ -251,6 +357,7 @@ 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);
@@ -268,6 +375,13 @@ const App = () => {
   const [referenceToken, setReferenceToken] = useState('');
   const [loading, setLoading] = useState(false);
   const [showSecretKey, setShowSecretKey] = useState(false);
+  const metadata = {
+    metaKey: 'metaValue',
+    metaKLey1: 'metaValue1',
+    metaKLey2: 'metaValue2',
+    metaKLey3: 'metaValue3',
+    metaKLey4: 'metaValue4',
+  };
 
 const [apiKeys, setApiKeys] = useState({
   sandbox: {
@@ -282,6 +396,21 @@ const [apiKeys, setApiKeys] = useState({
   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 () => {
@@ -450,12 +579,36 @@ const safeParseMaybeJSON = (value) => {
   };
 
   const togglePaymentMethod = (method) => {
-    setAndroidConfig(prev => ({
-      ...prev,
-      paymentMethod: prev.paymentMethod.includes(method)
-        ? prev.paymentMethod.filter(m => m !== method)
-        : [...prev.paymentMethod, 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) => {
@@ -471,58 +624,126 @@ const safeParseMaybeJSON = (value) => {
     if (!amount || isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {
       return Alert.alert('Error', 'Please enter a valid amount');
     }
-    if (!email) {
-      return Alert.alert('Error', 'Please enter an email address');
+
+    // 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);
-    if (Platform.OS === 'android') {
-      await handleAndroidBilling();
-    } else {
-      await handleIosBilling();
+
+    // 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];
-  const config = {
-    amount,
-    apiKey: apiKey,
-    secretKey: apiSecret,
-    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: androidConfig.paymentMethod,
-      emailEditable,
-      email,
-      name: androidConfig.name,
-      fields: {
-        ...androidConfig.fields,
-        visibility: {
-          billing: isBillingVisible,
-          additional: isAdditionalVisible,
-        },
-      },
-      ...(isRecurring && {
-        recurring: {
-          enableRecurring: true,
-          recurringData,
-        },
-      }),
-      grailPayParams,
-      appearanceSettings: androidConfig.appearanceSettings,
-    },
-  };
+
+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);
@@ -546,12 +767,33 @@ setResult(JSON.stringify(parsedResponse, null, 2));
 };
 
   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,
-        androidConfig.paymentMethod,
+        finalPaymentMethodsIOS,
         themeConfiguration,
         false, // tokenOnly
         androidConfig.saveCard,
@@ -570,7 +812,8 @@ setResult(JSON.stringify(parsedResponse, null, 2));
         androidConfig.showSubmitButton,
         isEmail,
         email,
-        androidConfig.name
+        name,
+        metadata
       );
 
       const refToken = result?.additionalInfo?.threeDSecureStatus?.data?.ref_token;
@@ -603,10 +846,6 @@ setResult(JSON.stringify(parsedResponse, null, 2));
       setResult('Payment Reference not supported on Android');
       return;
     }
-    if (!referenceToken) {
-      setResult('No reference token available');
-      return;
-    }
     try {
       const response = await EasyMerchantSdk.paymentReference(referenceToken);
       setResult(`Payment Reference:\n${JSON.stringify(response, null, 2)}`);
@@ -618,8 +857,16 @@ setResult(JSON.stringify(parsedResponse, null, 2));
   };
 
   return (
-    <View style={styles.container}>
-      <ScrollView contentContainerStyle={styles.scrollContent}>
+    <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>
 
 
@@ -629,6 +876,7 @@ setResult(JSON.stringify(parsedResponse, null, 2));
         <TextInput
           style={styles.input}
           placeholder="Enter amount (e.g., 10.00)"
+          placeholderTextColor="#999999"
           keyboardType="decimal-pad"
           value={amount}
           onChangeText={setAmount}
@@ -637,18 +885,39 @@ setResult(JSON.stringify(parsedResponse, null, 2));
         <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}>
-          <Button title="Pay" onPress={handlePayment}  />
+        <View style={styles.buttonGroup}>
+          <FilledButton
+            title="Pay"
+            onPress={handlePayment}
+            disabled={loading}
+          />
           {Platform.OS === 'ios' && (
-            <Button title="Payment Ref" onPress={handlePaymentReference} disabled={loading} />
+            <FilledButton
+              title="Payment Ref"
+              onPress={handlePaymentReference}
+              disabled={loading}
+            />
           )}
         </View>
 
+
+
+
+
         <View style={styles.toggleContainer}>
           <Text style={styles.label}>Show Configurations</Text>
           <Switch
@@ -706,6 +975,7 @@ setResult(JSON.stringify(parsedResponse, null, 2));
                    }))
                  }
                  placeholder={`Enter ${environment === 'sandbox' ? 'Sandbox' : 'Staging'} API Key`}
+                 placeholderTextColor="#999999"
                />
                <Text style={styles.label}>Secret Key</Text>
                <View style={styles.inputContainer}>
@@ -719,6 +989,7 @@ setResult(JSON.stringify(parsedResponse, null, 2));
                      }))
                    }
                    placeholder={`Enter ${environment === 'sandbox' ? 'Sandbox' : 'Staging'} Secret Key`}
+                   placeholderTextColor="#999999"
                    secureTextEntry={!showSecretKey}
                  />
                  <TouchableOpacity
@@ -779,22 +1050,45 @@ setResult(JSON.stringify(parsedResponse, null, 2));
                 thumbColor={isAdditionalVisible ? '#fff' : '#f4f3f4'}
               />
             </View>
-            <Text style={styles.label}>Payment Methods (Shared)</Text>
+                        <Text style={styles.label}>Payment Methods (Shared)</Text>
+            <Text style={styles.debugText}>
+              Selected: {androidConfig.paymentMethod.join(', ') || 'None'}
+            </Text>
             <View style={styles.buttonGroup}>
-              <Button
+              <FilledButton
                 title="Card"
                 onPress={() => togglePaymentMethod('card')}
-                color={androidConfig.paymentMethod.includes('card') ?  '#ccc' :'#2563EB'}
+                disabled={loading}
+                style={[
+                  { flex: 1 },
+                  androidConfig.paymentMethod.includes('card')
+                    ? { backgroundColor: '#2563EB' }
+                    : { backgroundColor: '#E5E7EB' }
+                ]}
+                textStyle={androidConfig.paymentMethod.includes('card')
+                  ? { color: '#fff' }
+                  : { color: '#374151' }
+                }
               />
-              <Button
+              <FilledButton
                 title="ACH"
                 onPress={() => togglePaymentMethod('ach')}
-                color={androidConfig.paymentMethod.includes('ach') ? '#ccc' :'#2563EB'  }
+                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 (Android)</Text>
+                <Text style={styles.label}>Email Editable</Text>
                 <Switch
                   value={emailEditable}
                   onValueChange={setEmailEditable}
@@ -805,7 +1099,7 @@ setResult(JSON.stringify(parsedResponse, null, 2));
             )}
             {Platform.OS === 'ios' && (
               <View style={styles.toggleContainer}>
-                <Text style={styles.label}>Allow Email (iOS)</Text>
+                <Text style={styles.label}>Allow Email Editable</Text>
                 <Switch
                   value={isEmail}
                   onValueChange={setIsEmail}
@@ -816,36 +1110,9 @@ setResult(JSON.stringify(parsedResponse, null, 2));
             )}
 
             <Text style={styles.sectionTitle}>Billing Info</Text>
-            <Text style={styles.label}>Billing Address</Text>
-            <TextInput
-              style={styles.input}
-              value={billingInfo.billing.address}
-              onChangeText={value => updateBillingInfo('billing', 'address', value)}
-            />
-            <Text style={styles.label}>Billing Country</Text>
-            <TextInput
-              style={styles.input}
-              value={billingInfo.billing.country}
-              onChangeText={value => updateBillingInfo('billing', 'country', value)}
-            />
-            <Text style={styles.label}>Billing State</Text>
-            <TextInput
-              style={styles.input}
-              value={billingInfo.billing.state}
-              onChangeText={value => updateBillingInfo('billing', 'state', value)}
-            />
-            <Text style={styles.label}>Billing City</Text>
-            <TextInput
-              style={styles.input}
-              value={billingInfo.billing.city}
-              onChangeText={value => updateBillingInfo('billing', 'city', value)}
-            />
-            <Text style={styles.label}>Billing Postal Code</Text>
-            <TextInput
-              style={styles.input}
-              value={billingInfo.billing.postal_code}
-              onChangeText={value => updateBillingInfo('billing', 'postal_code', value)}
-            />
+
+            {/* Billing Required Switches */}
+            <Text style={styles.subsectionTitle}>Billing Required Fields</Text>
             <Text style={styles.label}>Billing Required: Address</Text>
             <Switch
               value={billingInfo.billingRequired.address}
@@ -863,7 +1130,7 @@ setResult(JSON.stringify(parsedResponse, null, 2));
             <Text style={styles.label}>Billing Required: State</Text>
             <Switch
               value={billingInfo.billingRequired.state}
-              onChangeText={value => updateBillingInfo('billingRequired', 'state', value)}
+              onValueChange={value => updateBillingInfo('billingRequired', 'state', value)}
               trackColor={{ false: '#ccc', true: '#2563EB' }}
               thumbColor={billingInfo.billingRequired.state ? '#fff' : '#f4f3f4'}
             />
@@ -881,44 +1148,125 @@ setResult(JSON.stringify(parsedResponse, null, 2));
               trackColor={{ false: '#ccc', true: '#2563EB' }}
               thumbColor={billingInfo.billingRequired.postal_code ? '#fff' : '#f4f3f4'}
             />
-            <Text style={styles.label}>Additional: Name</Text>
-            <TextInput
-              style={styles.input}
-              value={billingInfo.additional.name}
-              onChangeText={value => updateBillingInfo('additional', 'name', value)}
-            />
-            <Text style={styles.label}>Additional: Email Address</Text>
-            <TextInput
-              style={styles.input}
-              value={billingInfo.additional.email_address}
-              onChangeText={value => updateBillingInfo('additional', 'email_address', value)}
-            />
-            <Text style={styles.label}>Additional: Phone Number</Text>
-            <TextInput
-              style={styles.input}
-              value={billingInfo.additional.phone_number}
-              onChangeText={value => updateBillingInfo('additional', 'phone_number', value)}
-            />
-            <Text style={styles.label}>Additional: Description</Text>
-            <TextInput
-              style={styles.input}
-              value={billingInfo.additional.description}
-              onChangeText={value => updateBillingInfo('additional', 'description', value)}
-            />
-            <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'}
-            />
+
+            {/* Billing Fields Section */}
+            <Text style={styles.subsectionTitle}>Billing Fields</Text>
+            {billingInfo.billingRequired.address && (
+              <>
+                <Text style={styles.label}>Billing Address</Text>
+                <TextInput
+                  style={styles.input}
+                  value={billingInfo.billing.address}
+                  onChangeText={value => updateBillingInfo('billing', 'address', value)}
+                  placeholder="Enter billing address"
+                  placeholderTextColor="#999999"
+                />
+              </>
+            )}
+            {billingInfo.billingRequired.country && (
+              <>
+                <Text style={styles.label}>Billing Country</Text>
+                <Dropdown
+                  value={billingInfo.billing.country}
+                  onValueChange={value => updateBillingInfo('billing', 'country', value)}
+                  options={[
+                    "Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra",
+                      "Angola", "Anguilla", "Antarctica", "Antigua and Barbuda", "Argentina",
+                      "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan",
+                      "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus",
+                      "Belgium", "Belize", "Benin", "Bermuda", "Bhutan",
+                      "Bolivia", "Bosnia and Herzegovina", "Botswana", "Bouvet Island", "Brazil",
+                      "British Indian Ocean Territory", "Brunei Darussalam", "Bulgaria", "Burkina Faso", "Burundi",
+                      "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Cayman Islands",
+                      "Central African Republic", "Chad", "Chile", "China", "Christmas Island",
+                      "Cocos (Keeling) Islands", "Colombia", "Comoros", "Congo", "Congo, Democratic Republic of the",
+                      "Cook Islands", "Costa Rica", "Croatia", "Cuba", "Curaçao",
+                      "Cyprus", "Czech Republic", "Côte d'Ivoire", "Denmark", "Djibouti",
+                      "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador",
+                      "Equatorial Guinea", "Eritrea", "Estonia", "Eswatini", "Ethiopia",
+                      "Falkland Islands (Malvinas)", "Faroe Islands", "Fiji", "Finland", "France",
+                      "French Guiana", "French Polynesia", "French Southern Territories", "Gabon", "Gambia",
+                      "Georgia", "Germany", "Ghana", "Gibraltar", "Greece",
+                      "Greenland", "Grenada", "Guadeloupe", "Guam", "Guatemala",
+                      "Guernsey", "Guinea", "Guinea-Bissau", "Guyana", "Haiti",
+                      "Heard Island and McDonald Islands", "Holy See", "Honduras", "Hong Kong", "Hungary",
+                      "Iceland", "India", "Indonesia", "Iran", "Iraq",
+                      "Ireland", "Isle of Man", "Israel", "Italy", "Jamaica",
+                      "Japan", "Jersey", "Jordan", "Kazakhstan", "Kenya",
+                      "Kiribati", "Korea (Democratic People's Republic of)", "Korea, Republic of", "Kuwait", "Kyrgyzstan",
+                      "Lao People's Democratic Republic", "Latvia", "Lebanon", "Lesotho", "Liberia",
+                      "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macao",
+                      "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali",
+                      "Malta", "Marshall Islands", "Martinique", "Mauritania", "Mauritius",
+                      "Mayotte", "Mexico", "Micronesia (Federated States of)", "Moldova", "Monaco",
+                      "Mongolia", "Montenegro", "Montserrat", "Morocco", "Mozambique",
+                      "Myanmar", "Namibia", "Nauru", "Nepal", "Netherlands",
+                      "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria",
+                      "Niue", "Norfolk Island", "North Macedonia", "Northern Mariana Islands", "Norway",
+                      "Oman", "Pakistan", "Palau", "Palestine, State of", "Panama",
+                      "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Pitcairn",
+                      "Poland", "Portugal", "Puerto Rico", "Qatar", "Romania",
+                      "Russian Federation", "Rwanda", "Réunion", "Saint Barthélemy", "Saint Helena, Ascension and Tristan da Cunha",
+                      "Saint Kitts and Nevis", "Saint Lucia", "Saint Martin (French part)", "Saint Pierre and Miquelon", "Saint Vincent and the Grenadines",
+                      "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal",
+                      "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Sint Maarten (Dutch part)",
+                      "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa",
+                      "South Georgia and the South Sandwich Islands", "South Sudan", "Spain", "Sri Lanka", "Sudan",
+                      "Suriname", "Svalbard and Jan Mayen", "Sweden", "Switzerland", "Syrian Arab Republic",
+                      "Taiwan, Province of China", "Tajikistan", "Tanzania", "Thailand", "Timor-Leste",
+                      "Togo", "Tokelau", "Tonga", "Trinidad and Tobago", "Tunisia",
+                      "Turkey", "Turkmenistan", "Tuvalu", "Uganda", "Ukraine",
+                      "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan",
+                      "Vanuatu", "Venezuela", "Viet Nam", "Western Sahara", "Yemen",
+                      "Zambia", "Zimbabwe", "Åland Islands"
+                  ]}
+                  placeholder="Select country"
+                />
+              </>
+            )}
+            {billingInfo.billingRequired.state && (
+              <>
+                <Text style={styles.label}>Billing State</Text>
+                <TextInput
+                  style={styles.input}
+                  value={billingInfo.billing.state}
+                  onChangeText={value => updateBillingInfo('billing', 'state', value)}
+                  placeholder="Enter state"
+                  placeholderTextColor="#999999"
+                />
+              </>
+            )}
+            {billingInfo.billingRequired.city && (
+              <>
+                <Text style={styles.label}>Billing City</Text>
+                <TextInput
+                  style={styles.input}
+                  value={billingInfo.billing.city}
+                  onChangeText={value => updateBillingInfo('billing', 'city', value)}
+                  placeholder="Enter city"
+                  placeholderTextColor="#999999"
+                />
+              </>
+            )}
+            {billingInfo.billingRequired.postal_code && (
+              <>
+                <Text style={styles.label}>Billing Postal Code</Text>
+                <TextInput
+                  style={styles.input}
+                  value={billingInfo.billing.postal_code}
+                  onChangeText={value => updateBillingInfo('billing', 'postal_code', value)}
+                  placeholder="Enter postal code"
+                  placeholderTextColor="#999999"
+                />
+              </>
+            )}
+
+            <Text style={styles.sectionTitle}>Additional Info</Text>
+
+            {/* Additional Required Switches */}
+            <Text style={styles.subsectionTitle}>Additional Required Fields</Text>
+
+
             <Text style={styles.label}>Additional Required: Phone Number</Text>
             <Switch
               value={billingInfo.additionalRequired.phone_number}
@@ -934,190 +1282,194 @@ setResult(JSON.stringify(parsedResponse, null, 2));
               thumbColor={billingInfo.additionalRequired.description ? '#fff' : '#f4f3f4'}
             />
 
-            {/* Android Configuration */}
-            {Platform.OS === 'android' && (
+            {/* Additional Fields Section */}
+            <Text style={styles.subsectionTitle}>Additional Fields</Text>
+
+            {billingInfo.additionalRequired.phone_number && (
               <>
-                <Text style={styles.sectionTitle}>Android Configuration</Text>
-                <Text style={styles.label}>Currency</Text>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.currency}
-                  onChangeText={value => updateAndroidConfig('currency', value)}
-                />
-                <Text style={styles.label}>Save Card</Text>
-                <Switch
-                  value={androidConfig.saveCard}
-                  onValueChange={value => updateAndroidConfig('saveCard', value)}
-                  trackColor={{ false: '#ccc', true: '#2563EB' }}
-                  thumbColor={androidConfig.saveCard ? '#fff' : '#f4f3f4'}
-                />
-                <Text style={styles.label}>Save Account</Text>
-                <Switch
-                  value={androidConfig.saveAccount}
-                  onValueChange={value => updateAndroidConfig('saveAccount', value)}
-                  trackColor={{ false: '#ccc', true: '#2563EB' }}
-                  thumbColor={androidConfig.saveAccount ? '#fff' : '#f4f3f4'}
-                />
-                <Text style={styles.label}>Show Receipt</Text>
-                <Switch
-                  value={androidConfig.showReceipt}
-                  onValueChange={value => updateAndroidConfig('showReceipt', value)}
-                  trackColor={{ false: '#ccc', true: '#2563EB' }}
-                  thumbColor={androidConfig.showReceipt ? '#fff' : '#f4f3f4'}
-                />
-                <Text style={styles.label}>Show Donate</Text>
-                <Switch
-                  value={androidConfig.showDonate}
-                  onValueChange={value => updateAndroidConfig('showDonate', value)}
-                  trackColor={{ false: '#ccc', true: '#2563EB' }}
-                  thumbColor={androidConfig.showDonate ? '#fff' : '#f4f3f4'}
-                />
-                <Text style={styles.label}>Show Total</Text>
-                <Switch
-                  value={androidConfig.showTotal}
-                  onValueChange={value => updateAndroidConfig('showTotal', value)}
-                  trackColor={{ false: '#ccc', true: '#2563EB' }}
-                  thumbColor={androidConfig.showTotal ? '#fff' : '#f4f3f4'}
-                />
-                <Text style={styles.label}>Show Submit Button</Text>
-                <Switch
-                  value={androidConfig.showSubmitButton}
-                  onValueChange={value => updateAndroidConfig('showSubmitButton', value)}
-                  trackColor={{ false: '#ccc', true: '#2563EB' }}
-                  thumbColor={androidConfig.showSubmitButton ? '#fff' : '#f4f3f4'}
-                />
-                <Text style={styles.label}>Name</Text>
+                <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={androidConfig.name}
-                  onChangeText={value => updateAndroidConfig('name', value)}
+                  value={billingInfo.additional.description}
+                  onChangeText={value => updateBillingInfo('additional', 'description', value)}
+                  placeholder="Enter description"
+                  placeholderTextColor="#999999"
                 />
-                <Text style={styles.sectionTitle}>Android Fields</Text>
-                {androidConfig.fields.billing.map((field, index) => (
-                  <View key={`billing-${index}`}>
-                    <Text style={styles.label}>{`Billing ${field.name}`}</Text>
-                    <TextInput
-                      style={styles.input}
-                      value={field.value}
-                      onChangeText={value => updateAndroidConfigFields('billing', index, 'value', value)}
-                    />
-                    <Text style={styles.label}>{`Billing ${field.name} Required`}</Text>
-                    <Switch
-                      value={field.required}
-                      onValueChange={value => updateAndroidConfigFields('billing', index, 'required', value)}
-                      trackColor={{ false: '#ccc', true: '#2563EB' }}
-                      thumbColor={field.required ? '#fff' : '#f4f3f4'}
-                    />
-                  </View>
-                ))}
-                {androidConfig.fields.additional.map((field, index) => (
-                  <View key={`additional-${index}`}>
-                    <Text style={styles.label}>{`Additional ${field.name}`}</Text>
-                    <TextInput
-                      style={styles.input}
-                      value={field.value}
-                      onChangeText={value => updateAndroidConfigFields('additional', index, 'value', value)}
-                    />
-                    <Text style={styles.label}>{`Additional ${field.name} Required`}</Text>
-                    <Switch
-                      value={field.required}
-                      onValueChange={value => updateAndroidConfigFields('additional', index, 'required', value)}
-                      trackColor={{ false: '#ccc', true: '#2563EB' }}
-                      thumbColor={field.required ? '#fff' : '#f4f3f4'}
-                    />
-                  </View>
-                ))}
+              </>
+            )}
+
+            {/* Android Appearance Settings */}
+            {Platform.OS === 'android' && (
+              <>
                 <Text style={styles.sectionTitle}>Android Appearance Settings</Text>
-                <Text style={styles.label}>Theme</Text>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.theme}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('theme', value)}
-                />
                 <Text style={styles.label}>Body Background Color</Text>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.bodyBackgroundColor}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('bodyBackgroundColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.containerBackgroundColor}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('containerBackgroundColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.primaryFontColor}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('primaryFontColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.secondaryFontColor}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryFontColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.primaryButtonBackgroundColor}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonBackgroundColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.primaryButtonHoverColor}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonHoverColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.primaryButtonFontColor}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonFontColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.secondaryButtonBackgroundColor}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonBackgroundColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.secondaryButtonHoverColor}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonHoverColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.secondaryButtonFontColor}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonFontColor', value)}
-                />
+                <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"
                 />
-                <Text style={styles.label}>Font Weight</Text>
-                <TextInput
-                  style={styles.input}
-                  value={String(androidConfig.appearanceSettings.fontWeight)}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('fontWeight', parseInt(value) || '500')}
-                />
-                <Text style={styles.label}>Font Family</Text>
-                <TextInput
-                  style={styles.input}
-                  value={androidConfig.appearanceSettings.fontFamily}
-                  onChangeText={value => updateAndroidConfigAppearanceSettings('fontFamily', value)}
-                />
+
               </>
             )}
 
@@ -1126,89 +1478,132 @@ setResult(JSON.stringify(parsedResponse, null, 2));
               <>
                 <Text style={styles.sectionTitle}>Theme Configuration (iOS)</Text>
                 <Text style={styles.label}>Body Background Color</Text>
-                <TextInput
-                  style={styles.input}
-                  value={themeConfiguration.bodyBackgroundColor}
-                  onChangeText={value => updateThemeConfiguration('bodyBackgroundColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={themeConfiguration.containerBackgroundColor}
-                  onChangeText={value => updateThemeConfiguration('containerBackgroundColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={themeConfiguration.primaryFontColor}
-                  onChangeText={value => updateThemeConfiguration('primaryFontColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={themeConfiguration.secondaryFontColor}
-                  onChangeText={value => updateThemeConfiguration('secondaryFontColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={themeConfiguration.primaryButtonBackgroundColor}
-                  onChangeText={value => updateThemeConfiguration('primaryButtonBackgroundColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={themeConfiguration.primaryButtonHoverColor}
-                  onChangeText={value => updateThemeConfiguration('primaryButtonHoverColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={themeConfiguration.primaryButtonFontColor}
-                  onChangeText={value => updateThemeConfiguration('primaryButtonFontColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={themeConfiguration.secondaryButtonBackgroundColor}
-                  onChangeText={value => updateThemeConfiguration('secondaryButtonBackgroundColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={themeConfiguration.secondaryButtonHoverColor}
-                  onChangeText={value => updateThemeConfiguration('secondaryButtonHoverColor', value)}
-                />
+                <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>
-                <TextInput
-                  style={styles.input}
-                  value={themeConfiguration.secondaryButtonFontColor}
-                  onChangeText={value => updateThemeConfiguration('secondaryButtonFontColor', value)}
-                />
+                <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"
                 />
-                <Text style={styles.label}>Font Weight</Text>
-                <TextInput
-                  style={styles.input}
-                  value={String(themeConfiguration.fontWeight)}
-                  onChangeText={value => updateThemeConfiguration('fontWeight', parseInt(value) || 500)}
-                />
-                <Text style={styles.label}>Font Family</Text>
-                <TextInput
-                  style={styles.input}
-                  value={themeConfiguration.fontFamily}
-                  onChangeText={value => updateThemeConfiguration('fontFamily', value)}
-                />
+
               </>
             )}
 
@@ -1219,12 +1614,16 @@ setResult(JSON.stringify(parsedResponse, null, 2));
               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
@@ -1238,52 +1637,106 @@ setResult(JSON.stringify(parsedResponse, null, 2));
               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</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>
+                        <Text style={styles.label}>Intervals</Text>
             <View style={styles.buttonGroup}>
-              <Button
+              <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')}
-                color={recurringData.intervals.includes('weekly') ? '#2563EB' : '#ccc'}
+                disabled={loading}
+                style={[
+                  { flex: 1 },
+                  recurringData.intervals.includes('weekly')
+                    ? { backgroundColor: '#2563EB' }
+                    : { backgroundColor: '#E5E7EB' }
+                ]}
+                textStyle={[
+                  { fontSize: 14 },
+                  recurringData.intervals.includes('weekly')
+                    ? { color: '#fff' }
+                    : { color: '#374151' }
+                ]}
               />
-              <Button
+              <FilledButton
                 title="Monthly"
                 onPress={() => toggleInterval('monthly')}
-                color={recurringData.intervals.includes('monthly') ? '#2563EB' : '#ccc'}
+                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>
-            <TextInput
-              style={styles.input}
+            <Dropdown
               value={recurringData.recurringStartType}
-              onChangeText={value => updateRecurringData('recurringStartType', value)}
+              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}
+              style={[styles.input, styles.dateInput]}
               value={recurringData.recurringStartDate}
               onChangeText={value => updateRecurringData('recurringStartDate', value)}
+              placeholder="MM/DD/YYYY"
+              placeholderTextColor="#999999"
+              returnKeyType="done"
+              onSubmitEditing={() => Keyboard.dismiss()}
             />
           </>
         )}
@@ -1291,7 +1744,7 @@ setResult(JSON.stringify(parsedResponse, null, 2));
         <Text style={styles.sectionTitle}>SDK Response</Text>
         <Text selectable style={styles.result}>{result || 'No response yet'}</Text>
       </ScrollView>
-    </View>
+    </KeyboardAvoidingView>
   );
 
 };
@@ -1314,6 +1767,13 @@ const styles = StyleSheet.create({
     marginTop: 20,
     marginBottom: 10,
   },
+  subsectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginTop: 15,
+    marginBottom: 8,
+    color: '#374151',
+  },
   input: {
     height: 40,
     borderColor: '#ccc',
@@ -1321,6 +1781,19 @@ const styles = StyleSheet.create({
     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,
@@ -1379,8 +1852,132 @@ const styles = StyleSheet.create({
       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,
+  },
 });
 
+
+
+
 ```
 
 You can send `null` if billing info not available.