The H5 web page developed by uniapp, which calls the WeChat H5 payment in the form of a form

1. Scene description:

We use uniapp to develop H5 webpages, embed third-party aggregation pages, and third-party embedded in another app

2. Technical realization:

1. Use WeChat H5 payment, refer to https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1

2. Use window.location.href='order url returned by the backend' to invoke WeChat H5 payment

3. Problems that arise:

1. After embedding a third-party app, the window.location.href form cannot invoke H5 payment, and the official website also has instructions, as follows in red

 Four, the solution

Initiate a call in the form of a form

1. Submit the order to the backend, and get the order link payUrl returned by the backend

2. Create a new form, add it to the body, set the form attribute, and set the action to payUrl

3. Submit using document.forms['h5paysubmit'].submit();

4. Remove the form node

// 拼接form
let h5form="<form id='h5paysubmit' name='h5paysubmit' style='display:none;'></form>"
const div = document.createElement('div');
div.id='h5pay';
div.innerHTML = h5form;// 返回的 form
document.body.appendChild(div);
// 设置form属性
document.forms['h5paysubmit'].method= "post";
document.forms['h5paysubmit'].action= result.payUrl;// 支付信息
document.forms['h5paysubmit'].submit();
// 删除节点
let divs=document.getElementById('h5pay');
document.body.removeChild(divs);

Call up the page as follows: