【实战应用】后端返回支付宝HTML,如何使用.H5端调用支付宝支付

前端调用支付宝支付接口：HTML表单提交实现

前端CV攻城狮

已于 2022-03-07 14:52:05 修改

阅读量4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：工作中遇到有意思的东西个人笔记? 文章标签： html5 html javascript react

于 2022-03-07 13:53:00 首次发布

本文链接：https://blog.csdn.net/Aeporn/article/details/123328525

个人笔记? 同时被 2 个专栏收录

13 篇文章

订阅专栏

工作中遇到有意思的东西

7 篇文章

订阅专栏

本文介绍了如何在前端接收后端返回的支付宝HTML支付代码并进行处理，通过创建动态form元素，设置目标窗口为新标签页，然后提交表单以启动支付宝H5支付流程。在支付成功后，需设置回调页面处理后续逻辑。

前端调用支付接口,后端返回支付宝的HTML如何使用

调用过程不多哔哔 , 直接上干货

后端返回代码示例

基本上返回的就是一个str格式的HTML

处理思路点击去支付-> 跳转到新的H5页面,去进行支付

代码实现

// click 点击事件
  const goBuy = () => {
    dispatch({
      type: 'welfare/purchase',
      payload: {
        id: state?.id,
        tradeCount: state?.num,
        deductPoints: state?.points,
        realAmount: price - (state?.points || 0),
        totalAmount: price,
      },
    }).then((res) => {
      if (res?.code === 200) {
      // 后端返回code码正常  开始处理HTML
        const div = document.createElement('divform');
        div.innerHTML = res.data; // data就是接口返回的form 表单字符串
        document.body.appendChild(div);
        let len = document.forms.length - 1;
        document.forms[len].setAttribute('target', '_blank'); // 新开窗口跳转
        document.forms[len].submit();
      }
    });
  };