@jimrising/easymerchantsdk-react-native 1.8.5 → 1.8.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +542 -516
  2. package/android/build.gradle +1 -1
  3. package/android/src/main/java/com/reactlibrary/RNEasymerchantsdkModule.java +0 -3
  4. package/ios/Models/Request.swift +5 -146
  5. package/ios/Pods/ViewControllers/AdditionalInfoVC.swift +10 -0
  6. package/ios/Pods/ViewControllers/BillingInfoVC/BillingInfoVC.swift +10 -0
  7. package/ios/Pods/ViewControllers/OTPVerificationVC.swift +8 -0
  8. package/ios/Pods/ViewControllers/PaymentDoneVC.swift +5 -1
  9. package/ios/Pods/ViewControllers/PaymentInformation/PaymentInfoVC.swift +18 -1
  10. package/ios/Pods/ViewControllers/ThreeDSecurePaymentDoneVC.swift +11 -2
  11. package/ios/easymerchantsdk.podspec +1 -1
  12. package/package.json +1 -1
package/README.md CHANGED
@@ -7,7 +7,7 @@ To add the path of sdk in your project. Open your `package.json` file and inside
7
7
 
8
8
  ```json
9
9
  "dependencies": {
10
- "@jimrising/easymerchantsdk-react-native": "^1.8.5"
10
+ "@jimrising/easymerchantsdk-react-native": "^1.8.7"
11
11
  },
12
12
  ```
13
13
 
