@oxyhq/services 5.7.5 → 5.8.2

package/lib/module/ui/screens/PaymentGatewayScreen.js

@@ -1,9 +1,8 @@
 "use strict";
 
 import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Platform, KeyboardAvoidingView, ScrollView, Animated, StatusBar, Linking, Clipboard, useWindowDimensions } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, Platform, ScrollView, Animated, Linking, Clipboard, useWindowDimensions } from 'react-native';
 import { fontFamilies, useThemeColors, createCommonStyles } from '../styles';
-import OxyLogo from '../components/OxyLogo';
 import GroupedPillButtons from '../components/internal/GroupedPillButtons';
 import TextField from '../components/internal/TextField';
 import { Ionicons } from '@expo/vector-icons';
@@ -11,6 +10,7 @@ import { FAIRWalletIcon } from '../components/icon';
 import { toast } from 'sonner';
 import QRCode from 'react-native-qrcode-svg';
 import * as RNIap from 'react-native-iap';
+import { GroupedSection } from '../components';
 
 // Restrict payment methods to Card, Oxy Pay, and FairCoin (QR)
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -218,12 +218,12 @@ const PaymentGatewayScreen = props => {
     Animated.timing(scaleAnim, {
       toValue: 0.95,
       duration: 150,
-      useNativeDriver: true
+      useNativeDriver: Platform.OS !== 'web'
     }).start();
     Animated.timing(fadeAnim, {
       toValue: 0,
       duration: 200,
-      useNativeDriver: true
+      useNativeDriver: Platform.OS !== 'web'
     }).start(() => {
       setCurrentStep(nextStep);
       slideAnim.setValue(-50);
@@ -231,17 +231,17 @@ const PaymentGatewayScreen = props => {
       Animated.parallel([Animated.timing(fadeAnim, {
         toValue: 1,
         duration: 300,
-        useNativeDriver: true
+        useNativeDriver: Platform.OS !== 'web'
       }), Animated.spring(slideAnim, {
         toValue: 0,
         tension: 80,
         friction: 8,
-        useNativeDriver: true
+        useNativeDriver: Platform.OS !== 'web'
       }), Animated.spring(scaleAnim, {
         toValue: 1,
         tension: 80,
         friction: 8,
-        useNativeDriver: true
+        useNativeDriver: Platform.OS !== 'web'
       })]).start();
     });
   }, [fadeAnim, slideAnim, scaleAnim]);
@@ -396,140 +396,9 @@ const PaymentGatewayScreen = props => {
 
   // PaymentGatewayHeader component
   const stepTitles = ['Complete Your Payment', 'Select Payment Method', 'Enter Payment Details', 'Review & Pay', 'Success'];
-  const PaymentGatewayHeader = ({
-    currentStep,
-    totalSteps,
-    title
-  }) => /*#__PURE__*/_jsxs(View, {
-    style: styles.headerWrapper,
-    children: [/*#__PURE__*/_jsx(OxyLogo, {
-      style: styles.logo
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.headerTitle,
-      children: title
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.headerStepIndicatorContainer,
-      children: Array.from({
-        length: totalSteps
-      }).map((_, idx) => /*#__PURE__*/_jsx(View, {
-        style: getStepIndicatorStyle(currentStep + 1 === idx + 1)
-      }, idx))
-    })]
-  });
-
-  // Card container for main content
-  const Card = ({
-    children,
-    style
-  }) => /*#__PURE__*/_jsx(View, {
-    style: [styles.card, style],
-    children: children
-  });
-
-  // Product/Item summary card for step 1
-  const renderItemSummary = () => {
-    if (paymentItems && paymentItems.length > 0) {
-      return /*#__PURE__*/_jsxs(Card, {
-        style: {
-          marginBottom: 10
-        },
-        children: [paymentItems.map((item, idx) => /*#__PURE__*/_jsxs(View, {
-          style: {
-            marginBottom: 8
-          },
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: {
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center'
-            },
-            children: [/*#__PURE__*/_jsxs(Text, {
-              style: {
-                fontWeight: '600',
-                color: colors.text
-              },
-              children: [item.type === 'product' && item.quantity ? `${item.quantity} × ` : '', item.name, item.type === 'subscription' && item.period ? ` (${item.period})` : '']
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: {
-                color: colors.text
-              },
-              children: [item.currency ? CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency : currencySymbol, " ", item.price * (item.quantity ?? 1)]
-            })]
-          }), item.description ? /*#__PURE__*/_jsx(Text, {
-            style: {
-              color: colors.secondaryText,
-              fontSize: 13
-            },
-            children: item.description
-          }) : null]
-        }, idx)), /*#__PURE__*/_jsxs(View, {
-          style: {
-            borderTopWidth: 1,
-            borderColor: colors.border,
-            marginTop: 8,
-            paddingTop: 8,
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center'
-          },
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: {
-              fontWeight: '700',
-              color: colors.text
-            },
-            children: "Total"
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: {
-              fontWeight: '700',
-              color: colors.primary,
-              fontSize: 18
-            },
-            children: [currencySymbol, " ", computedTotal]
-          })]
-        })]
-      });
-    } else if (description) {
-      return /*#__PURE__*/_jsxs(Card, {
-        style: {
-          marginBottom: 10
-        },
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: {
-            color: colors.text
-          },
-          children: description
-        }), /*#__PURE__*/_jsxs(View, {
-          style: {
-            borderTopWidth: 1,
-            borderColor: colors.border,
-            marginTop: 8,
-            paddingTop: 8,
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center'
-          },
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: {
-              fontWeight: '700',
-              color: colors.text
-            },
-            children: "Total"
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: {
-              fontWeight: '700',
-              color: colors.primary,
-              fontSize: 18
-            },
-            children: [currencySymbol, " ", computedTotal]
-          })]
-        })]
-      });
-    }
-    return null;
-  };
 
   // Step 1: Summary step (new first step, no header/dots here)
