@oxyhq/services 5.16.23 → 5.16.25

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

@@ -0,0 +1,1587 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _styles = require("../styles");
+var _themeUtils = require("../utils/themeUtils");
+var _GroupedPillButtons = _interopRequireDefault(require("../components/internal/GroupedPillButtons"));
+var _TextField = _interopRequireDefault(require("../components/TextField"));
+var _vectorIcons = require("@expo/vector-icons");
+var _icon = require("../components/icon");
+var _sonner = require("sonner");
+var _reactNativeQrcodeSvg = _interopRequireDefault(require("react-native-qrcode-svg"));
+var _components = require("../components");
+var _useThemeStyles = require("../hooks/useThemeStyles");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Restrict payment methods to Card, Oxy Pay, and FairCoin (QR)
+const PAYMENT_METHODS = [{
+  key: 'card',
+  label: 'Credit/Debit Card',
+  icon: 'card-outline',
+  description: 'Pay securely with your credit or debit card.'
+}, {
+  key: 'oxy',
+  label: 'Oxy Pay',
+  icon: 'wallet-outline',
+  description: 'Use your Oxy Pay in-app balance.'
+}, {
+  key: 'faircoin',
+  label: 'FAIRWallet',
+  icon: 'qr-code-outline',
+  description: 'Pay with FairCoin by scanning a QR code.'
+}];
+
+// Add PaymentItem type
+
+// Extend props to accept onPaymentResult, amount, and currency
+
+// Currency symbol map
+const CURRENCY_SYMBOLS = {
+  FAIR: '⊜',
+  INR: '₹',
+  USD: '$',
+  EUR: '€',
+  GBP: '£',
+  JPY: '¥',
+  CNY: '¥',
+  AUD: 'A$',
+  CAD: 'C$'
+  // Add more as needed
+};
+const CURRENCY_NAMES = {
+  FAIR: 'FairCoin',
+  INR: 'Indian Rupee',
+  USD: 'US Dollar',
+  EUR: 'Euro',
+  GBP: 'British Pound',
+  JPY: 'Japanese Yen',
+  CNY: 'Chinese Yuan',
+  AUD: 'Australian Dollar',
+  CAD: 'Canadian Dollar'
+  // Add more as needed
+};
+
+// Helper: icon for item type (Ionicons only)
+const getItemTypeIcon = (type, color) => {
+  switch (type) {
+    case 'product':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        name: "cart-outline",
+        size: 22,
+        color: color,
+        style: {
+          marginRight: 8
+        }
+      });
+    case 'subscription':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        name: "repeat-outline",
+        size: 22,
+        color: color,
+        style: {
+          marginRight: 8
+        }
+      });
+    case 'service':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        name: "construct-outline",
+        size: 22,
+        color: color,
+        style: {
+          marginRight: 8
+        }
+      });
+    case 'fee':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        name: "cash-outline",
+        size: 22,
+        color: color,
+        style: {
+          marginRight: 8
+        }
+      });
+    default:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        name: "pricetag-outline",
+        size: 22,
+        color: color,
+        style: {
+          marginRight: 8
+        }
+      });
+  }
+};
+
+// Helper to get unique item types (move to top-level, before component)
+const getUniqueItemTypes = items => {
+  const types = items.map(item => item.type);
+  return Array.from(new Set(types));
+};
+const PaymentGatewayScreen = props => {
+  const {
+    navigate,
+    goBack,
+    theme,
+    onPaymentResult,
+    amount,
+    currency = 'FAIR',
+    onClose,
+    paymentItems = [],
+    // NEW
+    description = '' // NEW
+  } = props;
+
+  // DEV ENFORCEMENT: Only allow one type of payment item
+  if (process.env.NODE_ENV !== 'production' && paymentItems.length > 0) {
+    const uniqueTypes = getUniqueItemTypes(paymentItems);
+    if (uniqueTypes.length > 1) {
+      throw new Error(`PaymentGatewayScreen: paymentItems contains mixed types (${uniqueTypes.join(', ')}). Only one type is allowed per payment.`);
+    }
+  }
+
+  // Step states
+  const [currentStep, setCurrentStep] = (0, _react.useState)(0);
+  const [paymentMethod, setPaymentMethod] = (0, _react.useState)('card');
+  const [cardDetails, setCardDetails] = (0, _react.useState)({
+    number: '',
+    expiry: '',
+    cvv: ''
+  });
+  const [upiId, setUpiId] = (0, _react.useState)('');
+  const [isPaying, setIsPaying] = (0, _react.useState)(false);
+  const [success, setSuccess] = (0, _react.useState)(false);
+
+  // Animations
+  const fadeAnim = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const scaleAnim = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const progressAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0.2)).current;
+  const normalizedTheme = (0, _themeUtils.normalizeTheme)(theme);
+  const colors = (0, _styles.useThemeColors)(normalizedTheme);
+  const commonStyles = (0, _styles.createCommonStyles)(normalizedTheme);
+  const styles = (0, _react.useMemo)(() => createStyles(colors, normalizedTheme), [colors, normalizedTheme]);
+
+  // Get symbol and name for currency
+  const currencySymbol = CURRENCY_SYMBOLS[currency.toUpperCase()] || currency;
+  const currencyName = CURRENCY_NAMES[currency.toUpperCase()] || currency;
+
+  // Calculate total from items if provided, else use amount
+  const computedTotal = (0, _react.useMemo)(() => {
+    if (paymentItems && paymentItems.length > 0) {
+      return paymentItems.reduce((sum, item) => {
+        const qty = item.quantity ?? 1;
+        return sum + item.price * qty;
+      }, 0);
+    }
+    return Number(amount) || 0;
+  }, [paymentItems, amount]);
+
+  // Determine if the payment is for a recurring item (subscription)
+  const isRecurring = paymentItems.length > 0 && paymentItems[0].type === 'subscription';
+
+  // Filter payment methods: remove 'faircoin' if recurring
+  const availablePaymentMethods = (0, _react.useMemo)(() => {
+    if (isRecurring) {
+      return PAYMENT_METHODS.filter(m => m.key !== 'faircoin');
+    }
+    return PAYMENT_METHODS;
+  }, [isRecurring]);
+
+  // Add after useState declarations
+  // Remove itemTypeError state, useEffect, and user-facing error in renderSummaryStep
+
+  // Helper to get unique item types
+  // Remove itemTypeError state, useEffect, and user-facing error in renderSummaryStep
+
+  // Validate item types on paymentItems change
+  // Remove itemTypeError state, useEffect, and user-facing error in renderSummaryStep
+
+  // Animation transitions
+  const animateTransition = (0, _react.useCallback)(nextStep => {
+    _reactNative.Animated.timing(scaleAnim, {
+      toValue: 0.95,
+      duration: 150,
+      useNativeDriver: _reactNative.Platform.OS !== 'web'
+    }).start();
+    _reactNative.Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: _reactNative.Platform.OS !== 'web'
+    }).start(() => {
+      setCurrentStep(nextStep);
+      slideAnim.setValue(-50);
+      scaleAnim.setValue(0.95);
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: _reactNative.Platform.OS !== 'web'
+      }), _reactNative.Animated.spring(slideAnim, {
+        toValue: 0,
+        tension: 80,
+        friction: 8,
+        useNativeDriver: _reactNative.Platform.OS !== 'web'
+      }), _reactNative.Animated.spring(scaleAnim, {
+        toValue: 1,
+        tension: 80,
+        friction: 8,
+        useNativeDriver: _reactNative.Platform.OS !== 'web'
+      })]).start();
+    });
+  }, []);
+  const nextStep = (0, _react.useCallback)(() => {
+    if (currentStep < 4) {
+      _reactNative.Animated.timing(progressAnim, {
+        toValue: (currentStep + 2) / 5,
+        duration: 300,
+        useNativeDriver: false
+      }).start();
+      animateTransition(currentStep + 1);
+    }
+  }, [currentStep, progressAnim, animateTransition]);
+  const prevStep = (0, _react.useCallback)(() => {
+    if (currentStep > 0) {
+      _reactNative.Animated.timing(progressAnim, {
+        toValue: currentStep / 5,
+        duration: 300,
+        useNativeDriver: false
+      }).start();
+      animateTransition(currentStep - 1);
+    }
+  }, [currentStep, progressAnim, animateTransition]);
+
+  // Dummy pay handler
+  const handlePay = (0, _react.useCallback)(() => {
+    setIsPaying(true);
+    setTimeout(() => {
+      setIsPaying(false);
+      setSuccess(true);
+      nextStep();
+    }, 1500);
+  }, [nextStep]);
+
+  // Success handler for Done button
+  const handleDone = (0, _react.useCallback)(() => {
+    if (onPaymentResult) {
+      onPaymentResult({
+        success: true
+      });
+    }
+    navigate?.('AccountOverview');
+  }, [onPaymentResult, navigate]);
+
+  // Handle close/cancel: return failure result if payment is not completed
+  const handleClose = (0, _react.useCallback)(() => {
+    if (onPaymentResult) {
+      onPaymentResult({
+        success: false,
+        error: 'cancelled'
+      });
+    }
+    if (onClose) {
+      onClose();
+    } else if (goBack) {
+      goBack();
+    }
+  }, [onPaymentResult, onClose, goBack]);
+
+  // Optionally, intercept goBack/onClose if user tries to close the screen
+  // (You may want to use useEffect to listen for unmount or navigation away)
+
+  // If amount is missing or invalid, show error
+  if (!amount || isNaN(Number(amount)) || Number(amount) <= 0) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.errorContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.errorText,
+        children: "Invalid or missing payment amount."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+        buttons: [{
+          text: 'Close',
+          onPress: handleClose,
+          icon: 'close',
+          variant: 'primary'
+        }],
+        colors: (0, _styles.useThemeColors)(normalizedTheme)
+      })]
+    });
+  }
+
+  // Example FairCoin address (replace with real one)
+  const faircoinAddress = 'f1abc1234FAIRCOINADDRESS';
+  const {
+    width: windowWidth
+  } = (0, _reactNative.useWindowDimensions)();
+  const isMobile = windowWidth < 600;
+  const qrSize = !isMobile ? Math.min(windowWidth * 0.3, 220) : Math.min(windowWidth * 0.8, 300);
+  const handleCopyAddress = () => {
+    _reactNative.Clipboard.setString(faircoinAddress);
+    (0, _sonner.toast)('Address copied to clipboard!');
+  };
+  const handleOpenFairWallet = () => {
+    const url = `fairwallet://pay?address=${faircoinAddress}`;
+    _reactNative.Linking.openURL(url);
+  };
+
+  // Helper for dynamic styles
+  const getStepIndicatorStyle = active => [styles.stepIndicator, active ? styles.stepIndicatorActive : styles.stepIndicatorInactive];
+  const getPaymentMethodButtonStyle = active => [styles.paymentMethodButton, active ? styles.paymentMethodButtonActive : styles.paymentMethodButtonInactive];
+  const getPaymentMethodIconColor = active => active ? colors.primary : colors.text;
+
+  // Step indicator
+  const renderStepIndicator = () => {
+    const totalSteps = 5;
+    const activeStep = currentStep + 1;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.stepIndicatorContainer,
+      children: Array.from({
+        length: totalSteps
+      }).map((_, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: getStepIndicatorStyle(activeStep === idx + 1)
+      }, idx))
+    });
+  };
+
+  // PaymentGatewayHeader component
+  const stepTitles = ['Complete Your Payment', 'Select Payment Method', 'Enter Payment Details', 'Review & Pay', 'Success'];
+
+  // Step 1: Summary step (new first step, no header/dots here)
+  const renderSummaryStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [styles.stepContainer, {
+      opacity: fadeAnim,
+      transform: [{
+        translateY: slideAnim
+      }, {
+        scale: scaleAnim
+      }]
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.sectionTitle,
+        children: "Payment Summary"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.summaryCard,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.summaryCardContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "receipt-outline",
+            size: 64,
+            color: colors.primary,
+            style: styles.summaryCardIcon
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.summaryCardMainTitle,
+            children: paymentItems && paymentItems.length > 0 ? 'Order Summary' : 'Payment'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.summaryCardSubtitle,
+            children: paymentItems && paymentItems.length > 0 ? 'Review your payment details' : 'Complete your payment'
+          }), paymentItems && paymentItems.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.summaryCardItems,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                    style: styles.summaryItemPrice,
+                    children: [item.currency ? CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency : currencySymbol, " ", item.price * (item.quantity ?? 1)]
+                  })
+                }))
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.summaryCardDivider
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.summaryCardTotalSection,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.summaryCardTotalRow,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.summaryCardTotalLabel,
+                  children: "Subtotal"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                  style: styles.summaryCardTotalValue,
+                  children: [currencySymbol, " ", amount]
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.summaryCardTotalRow,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.summaryCardTotalLabel,
+                  children: "Tax"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                  style: styles.summaryCardTotalValue,
+                  children: [currencySymbol, " 0.00"]
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.summaryCardTotalRow,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.summaryCardTotalLabel,
+                  children: "Total"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                  style: styles.summaryCardTotalValue,
+                  children: [currencySymbol, " ", amount]
+                })]
+              })]
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.summaryCardAmount,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.summaryCardAmountLabel,
+                children: "Amount to Pay"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                style: styles.summaryCardAmountValue,
+                children: [currencySymbol, " ", amount]
+              }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.summaryCardAmountDescription,
+                children: description
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.summaryCardDivider
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.summaryCardTotalSection,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.summaryCardTotalRow,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.summaryCardTotalLabel,
+                  children: "Total"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                  style: styles.summaryCardTotalValue,
+                  children: [currencySymbol, " ", amount]
+                })]
+              })
+            })]
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      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)
+  const renderMethodStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [styles.stepContainer, {
+      opacity: fadeAnim,
+      transform: [{
+        translateY: slideAnim
+      }, {
+        scale: scaleAnim
+      }]
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.sectionTitle,
+        children: "Choose Payment Method"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)(_icon.FAIRWalletIcon, {
+            size: 20
+          }) : undefined
+        }))
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Back',
+        onPress: prevStep,
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Continue',
+        onPress: nextStep,
+        icon: 'arrow-forward',
+        variant: 'primary'
+      }],
+      colors: colors
+    })]
+  });
+
+  // Step 2: Enter Payment Details
+  const renderDetailsStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [styles.stepContainer, {
+      opacity: fadeAnim,
+      transform: [{
+        translateY: slideAnim
+      }, {
+        scale: scaleAnim
+      }]
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.sectionTitle,
+        children: paymentMethod === 'card' ? 'Card Details' : paymentMethod === 'oxy' ? 'Oxy Pay' : paymentMethod === 'faircoin' ? 'FairCoin Payment' : 'Payment Details'
+      }), paymentMethod === 'card' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.cardPaymentCard,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.cardPaymentContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "card-outline",
+            size: 64,
+            color: colors.primary,
+            style: styles.cardPaymentIcon
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.cardPaymentMainTitle,
+            children: "Credit Card"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.cardPaymentSubtitle,
+            children: "Enter your card details securely"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.cardPaymentFields,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.cardRowInfo,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+                name: "card-outline",
+                size: 24,
+                color: colors.primary,
+                style: styles.cardRowIcon
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.cardRowText,
+                children: "We accept Visa, Mastercard, and more"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+              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
+                });
+              },
+              placeholder: "1234 5678 9012 3456",
+              keyboardType: "numeric",
+              maxLength: 19,
+              style: styles.cardFieldContainer,
+              left: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+                name: "card-outline",
+                size: 18,
+                color: colors.primary
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.cardFieldRow,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+                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,
+                left: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+                  name: "calendar-outline",
+                  size: 16,
+                  color: colors.primary
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+                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,
+                left: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+                  name: "lock-closed-outline",
+                  size: 16,
+                  color: colors.primary
+                })
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: {
+              height: 18
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.cardPaymentWaiting,
+            children: "Ready to process payment..."
+          })]
+        })
+      }), paymentMethod === 'oxy' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.oxyPayCard,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.oxyPayContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "wallet-outline",
+            size: 64,
+            color: colors.primary,
+            style: styles.oxyPayIcon
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.oxyPayMainTitle,
+            children: "Oxy Pay"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.oxyPaySubtitle,
+            children: "Pay with your in-app wallet"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.oxyPayBalanceBox,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.oxyPayBalanceText,
+              children: "Balance: \u229C 123.45"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: {
+              height: 18
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.oxyPayWaiting,
+            children: "Ready to process payment..."
+          })]
+        })
+      }), paymentMethod === 'faircoin' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.faircoinCard,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.faircoinContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FAIRWalletIcon, {
+            size: 64,
+            style: styles.faircoinIcon
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.faircoinMainTitle,
+            children: "FAIRWallet"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.faircoinSubtitle,
+            children: "Pay with FairCoin"
+          }), !isMobile ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.faircoinScanText,
+              children: "Scan to Pay"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.faircoinQRCard,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeQrcodeSvg.default, {
+                value: faircoinAddress,
+                size: qrSize - 32
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.faircoinQRBadge,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FAIRWalletIcon, {
+                  size: 28
+                })
+              })]
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.faircoinTitle,
+              children: "Use the options below to pay with FAIRWallet"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.faircoinAddress,
+              children: faircoinAddress
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+              style: [styles.faircoinButton, {
+                backgroundColor: '#9ffb50',
+                borderRadius: 18,
+                marginTop: 12,
+                width: '90%',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center'
+              }],
+              onPress: handleOpenFairWallet,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FAIRWalletIcon, {
+                size: 20,
+                style: {
+                  marginRight: 8
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.faircoinButtonText, {
+                  color: '#1b1f0a',
+                  fontWeight: 'bold',
+                  fontSize: 16
+                }],
+                children: "Open in FAIRWallet"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+              style: [styles.faircoinButton, {
+                backgroundColor: '#9ffb50',
+                borderRadius: 18,
+                marginTop: 10,
+                width: '90%',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center'
+              }],
+              onPress: handleCopyAddress,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FAIRWalletIcon, {
+                size: 20,
+                style: {
+                  marginRight: 8
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.faircoinButtonText, {
+                  color: '#1b1f0a',
+                  fontWeight: 'bold',
+                  fontSize: 16
+                }],
+                children: "Copy Address"
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: {
+              height: 18
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.faircoinWaiting,
+            children: "Waiting for payment..."
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.faircoinPlaceholder,
+            children: "(This is a placeholder. Integrate with a QR code generator for production.)"
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Back',
+        onPress: prevStep,
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Continue',
+        onPress: nextStep,
+        icon: 'arrow-forward',
+        variant: 'primary',
+        disabled: paymentMethod === 'card' && (!cardDetails.number || !cardDetails.expiry || !cardDetails.cvv)
+      }],
+      colors: colors
+    })]
+  });
+
+  // Step 4: Review & Pay
+  const renderReviewStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [styles.stepContainer, {
+      opacity: fadeAnim,
+      transform: [{
+        translateY: slideAnim
+      }, {
+        scale: scaleAnim
+      }]
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.sectionTitle,
+        children: "Review Payment"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+        items: [{
+          id: 'secure-payment',
+          icon: 'shield-check',
+          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'
+        }] : [])]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Back',
+        onPress: prevStep,
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: isPaying ? 'Processing...' : 'Pay Now',
+        onPress: handlePay,
+        icon: 'checkmark',
+        variant: 'primary',
+        loading: isPaying
+      }],
+      colors: colors
+    })]
+  });
+
+  // Step 5: Success
+  const renderSuccessStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [styles.stepContainer, {
+      opacity: fadeAnim,
+      transform: [{
+        translateY: slideAnim
+      }, {
+        scale: scaleAnim
+      }]
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.sectionTitle,
+        children: "Payment Complete"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.successCard,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.successContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "checkmark-circle",
+            size: 64,
+            color: colors.success || '#4BB543',
+            style: styles.successIcon
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.successMainTitle,
+            children: "Payment Successful!"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.successSubtitle,
+            children: "Thank you for your payment."
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: {
+              height: 18
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.successMessage,
+            children: "Your transaction has been processed successfully."
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Done',
+        onPress: handleDone,
+        icon: 'checkmark',
+        variant: 'primary'
+      }],
+      colors: colors
+    })]
+  });
+  const renderCurrentStep = () => {
+    switch (currentStep) {
+      case 0:
+        return renderSummaryStep();
+      case 1:
+        return renderMethodStep();
+      case 2:
+        return renderDetailsStep();
+      case 3:
+        return renderReviewStep();
+      case 4:
+        return renderSuccessStep();
+      default:
+        return renderSummaryStep();
+    }
+  };
+
+  // Use centralized theme styles hook for consistency
+  // primaryColor from hook (#007AFF) is already correct for this screen
+  const themeStyles = (0, _useThemeStyles.useThemeStyles)(normalizedTheme);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: themeStyles.backgroundColor
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: styles.content,
+      showsVerticalScrollIndicator: false,
+      children: renderCurrentStep()
+    })
+  });
+};
+const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    flex: 1,
+    padding: 16
+  },
+  stepContainer: {
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    width: '100%'
+  },
+  section: {
+    marginBottom: 24,
+    width: '100%'
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: colors.text,
+    marginBottom: 12,
+    fontFamily: _styles.fontFamilies.phuduSemiBold
+  },
+  stepIndicatorContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: 16
+  },
+  stepIndicator: {
+    height: 10,
+    borderRadius: 5,
+    marginHorizontal: 4
+  },
+  stepIndicatorActive: {
+    width: 28,
+    backgroundColor: colors.primary
+  },
+  stepIndicatorInactive: {
+    width: 10,
+    backgroundColor: colors.border
+  },
+  logo: {
+    width: 40,
+    height: 20,
+    alignSelf: 'center',
+    resizeMode: 'contain'
+  },
+  headerTitle: {
+    fontFamily: _styles.fontFamilies.phuduBold,
+    fontSize: 22,
+    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
+    color: colors.text,
+    letterSpacing: -0.5
+  },
+  paymentMethodButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 16,
+    padding: 14,
+    marginBottom: 10,
+    width: '90%',
+    alignSelf: 'center',
+    borderWidth: 1
+  },
+  paymentMethodButtonActive: {
+    backgroundColor: colors.primary + '22',
+    borderColor: colors.primary,
+    borderWidth: 2
+  },
+  paymentMethodButtonInactive: {
+    backgroundColor: 'transparent',
+    borderColor: colors.border,
+    borderWidth: 1
+  },
+  paymentMethodLabel: {
+    fontFamily: _styles.fontFamilies.phudu,
+    fontSize: 18,
+    color: colors.text,
+    fontWeight: '600'
+  },
+  paymentMethodDescription: {
+    fontFamily: _styles.fontFamilies.phudu,
+    fontSize: 15,
+    color: colors.secondaryText,
+    marginTop: 8,
+    minHeight: 36,
+    textAlign: 'center'
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 32
+  },
+  errorText: {
+    fontSize: 18,
+    color: 'red',
+    marginBottom: 24
+  },
+  methodListContainer: {
+    width: '100%',
+    alignItems: 'center'
+  },
+  methodIcon: {
+    marginRight: 12
+  },
+  methodCheckIcon: {
+    marginLeft: 'auto'
+  },
+  cardRowInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 16
+  },
+  cardRowIcon: {
+    marginRight: 8
+  },
+  cardRowText: {
+    fontSize: 15,
+    color: colors.secondaryText
+  },
+  cardFieldContainer: {
+    marginBottom: 16
+  },
+  cardFieldRow: {
+    flexDirection: 'row',
+    gap: 12
+  },
+  cardFieldHalfLeft: {
+    flex: 1,
+    marginRight: 6
+  },
+  cardFieldHalfRight: {
+    flex: 1,
+    marginLeft: 6
+  },
+  oxyPayContainer: {
+    alignItems: 'center'
+  },
+  oxyPayIcon: {
+    marginBottom: 8
+  },
+  oxyPayTitle: {
+    fontSize: 16,
+    marginBottom: 8,
+    color: colors.text,
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  oxyPaySubtitle: {
+    fontSize: 14,
+    color: colors.secondaryText,
+    marginBottom: 8,
+    textAlign: 'center'
+  },
+  oxyPayBalanceBox: {
+    backgroundColor: colors.primary + '22',
+    borderRadius: 12,
+    padding: 8,
+    marginTop: 8
+  },
+  oxyPayBalanceText: {
+    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: _styles.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,
+    width: '100%'
+  },
+  faircoinIcon: {
+    marginBottom: 8
+  },
+  faircoinMainTitle: {
+    fontFamily: _styles.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,
+    color: colors.text,
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  faircoinQRBox: {
+    width: 160,
+    height: 160,
+    backgroundColor: '#eee',
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 12,
+    borderWidth: 2,
+    borderColor: colors.primary
+  },
+  faircoinQRText: {
+    color: '#aaa'
+  },
+  faircoinWaiting: {
+    fontSize: 14,
+    color: colors.secondaryText,
+    textAlign: 'center',
+    marginBottom: 8
+  },
+  faircoinPlaceholder: {
+    fontSize: 13,
+    color: colors.secondaryText,
+    textAlign: 'center'
+  },
+  faircoinCard: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 24,
+    marginBottom: 24,
+    alignItems: 'center',
+    width: '100%'
+  },
+  faircoinContent: {
+    alignItems: 'center',
+    width: '100%'
+  },
+  successCard: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 24,
+    marginBottom: 24,
+    alignItems: 'center',
+    width: '100%'
+  },
+  successContent: {
+    alignItems: 'center',
+    width: '100%'
+  },
+  successIcon: {
+    marginBottom: 8
+  },
+  successMainTitle: {
+    fontFamily: _styles.fontFamilies.phuduBold,
+    fontWeight: 'bold',
+    fontSize: 28,
+    color: colors.success || '#4BB543',
+    marginBottom: 2,
+    textAlign: 'center',
+    letterSpacing: 0.5
+  },
+  successSubtitle: {
+    fontSize: 16,
+    color: colors.text,
+    textAlign: 'center',
+    marginBottom: 8,
+    width: '100%'
+  },
+  successMessage: {
+    fontSize: 14,
+    color: colors.secondaryText,
+    textAlign: 'center',
+    marginBottom: 8
+  },
+  methodCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 18,
+    paddingVertical: 18,
+    paddingHorizontal: 18,
+    marginBottom: 14,
+    borderWidth: 1.5,
+    borderColor: colors.border,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.06,
+    shadowRadius: 6,
+    elevation: 2,
+    minHeight: 72
+  },
+  methodCardSelected: {
+    backgroundColor: colors.primary + '11',
+    borderColor: colors.primary,
+    shadowOpacity: 0.13,
+    shadowRadius: 10,
+    elevation: 4
+  },
+  methodCardContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1
+  },
+  methodCardIcon: {
+    marginRight: 18,
+    marginLeft: 2
+  },
+  methodCardTextContainer: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center'
+  },
+  methodCardDescription: {
+    fontSize: 14,
+    color: colors.secondaryText,
+    marginTop: 2,
+    opacity: 0.85
+  },
+  methodCardCheckIcon: {
+    marginLeft: 12
+  },
+  paymentMethodLabelSelected: {
+    color: colors.primary
+  },
+  circleListContainer: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    paddingHorizontal: 4,
+    width: '100%',
+    marginBottom: 0
+  },
+  circleMethod: {
+    alignItems: 'center',
+    marginHorizontal: 0,
+    flex: 1,
+    minWidth: 62,
+    paddingVertical: 2,
+    paddingHorizontal: 2
+  },
+  circleMethodSelected: {
+    // No extra margin, but highlight below
+  },
+  circleIconWrapper: {
+    width: 48,
+    // restored padding
+    height: 48,
+    // restored padding
+    borderRadius: 24,
+    // half of width/height
+    backgroundColor: '#fff',
+    borderWidth: 2,
+    borderColor: colors.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 8,
+    // spacing below icon
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.07,
+    shadowRadius: 6,
+    elevation: 2
+  },
+  circleLabel: {
+    fontFamily: _styles.fontFamilies.phudu,
+    fontSize: 16,
+    color: colors.text,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: 4,
+    marginTop: 2
+  },
+  circleLabelSelected: {
+    color: colors.primary
+  },
+  circleDescription: {
+    fontSize: 13,
+    color: colors.secondaryText,
+    textAlign: 'center',
+    opacity: 0.85,
+    minHeight: 36,
+    marginBottom: 2
+  },
+  headerStepIndicatorContainer: {
+    marginVertical: 2,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  faircoinButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'center',
+    backgroundColor: colors.primary + '11',
+    borderRadius: 16,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    marginTop: 6,
+    marginBottom: 2
+  },
+  faircoinButtonText: {
+    color: colors.primary,
+    fontWeight: '600',
+    fontSize: 15
+  },
+  faircoinAddress: {
+    color: colors.secondaryText,
+    fontSize: 13,
+    textAlign: 'center',
+    marginTop: 6,
+    marginBottom: 2
+  },
+  // 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: _styles.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: _styles.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: _styles.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'
+  }
+});
+var _default = exports.default = PaymentGatewayScreen;
+//# sourceMappingURL=PaymentGatewayScreen.js.map