@@ -273,10 +273,18 @@ const App = () => {
273
273
  const [apiSecret, setApiSecret] = useState('apiSecret');
274
274
  const [isEnvironmentLoading, setIsEnvironmentLoading] = useState(false);
275
275
 
276
+ useEffect(() => {
277
+ if (Platform.OS !== 'android') {
278
+ console.log('Event listeners skipped: not Android');
279
+ return;
280
+ }
276
281
 
277
- const easyMerchantEvents = new NativeEventEmitter(RNEasymerchantsdk);
282
+ if (!RNEasymerchantsdk) {
283
+ console.warn('RNEasymerchantsdk native module is not available.');
284
+ return;
285
+ }
278
286
 
279
- useEffect(() => {
287
+ const easyMerchantEvents = new NativeEventEmitter(RNEasymerchantsdk);
280
288
  const successSub = easyMerchantEvents.addListener('PaymentSuccess', (data) => {
281
289
  console.log('Payment success event:', data);
282
290
  const parsed = JSON.parse(data.response);
@@ -587,6 +595,8 @@ const handleAndroidBilling = async () => {
587
595
  <ScrollView contentContainerStyle={styles.scrollContent}>
588
596
  <Text style={styles.title}>EasyMerchant SDK</Text>
589
597
 
598
+
599
+
590
600
  <Text style={styles.sectionTitle}>Basic Info</Text>
591
601
  <Text style={styles.label}>Amount</Text>
592
602
  <TextInput
@@ -605,603 +615,619 @@ const handleAndroidBilling = async () => {
605
615
  onChangeText={setEmail}
606
616
  />
607
617
 
608
- <Text style={styles.sectionTitle}>Environment</Text>
609
- <View style={styles.pickerContainer}>
610
- <Text style={styles.label}>Select Environment</Text>
611
- <View style={styles.buttonGroup}>
612
- <TouchableOpacity
613
- style={[
614
- styles.environmentButton,
615
- { backgroundColor: environment === 'sandbox' ? '#2563EB' : '#ccc' },
616
- ]}
617
- onPress={() => {
618
- console.log('Sandbox tapped, setting environment to sandbox');
619
- setEnvironment('sandbox');
620
- }}
621
- disabled={isEnvironmentLoading || environment === 'sandbox'}
622
- >
623
- <Text style={styles.buttonText}>Sandbox</Text>
624
- </TouchableOpacity>
625
- <TouchableOpacity
626
- style={[
627
- styles.environmentButton,
628
- { backgroundColor: environment === 'staging' ? '#2563EB' : '#ccc' },
629
- ]}
630
- onPress={() => {
631
- console.log('Staging tapped, setting environment to staging');
632
- setEnvironment('staging');
633
- }}
634
- disabled={isEnvironmentLoading || environment === 'staging'}
635
- >
636
- <Text style={styles.buttonText}>Staging</Text>
637
- </TouchableOpacity>
618
+ <View style={styles.buttonGroup}>
619
+ <Button title="Pay" onPress={handlePayment} disabled={loading} />
620
+ {Platform.OS === 'ios' && (
621
+ <Button title="Payment Ref" onPress={handlePaymentReference} disabled={loading} />
622
+ )}
638
623
  </View>
639
- </View>
640
-
641
624
 
642
- <Text style={styles.sectionTitle}>Payment Options</Text>
643
- <View style={styles.toggleContainer}>
644
- <Text style={styles.label}>Recurring Payment</Text>
645
- <Switch
646
- value={isRecurring}
647
- onValueChange={setIsRecurring}
648
- trackColor={{ false: '#ccc', true: '#2563EB' }}
649
- thumbColor={isRecurring ? '#fff' : '#f4f3f4'}
650
- />
651
- </View>
652
- <View style={styles.toggleContainer}>
653
- <Text style={styles.label}>Authenticated ACH</Text>
654
- <Switch
655
- value={isAuthenticatedACH}
656
- onValueChange={setAuthenticatedACH}
657
- trackColor={{ false: '#ccc', true: '#2563EB' }}
658
- thumbColor={isAuthenticatedACH ? '#fff' : '#f4f3f4'}
659
- />
660
- </View>
661
625
  <View style={styles.toggleContainer}>
662
- <Text style={styles.label}>3DS</Text>
626
+ <Text style={styles.label}>Show Configurations</Text>
663
627
  <Switch
664
- value={isSecureAuthentication}
665
- onValueChange={setSecureAuthentication}
628
+ value={showConfig}
629
+ onValueChange={setShowConfig}
666
630
  trackColor={{ false: '#ccc', true: '#2563EB' }}
667
- thumbColor={isSecureAuthentication ? '#fff' : '#f4f3f4'}
631
+ thumbColor={showConfig ? '#fff' : '#f4f3f4'}
668
632
  />
669
633
  </View>
670
- <View style={styles.toggleContainer}>
671
- <Text style={styles.label}>Billing Visible</Text>
672
- <Switch
673
- value={isBillingVisible}
674
- onValueChange={setBillingVisible}
675
- trackColor={{ false: '#ccc', true: '#2563EB' }}
676
- thumbColor={isBillingVisible ? '#fff' : '#f4f3f4'}
677
- />
678
- </View>
679
- <View style={styles.toggleContainer}>
680
- <Text style={styles.label}>Additional Info Visible</Text>
681
- <Switch
682
- value={isAdditionalVisible}
683
- onValueChange={setAdditionalVisible}
684
- trackColor={{ false: '#ccc', true: '#2563EB' }}
685
- thumbColor={isAdditionalVisible ? '#fff' : '#f4f3f4'}
686
- />
687
- </View>
688
- <Text style={styles.label}>Payment Methods (Shared)</Text>
689
- <View style={styles.buttonGroup}>
690
- <Button
691
- title="Card"
692
- onPress={() => togglePaymentMethod('card')}
693
- color={androidConfig.paymentMethod.includes('card') ? '#2563EB' : '#ccc'}
694
- />
695
- <Button
696
- title="ACH"
697
- onPress={() => togglePaymentMethod('ach')}
698
- color={androidConfig.paymentMethod.includes('ach') ? '#2563EB' : '#ccc'}
699
- />
700
- </View>
701
- {Platform.OS === 'android' && (
702
- <View style={styles.toggleContainer}>
703
- <Text style={styles.label}>Email Editable (Android)</Text>
704
- <Switch
705
- value={emailEditable}
706
- onValueChange={setEmailEditable}
707
- trackColor={{ false: '#ccc', true: '#2563EB' }}
708
- thumbColor={emailEditable ? '#fff' : '#f4f3f4'}
709
- />
710
- </View>
711
- )}
712
- {Platform.OS === 'ios' && (
713
- <View style={styles.toggleContainer}>
714
- <Text style={styles.label}>Allow Email (iOS)</Text>
715
- <Switch
716
- value={isEmail}
717
- onValueChange={setIsEmail}
718
- trackColor={{ false: '#ccc', true: '#2563EB' }}
719
- thumbColor={isEmail ? '#fff' : '#f4f3f4'}
720
- />
721
- </View>
722
- )}
723
634
 
724
- <Text style={styles.sectionTitle}>Billing Info</Text>
725
- <Text style={styles.label}>Billing Address</Text>
726
- <TextInput
727
- style={styles.input}
728
- value={billingInfo.billing.address}
729
- onChangeText={value => updateBillingInfo('billing', 'address', value)}
730
- />
731
- <Text style={styles.label}>Billing Country</Text>
732
- <TextInput
733
- style={styles.input}
734
- value={billingInfo.billing.country}
735
- onChangeText={value => updateBillingInfo('billing', 'country', value)}
736
- />
737
- <Text style={styles.label}>Billing State</Text>
738
- <TextInput
739
- style={styles.input}
740
- value={billingInfo.billing.state}
741
- onChangeText={value => updateBillingInfo('billing', 'state', value)}
742
- />
743
- <Text style={styles.label}>Billing City</Text>
744
- <TextInput
745
- style={styles.input}
746
- value={billingInfo.billing.city}
747
- onChangeText={value => updateBillingInfo('billing', 'city', value)}
748
- />
749
- <Text style={styles.label}>Billing Postal Code</Text>
750
- <TextInput
751
- style={styles.input}
752
- value={billingInfo.billing.postal_code}
753
- onChangeText={value => updateBillingInfo('billing', 'postal_code', value)}
754
- />
755
- <Text style={styles.label}>Billing Required: Address</Text>
756
- <Switch
757
- value={billingInfo.billingRequired.address}
758
- onValueChange={value => updateBillingInfo('billingRequired', 'address', value)}
759
- trackColor={{ false: '#ccc', true: '#2563EB' }}
760
- thumbColor={billingInfo.billingRequired.address ? '#fff' : '#f4f3f4'}
761
- />
762
- <Text style={styles.label}>Billing Required: Country</Text>
763
- <Switch
764
- value={billingInfo.billingRequired.country}
765
- onValueChange={value => updateBillingInfo('billingRequired', 'country', value)}
766
- trackColor={{ false: '#ccc', true: '#2563EB' }}
767
- thumbColor={billingInfo.billingRequired.country ? '#fff' : '#f4f3f4'}
768
- />
769
- <Text style={styles.label}>Billing Required: State</Text>
770
- <Switch
771
- value={billingInfo.billingRequired.state}
772
- onValueChange={value => updateBillingInfo('billingRequired', 'state', value)}
773
- trackColor={{ false: '#ccc', true: '#2563EB' }}
774
- thumbColor={billingInfo.billingRequired.state ? '#fff' : '#f4f3f4'}
775
- />
776
- <Text style={styles.label}>Billing Required: City</Text>
777
- <Switch
778
- value={billingInfo.billingRequired.city}
779
- onValueChange={value => updateBillingInfo('billingRequired', 'city', value)}
780
- trackColor={{ false: '#ccc', true: '#2563EB' }}
781
- thumbColor={billingInfo.billingRequired.city ? '#fff' : '#f4f3f4'}
782
- />
783
- <Text style={styles.label}>Billing Required: Postal Code</Text>
784
- <Switch
785
- value={billingInfo.billingRequired.postal_code}
786
- onValueChange={value => updateBillingInfo('billingRequired', 'postal_code', value)}
787
- trackColor={{ false: '#ccc', true: '#2563EB' }}
788
- thumbColor={billingInfo.billingRequired.postal_code ? '#fff' : '#f4f3f4'}
789
- />
790
- <Text style={styles.label}>Additional: Name</Text>
791
- <TextInput
792
- style={styles.input}
793
- value={billingInfo.additional.name}
794
- onChangeText={value => updateBillingInfo('additional', 'name', value)}
795
- />
796
- <Text style={styles.label}>Additional: Email Address</Text>
797
- <TextInput
798
- style={styles.input}
799
- value={billingInfo.additional.email_address}
800
- onChangeText={value => updateBillingInfo('additional', 'email_address', value)}
801
- />
802
- <Text style={styles.label}>Additional: Phone Number</Text>
803
- <TextInput
804
- style={styles.input}
805
- value={billingInfo.additional.phone_number}
806
- onChangeText={value => updateBillingInfo('additional', 'phone_number', value)}
807
- />
808
- <Text style={styles.label}>Additional: Description</Text>
809
- <TextInput
810
- style={styles.input}
811
- value={billingInfo.additional.description}
812
- onChangeText={value => updateBillingInfo('additional', 'description', value)}
813
- />
814
- <Text style={styles.label}>Additional Required: Name</Text>
815
- <Switch
816
- value={billingInfo.additionalRequired.name}
817
- onValueChange={value => updateBillingInfo('additionalRequired', 'name', value)}
818
- trackColor={{ false: '#ccc', true: '#2563EB' }}
819
- thumbColor={billingInfo.additionalRequired.name ? '#fff' : '#f4f3f4'}
820
- />
821
- <Text style={styles.label}>Additional Required: Email Address</Text>
822
- <Switch
823
- value={billingInfo.additionalRequired.email_address}
824
- onValueChange={value => updateBillingInfo('additionalRequired', 'email_address', value)}
825
- trackColor={{ false: '#ccc', true: '#2563EB' }}
826
- thumbColor={billingInfo.additionalRequired.email_address ? '#fff' : '#f4f3f4'}
827
- />
828
- <Text style={styles.label}>Additional Required: Phone Number</Text>
829
- <Switch
830
- value={billingInfo.additionalRequired.phone_number}
831
- onValueChange={value => updateBillingInfo('additionalRequired', 'phone_number', value)}
832
- trackColor={{ false: '#ccc', true: '#2563EB' }}
833
- thumbColor={billingInfo.additionalRequired.phone_number ? '#fff' : '#f4f3f4'}
834
- />
835
- <Text style={styles.label}>Additional Required: Description</Text>
836
- <Switch
837
- value={billingInfo.additionalRequired.description}
838
- onValueChange={value => updateBillingInfo('additionalRequired', 'description', value)}
839
- trackColor={{ false: '#ccc', true: '#2563EB' }}
840
- thumbColor={billingInfo.additionalRequired.description ? '#fff' : '#f4f3f4'}
841
- />
842
-
843
- {Platform.OS === 'android' && (
635
+ {showConfig && (
844
636
  <>
845
- <Text style={styles.sectionTitle}>Android Configuration</Text>
846
- <Text style={styles.label}>Currency</Text>
847
- <TextInput
848
- style={styles.input}
849
- value={androidConfig.currency}
850
- onChangeText={value => updateAndroidConfig('currency', value)}
851
- />
852
- <Text style={styles.label}>Save Card</Text>
853
- <Switch
854
- value={androidConfig.saveCard}
855
- onValueChange={value => updateAndroidConfig('saveCard', value)}
856
- trackColor={{ false: '#ccc', true: '#2563EB' }}
857
- thumbColor={androidConfig.saveCard ? '#fff' : '#f4f3f4'}
858
- />
859
- <Text style={styles.label}>Save Account</Text>
860
- <Switch
861
- value={androidConfig.saveAccount}
862
- onValueChange={value => updateAndroidConfig('saveAccount', value)}
863
- trackColor={{ false: '#ccc', true: '#2563EB' }}
864
- thumbColor={androidConfig.saveAccount ? '#fff' : '#f4f3f4'}
865
- />
866
- <Text style={styles.label}>Show Receipt</Text>
867
- <Switch
868
- value={androidConfig.showReceipt}
869
- onValueChange={value => updateAndroidConfig('showReceipt', value)}
870
- trackColor={{ false: '#ccc', true: '#2563EB' }}
871
- thumbColor={androidConfig.showReceipt ? '#fff' : '#f4f3f4'}
872
- />
873
- <Text style={styles.label}>Show Donate</Text>
874
- <Switch
875
- value={androidConfig.showDonate}
876
- onValueChange={value => updateAndroidConfig('showDonate', value)}
877
- trackColor={{ false: '#ccc', true: '#2563EB' }}
878
- thumbColor={androidConfig.showDonate ? '#fff' : '#f4f3f4'}
879
- />
880
- <Text style={styles.label}>Show Total</Text>
881
- <Switch
882
- value={androidConfig.showTotal}
883
- onValueChange={value => updateAndroidConfig('showTotal', value)}
884
- trackColor={{ false: '#ccc', true: '#2563EB' }}
885
- thumbColor={androidConfig.showTotal ? '#fff' : '#f4f3f4'}
886
- />
887
- <Text style={styles.label}>Show Submit Button</Text>
888
- <Switch
889
- value={androidConfig.showSubmitButton}
890
- onValueChange={value => updateAndroidConfig('showSubmitButton', value)}
891
- trackColor={{ false: '#ccc', true: '#2563EB' }}
892
- thumbColor={androidConfig.showSubmitButton ? '#fff' : '#f4f3f4'}
893
- />
894
- <Text style={styles.label}>Name</Text>
895
- <TextInput
896
- style={styles.input}
897
- value={androidConfig.name}
898
- onChangeText={value => updateAndroidConfig('name', value)}
899
- />
900
- <Text style={styles.sectionTitle}>Android Fields</Text>
901
- {androidConfig.fields.billing.map((field, index) => (
902
- <View key={`billing-${index}`}>
903
- <Text style={styles.label}>{`Billing ${field.name}`}</Text>
904
- <TextInput
905
- style={styles.input}
906
- value={field.value}
907
- onChangeText={value => updateAndroidConfigFields('billing', index, 'value', value)}
908
- />
909
- <Text style={styles.label}>{`Billing ${field.name} Required`}</Text>
637
+ <Text style={styles.sectionTitle}>Environment</Text>
638
+ <View style={styles.pickerContainer}>
639
+ <Text style={styles.label}>Select Environment</Text>
640
+ <View style={styles.buttonGroup}>
641
+ <TouchableOpacity
642
+ style={[
643
+ styles.environmentButton,
644
+ { backgroundColor: environment === 'sandbox' ? '#2563EB' : '#ccc' },
645
+ ]}
646
+ onPress={() => {
647
+ console.log('Sandbox tapped, setting environment to sandbox');
648
+ setEnvironment('sandbox');
649
+ }}
650
+ disabled={isEnvironmentLoading || environment === 'sandbox'}
651
+ >
652
+ <Text style={styles.buttonText}>Sandbox</Text>
653
+ </TouchableOpacity>
654
+ <TouchableOpacity
655
+ style={[
656
+ styles.environmentButton,
657
+ { backgroundColor: environment === 'staging' ? '#2563EB' : '#ccc' },
658
+ ]}
659
+ onPress={() => {
660
+ console.log('Staging tapped, setting environment to staging');
661
+ setEnvironment('staging');
662
+ }}
663
+ disabled={isEnvironmentLoading || environment === 'staging'}
664
+ >
665
+ <Text style={styles.buttonText}>Staging</Text>
666
+ </TouchableOpacity>
667
+ </View>
668
+ </View>
669
+
670
+ <Text style={styles.sectionTitle}>Payment Options</Text>
671
+ <View style={styles.toggleContainer}>
672
+ <Text style={styles.label}>Recurring Payment</Text>
673
+ <Switch
674
+ value={isRecurring}
675
+ onValueChange={setIsRecurring}
676
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
677
+ thumbColor={isRecurring ? '#fff' : '#f4f3f4'}
678
+ />
679
+ </View>
680
+ <View style={styles.toggleContainer}>
681
+ <Text style={styles.label}>Authenticated ACH</Text>
682
+ <Switch
683
+ value={isAuthenticatedACH}
684
+ onValueChange={setAuthenticatedACH}
685
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
686
+ thumbColor={isAuthenticatedACH ? '#fff' : '#f4f3f4'}
687
+ />
688
+ </View>
689
+ <View style={styles.toggleContainer}>
690
+ <Text style={styles.label}>3DS</Text>
691
+ <Switch
692
+ value={isSecureAuthentication}
693
+ onValueChange={setSecureAuthentication}
694
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
695
+ thumbColor={isSecureAuthentication ? '#fff' : '#f4f3f4'}
696
+ />
697
+ </View>
698
+ <View style={styles.toggleContainer}>
699
+ <Text style={styles.label}>Billing Visible</Text>
700
+ <Switch
701
+ value={isBillingVisible}
702
+ onValueChange={setBillingVisible}
703
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
704
+ thumbColor={isBillingVisible ? '#fff' : '#f4f3f4'}
705
+ />
706
+ </View>
707
+ <View style={styles.toggleContainer}>
708
+ <Text style={styles.label}>Additional Info Visible</Text>
709
+ <Switch
710
+ value={isAdditionalVisible}
711
+ onValueChange={setAdditionalVisible}
712
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
713
+ thumbColor={isAdditionalVisible ? '#fff' : '#f4f3f4'}
714
+ />
715
+ </View>
716
+ <Text style={styles.label}>Payment Methods (Shared)</Text>
717
+ <View style={styles.buttonGroup}>
718
+ <Button
719
+ title="Card"
720
+ onPress={() => togglePaymentMethod('card')}
721
+ color={androidConfig.paymentMethod.includes('card') ? '#2563EB' : '#ccc'}
722
+ />
723
+ <Button
724
+ title="ACH"
725
+ onPress={() => togglePaymentMethod('ach')}
726
+ color={androidConfig.paymentMethod.includes('ach') ? '#2563EB' : '#ccc'}
727
+ />
728
+ </View>
729
+ {Platform.OS === 'android' && (
730
+ <View style={styles.toggleContainer}>
731
+ <Text style={styles.label}>Email Editable (Android)</Text>
910
732
  <Switch
911
- value={field.required}
912
- onValueChange={value => updateAndroidConfigFields('billing', index, 'required', value)}
733
+ value={emailEditable}
734
+ onValueChange={setEmailEditable}
913
735
  trackColor={{ false: '#ccc', true: '#2563EB' }}
914
- thumbColor={field.required ? '#fff' : '#f4f3f4'}
736
+ thumbColor={emailEditable ? '#fff' : '#f4f3f4'}
915
737
  />
916
738
  </View>
917
- ))}
918
- {androidConfig.fields.additional.map((field, index) => (
919
- <View key={`additional-${index}`}>
920
- <Text style={styles.label}>{`Additional ${field.name}`}</Text>
921
- <TextInput
922
- style={styles.input}
923
- value={field.value}
924
- onChangeText={value => updateAndroidConfigFields('additional', index, 'value', value)}
925
- />
926
- <Text style={styles.label}>{`Additional ${field.name} Required`}</Text>
739
+ )}
740
+ {Platform.OS === 'ios' && (
741
+ <View style={styles.toggleContainer}>
742
+ <Text style={styles.label}>Allow Email (iOS)</Text>
927
743
  <Switch
928
- value={field.required}
929
- onValueChange={value => updateAndroidConfigFields('additional', index, 'required', value)}
744
+ value={isEmail}
745
+ onValueChange={setIsEmail}
930
746
  trackColor={{ false: '#ccc', true: '#2563EB' }}
931
- thumbColor={field.required ? '#fff' : '#f4f3f4'}
747
+ thumbColor={isEmail ? '#fff' : '#f4f3f4'}
932
748
  />
933
749
  </View>
934
- ))}
935
- <Text style={styles.sectionTitle}>Android Appearance Settings</Text>
936
- <Text style={styles.label}>Theme</Text>
937
- <TextInput
938
- style={styles.input}
939
- value={androidConfig.appearanceSettings.theme}
940
- onChangeText={value => updateAndroidConfigAppearanceSettings('theme', value)}
941
- />
942
- <Text style={styles.label}>Body Background Color</Text>
943
- <TextInput
944
- style={styles.input}
945
- value={androidConfig.appearanceSettings.bodyBackgroundColor}
946
- onChangeText={value => updateAndroidConfigAppearanceSettings('bodyBackgroundColor', value)}
947
- />
948
- <Text style={styles.label}>Container Background Color</Text>
750
+ )}
751
+
752
+ <Text style={styles.sectionTitle}>Billing Info</Text>
753
+ <Text style={styles.label}>Billing Address</Text>
949
754
  <TextInput
950
755
  style={styles.input}
951
- value={androidConfig.appearanceSettings.containerBackgroundColor}
952
- onChangeText={value => updateAndroidConfigAppearanceSettings('containerBackgroundColor', value)}
756
+ value={billingInfo.billing.address}
757
+ onChangeText={value => updateBillingInfo('billing', 'address', value)}
953
758
  />
954
- <Text style={styles.label}>Primary Font Color</Text>
759
+ <Text style={styles.label}>Billing Country</Text>
955
760
  <TextInput
956
761
  style={styles.input}
957
- value={androidConfig.appearanceSettings.primaryFontColor}
958
- onChangeText={value => updateAndroidConfigAppearanceSettings('primaryFontColor', value)}
762
+ value={billingInfo.billing.country}
763
+ onChangeText={value => updateBillingInfo('billing', 'country', value)}
959
764
  />
960
- <Text style={styles.label}>Secondary Font Color</Text>
765
+ <Text style={styles.label}>Billing State</Text>
961
766
  <TextInput
962
767
  style={styles.input}
963
- value={androidConfig.appearanceSettings.secondaryFontColor}
964
- onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryFontColor', value)}
768
+ value={billingInfo.billing.state}
769
+ onChangeText={value => updateBillingInfo('billing', 'state', value)}
965
770
  />
966
- <Text style={styles.label}>Primary Button Background Color</Text>
771
+ <Text style={styles.label}>Billing City</Text>
967
772
  <TextInput
968
773
  style={styles.input}
969
- value={androidConfig.appearanceSettings.primaryButtonBackgroundColor}
970
- onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonBackgroundColor', value)}
774
+ value={billingInfo.billing.city}
775
+ onChangeText={value => updateBillingInfo('billing', 'city', value)}
971
776
  />
972
- <Text style={styles.label}>Primary Button Hover Color</Text>
777
+ <Text style={styles.label}>Billing Postal Code</Text>
973
778
  <TextInput
974
779
  style={styles.input}
975
- value={androidConfig.appearanceSettings.primaryButtonHoverColor}
976
- onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonHoverColor', value)}
780
+ value={billingInfo.billing.postal_code}
781
+ onChangeText={value => updateBillingInfo('billing', 'postal_code', value)}
977
782
  />
978
- <Text style={styles.label}>Primary Button Font Color</Text>
979
- <TextInput
980
- style={styles.input}
981
- value={androidConfig.appearanceSettings.primaryButtonFontColor}
982
- onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonFontColor', value)}
783
+ <Text style={styles.label}>Billing Required: Address</Text>
784
+ <Switch
785
+ value={billingInfo.billingRequired.address}
786
+ onValueChange={value => updateBillingInfo('billingRequired', 'address', value)}
787
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
788
+ thumbColor={billingInfo.billingRequired.address ? '#fff' : '#f4f3f4'}
983
789
  />
984
- <Text style={styles.label}>Secondary Button Background Color</Text>
985
- <TextInput
986
- style={styles.input}
987
- value={androidConfig.appearanceSettings.secondaryButtonBackgroundColor}
988
- onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonBackgroundColor', value)}
790
+ <Text style={styles.label}>Billing Required: Country</Text>
791
+ <Switch
792
+ value={billingInfo.billingRequired.country}
793
+ onValueChange={value => updateBillingInfo('billingRequired', 'country', value)}
794
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
795
+ thumbColor={billingInfo.billingRequired.country ? '#fff' : '#f4f3f4'}
989
796
  />
990
- <Text style={styles.label}>Secondary Button Hover Color</Text>
991
- <TextInput
992
- style={styles.input}
993
- value={androidConfig.appearanceSettings.secondaryButtonHoverColor}
994
- onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonHoverColor', value)}
797
+ <Text style={styles.label}>Billing Required: State</Text>
798
+ <Switch
799
+ value={billingInfo.billingRequired.state}
800
+ onChangeText={value => updateBillingInfo('billingRequired', 'state', value)}
801
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
802
+ thumbColor={billingInfo.billingRequired.state ? '#fff' : '#f4f3f4'}
995
803
  />
996
- <Text style={styles.label}>Secondary Button Font Color</Text>
997
- <TextInput
998
- style={styles.input}
999
- value={androidConfig.appearanceSettings.secondaryButtonFontColor}
1000
- onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonFontColor', value)}
804
+ <Text style={styles.label}>Billing Required: City</Text>
805
+ <Switch
806
+ value={billingInfo.billingRequired.city}
807
+ onValueChange={value => updateBillingInfo('billingRequired', 'city', value)}
808
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
809
+ thumbColor={billingInfo.billingRequired.city ? '#fff' : '#f4f3f4'}
1001
810
  />
1002
- <Text style={styles.label}>Border Radius</Text>
1003
- <TextInput
1004
- style={styles.input}
1005
- value={androidConfig.appearanceSettings.borderRadius}
1006
- onChangeText={value => updateAndroidConfigAppearanceSettings('borderRadius', value)}
811
+ <Text style={styles.label}>Billing Required: Postal Code</Text>
812
+ <Switch
813
+ value={billingInfo.billingRequired.postal_code}
814
+ onValueChange={value => updateBillingInfo('billingRequired', 'postal_code', value)}
815
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
816
+ thumbColor={billingInfo.billingRequired.postal_code ? '#fff' : '#f4f3f4'}
1007
817
  />
1008
- <Text style={styles.label}>Font Size</Text>
818
+ <Text style={styles.label}>Additional: Name</Text>
1009
819
  <TextInput
1010
820
  style={styles.input}
1011
- value={androidConfig.appearanceSettings.fontSize}
1012
- onChangeText={value => updateAndroidConfigAppearanceSettings('fontSize', value)}
821
+ value={billingInfo.additional.name}
822
+ onChangeText={value => updateBillingInfo('additional', 'name', value)}
1013
823
  />
1014
- <Text style={styles.label}>Font Weight</Text>
824
+ <Text style={styles.label}>Additional: Email Address</Text>
1015
825
  <TextInput
1016
826
  style={styles.input}
1017
- value={String(androidConfig.appearanceSettings.fontWeight)}
1018
- onChangeText={value => updateAndroidConfigAppearanceSettings('fontWeight', parseInt(value) || '500')}
827
+ value={billingInfo.additional.email_address}
828
+ onChangeText={value => updateBillingInfo('additional', 'email_address', value)}
1019
829
  />
1020
- <Text style={styles.label}>Font Family</Text>
830
+ <Text style={styles.label}>Additional: Phone Number</Text>
1021
831
  <TextInput
1022
832
  style={styles.input}
1023
- value={androidConfig.appearanceSettings.fontFamily}
1024
- onChangeText={value => updateAndroidConfigAppearanceSettings('fontFamily', value)}
833
+ value={billingInfo.additional.phone_number}
834
+ onChangeText={value => updateBillingInfo('additional', 'phone_number', value)}
1025
835
  />
1026
- </>
1027
- )}
1028
-
1029
- {Platform.OS === 'ios' && (
1030
- <>
1031
- <Text style={styles.sectionTitle}>Theme Configuration (iOS)</Text>
1032
- <Text style={styles.label}>Body Background Color</Text>
836
+ <Text style={styles.label}>Additional: Description</Text>
1033
837
  <TextInput
1034
838
  style={styles.input}
1035
- value={themeConfiguration.bodyBackgroundColor}
1036
- onChangeText={value => updateThemeConfiguration('bodyBackgroundColor', value)}
839
+ value={billingInfo.additional.description}
840
+ onChangeText={value => updateBillingInfo('additional', 'description', value)}
1037
841
  />
1038
- <Text style={styles.label}>Container Background Color</Text>
1039
- <TextInput
1040
- style={styles.input}
1041
- value={themeConfiguration.containerBackgroundColor}
1042
- onChangeText={value => updateThemeConfiguration('containerBackgroundColor', value)}
842
+ <Text style={styles.label}>Additional Required: Name</Text>
843
+ <Switch
844
+ value={billingInfo.additionalRequired.name}
845
+ onValueChange={value => updateBillingInfo('additionalRequired', 'name', value)}
846
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
847
+ thumbColor={billingInfo.additionalRequired.name ? '#fff' : '#f4f3f4'}
1043
848
  />
1044
- <Text style={styles.label}>Primary Font Color</Text>
1045
- <TextInput
1046
- style={styles.input}
1047
- value={themeConfiguration.primaryFontColor}
1048
- onChangeText={value => updateThemeConfiguration('primaryFontColor', value)}
849
+ <Text style={styles.label}>Additional Required: Email Address</Text>
850
+ <Switch
851
+ value={billingInfo.additionalRequired.email_address}
852
+ onValueChange={value => updateBillingInfo('additionalRequired', 'email_address', value)}
853
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
854
+ thumbColor={billingInfo.additionalRequired.email_address ? '#fff' : '#f4f3f4'}
1049
855
  />
1050
- <Text style={styles.label}>Secondary Font Color</Text>
1051
- <TextInput
1052
- style={styles.input}
1053
- value={themeConfiguration.secondaryFontColor}
1054
- onChangeText={value => updateThemeConfiguration('secondaryFontColor', value)}
856
+ <Text style={styles.label}>Additional Required: Phone Number</Text>
857
+ <Switch
858
+ value={billingInfo.additionalRequired.phone_number}
859
+ onValueChange={value => updateBillingInfo('additionalRequired', 'phone_number', value)}
860
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
861
+ thumbColor={billingInfo.additionalRequired.phone_number ? '#fff' : '#f4f3f4'}
1055
862
  />
1056
- <Text style={styles.label}>Primary Button Background Color</Text>
1057
- <TextInput
1058
- style={styles.input}
1059
- value={themeConfiguration.primaryButtonBackgroundColor}
1060
- onChangeText={value => updateThemeConfiguration('primaryButtonBackgroundColor', value)}
863
+ <Text style={styles.label}>Additional Required: Description</Text>
864
+ <Switch
865
+ value={billingInfo.additionalRequired.description}
866
+ onValueChange={value => updateBillingInfo('additionalRequired', 'description', value)}
867
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
868
+ thumbColor={billingInfo.additionalRequired.description ? '#fff' : '#f4f3f4'}
1061
869
  />
1062
- <Text style={styles.label}>Primary Button Hover Color</Text>
870
+
871
+ {/* Android Configuration */}
872
+ {Platform.OS === 'android' && (
873
+ <>
874
+ <Text style={styles.sectionTitle}>Android Configuration</Text>
875
+ <Text style={styles.label}>Currency</Text>
876
+ <TextInput
877
+ style={styles.input}
878
+ value={androidConfig.currency}
879
+ onChangeText={value => updateAndroidConfig('currency', value)}
880
+ />
881
+ <Text style={styles.label}>Save Card</Text>
882
+ <Switch
883
+ value={androidConfig.saveCard}
884
+ onValueChange={value => updateAndroidConfig('saveCard', value)}
885
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
886
+ thumbColor={androidConfig.saveCard ? '#fff' : '#f4f3f4'}
887
+ />
888
+ <Text style={styles.label}>Save Account</Text>
889
+ <Switch
890
+ value={androidConfig.saveAccount}
891
+ onValueChange={value => updateAndroidConfig('saveAccount', value)}
892
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
893
+ thumbColor={androidConfig.saveAccount ? '#fff' : '#f4f3f4'}
894
+ />
895
+ <Text style={styles.label}>Show Receipt</Text>
896
+ <Switch
897
+ value={androidConfig.showReceipt}
898
+ onValueChange={value => updateAndroidConfig('showReceipt', value)}
899
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
900
+ thumbColor={androidConfig.showReceipt ? '#fff' : '#f4f3f4'}
901
+ />
902
+ <Text style={styles.label}>Show Donate</Text>
903
+ <Switch
904
+ value={androidConfig.showDonate}
905
+ onValueChange={value => updateAndroidConfig('showDonate', value)}
906
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
907
+ thumbColor={androidConfig.showDonate ? '#fff' : '#f4f3f4'}
908
+ />
909
+ <Text style={styles.label}>Show Total</Text>
910
+ <Switch
911
+ value={androidConfig.showTotal}
912
+ onValueChange={value => updateAndroidConfig('showTotal', value)}
913
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
914
+ thumbColor={androidConfig.showTotal ? '#fff' : '#f4f3f4'}
915
+ />
916
+ <Text style={styles.label}>Show Submit Button</Text>
917
+ <Switch
918
+ value={androidConfig.showSubmitButton}
919
+ onValueChange={value => updateAndroidConfig('showSubmitButton', value)}
920
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
921
+ thumbColor={androidConfig.showSubmitButton ? '#fff' : '#f4f3f4'}
922
+ />
923
+ <Text style={styles.label}>Name</Text>
924
+ <TextInput
925
+ style={styles.input}
926
+ value={androidConfig.name}
927
+ onChangeText={value => updateAndroidConfig('name', value)}
928
+ />
929
+ <Text style={styles.sectionTitle}>Android Fields</Text>
930
+ {androidConfig.fields.billing.map((field, index) => (
931
+ <View key={`billing-${index}`}>
932
+ <Text style={styles.label}>{`Billing ${field.name}`}</Text>
933
+ <TextInput
934
+ style={styles.input}
935
+ value={field.value}
936
+ onChangeText={value => updateAndroidConfigFields('billing', index, 'value', value)}
937
+ />
938
+ <Text style={styles.label}>{`Billing ${field.name} Required`}</Text>
939
+ <Switch
940
+ value={field.required}
941
+ onValueChange={value => updateAndroidConfigFields('billing', index, 'required', value)}
942
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
943
+ thumbColor={field.required ? '#fff' : '#f4f3f4'}
944
+ />
945
+ </View>
946
+ ))}
947
+ {androidConfig.fields.additional.map((field, index) => (
948
+ <View key={`additional-${index}`}>
949
+ <Text style={styles.label}>{`Additional ${field.name}`}</Text>
950
+ <TextInput
951
+ style={styles.input}
952
+ value={field.value}
953
+ onChangeText={value => updateAndroidConfigFields('additional', index, 'value', value)}
954
+ />
955
+ <Text style={styles.label}>{`Additional ${field.name} Required`}</Text>
956
+ <Switch
957
+ value={field.required}
958
+ onValueChange={value => updateAndroidConfigFields('additional', index, 'required', value)}
959
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
960
+ thumbColor={field.required ? '#fff' : '#f4f3f4'}
961
+ />
962
+ </View>
963
+ ))}
964
+ <Text style={styles.sectionTitle}>Android Appearance Settings</Text>
965
+ <Text style={styles.label}>Theme</Text>
966
+ <TextInput
967
+ style={styles.input}
968
+ value={androidConfig.appearanceSettings.theme}
969
+ onChangeText={value => updateAndroidConfigAppearanceSettings('theme', value)}
970
+ />
971
+ <Text style={styles.label}>Body Background Color</Text>
972
+ <TextInput
973
+ style={styles.input}
974
+ value={androidConfig.appearanceSettings.bodyBackgroundColor}
975
+ onChangeText={value => updateAndroidConfigAppearanceSettings('bodyBackgroundColor', value)}
976
+ />
977
+ <Text style={styles.label}>Container Background Color</Text>
978
+ <TextInput
979
+ style={styles.input}
980
+ value={androidConfig.appearanceSettings.containerBackgroundColor}
981
+ onChangeText={value => updateAndroidConfigAppearanceSettings('containerBackgroundColor', value)}
982
+ />
983
+ <Text style={styles.label}>Primary Font Color</Text>
984
+ <TextInput
985
+ style={styles.input}
986
+ value={androidConfig.appearanceSettings.primaryFontColor}
987
+ onChangeText={value => updateAndroidConfigAppearanceSettings('primaryFontColor', value)}
988
+ />
989
+ <Text style={styles.label}>Secondary Font Color</Text>
990
+ <TextInput
991
+ style={styles.input}
992
+ value={androidConfig.appearanceSettings.secondaryFontColor}
993
+ onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryFontColor', value)}
994
+ />
995
+ <Text style={styles.label}>Primary Button Background Color</Text>
996
+ <TextInput
997
+ style={styles.input}
998
+ value={androidConfig.appearanceSettings.primaryButtonBackgroundColor}
999
+ onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonBackgroundColor', value)}
1000
+ />
1001
+ <Text style={styles.label}>Primary Button Hover Color</Text>
1002
+ <TextInput
1003
+ style={styles.input}
1004
+ value={androidConfig.appearanceSettings.primaryButtonHoverColor}
1005
+ onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonHoverColor', value)}
1006
+ />
1007
+ <Text style={styles.label}>Primary Button Font Color</Text>
1008
+ <TextInput
1009
+ style={styles.input}
1010
+ value={androidConfig.appearanceSettings.primaryButtonFontColor}
1011
+ onChangeText={value => updateAndroidConfigAppearanceSettings('primaryButtonFontColor', value)}
1012
+ />
1013
+ <Text style={styles.label}>Secondary Button Background Color</Text>
1014
+ <TextInput
1015
+ style={styles.input}
1016
+ value={androidConfig.appearanceSettings.secondaryButtonBackgroundColor}
1017
+ onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonBackgroundColor', value)}
1018
+ />
1019
+ <Text style={styles.label}>Secondary Button Hover Color</Text>
1020
+ <TextInput
1021
+ style={styles.input}
1022
+ value={androidConfig.appearanceSettings.secondaryButtonHoverColor}
1023
+ onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonHoverColor', value)}
1024
+ />
1025
+ <Text style={styles.label}>Secondary Button Font Color</Text>
1026
+ <TextInput
1027
+ style={styles.input}
1028
+ value={androidConfig.appearanceSettings.secondaryButtonFontColor}
1029
+ onChangeText={value => updateAndroidConfigAppearanceSettings('secondaryButtonFontColor', value)}
1030
+ />
1031
+ <Text style={styles.label}>Border Radius</Text>
1032
+ <TextInput
1033
+ style={styles.input}
1034
+ value={androidConfig.appearanceSettings.borderRadius}
1035
+ onChangeText={value => updateAndroidConfigAppearanceSettings('borderRadius', value)}
1036
+ />
1037
+ <Text style={styles.label}>Font Size</Text>
1038
+ <TextInput
1039
+ style={styles.input}
1040
+ value={androidConfig.appearanceSettings.fontSize}
1041
+ onChangeText={value => updateAndroidConfigAppearanceSettings('fontSize', value)}
1042
+ />
1043
+ <Text style={styles.label}>Font Weight</Text>
1044
+ <TextInput
1045
+ style={styles.input}
1046
+ value={String(androidConfig.appearanceSettings.fontWeight)}
1047
+ onChangeText={value => updateAndroidConfigAppearanceSettings('fontWeight', parseInt(value) || '500')}
1048
+ />
1049
+ <Text style={styles.label}>Font Family</Text>
1050
+ <TextInput
1051
+ style={styles.input}
1052
+ value={androidConfig.appearanceSettings.fontFamily}
1053
+ onChangeText={value => updateAndroidConfigAppearanceSettings('fontFamily', value)}
1054
+ />
1055
+ </>
1056
+ )}
1057
+
1058
+ {/* iOS Theme Configuration */}
1059
+ {Platform.OS === 'ios' && (
1060
+ <>
1061
+ <Text style={styles.sectionTitle}>Theme Configuration (iOS)</Text>
1062
+ <Text style={styles.label}>Body Background Color</Text>
1063
+ <TextInput
1064
+ style={styles.input}
1065
+ value={themeConfiguration.bodyBackgroundColor}
1066
+ onChangeText={value => updateThemeConfiguration('bodyBackgroundColor', value)}
1067
+ />
1068
+ <Text style={styles.label}>Container Background Color</Text>
1069
+ <TextInput
1070
+ style={styles.input}
1071
+ value={themeConfiguration.containerBackgroundColor}
1072
+ onChangeText={value => updateThemeConfiguration('containerBackgroundColor', value)}
1073
+ />
1074
+ <Text style={styles.label}>Primary Font Color</Text>
1075
+ <TextInput
1076
+ style={styles.input}
1077
+ value={themeConfiguration.primaryFontColor}
1078
+ onChangeText={value => updateThemeConfiguration('primaryFontColor', value)}
1079
+ />
1080
+ <Text style={styles.label}>Secondary Font Color</Text>
1081
+ <TextInput
1082
+ style={styles.input}
1083
+ value={themeConfiguration.secondaryFontColor}
1084
+ onChangeText={value => updateThemeConfiguration('secondaryFontColor', value)}
1085
+ />
1086
+ <Text style={styles.label}>Primary Button Background Color</Text>
1087
+ <TextInput
1088
+ style={styles.input}
1089
+ value={themeConfiguration.primaryButtonBackgroundColor}
1090
+ onChangeText={value => updateThemeConfiguration('primaryButtonBackgroundColor', value)}
1091
+ />
1092
+ <Text style={styles.label}>Primary Button Hover Color</Text>
1093
+ <TextInput
1094
+ style={styles.input}
1095
+ value={themeConfiguration.primaryButtonHoverColor}
1096
+ onChangeText={value => updateThemeConfiguration('primaryButtonHoverColor', value)}
1097
+ />
1098
+ <Text style={styles.label}>Primary Button Font Color</Text>
1099
+ <TextInput
1100
+ style={styles.input}
1101
+ value={themeConfiguration.primaryButtonFontColor}
1102
+ onChangeText={value => updateThemeConfiguration('primaryButtonFontColor', value)}
1103
+ />
1104
+ <Text style={styles.label}>Secondary Button Background Color</Text>
1105
+ <TextInput
1106
+ style={styles.input}
1107
+ value={themeConfiguration.secondaryButtonBackgroundColor}
1108
+ onChangeText={value => updateThemeConfiguration('secondaryButtonBackgroundColor', value)}
1109
+ />
1110
+ <Text style={styles.label}>Secondary Button Hover Color</Text>
1111
+ <TextInput
1112
+ style={styles.input}
1113
+ value={themeConfiguration.secondaryButtonHoverColor}
1114
+ onChangeText={value => updateThemeConfiguration('secondaryButtonHoverColor', value)}
1115
+ />
1116
+ <Text style={styles.label}>Secondary Button Font Color</Text>
1117
+ <TextInput
1118
+ style={styles.input}
1119
+ value={themeConfiguration.secondaryButtonFontColor}
1120
+ onChangeText={value => updateThemeConfiguration('secondaryButtonFontColor', value)}
1121
+ />
1122
+ <Text style={styles.label}>Border Radius</Text>
1123
+ <TextInput
1124
+ style={styles.input}
1125
+ value={themeConfiguration.borderRadius}
1126
+ onChangeText={value => updateThemeConfiguration('borderRadius', value)}
1127
+ />
1128
+ <Text style={styles.label}>Font Size</Text>
1129
+ <TextInput
1130
+ style={styles.input}
1131
+ value={themeConfiguration.fontSize}
1132
+ onChangeText={value => updateThemeConfiguration('fontSize', value)}
1133
+ />
1134
+ <Text style={styles.label}>Font Weight</Text>
1135
+ <TextInput
1136
+ style={styles.input}
1137
+ value={String(themeConfiguration.fontWeight)}
1138
+ onChangeText={value => updateThemeConfiguration('fontWeight', parseInt(value) || 500)}
1139
+ />
1140
+ <Text style={styles.label}>Font Family</Text>
1141
+ <TextInput
1142
+ style={styles.input}
1143
+ value={themeConfiguration.fontFamily}
1144
+ onChangeText={value => updateThemeConfiguration('fontFamily', value)}
1145
+ />
1146
+ </>
1147
+ )}
1148
+
1149
+ {/* GrailPay Parameters */}
1150
+ <Text style={styles.sectionTitle}>GrailPay Parameters</Text>
1151
+ <Text style={styles.label}>Role</Text>
1063
1152
  <TextInput
1064
1153
  style={styles.input}
1065
- value={themeConfiguration.primaryButtonHoverColor}
1066
- onChangeText={value => updateThemeConfiguration('primaryButtonHoverColor', value)}
1154
+ value={grailPayParams.role}
1155
+ onChangeText={value => updateGrailPayParams('role', value)}
1067
1156
  />
1068
- <Text style={styles.label}>Primary Button Font Color</Text>
1157
+ <Text style={styles.label}>Timeout</Text>
1069
1158
  <TextInput
1070
1159
  style={styles.input}
1071
- value={themeConfiguration.primaryButtonFontColor}
1072
- onChangeText={value => updateThemeConfiguration('primaryButtonFontColor', value)}
1160
+ value={String(grailPayParams.timeout)}
1161
+ onChangeText={value => updateGrailPayParams('timeout', parseInt(value) || 10)}
1073
1162
  />
1074
- <Text style={styles.label}>Secondary Button Background Color</Text>
1075
- <TextInput
1076
- style={styles.input}
1077
- value={themeConfiguration.secondaryButtonBackgroundColor}
1078
- onChangeText={value => updateThemeConfiguration('secondaryButtonBackgroundColor', value)}
1163
+ <Text style={styles.label}>Is Sandbox</Text>
1164
+ <Switch
1165
+ value={grailPayParams.isSandbox}
1166
+ onValueChange={value => updateGrailPayParams('isSandbox', value)}
1167
+ trackColor={{ false: '#ccc', true: '#2563EB' }}
1168
+ thumbColor={grailPayParams.isSandbox ? '#fff' : '#f4f3f4'}
1079
1169
  />
1080
- <Text style={styles.label}>Secondary Button Hover Color</Text>
1170
+ <Text style={styles.label}>Branding Name</Text>
1081
1171
  <TextInput
1082
1172
  style={styles.input}
1083
- value={themeConfiguration.secondaryButtonHoverColor}
1084
- onChangeText={value => updateThemeConfiguration('secondaryButtonHoverColor', value)}
1173
+ value={grailPayParams.brandingName}
1174
+ onChangeText={value => updateGrailPayParams('brandingName', value)}
1085
1175
  />
1086
- <Text style={styles.label}>Secondary Button Font Color</Text>
1176
+ <Text style={styles.label}>Finder Subtitle</Text>
1087
1177
  <TextInput
1088
1178
  style={styles.input}
1089
- value={themeConfiguration.secondaryButtonFontColor}
1090
- onChangeText={value => updateThemeConfiguration('secondaryButtonFontColor', value)}
1179
+ value={grailPayParams.finderSubtitle}
1180
+ onChangeText={value => updateGrailPayParams('finderSubtitle', value)}
1091
1181
  />
1092
- <Text style={styles.label}>Border Radius</Text>
1182
+ <Text style={styles.label}>Search Placeholder</Text>
1093
1183
  <TextInput
1094
1184
  style={styles.input}
1095
- value={themeConfiguration.borderRadius}
1096
- onChangeText={value => updateThemeConfiguration('borderRadius', value)}
1185
+ value={grailPayParams.searchPlaceholder}
1186
+ onChangeText={value => updateGrailPayParams('searchPlaceholder', value)}
1097
1187
  />
1098
- <Text style={styles.label}>Font Size</Text>
1188
+
1189
+ {/* Recurring Data */}
1190
+ <Text style={styles.sectionTitle}>Recurring Data</Text>
1191
+ <Text style={styles.label}>Allow Cycles</Text>
1099
1192
  <TextInput
1100
1193
  style={styles.input}
1101
- value={themeConfiguration.fontSize}
1102
- onChangeText={value => updateThemeConfiguration('fontSize', value)}
1194
+ value={String(recurringData.allowCycles)}
1195
+ onChangeText={value => updateRecurringData('allowCycles', parseInt(value) || 2)}
1103
1196
  />
1104
- <Text style={styles.label}>Font Weight</Text>
1197
+ <Text style={styles.label}>Intervals</Text>
1198
+ <View style={styles.buttonGroup}>
1199
+ <Button
1200
+ title="Weekly"
1201
+ onPress={() => toggleInterval('weekly')}
1202
+ color={recurringData.intervals.includes('weekly') ? '#2563EB' : '#ccc'}
1203
+ />
1204
+ <Button
1205
+ title="Monthly"
1206
+ onPress={() => toggleInterval('monthly')}
1207
+ color={recurringData.intervals.includes('monthly') ? '#2563EB' : '#ccc'}
1208
+ />
1209
+ </View>
1210
+ <Text style={styles.label}>Recurring Start Type</Text>
1105
1211
  <TextInput
1106
1212
  style={styles.input}
1107
- value={String(themeConfiguration.fontWeight)}
1108
- onChangeText={value => updateThemeConfiguration('fontWeight', parseInt(value) || 500)}
1213
+ value={recurringData.recurringStartType}
1214
+ onChangeText={value => updateRecurringData('recurringStartType', value)}
1109
1215
  />
1110
- <Text style={styles.label}>Font Family</Text>
1216
+ <Text style={styles.label}>Recurring Start Date</Text>
1111
1217
  <TextInput
1112
1218
  style={styles.input}
1113
- value={themeConfiguration.fontFamily}
1114
- onChangeText={value => updateThemeConfiguration('fontFamily', value)}
1219
+ value={recurringData.recurringStartDate}
1220
+ onChangeText={value => updateRecurringData('recurringStartDate', value)}
1115
1221
  />
1116
1222
  </>
1117
1223
  )}
1118
1224
 
1119
- <Text style={styles.sectionTitle}>GrailPay Parameters</Text>
1120
- <Text style={styles.label}>Role</Text>
1121
- <TextInput
1122
- style={styles.input}
1123
- value={grailPayParams.role}
1124
- onChangeText={value => updateGrailPayParams('role', value)}
1125
- />
1126
- <Text style={styles.label}>Timeout</Text>
1127
- <TextInput
1128
- style={styles.input}
1129
- value={String(grailPayParams.timeout)}
1130
- onChangeText={value => updateGrailPayParams('timeout', parseInt(value) || 10)}
1131
- />
1132
- <Text style={styles.label}>Is Sandbox</Text>
1133
- <Switch
1134
- value={grailPayParams.isSandbox}
1135
- onValueChange={value => updateGrailPayParams('isSandbox', value)}
1136
- trackColor={{ false: '#ccc', true: '#2563EB' }}
1137
- thumbColor={grailPayParams.isSandbox ? '#fff' : '#f4f3f4'}
1138
- />
1139
- <Text style={styles.label}>Branding Name</Text>
1140
- <TextInput
1141
- style={styles.input}
1142
- value={grailPayParams.brandingName}
1143
- onChangeText={value => updateGrailPayParams('brandingName', value)}
1144
- />
1145
- <Text style={styles.label}>Finder Subtitle</Text>
1146
- <TextInput
1147
- style={styles.input}
1148
- value={grailPayParams.finderSubtitle}
1149
- onChangeText={value => updateGrailPayParams('finderSubtitle', value)}
1150
- />
1151
- <Text style={styles.label}>Search Placeholder</Text>
1152
- <TextInput
1153
- style={styles.input}
1154
- value={grailPayParams.searchPlaceholder}
1155
- onChangeText={value => updateGrailPayParams('searchPlaceholder', value)}
1156
- />
1157
-
1158
- <Text style={styles.sectionTitle}>Recurring Data</Text>
1159
- <Text style={styles.label}>Allow Cycles</Text>
1160
- <TextInput
1161
- style={styles.input}
1162
- value={String(recurringData.allowCycles)}
1163
- onChangeText={value => updateRecurringData('allowCycles', parseInt(value) || 2)}
1164
- />
1165
- <Text style={styles.label}>Intervals</Text>
1166
- <View style={styles.buttonGroup}>
1167
- <Button
1168
- title="Weekly"
1169
- onPress={() => toggleInterval('weekly')}
1170
- color={recurringData.intervals.includes('weekly') ? '#2563EB' : '#ccc'}
1171
- />
1172
- <Button
1173
- title="Monthly"
1174
- onPress={() => toggleInterval('monthly')}
1175
- color={recurringData.intervals.includes('monthly') ? '#2563EB' : '#ccc'}
1176
- />
1177
- </View>
1178
- <Text style={styles.label}>Recurring Start Type</Text>
1179
- <TextInput
1180
- style={styles.input}
1181
- value={recurringData.recurringStartType}
1182
- onChangeText={value => updateRecurringData('recurringStartType', value)}
1183
- />
1184
- <Text style={styles.label}>Recurring Start Date</Text>
1185
- <TextInput
1186
- style={styles.input}
1187
- value={recurringData.recurringStartDate}
1188
- onChangeText={value => updateRecurringData('recurringStartDate', value)}
1189
- />
1190
-
1191
- <View style={styles.buttonGroup}>
1192
- <Button title="Pay" onPress={handlePayment} />
1193
- {Platform.OS === 'ios' ? (
1194
- <Button title="Payment Ref" onPress={handlePaymentReference} disabled={loading} />
1195
- ) : (
1196
- <></>
1197
- )
1198
- }
1199
- </View>
1200
-
1201
- <Text selectable style={styles.result}>{result}</Text>
1225
+ <Text style={styles.sectionTitle}>SDK Response</Text>
1226
+ <Text selectable style={styles.result}>{result || 'No response yet'}</Text>
1202
1227
  </ScrollView>
1203
1228
  </View>
1204
1229
  );
1230
+
1205
1231
  };
1206
1232
 
1207
1233
  export default App;