我正在开发一个反应原生应用程序,它应该与支付网关进行通信,在完成支付过程(成功或失败)后,我需要向用户显示警报。为此,我打开了一个链接WebView
之后我得到了 return 的 urlonNavigationStateChange
并显示成功或失败消息。
但是,这个流程对于security问题必须在默认设备浏览器.
当前代码:
const BASEURL = 'https://gatewayURL/?ID=';
let Token = null;
let paymentAccepted = null;
let paymentFactorId = null;
class Gateway extends PureComponent {
static propTypes = {
dispatch: PropTypes.func,
navigation: PropTypes.any,
}
componentWillMount() {
this.props.dispatch(getPaymentStatus());
}
_onLoad(webViewState) {
let url = webViewState.url.toString();
let isResponseValid = url.includes('backFromGateway');
if(isResponseValid){
if(this.props.checkedPaymentStatus != 'checked' ){
setTimeout(() => {
this.props.dispatch(setPaymentStatus('checked'));
let splitedURL = url.split("/");
paymentFactorId = splitedURL[splitedURL.length -2];
if(splitedURL[splitedURL.length - 1] === '0'){
paymentAccepted = true;
this.props.dispatch(setGatewayResponse('done', paymentFactorId));
}
else {
paymentAccepted = false;
this.props.dispatch(setGatewayResponse('rejected', paymentFactorId));
}
this.props.navigation.navigate('BackFromGateway', { title: '' })
}, 1000);
}
}
}
render() {
const { addNewOrderGatewayToken, checkedPaymentStatus } = this.props;
token = addNewOrderGatewayToken;
let view = null;
if(checkedPaymentStatus !== 'checked'){
view = <WebView onNavigationStateChange={this._onLoad.bind(this)} style={styles.container} source={{ uri: `${BASEURL}${token}` }}/>
}
else{
view = <View></View>
}
return (
<View style={styles.container}>
{view}
</View>
);
}
}
任何想法?
Thanks
如果您可以从网关网站进行回调,那么我建议使用深度链接来处理应用程序和浏览器之间的流量。基本上,您的应用程序将打开网关网站进行支付,并且根据支付结果,网站将使用其深层链接对应用程序进行回调。然后应用程序将侦听该链接,取出必要的信息并继续继续。
你需要做的是:
在您的应用程序中设置深层链接。您应该遵循官方网站的指南(here https://facebook.github.io/react-native/docs/linking.html) 来启用它。让我们在此处选择一个随机 URL 进行链接,例如gatewaylistener
设置从网关到您的应用程序的必要回调。在您的情况下,由于您需要处理支付成功和支付失败,因此您可以添加 2 个回调,例如gatewaylistener://success?id={paymentId}
and gatewaylistener://error?id={paymentId}
最后,您需要从应用程序监听网络浏览器。一种方法是在打开网关的组件内部添加侦听器。
// setup
componentDidMount() {
Linking.getInitialURL().then((url) => {
if (url) {
this.handleOpenURL(url)
}
}).catch(err => {})
Linking.addEventListener('url', this.handleOpenURL)
}
componentWillUnmount() {
Linking.removeEventListener('url', this.handleOpenURL)
}
// open your gateway
async openGateWay = () => {
const { addNewOrderGatewayToken } = this.props
const url = `${BASEURL}${addNewOrderGatewayToken}`
const canOpen = await Linking.canOpenURL(url)
if (canOpen) {
this.props.dispatch(setPaymentStatus('checked'))
Linking.openURL(url)
}
}
// handle gateway callbacks
handleOpenURL = (url) => {
if (isSucceedPayment(url)) { // your condition
// handle success payment
} else {
// handle failure
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)