H5处理支付宝接口返回form

2021-11-18 本文已影响0人四环霉素

最近H5对接后端从支付宝返回的form。踩了一些坑。
支付宝支付返回的form结构大概是这样的：

<html>
    <form id="cashierSubmit" accept-charset="UTF-8" name="cashierSubmit" action="***" method="post">
        <input type="hidden" name="orderType" value='' />
        <input type="hidden" name="commodity" value=''
        />
        <input type="hidden" name="merchantCode" value='' />
        <input type="hidden" name="sign" value=''
        />
        <input type="hidden" name="orderAmt" value='' />
        <input type="hidden" name="srcType" value='H5' />
        <input type="hidden" name="expireTime" value='' />
        <input type="hidden" name="feature" value=''
        />
        <input type="hidden" name="outTradeNo" value='' />
        <input type="hidden" name="notifyUrl" value=''
        />
        <input type="hidden" name="signType" value='' />
        <input type="hidden" name="payChannel" value=''
        />
        <input type="hidden" name="returnUrl" value=''
        />
        <input type="hidden" name="notifyInfo" value=''
        />
        <input type="submit" value="提交" style="display:none;">
    </form>
    <script>
        document.forms['cashierSubmit'].submit();
    </script>

</html>

这可以看成是一个完整的html文档。

第一种解决方案

\\ 假设result是后端返回的from字符串
const newWindow = window.open('', '_self');
newWindow.document.write(result);
newWindow.focus();

如果是在PC端处理，这种方式是没问题的。但是需要注意三个问题：

window.open()在接口回调中触发，可能会被浏览器拦截
如果本身页面的地址是https的，如果返回的form的action是http的，浏览器也会弹出安全提示。

image.png
微信环境window.open()不生效

第二种解决方案
虽然返回的result的form外面有html包裹，但是我们动态创建一个div容器，然后将包含<html>的result渲染进去，通过js触发form表单提交也是没问题的。

const div = document.createElement('formdiv');
div.innerHTML = result;
document.body.appendChild(div);
document.forms['cashierSubmit'].setAttribute('target', '_self');
document.forms['cashierSubmit'].submit();
div.remove();

对于H5来说第二种方案兼容性更好。
需要注意的是：
一开始我将form的target设置为了_blank

document.forms['cashierSubmit'].setAttribute('target', '_blank');

导致了在IOS上的浏览器（微信环境，safari，UC）都无法实现form表单的提交。
改成_self之后，问题解决。

H5处理支付宝接口返回form

猜你喜欢

热点阅读