我是第一次用paystack
实现支付网关,我真的不想使用paystack
的第三方软件包。它是一个React Native应用程序。我想用react native webview
实现它。到目前为止,它是工作的,但我似乎不能让取消按钮工作。这是因为按钮没有响应时,点击。如果按钮响应并调用paystack onClose
URL https://standard.paystack.co/close
,我只需检查一下并关闭webview状态。
那么,我该如何处理这个问题呢?按钮不可能在那里不做任何事情。我可以使用javascript并隐藏它,然后创建自己的自定义按钮,实际上在点击时工作吗?:下面是我目前为止尝试过的代码:
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) {
}
}
尝试侦听按钮单击但不起作用的代码:
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))
});
}
})
}
`
网络视图:
{
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)
}}
/>
}
目前为止的错误:没有错误,点击取消按钮没有React!
1条答案
按热度按时间nr9pn0ug1#
我从这个答案中得到了灵感。
然而,代码不起作用。我认为webview不适用于
document.getElementByTagName
。不幸的是,paystack没有按钮元素的类名。我决定使用span
,它 Package 了“cancel text”。Span
元素有一个名为text
的类。我还使用了for循环,因为includes
方法不起作用。以下是代码:现在的问题是删除
setTimeOut