-  const renderSummaryStep = () => /*#__PURE__*/_jsx(Animated.View, {
+  const renderSummaryStep = () => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
@@ -538,68 +407,121 @@ const PaymentGatewayScreen = props => {
         scale: scaleAnim
       }]
     }],
-    children: /*#__PURE__*/_jsxs(Card, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.section,
       children: [/*#__PURE__*/_jsx(Text, {
-        style: {
-          color: colors.secondaryText,
-          fontSize: 15,
-          marginBottom: 16
-        },
-        children: "You're about to pay for the following:"
-      }), paymentItems && paymentItems.length > 0 ? paymentItems.map((item, idx) => /*#__PURE__*/_jsxs(View, {
-        style: {
-          marginBottom: 12,
-          flexDirection: 'row',
-          alignItems: 'flex-start'
-        },
-        children: [getItemTypeIcon(item.type, colors.primary), /*#__PURE__*/_jsxs(View, {
-          style: {
-            flex: 1
-          },
-          children: [/*#__PURE__*/_jsxs(Text, {
-            style: {
-              fontWeight: '600',
-              color: colors.text,
-              fontSize: 16
-            },
-            children: [item.type === 'product' && item.quantity ? `${item.quantity} × ` : '', item.name, item.type === 'subscription' && item.period ? ` (${item.period})` : '']
-          }), item.description ? /*#__PURE__*/_jsx(Text, {
-            style: {
-              color: colors.secondaryText,
-              fontSize: 13,
-              marginTop: 2
-            },
-            children: item.description
-          }) : null]
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: {
-            color: colors.text,
-            fontWeight: '600',
-            fontSize: 16,
-            marginLeft: 8
-          },
-          children: [item.currency ? CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency : currencySymbol, " ", item.price * (item.quantity ?? 1)]
-        })]
-      }, idx)) : /*#__PURE__*/_jsx(Text, {
-        style: {
-          color: colors.text
-        },
-        children: description
-      }), /*#__PURE__*/_jsx(GroupedPillButtons, {
-        buttons: [{
-          text: 'Close',
-          onPress: handleClose,
-          icon: 'close',
-          variant: 'transparent'
-        }, {
-          text: 'Continue',
-          onPress: nextStep,
-          icon: 'arrow-forward',
-          variant: 'primary'
-        }],
-        colors: colors
+        style: styles.sectionTitle,
+        children: "Payment Summary"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.summaryCard,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.summaryCardContent,
+          children: [/*#__PURE__*/_jsx(Ionicons, {
+            name: "receipt-outline",
+            size: 64,
+            color: colors.primary,
+            style: styles.summaryCardIcon
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.summaryCardMainTitle,
+            children: paymentItems && paymentItems.length > 0 ? 'Order Summary' : 'Payment'
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.summaryCardSubtitle,
+            children: paymentItems && paymentItems.length > 0 ? 'Review your payment details' : 'Complete your payment'
+          }), paymentItems && paymentItems.length > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.summaryCardItems,
+              children: /*#__PURE__*/_jsx(GroupedSection, {
+                items: paymentItems.map((item, idx) => ({
+                  id: `item-${idx}`,
+                  icon: getItemTypeIcon(item.type, colors.primary).props.name,
+                  iconColor: colors.primary,
+                  title: `${item.type === 'product' && item.quantity ? `${item.quantity} × ` : ''}${item.name}${item.type === 'subscription' && item.period ? ` (${item.period})` : ''}`,
+                  subtitle: item.description || `${item.currency ? CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency : currencySymbol} ${item.price * (item.quantity ?? 1)}`,
+                  customContent: /*#__PURE__*/_jsxs(Text, {
+                    style: styles.summaryItemPrice,
+                    children: [item.currency ? CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency : currencySymbol, " ", item.price * (item.quantity ?? 1)]
+                  })
+                })),
+                theme: theme
+              })
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.summaryCardDivider
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.summaryCardTotalSection,
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.summaryCardTotalRow,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.summaryCardTotalLabel,
+                  children: "Subtotal"
+                }), /*#__PURE__*/_jsxs(Text, {
+                  style: styles.summaryCardTotalValue,
+                  children: [currencySymbol, " ", amount]
+                })]
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.summaryCardTotalRow,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.summaryCardTotalLabel,
+                  children: "Tax"
+                }), /*#__PURE__*/_jsxs(Text, {
+                  style: styles.summaryCardTotalValue,
+                  children: [currencySymbol, " 0.00"]
+                })]
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.summaryCardTotalRow,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.summaryCardTotalLabel,
+                  children: "Total"
+                }), /*#__PURE__*/_jsxs(Text, {
+                  style: styles.summaryCardTotalValue,
+                  children: [currencySymbol, " ", amount]
+                })]
+              })]
+            })]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.summaryCardAmount,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.summaryCardAmountLabel,
+                children: "Amount to Pay"
+              }), /*#__PURE__*/_jsxs(Text, {
+                style: styles.summaryCardAmountValue,
+                children: [currencySymbol, " ", amount]
+              }), description && /*#__PURE__*/_jsx(Text, {
+                style: styles.summaryCardAmountDescription,
+                children: description
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.summaryCardDivider
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.summaryCardTotalSection,
+              children: /*#__PURE__*/_jsxs(View, {
+                style: styles.summaryCardTotalRow,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.summaryCardTotalLabel,
+                  children: "Total"
+                }), /*#__PURE__*/_jsxs(Text, {
+                  style: styles.summaryCardTotalValue,
+                  children: [currencySymbol, " ", amount]
+                })]
+              })
+            })]
+          })]
+        })
       })]
-    })
+    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
+      buttons: [{
+        text: 'Close',
+        onPress: handleClose,
+        icon: 'close',
+        variant: 'transparent'
+      }, {
+        text: 'Continue',
+        onPress: nextStep,
+        icon: 'arrow-forward',
+        variant: 'primary'
+      }],
+      colors: colors
+    })]
   });
 
   // Step 2: Choose Payment Method (now the second step, no header/dots here)
