I am implementing payment gateway with paystack
for the first time and I really don’t want to use third party packages for paystack
. It is a React Native application. I wanted to implement it using react native webview
. It is working so far but I can’t seem to get the cancel button to work. This is because the button is not responding when clicked. If the button responded and invoked the paystack onClose
URL https://standard.paystack.co/close
, I would have simply checked for it and close the webview state.
So, how do I handle this? The button can’t be there without doing anything. Can I use javascript and hide it and create my own custom button that actually works on click?: Here is the code I have tried so far:
const { url } = value
if (!url) return;
webView.current.injectJavaScript(handleCancle)
const customUrl = url.split('?');
const getCallBackURL = customUrl[0];
const queryStr = customUrl[1]
if(getCallBackURL == callback_url){
setPaymentState(false);
try {
const res = await axios.get(`${BASE_URL}/payverify/?${queryStr}`);
if(res?.data?.status == 'success'){
const payMentData = res?.data
navigation.navigate('ThankyouPage', {payMentData})
}
} catch (error) {
}
}
The code that tried listening to button click but not working:
const handleCancle = `
var buttons = document.getElementsByTagName('button');
buttons.forEach((button)=>{
if(button.innerHTML.includes('Cancel Payment')){
button.addEventListener("click", function() {
console.log('it has happened')
var resp = {event:'cancelled'};
window.ReactNativeWebView.postMessage(JSON.stringify(resp))
});
}
})
}
`
The webview:
{
isPaymentSuccess && paymentState &&
<WebView
javaScriptEnabled={true}
source={{ uri: paymentData }}
style={{ marginTop: 50 }}
onNavigationStateChange={ handleNav }
cacheEnabled={false}
cacheMode={'LOAD_NO_CACHE'}
ref={webView}
onMessage={(e) => {
console.log('pressed')
console.log(e.nativeEvent?.data)
}}
/>
}
The error so far: No error. No response when the cancel button is clicked!