import React, { FC, ReactElement, useEffect, useState } from 'react'; import WebView from 'react-native-webview'; import PropTypes from 'prop-types'; import { View, ActivityIndicator, Modal, Text, Image, Dimensions, } from 'react-native'; import type { Props } from './utils/interface'; import { transFormCard } from './utils/utils'; import PaystackFee from './utils/customerCharge'; const { height, width } = Dimensions.get('window'); const Index: FC = (props): JSX.Element => { // const PAYSTACK_CLOSE_URL = 'https://standard.paystack.co/close'; const [totalAmount, setTotalAmount] = useState(props.amount); useEffect(() => { if (props.passChargeToCustomer) { let amount = parseInt(props.amount); var fees = new PaystackFee(); const charge = fees.calculateFee(amount); const total = amount + charge; setTotalAmount(total.toString()); } else { setTotalAmount(props.amount); } }, []); const onMessageReceived = (data: any) => { const paymentResponse = JSON.parse(data); if (props.onPaymentSuccess) props.onPaymentSuccess(paymentResponse); }; const renderLoader = (): ReactElement => { return ( Loading payment page. Please wait.... ); }; const paymentForm = ` Paystack `; return ( { onMessageReceived(e.nativeEvent?.data); }} scrollEnabled={false} onLoadEnd={() => { console.log('Load Ends'); }} /> ); }; export default Index; Index.propTypes = { publicKey: PropTypes.string.isRequired, amount: PropTypes.string.isRequired, currency: PropTypes.string.isRequired, email: PropTypes.string.isRequired, firstName: PropTypes.string, lastName: PropTypes.string, phone: PropTypes.string, tranxRef: PropTypes.string.isRequired, paymentChannels: PropTypes.string.isRequired, onPaymentSuccess: PropTypes.func.isRequired, passChargeToCustomer: PropTypes.bool, };