@@ -612,38 +534,27 @@ const PaymentGatewayScreen = props => {
         scale: scaleAnim
       }]
     }],
-    children: [/*#__PURE__*/_jsx(Card, {
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.circleListContainer,
-        children: availablePaymentMethods.map(method => {
-          const isSelected = paymentMethod === method.key;
-          return /*#__PURE__*/_jsxs(TouchableOpacity, {
-            onPress: () => setPaymentMethod(method.key),
-            activeOpacity: 0.85,
-            style: [styles.circleMethod, isSelected && styles.circleMethodSelected],
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.circleIconWrapper,
-              children: [method.key === 'faircoin' ? /*#__PURE__*/_jsx(FAIRWalletIcon, {
-                size: 28
-              }) : /*#__PURE__*/_jsx(Ionicons, {
-                name: method.icon,
-                size: 28,
-                color: isSelected ? colors.primary : colors.text
-              }), isSelected && /*#__PURE__*/_jsx(View, {
-                style: styles.circleCheckOverlay,
-                children: /*#__PURE__*/_jsx(Ionicons, {
-                  name: "checkmark-circle",
-                  size: 28,
-                  color: colors.primary
-                })
-              })]
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.circleLabel, isSelected && styles.circleLabelSelected],
-              children: method.label
-            })]
-          }, method.key);
-        })
-      })
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionTitle,
+        children: "Choose Payment Method"
+      }), /*#__PURE__*/_jsx(GroupedSection, {
+        items: availablePaymentMethods.map(method => ({
+          id: method.key,
+          icon: method.key === 'faircoin' ? undefined : method.icon,
+          iconColor: method.key === 'card' ? '#007AFF' : method.key === 'oxy' ? '#32D74B' : method.key === 'faircoin' ? '#9ffb50' : colors.primary,
+          title: method.label,
+          subtitle: method.description,
+          onPress: () => setPaymentMethod(method.key),
+          selected: paymentMethod === method.key,
+          showChevron: false,
+          customIcon: method.key === 'faircoin' ? /*#__PURE__*/_jsx(FAIRWalletIcon, {
+            size: 20
+          }) : undefined
+        })),
+        theme: theme
+      })]
     }), /*#__PURE__*/_jsx(GroupedPillButtons, {
       buttons: [{
         text: 'Back',
@@ -670,226 +581,235 @@ const PaymentGatewayScreen = props => {
         scale: scaleAnim
       }]
     }],
-    children: [/*#__PURE__*/_jsxs(Card, {
-      style: paymentMethod === 'faircoin' ? {
-        backgroundColor: '#f6fff0',
-        paddingVertical: 24,
-        paddingHorizontal: 0
-      } : undefined,
-      children: [paymentMethod === 'card' && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.cardRowInfo,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionTitle,
+        children: paymentMethod === 'card' ? 'Card Details' : paymentMethod === 'oxy' ? 'Oxy Pay' : paymentMethod === 'faircoin' ? 'FairCoin Payment' : 'Payment Details'
+      }), paymentMethod === 'card' && /*#__PURE__*/_jsx(View, {
+        style: styles.cardPaymentCard,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.cardPaymentContent,
           children: [/*#__PURE__*/_jsx(Ionicons, {
             name: "card-outline",
-            size: 24,
+            size: 64,
             color: colors.primary,
-            style: styles.cardRowIcon
+            style: styles.cardPaymentIcon
           }), /*#__PURE__*/_jsx(Text, {
-            style: styles.cardRowText,
-            children: "We accept Visa, Mastercard, and more"
-          })]
-        }), /*#__PURE__*/_jsx(TextField, {
-          value: cardDetails.number,
-          onChangeText: text => setCardDetails({
-            ...cardDetails,
-            number: text
-          }),
-          placeholder: "Card Number",
-          keyboardType: "numeric",
-          containerStyle: styles.cardFieldContainer,
-          leftComponent: /*#__PURE__*/_jsx(Ionicons, {
-            name: "card-outline",
-            size: 18,
-            color: colors.primary
-          })
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.cardFieldRow,
-          children: [/*#__PURE__*/_jsx(TextField, {
-            value: cardDetails.expiry,
-            onChangeText: text => setCardDetails({
-              ...cardDetails,
-              expiry: text
-            }),
-            placeholder: "MM/YY",
-            containerStyle: styles.cardFieldHalfLeft,
-            leftComponent: /*#__PURE__*/_jsx(Ionicons, {
-              name: "calendar-outline",
-              size: 16,
-              color: colors.primary
-            })
-          }), /*#__PURE__*/_jsx(TextField, {
-            value: cardDetails.cvv,
-            onChangeText: text => setCardDetails({
-              ...cardDetails,
-              cvv: text
-            }),
-            placeholder: "CVV",
-            keyboardType: "numeric",
-            containerStyle: styles.cardFieldHalfRight,
-            leftComponent: /*#__PURE__*/_jsx(Ionicons, {
-              name: "lock-closed-outline",
-              size: 16,
-              color: colors.primary
-            })
-          })]
-        })]
-      }), paymentMethod === 'oxy' && /*#__PURE__*/_jsxs(View, {
-        style: styles.oxyPayContainer,
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "wallet-outline",
-          size: 48,
-          color: colors.primary,
-          style: styles.oxyPayIcon
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.oxyPayTitle,
-          children: "Pay with Oxy Pay"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.oxyPaySubtitle,
-          children: "(Oxy Pay is your in-app wallet. Make sure you have enough balance.)"
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.oxyPayBalanceBox,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.oxyPayBalanceText,
-            children: "Balance: \u229C 123.45"
-          })
-        })]
-      }), paymentMethod === 'faircoin' && /*#__PURE__*/_jsxs(View, {
-        style: {
-          alignItems: 'center',
-          width: '100%'
-        },
-        children: [/*#__PURE__*/_jsx(FAIRWalletIcon, {
-          size: 64,
-          style: [styles.faircoinIcon, {
-            shadowColor: '#1b1f0a',
-            shadowOpacity: 0.18,
-            shadowRadius: 12,
-            elevation: 6,
-            marginBottom: 12
-          }]
-        }), /*#__PURE__*/_jsx(Text, {
-          style: {
-            fontFamily: fontFamilies.phuduBold,
-            fontWeight: 'bold',
-            fontSize: 28,
-            color: '#1b1f0a',
-            marginBottom: 2,
-            textAlign: 'center',
-            letterSpacing: 0.5
-          },
-          children: "FAIRWallet"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: {
-            color: '#1b1f0a',
-            fontWeight: '700',
-            fontSize: 17,
-            marginBottom: 18,
-            textAlign: 'center',
-            letterSpacing: 0.2
-          },
-          children: "Pay with FairCoin"
-        }), !isMobile ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: {
-              color: '#1b1f0a',
-              fontWeight: '600',
-              fontSize: 15,
-              marginBottom: 8
-            },
-            children: "Scan to Pay"
+            style: styles.cardPaymentMainTitle,
+            children: "Credit Card"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.cardPaymentSubtitle,
+            children: "Enter your card details securely"
           }), /*#__PURE__*/_jsxs(View, {
-            style: [styles.faircoinQRBox, {
-              width: qrSize,
-              height: qrSize,
-              borderColor: '#9ffb50',
-              borderWidth: 3,
-              position: 'relative',
-              backgroundColor: '#fff',
-              boxShadow: '0 2px 12px #9ffb5040',
-              justifyContent: 'center',
-              alignItems: 'center'
-            }],
-            children: [/*#__PURE__*/_jsx(QRCode, {
-              value: faircoinAddress,
-              size: qrSize - 32
-            }), /*#__PURE__*/_jsx(View, {
-              style: {
-                position: 'absolute',
-                bottom: 8,
-                right: 8
+            style: styles.cardPaymentFields,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.cardRowInfo,
+              children: [/*#__PURE__*/_jsx(Ionicons, {
+                name: "card-outline",
+                size: 24,
+                color: colors.primary,
+                style: styles.cardRowIcon
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.cardRowText,
+                children: "We accept Visa, Mastercard, and more"
+              })]
+            }), /*#__PURE__*/_jsx(TextField, {
+              value: cardDetails.number,
+              onChangeText: text => {
+                // Format card number with spaces
+                const formatted = text.replace(/\s/g, '').replace(/(\d{4})/g, '$1 ').trim();
+                setCardDetails({
+                  ...cardDetails,
+                  number: formatted
+                });
               },
-              children: /*#__PURE__*/_jsx(FAIRWalletIcon, {
-                size: 28
+              placeholder: "1234 5678 9012 3456",
+              keyboardType: "numeric",
+              maxLength: 19,
+              style: styles.cardFieldContainer,
+              leading: /*#__PURE__*/_jsx(Ionicons, {
+                name: "card-outline",
+                size: 18,
+                color: colors.primary
               })
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.cardFieldRow,
+              children: [/*#__PURE__*/_jsx(TextField, {
+                value: cardDetails.expiry,
+                onChangeText: text => {
+                  // Format expiry date
+                  const formatted = text.replace(/\D/g, '').replace(/(\d{2})(\d)/, '$1/$2');
+                  setCardDetails({
+                    ...cardDetails,
+                    expiry: formatted
+                  });
+                },
+                placeholder: "MM/YY",
+                maxLength: 5,
+                style: styles.cardFieldHalfLeft,
+                leading: /*#__PURE__*/_jsx(Ionicons, {
+                  name: "calendar-outline",
+                  size: 16,
+                  color: colors.primary
+                })
+              }), /*#__PURE__*/_jsx(TextField, {
+                value: cardDetails.cvv,
+                onChangeText: text => {
+                  // Only allow numbers
+                  const formatted = text.replace(/\D/g, '');
+                  setCardDetails({
+                    ...cardDetails,
+                    cvv: formatted
+                  });
+                },
+                placeholder: "123",
+                keyboardType: "numeric",
+                maxLength: 4,
+                style: styles.cardFieldHalfRight,
+                leading: /*#__PURE__*/_jsx(Ionicons, {
+                  name: "lock-closed-outline",
+                  size: 16,
+                  color: colors.primary
+                })
+              })]
             })]
+          }), /*#__PURE__*/_jsx(View, {
+            style: {
+              height: 18
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.cardPaymentWaiting,
+            children: "Ready to process payment..."
           })]
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.faircoinTitle,
-            children: "Use the options below to pay with FAIRWallet"
+        })
+      }), paymentMethod === 'oxy' && /*#__PURE__*/_jsx(View, {
+        style: styles.oxyPayCard,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.oxyPayContent,
+          children: [/*#__PURE__*/_jsx(Ionicons, {
+            name: "wallet-outline",
+            size: 64,
+            color: colors.primary,
+            style: styles.oxyPayIcon
           }), /*#__PURE__*/_jsx(Text, {
-            style: styles.faircoinAddress,
-            children: faircoinAddress
-          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: [styles.faircoinButton, {
-              backgroundColor: '#9ffb50',
-              borderRadius: 18,
-              marginTop: 12,
-              width: '90%',
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center'
-            }],
-            onPress: handleOpenFairWallet,
-            children: [/*#__PURE__*/_jsx(FAIRWalletIcon, {
-              size: 20,
-              style: {
-                marginRight: 8
-              }
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.faircoinButtonText, {
-                color: '#1b1f0a',
-                fontWeight: 'bold',
-                fontSize: 16
-              }],
-              children: "Open in FAIRWallet"
+            style: styles.oxyPayMainTitle,
+            children: "Oxy Pay"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.oxyPaySubtitle,
+            children: "Pay with your in-app wallet"
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.oxyPayBalanceBox,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.oxyPayBalanceText,
+              children: "Balance: \u229C 123.45"
+            })
+          }), /*#__PURE__*/_jsx(View, {
+            style: {
+              height: 18
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.oxyPayWaiting,
+            children: "Ready to process payment..."
+          })]
+        })
+      }), paymentMethod === 'faircoin' && /*#__PURE__*/_jsx(View, {
+        style: styles.faircoinCard,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.faircoinContent,
+          children: [/*#__PURE__*/_jsx(FAIRWalletIcon, {
+            size: 64,
+            style: styles.faircoinIcon
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.faircoinMainTitle,
+            children: "FAIRWallet"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.faircoinSubtitle,
+            children: "Pay with FairCoin"
+          }), !isMobile ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.faircoinScanText,
+              children: "Scan to Pay"
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.faircoinQRCard,
+              children: [/*#__PURE__*/_jsx(QRCode, {
+                value: faircoinAddress,
+                size: qrSize - 32
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.faircoinQRBadge,
+                children: /*#__PURE__*/_jsx(FAIRWalletIcon, {
+                  size: 28
+                })
+              })]
             })]
