Cancel Payment Button in paystack not working

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!