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

本文介绍了一种通过弹出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)这样就可实现打开关闭支付弹框了,然后我会轮询支付状态,获取到状态直接路由跳到成功失败页,效果截图如下:
在这里插入图片描述

在这里插入图片描述
到这里,简易版的支付功能就好了,虽然感觉不太好吧,有需要借鉴下,如果你可以取到后端返回的html代码,可以学大佬这样搞:
https://www.jianshu.com/p/e25130c4c80f

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值