Vue 微信H5支付前端遇到的问题总结

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

H5 支付官方文档链接。

需求要求：

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

按照官方开发流程：

1. 用户在商户侧完成下单，使用微信支付进行支付；
2. 由商户后台向微信支付发起下单请求（调用统一下单接口）注：交易类型 trade_type=MWEB
3. 统一下单接口返回支付相关参数给商户后台，如支付跳转 url（参数名“mweb_url”），商户通过 mweb_url 调起微信支付中间页；
4. 中间页进行 H5 权限的校验，安全性检查（此处常见错误请见下文）；
5. 如支付成功，商户后台会接收到微信侧的异步通知；
6. 用户在微信支付收银台完成支付或取消支付,返回商户页面（默认为返回支付发起页面）；
7. 商户在展示页面，引导用户主动发起支付结果的查询；
8. 商户后台判断是否接收到微信侧的支付结果通知，如没有，后台调用我们的订单查询接口确认订单状态（查单实现可参考：支付回调和查单实现指引）；
9. 展示最终的订单支付结果给用户。

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

参照：其它常见错误类型序号 3：

1. 当前调起 H5 支付的域名（微信侧从 referer 中获取）与申请 H5 支付时提交的授权域名不一致，如需添加或修改授权域名，请登录商户号对应的【商户平台->产品中心->开发配置】自行配置；

问题出现原因：为了统一收款账户名称，管理人员重新配置了商户号，测试环境，后台人员后使用了生产的 appid；这是由前后端配置的 appid 不一致导致的。

其它需要注意的问题是否配置 redirect_url(配置后遇到的问题)：

AWechatH5Pay ({ state, commit, dispatch, rootState }) {
  const {orderId, payAmount, isPlusH5} = state.orderInfo;
  const params = { payMethod: 'H5', payType: '1' }
  return dispatch('AGetH5PaymentSignInfo', params).then(res => {
      const { data: signature, error } = res
      const {origin, pathname} = window.location;
      const reUrl = origin+pathname+"#/payment/h5result?payAmount="+payAmount+"&flag=2&orderId="+orderId+"&isPlusH5="+isPlusH5;
           
      const replaceUrl = signature.mweburl+'&redirect_url=' + encodeURIComponent(reUrl);
      window.location.href = replaceUrl;
   })
},

拼接了指定回调页面地址，执行跳转时无论用户后续是否支付都会跳转到落地页（具体看下面 2）

1. 需对 redirect_url 进行 urlencode 处理
2. 由于设置 redirect_url 后,回跳指定页面的操作可能发生在：
   • 微信支付中间页调起微信收银台后超过 5 秒
   • 用户点击“取消支付”或支付完成后点击“完成”按钮。因此无法保证页面回跳时，支付流程已结束，所以商户设置的 redirect_url 地址不能自动执行查单操作，应让用户去点击按钮触发查单操作。

当使用window.location.href或open执行跳转时会出现调用微信支付网页空白屏的过程；

这时可以借助iframe来实现支付跳转：

AWechatH5Pay ({ state, commit, dispatch, rootState }) {
  const {orderId, payAmount, isPlusH5} = state.orderInfo;
  const params = { payMethod: 'H5', payType: '1' }
  return dispatch('AGetH5PaymentSignInfo', params).then(res => {
      const { data: signature, error } = res
      const {origin, pathname} = window.location;
      const reUrl = origin+pathname+"#/payment/h5result?payAmount="+payAmount+"&flag=2&orderId="+orderId+"&isPlusH5="+isPlusH5;
           
      const replaceUrl = signature.mweburl+'&redirect_url=' + encodeURIComponent(reUrl);
      const iframe = document.createElement('iframe')
      iframe.style.display ='none'
      iframe.setAttribute('src', replaceUrl)
      iframe.setAttribute('sandbox','allow-top-navigation allow-scripts')
      document.body.appendChild(iframe)
      // window.location.href = replaceUrl;
  })
},

如果用户执行 h5 支付不想直接跳转落地页则不设置指定回调页面地址 redirect_url，如下:

/**
 * 微信 H5 支付-非微信客户端打开-其他浏览器打开页面
 * @param {*} param0
 * @param {*} payType
*/
AWechatH5Pay ({ state, commit, dispatch, rootState }) {
  // const {orderId, payAmount, isPlusH5} = state.orderInfo;
  const params = { payMethod: 'H5', payType: '1' }
  return dispatch('AGetH5PaymentSignInfo', params).then(res => {
      const { data: signature } = res
      const replaceUrl = signature.mweburl;
      const iframe = document.createElement('iframe')
      iframe.style.display ='none'
      iframe.setAttribute('src', replaceUrl)
      iframe.setAttribute('sandbox','allow-top-navigation allow-scripts')
      document.body.appendChild(iframe)
      return Promise.resolve({ res:'执行完 h5 支付' });
   })
},

<!-- 订单确认弹窗 -->
<van-dialog
 v-model:show="DialogSure.show"
 :closeOnClickOverlay="false"
 :showCancelButton="true"
 @confirm="DialogSure.confirm(1)"
 @cancel="DialogSure.confirm(0)"
 confirmButtonText="已完成支付"
 title="支付确认"
>
 <section class="confirm_dialog">
   请在微信内完成支付，如果您已支付成功，请点击"已完成支付"按钮。
 </section>
</van-dialog>

const loading = showLoadding(20000);
store.dispatch('payment/AWechatH5Pay').then(res => {
    //打开订单确认弹窗
    //引导用户主动查询支付结果；
    //长轮训查询订单支付状态-如果成功跳转支付结果页面
}).finally(()=>{
    loading.clear()
})

如下图：

原文：链接

以上关于Vue 微信H5支付前端遇到的问题总结的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。