zips-react-native-sdk-test
Version:
Lightweight ZIPS Payment Gateway SDK for React Native - Complete payment solution with card payments, wallet payments (AfrMoney & ZApp), netbanking, and native UI design
120 lines (119 loc) • 4.02 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { View, Text, TouchableOpacity, StyleSheet, Dimensions, } from 'react-native';
import { paymentMethods } from '../../constants/paymentMethods';
import { useZipsContext } from '../../context/ZipsProvider';
const { width: screenWidth } = Dimensions.get('window');
export const PaymentMethodSelection = () => {
const { paymentMethod, setPaymentMethod, setCurrentStep } = useZipsContext();
return (_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: styles.title, children: "Select a payment method" }), _jsx(Text, { style: styles.subtitle, children: "Choose your preferred payment option" })] }), _jsx(View, { style: styles.gridContainer, children: paymentMethods.map((method, index) => (_jsxs(TouchableOpacity, { style: [styles.methodCard], onPress: () => {
setPaymentMethod(method);
setCurrentStep(method.id);
}, children: [_jsx(View, { style: styles.methodIconContainer, children: _jsx(Text, { style: styles.methodIconText, children: method.icon }) }), _jsxs(View, { style: styles.methodInfo, children: [_jsx(Text, { style: styles.methodTitle, children: method.title }), _jsx(Text, { style: styles.methodSubtitle, numberOfLines: 2, children: method.subtitle })] })] }, method.id))) })] }));
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
paddingHorizontal: 10,
},
header: {
alignItems: 'center',
marginBottom: 32,
paddingHorizontal: 8,
},
title: {
fontSize: 22,
fontWeight: '700',
color: '#1F2937',
marginBottom: 8,
textAlign: 'center',
},
subtitle: {
fontSize: 15,
color: '#6B7280',
textAlign: 'center',
fontWeight: '400',
lineHeight: 20,
},
// Grid Layout Styles - Enhanced
gridContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
paddingHorizontal: 0, // Remove extra padding
},
methodCard: {
width: (screenWidth - 60) / 2, // Account for PaymentModal padding (16px * 2) + gap
minHeight: 180,
marginBottom: 16,
padding: 20,
borderRadius: 24,
backgroundColor: '#FFFFFF',
borderWidth: 2,
borderColor: '#E5E7EB',
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.1,
shadowRadius: 16,
elevation: 6,
position: 'relative',
},
methodCardSelected: {
borderColor: '#007AFF',
backgroundColor: '#F8FAFF',
shadowColor: '#007AFF',
shadowOpacity: 0.25,
transform: [{ scale: 1.02 }], // Subtle scale effect when selected
},
methodIconContainer: {
width: 64,
height: 64,
borderRadius: 20,
backgroundColor: '#F3F4F6',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 16,
},
methodIconText: {
fontSize: 32,
},
methodInfo: {
alignItems: 'center',
flex: 1,
},
methodTitle: {
fontSize: 17,
fontWeight: '700',
color: '#1F2937',
marginBottom: 6,
textAlign: 'center',
},
methodSubtitle: {
fontSize: 13,
color: '#6B7280',
textAlign: 'center',
lineHeight: 18,
paddingHorizontal: 4,
},
selectedIndicator: {
position: 'absolute',
top: 12,
right: 12,
width: 28,
height: 28,
borderRadius: 14,
backgroundColor: '#007AFF',
justifyContent: 'center',
alignItems: 'center',
},
checkmark: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: 'bold',
},
});