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
95 lines (94 loc) • 3.27 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
import Logo from '../../assets/logo.png'; // Assuming you have a logo image
export const PaymentHeader = ({ onClose, amount, currency, description, environment, }) => {
return (_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.headerRow, children: [_jsx(View, { style: styles.titleSection, children: _jsxs(View, { style: styles.logoRow, children: [_jsx(View, { style: styles.logoPlaceholder, children: _jsx(Image, { source: Logo, style: styles.logoImage }) }), _jsxs(View, { children: [_jsx(Text, { style: styles.gatewayTitle, children: "ZIPS GATEWAY" }), environment === 'sandbox' && (_jsx(View, { style: styles.sandboxBadge, children: _jsx(Text, { style: styles.sandboxText, children: "SANDBOX" }) }))] })] }) }), _jsx(TouchableOpacity, { onPress: onClose, style: styles.closeButton, children: _jsx(Text, { style: styles.closeButtonText, children: "\u2715" }) })] }), _jsxs(View, { style: styles.amountSection, children: [_jsxs(Text, { style: styles.amountText, children: [currency, " ", amount === null || amount === void 0 ? void 0 : amount.toFixed(2)] }), _jsx(Text, { style: styles.descriptionText, children: description })] })] }));
};
const styles = StyleSheet.create({
container: {
borderBottomWidth: 1,
borderBottomColor: '#E5E7EB',
paddingVertical: 10,
paddingHorizontal: 20,
paddingBottom: 20,
backgroundColor: '#FFFFFF',
},
logoImage: {
width: 40,
height: 40,
borderRadius: 8,
},
headerRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-start',
marginBottom: 24,
},
titleSection: {
flex: 1,
},
logoRow: {
flexDirection: 'row',
alignItems: 'center',
},
logoPlaceholder: {
width: 40,
height: 40,
borderRadius: 8,
backgroundColor: '#8B5CF6',
justifyContent: 'center',
alignItems: 'center',
marginRight: 12,
},
logoText: {
color: '#FFFFFF',
fontSize: 20,
fontWeight: 'bold',
},
gatewayTitle: {
fontSize: 18,
fontWeight: '600',
color: '#1F2937',
marginBottom: 4,
},
sandboxBadge: {
backgroundColor: '#FEF3C7',
paddingHorizontal: 8,
paddingVertical: 2,
borderRadius: 4,
alignSelf: 'flex-start',
},
sandboxText: {
fontSize: 10,
fontWeight: '600',
color: '#92400E',
},
closeButton: {
padding: 8,
borderRadius: 20,
backgroundColor: '#F3F4F6',
width: 36,
height: 36,
justifyContent: 'center',
alignItems: 'center',
},
closeButtonText: {
fontSize: 18,
color: '#6B7280',
fontWeight: '500',
},
amountSection: {
alignItems: 'center',
},
amountText: {
fontSize: 32,
fontWeight: 'bold',
color: '#1F2937',
marginBottom: 8,
},
descriptionText: {
fontSize: 16,
color: '#6B7280',
textAlign: 'center',
},
});