处理后端返回的html代码实现支付功能

最新推荐文章于 2024-07-27 16:53:20 发布

原创最新推荐文章于 2024-07-27 16:53:20 发布 · 2.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#js电脑端支付

javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种通过弹出iframe实现电脑端支付宝支付的方法，并分享了具体的实现代码及支付状态轮询策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目有个电脑端的支付需求，本来觉得挺容易的，页面是支付宝返回的，可是处理还是出了问题，后台接口返回的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）这样就可实现打开关闭支付弹框了，然后我会轮询支付状态，获取到状态直接路由跳到成功失败页,效果截图如下：
在这里插入图片描述