-          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: [styles.faircoinButton, {
-              backgroundColor: '#9ffb50',
-              borderRadius: 18,
-              marginTop: 10,
-              width: '90%',
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center'
-            }],
-            onPress: handleCopyAddress,
-            children: [/*#__PURE__*/_jsx(FAIRWalletIcon, {
-              size: 20,
-              style: {
-                marginRight: 8
-              }
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.faircoinTitle,
+              children: "Use the options below to pay with FAIRWallet"
             }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.faircoinButtonText, {
-                color: '#1b1f0a',
-                fontWeight: 'bold',
-                fontSize: 16
+              style: styles.faircoinAddress,
+              children: faircoinAddress
+            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: [styles.faircoinButton, {
+                backgroundColor: '#9ffb50',
+                borderRadius: 18,
+                marginTop: 12,
+                width: '90%',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center'
+              }],
+              onPress: handleOpenFairWallet,
+              children: [/*#__PURE__*/_jsx(FAIRWalletIcon, {
+                size: 20,
+                style: {
+                  marginRight: 8
+                }
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.faircoinButtonText, {
+                  color: '#1b1f0a',
+                  fontWeight: 'bold',
+                  fontSize: 16
+                }],
+                children: "Open in FAIRWallet"
+              })]
+            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: [styles.faircoinButton, {
+                backgroundColor: '#9ffb50',
+                borderRadius: 18,
+                marginTop: 10,
+                width: '90%',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center'
               }],
-              children: "Copy Address"
+              onPress: handleCopyAddress,
+              children: [/*#__PURE__*/_jsx(FAIRWalletIcon, {
+                size: 20,
+                style: {
+                  marginRight: 8
+                }
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.faircoinButtonText, {
+                  color: '#1b1f0a',
+                  fontWeight: 'bold',
+                  fontSize: 16
+                }],
+                children: "Copy Address"
+              })]
             })]
