快应用】微信H5 referer支付未拉起微信收银台

现象描述

快应用使用微信H5 referer方式支付， wxpay.pay调用后回调success得到url，但并未拉起微信收银台，无法支付。另外，应用微信h5支付都是通的，在浏览器端是可以直接支付成功的。

问题分析

微信H5支付问题，一般需要从下面2点排查：

1）微信app是否安装，微信H5支付实际上是拉起微信app的收银台界面。

2）在微信平台上申请H5时，是否提交了授权域名，授权域名不能为空。授权域名很重要，在使用快应用H5 referer方式支付时，wxpay.pay接口refer字段值需填写这个授权域名。

注意：测试网络不能使用代理，如果使用了代理，会导致微信侧校验referer不通过

以上2点都满足，再回到接口本身的调用实现，代码如下：

pay:function(){

  wxpay.pay({

    prepayid: 'wx20170101abcdef1234567890', 

    referer: 'https://www.xx.com',        

    extra: {

      mweb_url: 'https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb'

    },

    fail: function (data, code) {

      console.log('WX PAY failed, code = ' + code);

    },

    cancel: function (data) {

      console.log('WX PAY cancelled by user');

    },

    success: function (data) {

      console.log('WX PAY success');

      let finalurl= data.final_url;

    }

  })

}, 

经过定位分析，最终问题原因与mweb_url值有关系。华为快应用加载器在使用H5 referer方式支付时，并不会将pay接口中传入的prepayid、extra其他参数拼接在mweb_url后面，success回调中拿到的final_url就是mweb_url，引擎侧直接使用这个final_url发起支付，不满足 微信H5支付 的url要求。

解决方案

通过上面的问题分析过程，只需要按照微信官方文档上的要求，mweb_url参数值参考上图中示例值填写即可。修改后的代码如下：

pay:function(){

      wxpay.pay({

        prepayid: 'wx20170101abcdef1234567890',  

        referer: 'https://www.xx.com',         

extra: {

          mweb_url: 'https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb ?prepay_id=wx20170101abcdef1234567890&trade_type=MWEB ' 

        },

        fail: function (data, code) {

          console.log('WX PAY failed, code = ' + code);

        },

        cancel: function (data) {

          console.log('WX PAY cancelled by user');

        },

        success: function (data) {

          console.log('WX PAY success');

         let finalurl= data.final_url;

        }

      })

    },

总结

该问题和解决方案同样也适用于微信小程序转华为快应用时调用微信支付。

欲了解更多更全技术文章，欢迎访问 https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh