How to write these plugin initialized in functional component? - reactjs

Question

I got an example like this
Before ever thing I need to import the payment from the plugin
import Payment from 'react-gg-payment';
This is the code from the website. example is given in classco
class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
isLoading : false,
payment_status : 'initiated'
};
var appServiceConfigData = {
"environment" : "test",
"base_url": "https://checkoutshopper-test.com/checkoutshopper/demoserver/",
"additional_http_headers" : {
"x-demo-server-api-key": DEMO_SERVER_API_KEY
}
};
Payment.initialize(appServiceConfigData);
Payment.onSuccess((payload) => {
this.setState({payment_status: 'success'});
console.log(payload);
});
Payment.onError((code, error) => {
console.log("Error : ",error);
this.setState({payment_status: 'failure'});
});
}
This is the example given by the library.
What I want is I wanna convert these codes into function component.
I don't know whether my code is true or false. This is my progress so far
const FuncApp = ({navigation}) => {
const [loading, setLoading] = useState(false);
const [paymentStatus, setPaymentStatus] = useState('initiated');
useEffect(() => {
var appServiceConfigData = {
"environment" : "test",
"base_url": "https://checkoutshopper-test.com/checkoutshopper/demoserver/",
"additional_http_headers" : {
"x-demo-server-api-key": DEMO_SERVER_API_KEY
}
};
Payment.initialize(appServiceConfigData);
},[])
//IDK WHERE TO PUT BELOW CODES
Payment.onSuccess((payload) => {
setPaymentStatus('success');
console.log(payload);
});
Payment.onError((code, error) => {
console.log("Error : ",error);
setPaymentStatus('failure');
});
in the return statement.
I got a button with onPress
const onClickPayment = () => {
Payment.startPayment()
}
<Button
label={'Pay'}
title="Pay"
color="#841584"
onPress={() => {
onClickPayment();
}}
/>