+          }), /*#__PURE__*/_jsx(View, {
+            style: {
+              height: 18
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.faircoinWaiting,
+            children: "Waiting for payment..."
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.faircoinPlaceholder,
+            children: "(This is a placeholder. Integrate with a QR code generator for production.)"
           })]
-        }), /*#__PURE__*/_jsx(View, {
-          style: {
-            height: 18
-          }
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.faircoinWaiting,
-          children: "Waiting for payment..."
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.faircoinPlaceholder,
-          children: "(This is a placeholder. Integrate with a QR code generator for production.)"
-        })]
+        })
       })]
     }), /*#__PURE__*/_jsx(GroupedPillButtons, {
       buttons: [{
@@ -918,71 +838,50 @@ const PaymentGatewayScreen = props => {
         scale: scaleAnim
       }]
     }],
-    children: [/*#__PURE__*/_jsxs(Card, {
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.reviewSecureRow,
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "shield-checkmark",
-          size: 20,
-          color: colors.success || '#4BB543',
-          style: styles.reviewSecureIcon
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.reviewSecureText,
-          children: "Secure payment"
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.reviewRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.reviewLabel,
-          children: "Amount"
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: styles.reviewValue,
-          children: [currencySymbol, " ", amount]
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.reviewRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.reviewLabel,
-          children: "Method"
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.reviewMethodRow,
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: PAYMENT_METHODS.find(m => m.key === paymentMethod)?.icon,
-            size: 18,
-            color: colors.primary,
-            style: styles.reviewMethodIcon
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.reviewMethodText,
-            children: PAYMENT_METHODS.find(m => m.key === paymentMethod)?.label
-          })]
-        })]
-      }), paymentMethod === 'card' && /*#__PURE__*/_jsxs(View, {
-        style: styles.reviewRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.reviewLabel,
-          children: "Card"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.reviewValue,
-          children: cardDetails.number.replace(/.(?=.{4})/g, '*')
-        })]
-      }), paymentMethod === 'oxy' && /*#__PURE__*/_jsxs(View, {
-        style: styles.reviewRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.reviewLabel,
-          children: "Oxy Pay Account"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.reviewValue,
-          children: "Balance: \u229C 123.45"
-        })]
-      }), paymentMethod === 'faircoin' && /*#__PURE__*/_jsxs(View, {
-        style: styles.reviewRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.reviewLabel,
-          children: "FairCoin Wallet"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.reviewValue,
-          children: "Paid via QR"
-        })]
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionTitle,
+        children: "Review Payment"
+      }), /*#__PURE__*/_jsx(GroupedSection, {
+        items: [{
+          id: 'secure-payment',
+          icon: 'shield-checkmark',
+          iconColor: colors.success || '#4BB543',
+          title: 'Secure payment',
+          subtitle: 'Your payment is protected by industry-standard encryption'
+        }, {
+          id: 'amount',
+          icon: 'cash',
+          iconColor: colors.primary,
+          title: 'Amount',
+          subtitle: `${currencySymbol} ${amount}`
+        }, {
+          id: 'payment-method',
+          icon: PAYMENT_METHODS.find(m => m.key === paymentMethod)?.icon,
+          iconColor: colors.primary,
+          title: 'Payment Method',
+          subtitle: PAYMENT_METHODS.find(m => m.key === paymentMethod)?.label
+        }, ...(paymentMethod === 'card' ? [{
+          id: 'card-details',
+          icon: 'card',
+          iconColor: colors.primary,
+          title: 'Card',
+          subtitle: cardDetails.number.replace(/.(?=.{4})/g, '*')
+        }] : []), ...(paymentMethod === 'oxy' ? [{
+          id: 'oxy-balance',
+          icon: 'wallet',
+          iconColor: colors.primary,
+          title: 'Oxy Pay Account',
+          subtitle: 'Balance: ⊜ 123.45'
+        }] : []), ...(paymentMethod === 'faircoin' ? [{
+          id: 'faircoin-wallet',
+          icon: 'qr-code',
+          iconColor: colors.primary,
+          title: 'FairCoin Wallet',
+          subtitle: 'Paid via QR'
+        }] : [])],
+        theme: theme
       })]
     }), /*#__PURE__*/_jsx(GroupedPillButtons, {
       buttons: [{
@@ -1012,20 +911,34 @@ const PaymentGatewayScreen = props => {
       }]
     }],
     children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.successContainer,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.successIconBox,
-        children: /*#__PURE__*/_jsx(Ionicons, {
-          name: "checkmark-circle",
-          size: 64,
-          color: colors.success || '#4BB543'
+      style: styles.section,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionTitle,
+        children: "Payment Complete"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.successCard,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.successContent,
+          children: [/*#__PURE__*/_jsx(Ionicons, {
+            name: "checkmark-circle",
+            size: 64,
+            color: colors.success || '#4BB543',
+            style: styles.successIcon
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.successMainTitle,
+            children: "Payment Successful!"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.successSubtitle,
+            children: "Thank you for your payment."
+          }), /*#__PURE__*/_jsx(View, {
+            style: {
+              height: 18
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.successMessage,
+            children: "Your transaction has been processed successfully."
+          })]
         })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.successTitle,
-        children: "Payment Successful!"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.successSubtitle,
-        children: "Thank you for your payment."
       })]
     }), /*#__PURE__*/_jsx(GroupedPillButtons, {
       buttons: [{
@@ -1048,44 +961,40 @@ const PaymentGatewayScreen = props => {
         scale: scaleAnim
       }]
     }],
-    children: [/*#__PURE__*/_jsxs(Card, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.section,
       children: [/*#__PURE__*/_jsx(Text, {
-        style: {
-          color: colors.text,
-          fontWeight: '600',
-          fontSize: 16,
-          marginBottom: 12
-        },
-        children: "Select a product to purchase:"
-      }), iapLoading && /*#__PURE__*/_jsx(Text, {
-        style: {
-          color: colors.secondaryText
-        },
-        children: "Loading products..."
-      }), iapError && /*#__PURE__*/_jsx(Text, {
-        style: {
-          color: 'red'
-        },
-        children: iapError
-      }), iapProducts.map(product => /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.paymentMethodButton, {
-          marginBottom: 8
-        }],
-        onPress: () => handleIapBuy(product.productId),
-        disabled: iapLoading,
-        children: /*#__PURE__*/_jsxs(Text, {
-          style: {
-            color: colors.text,
-            fontSize: 16
-          },
-          children: [product.title, " - ", product.localizedPrice]
+        style: styles.sectionTitle,
+        children: "Google Play Products"
+      }), iapLoading && /*#__PURE__*/_jsx(View, {
+        style: styles.loadingContainer,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.loadingText,
+          children: "Loading products..."
+        })
+      }), iapError && /*#__PURE__*/_jsx(View, {
+        style: styles.paymentErrorContainer,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.paymentErrorText,
+          children: iapError
+        })
+      }), !iapLoading && !iapError && /*#__PURE__*/_jsx(GroupedSection, {
+        items: iapProducts.map(product => ({
+          id: product.productId,
+          icon: 'pricetag',
+          iconColor: colors.primary,
+          title: product.title,
+          subtitle: product.localizedPrice,
+          onPress: () => handleIapBuy(product.productId),
+          disabled: iapLoading
+        })),
+        theme: theme
+      }), iapPurchase && /*#__PURE__*/_jsx(View, {
+        style: styles.iapSuccessContainer,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.iapSuccessText,
+          children: "Purchase successful!"
         })
