【实战应用】后端返回支付宝HTML,如何使用.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();
      }
    });
  };

效果实现 新启窗口

从而实现H5调用支付宝支付接口

注: 当付款成功后, 需要设置回调地址 这里基本都是做一个付款完成的页面,然后再通过按钮去实现调转回功能页面