项目有个电脑端的支付需求,本来觉得挺容易的,页面是支付宝返回的,可是处理还是出了问题,后台接口返回的html代码,是没问题的,可返回到了response里面,前端取不到,后来决定直接弹个iframe页面,src直接指向接口地址,让浏览器自己处理返回值,从而弹出来,如愿以偿实现了功能,不过感觉不够完善,下面附上代码,有需要的可以用:
<div style={{ width: '80%', height: '355px', margin: '30px auto 10px auto', display: 'none', zIndex: '100' }} id="iframe" >
<Button style={{ position: 'absolute', top: 0, right: 0, height: 28 }} onClick={this.cancelIfram}>X</Button>
<iframe src={`${hostRegister}/pay/aliPCPay?${stringify({ userId: currentUser.id })}`} width='100%' height='100%' scrolling='no' marginHeight='0' marginWidth='0' style={{ backgroundColor: '#fff' }}></iframe>
</div>
cancelIfram = () => {
const iframe = document.getElementById('iframe')
iframe.style.display = 'none';
this.props.history.push('/account/person')
clearInterval(_timer);
}
(最好不要写这么多style 嘿嘿嘿 我懒了 没有搞class)这样就可实现打开关闭支付弹框了,然后我会轮询支付状态,获取到状态直接路由跳到成功失败页,效果截图如下:
到这里,简易版的支付功能就好了,虽然感觉不太好吧,有需要借鉴下,如果你可以取到后端返回的html代码,可以学大佬这样搞:
https://www.jianshu.com/p/e25130c4c80f