微信H5支付前端遇到的问题(Vue项目)

H5支付主要是在手机、ipad等移动设备中通过浏览器来唤起微信支付的支付产品。

H5支付官方文档链接：https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1

需求要求：需要给甲方app提供一个h5链接实现商城商品微信h5支付 ；（甲方app当作非微信客户端浏览器）

按照官方开发流程：

1、用户在商户侧完成下单，使用微信支付进行支付

2、由商户后台向微信支付发起下单请求（调用统一下单接口）注：交易类型trade_type=MWEB

3、统一下单接口返回支付相关参数给商户后台，如支付跳转url（参数名“mweb_url”），商户通过mweb_url调起微信支付中间页

4、中间页进行H5权限的校验，安全性检查（此处常见错误请见下文）

5、如支付成功，商户后台会接收到微信侧的异步通知

6、用户在微信支付收银台完成支付或取消支付,返回商户页面（默认为返回支付发起页面）

7、商户在展示页面，引导用户主动发起支付结果的查询

8,9、商户后台判断是否接收到微信侧的支付结果通知，如没有，后台调用我们的订单查询接口确认订单状态（查单实现可参考：支付回调和查单实现指引）

10、展示最终的订单支付结果给用户

首先遇到的问题是提示如下：