@jimrising/easymerchantsdk-react-native 1.8.6 → 1.8.8

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": "^1.8.6"
+  "@jimrising/easymerchantsdk-react-native": "^1.8.8"
 },
 ```
 
@@ -271,10 +271,42 @@ const App = () => {
   const [loading, setLoading] = useState(false);
   const [apiKey, setApiKey] = useState('apiKey'); 
   const [apiSecret, setApiSecret] = useState('apiSecret');
-  const [isEnvironmentLoading, setIsEnvironmentLoading] = useState(false); 
+  const [isEnvironmentLoading, setIsEnvironmentLoading] = useState(false);
+  const [showConfig, setShowConfig] = useState(true);
 
+
+  useEffect(() => {
+    const updateEnvironment = async () => {
+       const key = environment === 'staging'
+        ? 'stagingApiKey'
+        : 'sandboxApiKey';
+      const secret = environment === 'staging'
+        ? 'stagingApiSecret'
+        : 'sandboxApiSecret';
+
+      setApiKey(key);
+      setApiSecret(secret);
+
+      if (Platform.OS === 'ios') {
+        setIsEnvironmentLoading(true);
+        try {
+          await EasyMerchantSdk.setViewController();
+          await EasyMerchantSdk.configureEnvironment(environment, key, secret);
+          console.log(`iOS Environment configured: ${environment} with key ${key}`);
+        } catch (err) {
+          console.error('iOS Initialization Error:', err);
+          Alert.alert('Error', `Failed to configure iOS environment: ${err.message}`);
+        } finally {
+          setIsEnvironmentLoading(false);
+        }
+      }
+    };
+
+    updateEnvironment();
+  }, [environment]);
+  
 useEffect(() => {
-if (Platform.OS !== 'android') {
+  if (Platform.OS !== 'android') {
     console.log('Event listeners skipped: not Android');
     return;
   }
@@ -285,30 +317,41 @@ if (Platform.OS !== 'android') {
   }
 
   const easyMerchantEvents = new NativeEventEmitter(RNEasymerchantsdk);
+
   const successSub = easyMerchantEvents.addListener('PaymentSuccess', (data) => {
     console.log('Payment success event:', data);
-    const parsed = JSON.parse(data.response);
-    console.log('Parsed PaymentSuccess:', parsed);
 
-    if (parsed.billingInfo) {
-      const billing = JSON.parse(parsed.billingInfo);
-      console.log('Billing Info:', billing);
-    }
+    try {
+      const parsed = JSON.parse(data.response);
+      console.log('Parsed PaymentSuccess:', parsed);
+
+      const billing = safeParseMaybeJSON(parsed.billingInfo);
+      const additional = safeParseMaybeJSON(parsed.additional_info);
 
-    if (parsed.additional_info) {
-      const additional = JSON.parse(parsed.additional_info);
+      console.log('Billing Info:', billing);
       console.log('Additional Info:', additional);
-    }
 
-    setResult(JSON.stringify(parsed, null, 2));
+      // Replace raw with parsed versions
+      parsed.billingInfo = billing;
+      parsed.additional_info = additional;
+
+      setResult(JSON.stringify(parsed, null, 2));
+    } catch (err) {
+      console.error('Error parsing PaymentSuccess response:', err);
+    }
   });
 
   const statusSub = easyMerchantEvents.addListener('PaymentStatus', (data) => {
     console.log('Raw Payment status event:', data);
-    const parsed = JSON.parse(data.statusResponse);
-    console.log('Parsed PaymentStatus:', parsed);
 
-    setResult(JSON.stringify(parsed, null, 2));
+    try {
+      const parsed = JSON.parse(data.statusResponse);
+      console.log('Parsed PaymentStatus:', parsed);
+
+      setResult(JSON.stringify(parsed, null, 2));
+    } catch (err) {
+      console.error('Error parsing PaymentStatus response:', err);
+    }
   });
 
   const statusErrorSub = easyMerchantEvents.addListener('PaymentStatusError', (data) => {
@@ -324,36 +367,17 @@ if (Platform.OS !== 'android') {
 }, []);
 
 
-
-  useEffect(() => {
-    const updateEnvironment = async () => {
-       const key = environment === 'staging'
-        ? 'stagingApiKey'
-        : 'sandboxApiKey';
-      const secret = environment === 'staging'
-        ? 'stagingApiSecret'
-        : 'sandboxApiSecret';
-
-      setApiKey(key);
-      setApiSecret(secret);
-
-      if (Platform.OS === 'ios') {
-        setIsEnvironmentLoading(true);
-        try {
-          await EasyMerchantSdk.setViewController();
-          await EasyMerchantSdk.configureEnvironment(environment, key, secret);
-          console.log(`iOS Environment configured: ${environment} with key ${key}`);
-        } catch (err) {
-          console.error('iOS Initialization Error:', err);
-          Alert.alert('Error', `Failed to configure iOS environment: ${err.message}`);
-        } finally {
-          setIsEnvironmentLoading(false);
-        }
-      }
-    };
-
-    updateEnvironment();
-  }, [environment]);
+const safeParseMaybeJSON = (value) => {
+  if (typeof value === 'string') {
+    try {
+      return JSON.parse(value);
+    } catch (e) {
+      console.warn('Failed to parse JSON string:', value);
+      return value;
+    }
+  }
+  return value;
+};
 
   useEffect(() => {
     setBillingInfo(prev => ({
@@ -500,16 +524,18 @@ const handleAndroidBilling = async () => {
   };
 
   try {
-    const response = await RNEasymerchantsdk.makePayment(config);
-    console.log('Full payment response:', response);
+const response = await RNEasymerchantsdk.makePayment(config);
+console.log('Full payment response:', response);
 
-    const parsedResponse = {
-      ...response,
-      billingInfo: response.billingInfo ? JSON.parse(response.billingInfo) : null,
-      additional_info: response.additional_info ? JSON.parse(response.additional_info) : null,
-    };
+const parsedResponse = {
+  ...response,
+  billingInfo: safeParseMaybeJSON(response.billingInfo),
+  additional_info: safeParseMaybeJSON(response.additional_info),
+};
+
+console.log('Parsed safe response:', parsedResponse);
 
-    setResult(JSON.stringify(parsedResponse, null, 2));
+setResult(JSON.stringify(parsedResponse, null, 2));
   } catch (error) {
     setResult(`Error: ${error.message}`);
     Alert.alert('Payment Error', error.message);
@@ -595,6 +621,8 @@ const handleAndroidBilling = async () => {
       <ScrollView contentContainerStyle={styles.scrollContent}>
         <Text style={styles.title}>EasyMerchant SDK</Text>
 
+
+
         <Text style={styles.sectionTitle}>Basic Info</Text>
         <Text style={styles.label}>Amount</Text>
         <TextInput
@@ -613,603 +641,619 @@ const handleAndroidBilling = async () => {
           onChangeText={setEmail}
         />
 
-      <Text style={styles.sectionTitle}>Environment</Text>
-      <View style={styles.pickerContainer}>
-        <Text style={styles.label}>Select Environment</Text>
-        <View style={styles.buttonGroup}>
-          <TouchableOpacity
-            style={[
-              styles.environmentButton,
-              { backgroundColor: environment === 'sandbox' ? '#2563EB' : '#ccc' },
-            ]}
-            onPress={() => {
-              console.log('Sandbox tapped, setting environment to sandbox');
-              setEnvironment('sandbox');
-            }}
-            disabled={isEnvironmentLoading || environment === 'sandbox'}
-          >
-            <Text style={styles.buttonText}>Sandbox</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={[
-              styles.environmentButton,
-              { backgroundColor: environment === 'staging' ? '#2563EB' : '#ccc' },
-            ]}
-            onPress={() => {
-              console.log('Staging tapped, setting environment to staging');
-              setEnvironment('staging');
-            }}
-            disabled={isEnvironmentLoading || environment === 'staging'}
-          >
-            <Text style={styles.buttonText}>Staging</Text>
-          </TouchableOpacity>
+<View style={styles.buttonGroup}>
+          <Button title="Pay" onPress={handlePayment}  />
+          {Platform.OS === 'ios' && (
+            <Button title="Payment Ref" onPress={handlePaymentReference} disabled={loading} />
+          )}
         </View>
-      </View>
 
-
-        <Text style={styles.sectionTitle}>Payment Options</Text>
-        <View style={styles.toggleContainer}>
-          <Text style={styles.label}>Recurring Payment</Text>
-          <Switch
-            value={isRecurring}
-            onValueChange={setIsRecurring}
-            trackColor={{ false: '#ccc', true: '#2563EB' }}
-            thumbColor={isRecurring ? '#fff' : '#f4f3f4'}
-          />
-        </View>
-        <View style={styles.toggleContainer}>
-          <Text style={styles.label}>Authenticated ACH</Text>
-          <Switch
-            value={isAuthenticatedACH}
-            onValueChange={setAuthenticatedACH}
-            trackColor={{ false: '#ccc', true: '#2563EB' }}
-            thumbColor={isAuthenticatedACH ? '#fff' : '#f4f3f4'}
-          />
-        </View>
-        <View style={styles.toggleContainer}>
-          <Text style={styles.label}>3DS</Text>
-          <Switch
-            value={isSecureAuthentication}
-            onValueChange={setSecureAuthentication}
-            trackColor={{ false: '#ccc', true: '#2563EB' }}
-            thumbColor={isSecureAuthentication ? '#fff' : '#f4f3f4'}
-          />
-        </View>
-        <View style={styles.toggleContainer}>
-          <Text style={styles.label}>Billing Visible</Text>
-          <Switch
-            value={isBillingVisible}
-            onValueChange={setBillingVisible}
-            trackColor={{ false: '#ccc', true: '#2563EB' }}
-            thumbColor={isBillingVisible ? '#fff' : '#f4f3f4'}
-          />
-        </View>
         <View style={styles.toggleContainer}>
-          <Text style={styles.label}>Additional Info Visible</Text>
+          <Text style={styles.label}>Show Configurations</Text>
           <Switch
-            value={isAdditionalVisible}
-            onValueChange={setAdditionalVisible}
+            value={showConfig}
+            onValueChange={setShowConfig}
             trackColor={{ false: '#ccc', true: '#2563EB' }}
-            thumbColor={isAdditionalVisible ? '#fff' : '#f4f3f4'}
-          />
-        </View>
-        <Text style={styles.label}>Payment Methods (Shared)</Text>
-        <View style={styles.buttonGroup}>
-          <Button
-            title="Card"
-            onPress={() => togglePaymentMethod('card')}
-            color={androidConfig.paymentMethod.includes('card') ? '#2563EB' : '#ccc'}
-          />
-          <Button
-            title="ACH"
-            onPress={() => togglePaymentMethod('ach')}
-            color={androidConfig.paymentMethod.includes('ach') ? '#2563EB' : '#ccc'}
+            thumbColor={showConfig ? '#fff' : '#f4f3f4'}
           />
         </View>
-        {Platform.OS === 'android' && (
-          <View style={styles.toggleContainer}>
-            <Text style={styles.label}>Email Editable (Android)</Text>
-            <Switch
-              value={emailEditable}
-              onValueChange={setEmailEditable}
-              trackColor={{ false: '#ccc', true: '#2563EB' }}
-              thumbColor={emailEditable ? '#fff' : '#f4f3f4'}
-            />
-          </View>
-        )}
-        {Platform.OS === 'ios' && (
-          <View style={styles.toggleContainer}>
-            <Text style={styles.label}>Allow Email (iOS)</Text>
-            <Switch
-              value={isEmail}
-              onValueChange={setIsEmail}
-              trackColor={{ false: '#ccc', true: '#2563EB' }}
-              thumbColor={isEmail ? '#fff' : '#f4f3f4'}
-            />
-          </View>
-        )}
-
-        <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)}
-        />
-        <Text style={styles.label}>Billing Required: Address</Text>
-        <Switch
-          value={billingInfo.billingRequired.address}
-          onValueChange={value => updateBillingInfo('billingRequired', 'address', value)}
-          trackColor={{ false: '#ccc', true: '#2563EB' }}
-          thumbColor={billingInfo.billingRequired.address ? '#fff' : '#f4f3f4'}
-        />
-        <Text style={styles.label}>Billing Required: Country</Text>
-        <Switch
-          value={billingInfo.billingRequired.country}
-          onValueChange={value => updateBillingInfo('billingRequired', 'country', value)}
-          trackColor={{ false: '#ccc', true: '#2563EB' }}
-          thumbColor={billingInfo.billingRequired.country ? '#fff' : '#f4f3f4'}
-        />
-        <Text style={styles.label}>Billing Required: State</Text>
-        <Switch
-          value={billingInfo.billingRequired.state}
-          onValueChange={value => updateBillingInfo('billingRequired', 'state', value)}
-          trackColor={{ false: '#ccc', true: '#2563EB' }}
-          thumbColor={billingInfo.billingRequired.state ? '#fff' : '#f4f3f4'}
-        />
-        <Text style={styles.label}>Billing Required: City</Text>
-        <Switch
-          value={billingInfo.billingRequired.city}
-          onValueChange={value => updateBillingInfo('billingRequired', 'city', value)}
-          trackColor={{ false: '#ccc', true: '#2563EB' }}
-          thumbColor={billingInfo.billingRequired.city ? '#fff' : '#f4f3f4'}
-        />
-        <Text style={styles.label}>Billing Required: Postal Code</Text>
-        <Switch
-          value={billingInfo.billingRequired.postal_code}
-          onValueChange={value => updateBillingInfo('billingRequired', 'postal_code', value)}
-          trackColor={{ false: '#ccc', true: '#2563EB' }}
-          thumbColor={billingInfo.billingRequired.postal_code ? '#fff' : '#f4f3f4'}
-        />
-        <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'}
-        />
-        <Text style={styles.label}>Additional Required: Phone Number</Text>
-        <Switch
-          value={billingInfo.additionalRequired.phone_number}
-          onValueChange={value => updateBillingInfo('additionalRequired', 'phone_number', value)}
-          trackColor={{ false: '#ccc', true: '#2563EB' }}
-          thumbColor={billingInfo.additionalRequired.phone_number ? '#fff' : '#f4f3f4'}
-        />
-        <Text style={styles.label}>Additional Required: Description</Text>
-        <Switch
-          value={billingInfo.additionalRequired.description}
-          onValueChange={value => updateBillingInfo('additionalRequired', 'description', value)}
-          trackColor={{ false: '#ccc', true: '#2563EB' }}
-          thumbColor={billingInfo.additionalRequired.description ? '#fff' : '#f4f3f4'}
-        />
 
-        {Platform.OS === 'android' && (
+        {showConfig && (
           <>
-            <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>
-            <TextInput
-              style={styles.input}
-              value={androidConfig.name}
-              onChangeText={value => updateAndroidConfig('name', value)}
-            />
-            <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>
+            <Text style={styles.sectionTitle}>Environment</Text>
+            <View style={styles.pickerContainer}>
+              <Text style={styles.label}>Select Environment</Text>
+              <View style={styles.buttonGroup}>
+                <TouchableOpacity
+                  style={[
+                    styles.environmentButton,
+                    { backgroundColor: environment === 'sandbox' ? '#2563EB' : '#ccc' },
+                  ]}
+                  onPress={() => {
+                    console.log('Sandbox tapped, setting environment to sandbox');
+                    setEnvironment('sandbox');
+                  }}
+                  disabled={isEnvironmentLoading || environment === 'sandbox'}
+                >
+                  <Text style={styles.buttonText}>Sandbox</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[
+                    styles.environmentButton,
+                    { backgroundColor: environment === 'staging' ? '#2563EB' : '#ccc' },
+                  ]}
+                  onPress={() => {
+                    console.log('Staging tapped, setting environment to staging');
+                    setEnvironment('staging');
+                  }}
+                  disabled={isEnvironmentLoading || environment === 'staging'}
+                >
+                  <Text style={styles.buttonText}>Staging</Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+
+            <Text style={styles.sectionTitle}>Payment Options</Text>
+            <View style={styles.toggleContainer}>
+              <Text style={styles.label}>Recurring Payment</Text>
+              <Switch
+                value={isRecurring}
+                onValueChange={setIsRecurring}
+                trackColor={{ false: '#ccc', true: '#2563EB' }}
+                thumbColor={isRecurring ? '#fff' : '#f4f3f4'}
+              />
+            </View>
+            <View style={styles.toggleContainer}>
+              <Text style={styles.label}>Authenticated ACH</Text>
+              <Switch
+                value={isAuthenticatedACH}
+                onValueChange={setAuthenticatedACH}
+                trackColor={{ false: '#ccc', true: '#2563EB' }}
+                thumbColor={isAuthenticatedACH ? '#fff' : '#f4f3f4'}
+              />
+            </View>
+            <View style={styles.toggleContainer}>
+              <Text style={styles.label}>3DS</Text>
+              <Switch
+                value={isSecureAuthentication}
+                onValueChange={setSecureAuthentication}
+                trackColor={{ false: '#ccc', true: '#2563EB' }}
+                thumbColor={isSecureAuthentication ? '#fff' : '#f4f3f4'}
+              />
+            </View>
+            <View style={styles.toggleContainer}>
+              <Text style={styles.label}>Billing Visible</Text>
+              <Switch
+                value={isBillingVisible}
+                onValueChange={setBillingVisible}
+                trackColor={{ false: '#ccc', true: '#2563EB' }}
+                thumbColor={isBillingVisible ? '#fff' : '#f4f3f4'}
+              />
+            </View>
+            <View style={styles.toggleContainer}>
+              <Text style={styles.label}>Additional Info Visible</Text>
+              <Switch
+                value={isAdditionalVisible}
+                onValueChange={setAdditionalVisible}
+                trackColor={{ false: '#ccc', true: '#2563EB' }}
+                thumbColor={isAdditionalVisible ? '#fff' : '#f4f3f4'}
+              />
+            </View>
+            <Text style={styles.label}>Payment Methods (Shared)</Text>
+            <View style={styles.buttonGroup}>
+              <Button
+                title="Card"
+                onPress={() => togglePaymentMethod('card')}
+                color={androidConfig.paymentMethod.includes('card') ? '#2563EB' : '#ccc'}
+              />
+              <Button
+                title="ACH"
+                onPress={() => togglePaymentMethod('ach')}
+                color={androidConfig.paymentMethod.includes('ach') ? '#2563EB' : '#ccc'}
+              />
+            </View>
+            {Platform.OS === 'android' && (
+              <View style={styles.toggleContainer}>
+                <Text style={styles.label}>Email Editable (Android)</Text>
                 <Switch
-                  value={field.required}
-                  onValueChange={value => updateAndroidConfigFields('billing', index, 'required', value)}
+                  value={emailEditable}
+                  onValueChange={setEmailEditable}
                   trackColor={{ false: '#ccc', true: '#2563EB' }}
-                  thumbColor={field.required ? '#fff' : '#f4f3f4'}
+                  thumbColor={emailEditable ? '#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>
+            )}
+            {Platform.OS === 'ios' && (
+              <View style={styles.toggleContainer}>
+                <Text style={styles.label}>Allow Email (iOS)</Text>
                 <Switch
-                  value={field.required}
-                  onValueChange={value => updateAndroidConfigFields('additional', index, 'required', value)}
+                  value={isEmail}
+                  onValueChange={setIsEmail}
                   trackColor={{ false: '#ccc', true: '#2563EB' }}
-                  thumbColor={field.required ? '#fff' : '#f4f3f4'}
+                  thumbColor={isEmail ? '#fff' : '#f4f3f4'}
                 />
               </View>
-            ))}
-            <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)}
-            />
-            <Text style={styles.label}>Container Background Color</Text>
+            )}
+
+            <Text style={styles.sectionTitle}>Billing Info</Text>
+            <Text style={styles.label}>Billing Address</Text>
             <TextInput
               style={styles.input}
-              value={androidConfig.appearanceSettings.containerBackgroundColor}
-              onChangeText={value => updateAndroidConfigAppearanceSettings('containerBackgroundColor', value)}
+              value={billingInfo.billing.address}
+              onChangeText={value => updateBillingInfo('billing', 'address', value)}
             />
-            <Text style={styles.label}>Primary Font Color</Text>
+            <Text style={styles.label}>Billing Country</Text>
             <TextInput
               style={styles.input}
-              value={androidConfig.appearanceSettings.primaryFontColor}
-              onChangeText={value => updateAndroidConfigAppearanceSettings('primaryFontColor', value)}
+              value={billingInfo.billing.country}
+              onChangeText={value => updateBillingInfo('billing', 'country', value)}
             />
-            <Text style={styles.label}>Secondary Font Color</Text>
+            <Text style={styles.label}>Billing State</Text>
             <TextInput
               style={styles.input}
-              value={androidConfig.appearanceSettings.secondaryFontColor}
-              onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryFontColor', value)}
+              value={billingInfo.billing.state}
+              onChangeText={value => updateBillingInfo('billing', 'state', value)}
             />
-            <Text style={styles.label}>Primary Button Background Color</Text>
+            <Text style={styles.label}>Billing City</Text>
             <TextInput
               style={styles.input}
-              value={androidConfig.appearanceSettings.primaryButtonBackgroundColor}
-              onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonBackgroundColor', value)}
+              value={billingInfo.billing.city}
+              onChangeText={value => updateBillingInfo('billing', 'city', value)}
             />
-            <Text style={styles.label}>Primary Button Hover Color</Text>
+            <Text style={styles.label}>Billing Postal Code</Text>
             <TextInput
               style={styles.input}
-              value={androidConfig.appearanceSettings.primaryButtonHoverColor}
-              onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonHoverColor', value)}
+              value={billingInfo.billing.postal_code}
+              onChangeText={value => updateBillingInfo('billing', 'postal_code', value)}
             />
-            <Text style={styles.label}>Primary Button Font Color</Text>
-            <TextInput
-              style={styles.input}
-              value={androidConfig.appearanceSettings.primaryButtonFontColor}
-              onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonFontColor', value)}
+            <Text style={styles.label}>Billing Required: Address</Text>
+            <Switch
+              value={billingInfo.billingRequired.address}
+              onValueChange={value => updateBillingInfo('billingRequired', 'address', value)}
+              trackColor={{ false: '#ccc', true: '#2563EB' }}
+              thumbColor={billingInfo.billingRequired.address ? '#fff' : '#f4f3f4'}
             />
-            <Text style={styles.label}>Secondary Button Background Color</Text>
-            <TextInput
-              style={styles.input}
-              value={androidConfig.appearanceSettings.secondaryButtonBackgroundColor}
-              onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonBackgroundColor', value)}
+            <Text style={styles.label}>Billing Required: Country</Text>
+            <Switch
+              value={billingInfo.billingRequired.country}
+              onValueChange={value => updateBillingInfo('billingRequired', 'country', value)}
+              trackColor={{ false: '#ccc', true: '#2563EB' }}
+              thumbColor={billingInfo.billingRequired.country ? '#fff' : '#f4f3f4'}
             />
-            <Text style={styles.label}>Secondary Button Hover Color</Text>
-            <TextInput
-              style={styles.input}
-              value={androidConfig.appearanceSettings.secondaryButtonHoverColor}
-              onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonHoverColor', value)}
+            <Text style={styles.label}>Billing Required: State</Text>
+            <Switch
+              value={billingInfo.billingRequired.state}
+              onChangeText={value => updateBillingInfo('billingRequired', 'state', value)}
+              trackColor={{ false: '#ccc', true: '#2563EB' }}
+              thumbColor={billingInfo.billingRequired.state ? '#fff' : '#f4f3f4'}
             />
-            <Text style={styles.label}>Secondary Button Font Color</Text>
-            <TextInput
-              style={styles.input}
-              value={androidConfig.appearanceSettings.secondaryButtonFontColor}
-              onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonFontColor', value)}
+            <Text style={styles.label}>Billing Required: City</Text>
+            <Switch
+              value={billingInfo.billingRequired.city}
+              onValueChange={value => updateBillingInfo('billingRequired', 'city', value)}
+              trackColor={{ false: '#ccc', true: '#2563EB' }}
+              thumbColor={billingInfo.billingRequired.city ? '#fff' : '#f4f3f4'}
             />
-            <Text style={styles.label}>Border Radius</Text>
-            <TextInput
-              style={styles.input}
-              value={androidConfig.appearanceSettings.borderRadius}
-              onChangeText={value => updateAndroidConfigAppearanceSettings('borderRadius', value)}
+            <Text style={styles.label}>Billing Required: Postal Code</Text>
+            <Switch
+              value={billingInfo.billingRequired.postal_code}
+              onValueChange={value => updateBillingInfo('billingRequired', 'postal_code', value)}
+              trackColor={{ false: '#ccc', true: '#2563EB' }}
+              thumbColor={billingInfo.billingRequired.postal_code ? '#fff' : '#f4f3f4'}
             />
-            <Text style={styles.label}>Font Size</Text>
+            <Text style={styles.label}>Additional: Name</Text>
             <TextInput
               style={styles.input}
-              value={androidConfig.appearanceSettings.fontSize}
-              onChangeText={value => updateAndroidConfigAppearanceSettings('fontSize', value)}
+              value={billingInfo.additional.name}
+              onChangeText={value => updateBillingInfo('additional', 'name', value)}
             />
-            <Text style={styles.label}>Font Weight</Text>
+            <Text style={styles.label}>Additional: Email Address</Text>
             <TextInput
               style={styles.input}
-              value={String(androidConfig.appearanceSettings.fontWeight)}
-              onChangeText={value => updateAndroidConfigAppearanceSettings('fontWeight', parseInt(value) || '500')}
+              value={billingInfo.additional.email_address}
+              onChangeText={value => updateBillingInfo('additional', 'email_address', value)}
             />
-            <Text style={styles.label}>Font Family</Text>
+            <Text style={styles.label}>Additional: Phone Number</Text>
             <TextInput
               style={styles.input}
-              value={androidConfig.appearanceSettings.fontFamily}
-              onChangeText={value => updateAndroidConfigAppearanceSettings('fontFamily', value)}
+              value={billingInfo.additional.phone_number}
+              onChangeText={value => updateBillingInfo('additional', 'phone_number', value)}
             />
-          </>
-        )}
-
-        {Platform.OS === 'ios' && (
-          <>
-            <Text style={styles.sectionTitle}>Theme Configuration (iOS)</Text>
-            <Text style={styles.label}>Body Background Color</Text>
+            <Text style={styles.label}>Additional: Description</Text>
             <TextInput
               style={styles.input}
-              value={themeConfiguration.bodyBackgroundColor}
-              onChangeText={value => updateThemeConfiguration('bodyBackgroundColor', value)}
+              value={billingInfo.additional.description}
+              onChangeText={value => updateBillingInfo('additional', 'description', value)}
             />
-            <Text style={styles.label}>Container Background Color</Text>
-            <TextInput
-              style={styles.input}
-              value={themeConfiguration.containerBackgroundColor}
-              onChangeText={value => updateThemeConfiguration('containerBackgroundColor', 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}>Primary Font Color</Text>
-            <TextInput
-              style={styles.input}
-              value={themeConfiguration.primaryFontColor}
-              onChangeText={value => updateThemeConfiguration('primaryFontColor', value)}
+            <Text style={styles.label}>Additional Required: Email Address</Text>
+            <Switch
+              value={billingInfo.additionalRequired.email_address}
+              onValueChange={value => updateBillingInfo('additionalRequired', 'email_address', value)}
+              trackColor={{ false: '#ccc', true: '#2563EB' }}
+              thumbColor={billingInfo.additionalRequired.email_address ? '#fff' : '#f4f3f4'}
             />
-            <Text style={styles.label}>Secondary Font Color</Text>
-            <TextInput
-              style={styles.input}
-              value={themeConfiguration.secondaryFontColor}
-              onChangeText={value => updateThemeConfiguration('secondaryFontColor', value)}
+            <Text style={styles.label}>Additional Required: Phone Number</Text>
+            <Switch
+              value={billingInfo.additionalRequired.phone_number}
+              onValueChange={value => updateBillingInfo('additionalRequired', 'phone_number', value)}
+              trackColor={{ false: '#ccc', true: '#2563EB' }}
+              thumbColor={billingInfo.additionalRequired.phone_number ? '#fff' : '#f4f3f4'}
             />
-            <Text style={styles.label}>Primary Button Background Color</Text>
-            <TextInput
-              style={styles.input}
-              value={themeConfiguration.primaryButtonBackgroundColor}
-              onChangeText={value => updateThemeConfiguration('primaryButtonBackgroundColor', value)}
+            <Text style={styles.label}>Additional Required: Description</Text>
+            <Switch
+              value={billingInfo.additionalRequired.description}
+              onValueChange={value => updateBillingInfo('additionalRequired', 'description', value)}
+              trackColor={{ false: '#ccc', true: '#2563EB' }}
+              thumbColor={billingInfo.additionalRequired.description ? '#fff' : '#f4f3f4'}
             />
-            <Text style={styles.label}>Primary Button Hover Color</Text>
+
+            {/* Android Configuration */}
+            {Platform.OS === 'android' && (
+              <>
+                <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>
+                <TextInput
+                  style={styles.input}
+                  value={androidConfig.name}
+                  onChangeText={value => updateAndroidConfig('name', value)}
+                />
+                <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>
+                ))}
+                <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)}
+                />
+                <Text style={styles.label}>Container Background Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={androidConfig.appearanceSettings.containerBackgroundColor}
+                  onChangeText={value => updateAndroidConfigAppearanceSettings('containerBackgroundColor', value)}
+                />
+                <Text style={styles.label}>Primary Font Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={androidConfig.appearanceSettings.primaryFontColor}
+                  onChangeText={value => updateAndroidConfigAppearanceSettings('primaryFontColor', value)}
+                />
+                <Text style={styles.label}>Secondary Font Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={androidConfig.appearanceSettings.secondaryFontColor}
+                  onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryFontColor', value)}
+                />
+                <Text style={styles.label}>Primary Button Background Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={androidConfig.appearanceSettings.primaryButtonBackgroundColor}
+                  onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonBackgroundColor', value)}
+                />
+                <Text style={styles.label}>Primary Button Hover Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={androidConfig.appearanceSettings.primaryButtonHoverColor}
+                  onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonHoverColor', value)}
+                />
+                <Text style={styles.label}>Primary Button Font Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={androidConfig.appearanceSettings.primaryButtonFontColor}
+                  onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonFontColor', value)}
+                />
+                <Text style={styles.label}>Secondary Button Background Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={androidConfig.appearanceSettings.secondaryButtonBackgroundColor}
+                  onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonBackgroundColor', value)}
+                />
+                <Text style={styles.label}>Secondary Button Hover Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={androidConfig.appearanceSettings.secondaryButtonHoverColor}
+                  onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonHoverColor', value)}
+                />
+                <Text style={styles.label}>Secondary Button Font Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={androidConfig.appearanceSettings.secondaryButtonFontColor}
+                  onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonFontColor', value)}
+                />
+                <Text style={styles.label}>Border Radius</Text>
+                <TextInput
+                  style={styles.input}
+                  value={androidConfig.appearanceSettings.borderRadius}
+                  onChangeText={value => updateAndroidConfigAppearanceSettings('borderRadius', value)}
+                />
+                <Text style={styles.label}>Font Size</Text>
+                <TextInput
+                  style={styles.input}
+                  value={androidConfig.appearanceSettings.fontSize}
+                  onChangeText={value => updateAndroidConfigAppearanceSettings('fontSize', value)}
+                />
+                <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)}
+                />
+              </>
+            )}
+
+            {/* iOS Theme Configuration */}
+            {Platform.OS === 'ios' && (
+              <>
+                <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)}
+                />
+                <Text style={styles.label}>Container Background Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={themeConfiguration.containerBackgroundColor}
+                  onChangeText={value => updateThemeConfiguration('containerBackgroundColor', value)}
+                />
+                <Text style={styles.label}>Primary Font Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={themeConfiguration.primaryFontColor}
+                  onChangeText={value => updateThemeConfiguration('primaryFontColor', value)}
+                />
+                <Text style={styles.label}>Secondary Font Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={themeConfiguration.secondaryFontColor}
+                  onChangeText={value => updateThemeConfiguration('secondaryFontColor', value)}
+                />
+                <Text style={styles.label}>Primary Button Background Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={themeConfiguration.primaryButtonBackgroundColor}
+                  onChangeText={value => updateThemeConfiguration('primaryButtonBackgroundColor', value)}
+                />
+                <Text style={styles.label}>Primary Button Hover Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={themeConfiguration.primaryButtonHoverColor}
+                  onChangeText={value => updateThemeConfiguration('primaryButtonHoverColor', value)}
+                />
+                <Text style={styles.label}>Primary Button Font Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={themeConfiguration.primaryButtonFontColor}
+                  onChangeText={value => updateThemeConfiguration('primaryButtonFontColor', value)}
+                />
+                <Text style={styles.label}>Secondary Button Background Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={themeConfiguration.secondaryButtonBackgroundColor}
+                  onChangeText={value => updateThemeConfiguration('secondaryButtonBackgroundColor', value)}
+                />
+                <Text style={styles.label}>Secondary Button Hover Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={themeConfiguration.secondaryButtonHoverColor}
+                  onChangeText={value => updateThemeConfiguration('secondaryButtonHoverColor', value)}
+                />
+                <Text style={styles.label}>Secondary Button Font Color</Text>
+                <TextInput
+                  style={styles.input}
+                  value={themeConfiguration.secondaryButtonFontColor}
+                  onChangeText={value => updateThemeConfiguration('secondaryButtonFontColor', value)}
+                />
+                <Text style={styles.label}>Border Radius</Text>
+                <TextInput
+                  style={styles.input}
+                  value={themeConfiguration.borderRadius}
+                  onChangeText={value => updateThemeConfiguration('borderRadius', value)}
+                />
+                <Text style={styles.label}>Font Size</Text>
+                <TextInput
+                  style={styles.input}
+                  value={themeConfiguration.fontSize}
+                  onChangeText={value => updateThemeConfiguration('fontSize', value)}
+                />
+                <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)}
+                />
+              </>
+            )}
+
+            {/* GrailPay Parameters */}
+            <Text style={styles.sectionTitle}>GrailPay Parameters</Text>
+            <Text style={styles.label}>Role</Text>
             <TextInput
               style={styles.input}
-              value={themeConfiguration.primaryButtonHoverColor}
-              onChangeText={value => updateThemeConfiguration('primaryButtonHoverColor', value)}
+              value={grailPayParams.role}
+              onChangeText={value => updateGrailPayParams('role', value)}
             />
-            <Text style={styles.label}>Primary Button Font Color</Text>
+            <Text style={styles.label}>Timeout</Text>
             <TextInput
               style={styles.input}
-              value={themeConfiguration.primaryButtonFontColor}
-              onChangeText={value => updateThemeConfiguration('primaryButtonFontColor', value)}
+              value={String(grailPayParams.timeout)}
+              onChangeText={value => updateGrailPayParams('timeout', parseInt(value) || 10)}
             />
-            <Text style={styles.label}>Secondary Button Background Color</Text>
-            <TextInput
-              style={styles.input}
-              value={themeConfiguration.secondaryButtonBackgroundColor}
-              onChangeText={value => updateThemeConfiguration('secondaryButtonBackgroundColor', value)}
+            <Text style={styles.label}>Is Sandbox</Text>
+            <Switch
+              value={grailPayParams.isSandbox}
+              onValueChange={value => updateGrailPayParams('isSandbox', value)}
+              trackColor={{ false: '#ccc', true: '#2563EB' }}
+              thumbColor={grailPayParams.isSandbox ? '#fff' : '#f4f3f4'}
             />
-            <Text style={styles.label}>Secondary Button Hover Color</Text>
+            <Text style={styles.label}>Branding Name</Text>
             <TextInput
               style={styles.input}
-              value={themeConfiguration.secondaryButtonHoverColor}
-              onChangeText={value => updateThemeConfiguration('secondaryButtonHoverColor', value)}
+              value={grailPayParams.brandingName}
+              onChangeText={value => updateGrailPayParams('brandingName', value)}
             />
-            <Text style={styles.label}>Secondary Button Font Color</Text>
+            <Text style={styles.label}>Finder Subtitle</Text>
             <TextInput
               style={styles.input}
-              value={themeConfiguration.secondaryButtonFontColor}
-              onChangeText={value => updateThemeConfiguration('secondaryButtonFontColor', value)}
+              value={grailPayParams.finderSubtitle}
+              onChangeText={value => updateGrailPayParams('finderSubtitle', value)}
             />
-            <Text style={styles.label}>Border Radius</Text>
+            <Text style={styles.label}>Search Placeholder</Text>
             <TextInput
               style={styles.input}
-              value={themeConfiguration.borderRadius}
-              onChangeText={value => updateThemeConfiguration('borderRadius', value)}
+              value={grailPayParams.searchPlaceholder}
+              onChangeText={value => updateGrailPayParams('searchPlaceholder', value)}
             />
-            <Text style={styles.label}>Font Size</Text>
+
+            {/* Recurring Data */}
+            <Text style={styles.sectionTitle}>Recurring Data</Text>
+            <Text style={styles.label}>Allow Cycles</Text>
             <TextInput
               style={styles.input}
-              value={themeConfiguration.fontSize}
-              onChangeText={value => updateThemeConfiguration('fontSize', value)}
+              value={String(recurringData.allowCycles)}
+              onChangeText={value => updateRecurringData('allowCycles', parseInt(value) || 2)}
             />
-            <Text style={styles.label}>Font Weight</Text>
+            <Text style={styles.label}>Intervals</Text>
+            <View style={styles.buttonGroup}>
+              <Button
+                title="Weekly"
+                onPress={() => toggleInterval('weekly')}
+                color={recurringData.intervals.includes('weekly') ? '#2563EB' : '#ccc'}
+              />
+              <Button
+                title="Monthly"
+                onPress={() => toggleInterval('monthly')}
+                color={recurringData.intervals.includes('monthly') ? '#2563EB' : '#ccc'}
+              />
+            </View>
+            <Text style={styles.label}>Recurring Start Type</Text>
             <TextInput
               style={styles.input}
-              value={String(themeConfiguration.fontWeight)}
-              onChangeText={value => updateThemeConfiguration('fontWeight', parseInt(value) || 500)}
+              value={recurringData.recurringStartType}
+              onChangeText={value => updateRecurringData('recurringStartType', value)}
             />
-            <Text style={styles.label}>Font Family</Text>
+            <Text style={styles.label}>Recurring Start Date</Text>
             <TextInput
               style={styles.input}
-              value={themeConfiguration.fontFamily}
-              onChangeText={value => updateThemeConfiguration('fontFamily', value)}
+              value={recurringData.recurringStartDate}
+              onChangeText={value => updateRecurringData('recurringStartDate', value)}
             />
           </>
         )}
 
-        <Text style={styles.sectionTitle}>GrailPay Parameters</Text>
-        <Text style={styles.label}>Role</Text>
-        <TextInput
-          style={styles.input}
-          value={grailPayParams.role}
-          onChangeText={value => updateGrailPayParams('role', value)}
-        />
-        <Text style={styles.label}>Timeout</Text>
-        <TextInput
-          style={styles.input}
-          value={String(grailPayParams.timeout)}
-          onChangeText={value => updateGrailPayParams('timeout', parseInt(value) || 10)}
-        />
-        <Text style={styles.label}>Is Sandbox</Text>
-        <Switch
-          value={grailPayParams.isSandbox}
-          onValueChange={value => updateGrailPayParams('isSandbox', value)}
-          trackColor={{ false: '#ccc', true: '#2563EB' }}
-          thumbColor={grailPayParams.isSandbox ? '#fff' : '#f4f3f4'}
-        />
-        <Text style={styles.label}>Branding Name</Text>
-        <TextInput
-          style={styles.input}
-          value={grailPayParams.brandingName}
-          onChangeText={value => updateGrailPayParams('brandingName', value)}
-        />
-        <Text style={styles.label}>Finder Subtitle</Text>
-        <TextInput
-          style={styles.input}
-          value={grailPayParams.finderSubtitle}
-          onChangeText={value => updateGrailPayParams('finderSubtitle', value)}
-        />
-        <Text style={styles.label}>Search Placeholder</Text>
-        <TextInput
-          style={styles.input}
-          value={grailPayParams.searchPlaceholder}
-          onChangeText={value => updateGrailPayParams('searchPlaceholder', value)}
-        />
-
-        <Text style={styles.sectionTitle}>Recurring Data</Text>
-        <Text style={styles.label}>Allow Cycles</Text>
-        <TextInput
-          style={styles.input}
-          value={String(recurringData.allowCycles)}
-          onChangeText={value => updateRecurringData('allowCycles', parseInt(value) || 2)}
-        />
-        <Text style={styles.label}>Intervals</Text>
-        <View style={styles.buttonGroup}>
-          <Button
-            title="Weekly"
-            onPress={() => toggleInterval('weekly')}
-            color={recurringData.intervals.includes('weekly') ? '#2563EB' : '#ccc'}
-          />
-          <Button
-            title="Monthly"
-            onPress={() => toggleInterval('monthly')}
-            color={recurringData.intervals.includes('monthly') ? '#2563EB' : '#ccc'}
-          />
-        </View>
-        <Text style={styles.label}>Recurring Start Type</Text>
-        <TextInput
-          style={styles.input}
-          value={recurringData.recurringStartType}
-          onChangeText={value => updateRecurringData('recurringStartType', value)}
-        />
-        <Text style={styles.label}>Recurring Start Date</Text>
-        <TextInput
-          style={styles.input}
-          value={recurringData.recurringStartDate}
-          onChangeText={value => updateRecurringData('recurringStartDate', value)}
-        />
-
-        <View style={styles.buttonGroup}>
-          <Button title="Pay" onPress={handlePayment}  />
-          {Platform.OS === 'ios' ? (
-            <Button title="Payment Ref" onPress={handlePaymentReference} disabled={loading} />
-          ) : (
-           <></>
-          )
-          }
-        </View>
-
-        <Text selectable style={styles.result}>{result}</Text>
+        <Text style={styles.sectionTitle}>SDK Response</Text>
+        <Text selectable style={styles.result}>{result || 'No response yet'}</Text>
       </ScrollView>
     </View>
   );
+
 };
 
 export default App;