-      }, product.productId)), iapPurchase && /*#__PURE__*/_jsx(Text, {
-        style: {
-          color: colors.success,
-          marginTop: 10
-        },
-        children: "Purchase successful!"
       })]
     }), /*#__PURE__*/_jsx(GroupedPillButtons, {
       buttons: [{
@@ -1114,41 +1023,51 @@ const PaymentGatewayScreen = props => {
         return renderSummaryStep();
     }
   };
-  return /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
+
+  // Memoize theme-related calculations to prevent unnecessary recalculations
+  const themeStyles = useMemo(() => {
+    const isDarkTheme = theme === 'dark';
+    return {
+      isDarkTheme,
+      backgroundColor: isDarkTheme ? '#121212' : '#f2f2f2',
+      primaryColor: '#007AFF'
+    };
+  }, [theme]);
+  return /*#__PURE__*/_jsx(View, {
     style: [styles.container, {
-      backgroundColor: colors.background
+      backgroundColor: themeStyles.backgroundColor
     }],
-    behavior: Platform.OS === 'ios' ? 'padding' : 'height',
-    children: [/*#__PURE__*/_jsx(StatusBar, {
-      barStyle: theme === 'dark' ? 'light-content' : 'dark-content',
-      backgroundColor: colors.background
-    }), /*#__PURE__*/_jsx(PaymentGatewayHeader, {
-      currentStep: currentStep,
-      totalSteps: 5,
-      title: stepTitles[currentStep]
-    }), /*#__PURE__*/_jsx(ScrollView, {
-      contentContainerStyle: styles.scrollContent,
+    children: /*#__PURE__*/_jsx(ScrollView, {
+      style: styles.content,
       showsVerticalScrollIndicator: false,
-      keyboardShouldPersistTaps: "handled",
       children: renderCurrentStep()
-    })]
+    })
   });
 };
 const createStyles = (colors, theme) => StyleSheet.create({
   container: {
     flex: 1
   },
-  scrollContent: {
-    flexGrow: 1,
-    paddingHorizontal: 24,
-    paddingBottom: 20
+  content: {
+    flex: 1,
+    padding: 16
   },
   stepContainer: {
-    flex: 1,
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
     width: '100%'
   },
+  section: {
+    marginBottom: 24,
+    width: '100%'
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: colors.text,
+    marginBottom: 12,
+    fontFamily: fontFamilies.phuduSemiBold
+  },
   stepIndicatorContainer: {
     flexDirection: 'row',
     justifyContent: 'center',
@@ -1181,30 +1100,6 @@ const createStyles = (colors, theme) => StyleSheet.create({
     color: colors.text,
     letterSpacing: -0.5
   },
-  headerWrapper: {
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    gap: 8,
-    paddingVertical: 8
-  },
-  card: {
-    backgroundColor: '#fff',
-    borderRadius: 20,
-    padding: 28,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.08,
-    shadowRadius: 8,
-    elevation: 3,
-    marginVertical: 8,
-    width: '100%',
-    alignSelf: 'center'
-  },
   paymentMethodButton: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -1316,6 +1211,33 @@ const createStyles = (colors, theme) => StyleSheet.create({
     color: colors.primary,
     fontWeight: '600'
   },
+  oxyPayCard: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 24,
+    marginBottom: 24,
+    alignItems: 'center',
+    width: '100%'
+  },
+  oxyPayContent: {
+    alignItems: 'center',
+    width: '100%'
+  },
+  oxyPayMainTitle: {
+    fontFamily: fontFamilies.phuduBold,
+    fontWeight: 'bold',
+    fontSize: 28,
+    color: colors.text,
+    marginBottom: 2,
+    textAlign: 'center',
+    letterSpacing: 0.5
+  },
+  oxyPayWaiting: {
+    fontSize: 14,
+    color: colors.secondaryText,
+    textAlign: 'center',
+    marginBottom: 8
+  },
   faircoinContainer: {
     alignItems: 'center',
     marginBottom: 24,
@@ -1324,6 +1246,66 @@ const createStyles = (colors, theme) => StyleSheet.create({
   faircoinIcon: {
     marginBottom: 8
   },
+  faircoinMainTitle: {
+    fontFamily: fontFamilies.phuduBold,
+    fontWeight: 'bold',
+    fontSize: 28,
+    color: '#1b1f0a',
+    marginBottom: 2,
+    textAlign: 'center',
+    letterSpacing: 0.5
+  },
+  faircoinSubtitle: {
+    color: '#1b1f0a',
+    fontWeight: '700',
+    fontSize: 17,
+    marginBottom: 18,
+    textAlign: 'center',
+    letterSpacing: 0.2
+  },
+  faircoinScanText: {
+    color: '#1b1f0a',
+    fontWeight: '600',
+    fontSize: 15,
+    marginBottom: 8
+  },
+  faircoinQRCard: {
+    width: 200,
+    height: 200,
+    backgroundColor: '#fff',
+    borderRadius: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+    padding: 16,
+    borderWidth: 3,
+    borderColor: '#9ffb50',
+    shadowColor: '#9ffb50',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 8,
+    position: 'relative'
+  },
+  faircoinQRBadge: {
+    position: 'absolute',
+    bottom: 12,
+    right: 12,
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 4,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2
+  },
   faircoinTitle: {
     fontSize: 16,
     marginBottom: 8,
@@ -1356,66 +1338,41 @@ const createStyles = (colors, theme) => StyleSheet.create({
     color: colors.secondaryText,
     textAlign: 'center'
   },
-  reviewSecureRow: {
-    flexDirection: 'row',
+  faircoinCard: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 24,
+    marginBottom: 24,
     alignItems: 'center',
-    marginBottom: 12
-  },
-  reviewSecureIcon: {
-    marginRight: 8
-  },
-  reviewSecureText: {
-    color: colors.success || '#4BB543',
-    fontWeight: '600',
-    fontSize: 15
+    width: '100%'
   },
-  reviewRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+  faircoinContent: {
     alignItems: 'center',
-    marginBottom: 8
-  },
-  reviewLabel: {
-    fontSize: 15,
-    color: colors.secondaryText
-  },
-  reviewValue: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: colors.text
-  },
-  reviewMethodRow: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  reviewMethodIcon: {
-    marginRight: 6
-  },
-  reviewMethodText: {
-    fontSize: 16,
-    color: colors.text
+    width: '100%'
   },
-  successContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
+  successCard: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 24,
     marginBottom: 24,
+    alignItems: 'center',
     width: '100%'
   },
-  successIconBox: {
-    backgroundColor: colors.success + '22',
-    borderRadius: 48,
-    padding: 18,
-    marginBottom: 12,
+  successContent: {
     alignItems: 'center',
-    justifyContent: 'center'
+    width: '100%'
   },
-  successTitle: {
-    fontSize: 26,
-    fontWeight: '700',
+  successIcon: {
+    marginBottom: 8
+  },
+  successMainTitle: {
+    fontFamily: fontFamilies.phuduBold,
+    fontWeight: 'bold',
+    fontSize: 28,
     color: colors.success || '#4BB543',
-    marginBottom: 8,
+    marginBottom: 2,
     textAlign: 'center',
-    width: '100%'
+    letterSpacing: 0.5
   },
   successSubtitle: {
     fontSize: 16,
@@ -1424,6 +1381,12 @@ const createStyles = (colors, theme) => StyleSheet.create({
     marginBottom: 8,
     width: '100%'
   },
+  successMessage: {
+    fontSize: 14,
+    color: colors.secondaryText,
+    textAlign: 'center',
+    marginBottom: 8
+  },
   methodCard: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -1540,15 +1503,6 @@ const createStyles = (colors, theme) => StyleSheet.create({
     minHeight: 36,
     marginBottom: 2
   },
-  circleCheckOverlay: {
-    position: 'absolute',
-    bottom: -8,
-    right: -8,
-    backgroundColor: '#fff',
-    borderRadius: 16,
-    padding: 0,
-    zIndex: 2
-  },
   headerStepIndicatorContainer: {
     marginVertical: 2,
     flexDirection: 'row',
@@ -1577,6 +1531,210 @@ const createStyles = (colors, theme) => StyleSheet.create({
     textAlign: 'center',
     marginTop: 6,
     marginBottom: 2
+  },
+  // Google Play step styles
+  loadingContainer: {
+    padding: 16,
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    marginBottom: 16
+  },
+  loadingText: {
+    color: colors.secondaryText,
+    fontSize: 16,
+    fontStyle: 'italic'
+  },
+  paymentErrorContainer: {
+    padding: 16,
+    backgroundColor: '#ffebee',
+    borderRadius: 12,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: '#ffcdd2'
+  },
+  paymentErrorText: {
+    color: '#d32f2f',
+    fontSize: 14,
+    textAlign: 'center'
+  },
+  iapSuccessContainer: {
+    padding: 16,
+    backgroundColor: '#e8f5e8',
+    borderRadius: 12,
+    marginTop: 16,
+    borderWidth: 1,
+    borderColor: '#c8e6c9'
+  },
+  iapSuccessText: {
+    color: colors.success || '#4BB543',
+    fontSize: 16,
+    textAlign: 'center',
+    fontWeight: '600'
+  },
+  // Summary step styles
+  summaryDescriptionContainer: {
+    marginBottom: 16
+  },
+  summaryDescriptionText: {
+    color: colors.secondaryText,
+    fontSize: 15,
+    lineHeight: 20
+  },
+  summaryItemPrice: {
+    color: colors.text,
+    fontWeight: '600',
+    fontSize: 16
+  },
+  summaryFallbackContainer: {
+    padding: 16,
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: colors.border
+  },
+  summaryFallbackText: {
+    color: colors.text,
+    fontSize: 16,
+    textAlign: 'center'
+  },
+  // Card payment styles
+  cardPaymentCard: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 24,
+    marginBottom: 24,
+    alignItems: 'center',
+    width: '100%'
+  },
+  cardPaymentContent: {
+    alignItems: 'center',
+    width: '100%'
+  },
+  cardPaymentIcon: {
+    marginBottom: 8
+  },
+  cardPaymentMainTitle: {
+    fontFamily: fontFamilies.phuduBold,
+    fontWeight: 'bold',
+    fontSize: 28,
+    color: colors.text,
+    marginBottom: 2,
+    textAlign: 'center',
+    letterSpacing: 0.5
+  },
+  cardPaymentSubtitle: {
+    fontSize: 16,
+    color: colors.secondaryText,
+    textAlign: 'center',
+    marginBottom: 24,
+    width: '100%'
+  },
+  cardPaymentFields: {
+    width: '100%',
+    marginBottom: 16
+  },
+  cardPaymentWaiting: {
+    fontSize: 14,
+    color: colors.secondaryText,
+    textAlign: 'center',
+    marginBottom: 8
+  },
+  // Summary card styles
+  summaryCard: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 24,
+    marginBottom: 24,
+    alignItems: 'center',
+    width: '100%'
+  },
+  summaryCardContent: {
+    alignItems: 'center',
+    width: '100%'
+  },
+  summaryCardIcon: {
+    marginBottom: 8
+  },
+  summaryCardMainTitle: {
+    fontFamily: fontFamilies.phuduBold,
+    fontWeight: 'bold',
+    fontSize: 28,
+    color: colors.text,
+    marginBottom: 2,
+    textAlign: 'center',
+    letterSpacing: 0.5
+  },
+  summaryCardSubtitle: {
+    fontSize: 16,
+    color: colors.secondaryText,
+    textAlign: 'center',
+    marginBottom: 24,
+    width: '100%'
+  },
+  summaryCardItems: {
+    width: '100%',
+    marginBottom: 16
+  },
+  summaryCardTotal: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: colors.text,
+    textAlign: 'center',
+    marginBottom: 8
+  },
+  // Simple amount styles
+  summaryCardAmount: {
+    alignItems: 'center',
+    width: '100%',
+    marginBottom: 16
+  },
+  summaryCardAmountLabel: {
+    fontSize: 16,
+    color: colors.secondaryText,
+    textAlign: 'center',
+    marginBottom: 8
+  },
+  summaryCardAmountValue: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    color: colors.text,
+    textAlign: 'center',
+    marginBottom: 8,
+    fontFamily: fontFamilies.phuduBold
+  },
+  summaryCardAmountDescription: {
+    fontSize: 14,
+    color: colors.secondaryText,
+    textAlign: 'center',
+    lineHeight: 20
+  },
+  // Enhanced summary styles
+  summaryCardDivider: {
+    height: 1,
+    backgroundColor: colors.border,
+    marginVertical: 16,
+    width: '100%'
+  },
+  summaryCardTotalSection: {
+    width: '100%',
+    marginBottom: 8
+  },
+  summaryCardTotalRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 4
+  },
+  summaryCardTotalLabel: {
+    fontSize: 16,
+    color: colors.secondaryText,
+    fontWeight: '500'
+  },
+  summaryCardTotalValue: {
+    fontSize: 16,
+    color: colors.text,
+    fontWeight: '600'
   }
 });
 export default PaymentGatewayScreen;