手把手教你快应用接入微信H5网页支付

Posted 华为开发者论坛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手把手教你快应用接入微信H5网页支付相关的知识,希望对你有一定的参考价值。

现象描述

微信支付支持两种接入支付方式:app支付接入和网页支付接入。

华为手机目前不支持app支付,如果您的快应用仅在华为推广,请勿接入app支付。以下仅说明H5网页支付方式。

问题分析
【注意】从
1040
版本开始,网页支付将支持设置
referer
方式,此方式不再需要实现中间页,但原先需要实现中间页跳转的方式还会继续支持。设置
referer
方式需要在
pay
接口中设置
referer
参数,
pay
接口的
extra
参数中必须配置
mweb_url

referer
是在微信支付后台配置的域名。从
1040
版本开始,在使用微信网页方式调用时,若该参数不为空,将通过设置
referer
的方式拉起微信客户端。

如果之前没有在h5网站中接入过微信支付能力,建议先查看微信官方文档。

快应用中接入微信H5支付和微信文档中介绍的一致,快应用只是提供了一个运行H5网页的webview,使用h5页面拉起微信支付的能力给开发者提供微信支付的接口。

快应用接入微信H5支付的步骤:

1.在微信开放平台新注册申请一个H5网站

https://open.weixin.qq.com/cg...

2.完成支付服务端的接入

按照微信官方的文档完成服务端的接入,服务器要完成的工作是接收来自客户端的支付请求,然后生成一个订单,之后把订单传给微信的服务器,微信会返回一个mweb_url,服务器需要把这个mweb_url返回给客户端。

3.发起微信支付(以下两种方式二选一,推荐第一种)

(1)不需要中间页实现(设置referer方式)

示例代码:

webPay: function () {
  console.info(\'wxpay call function webPay\')
  pay.pay({
      prepayid: \'wx09113246667953cfb8d067ad1892777375\', // your order prepayid,eg: wx20170101abcdef1234567890
      referer: \'https://www.huawei.cn\', //your host name configured in wechat
      extra: {
          mweb_url: \'https%3A%2F%2Fwx.tenpay.com%2Fcgi-bin%2Fmmpayweb-bin%2Fcheckmweb%3Fprepay_id%3Dwx09113246667953cfb8d067ad1892777375%26package%3D299247950%26redirect_url%3Dhttps%3A%2F%2Fm.vip.com%2Fuser-order-detail-list-0.html\',
          prepayid: \'wx09113246667953cfb8d067ad1892777375\'
      },
      fail: function (data, code) {
          console.log(\'WX PAY \' +  pay.getType() + \' failed, code = \' + code);
          prompt.showToast({
              message: \'WX PAY \' +  pay.getType() + \' failed, code = \' + code
          })
      },
      cancel: function (data) {
          console.log(\'WX PAY \' +  pay.getType() + \' cancelled by user\');
           prompt.showToast({
              message: \'WX PAY \' +  pay.getType() + \' cancelled by user\'
          })
      },
      success: function (data) {
          console.log(\'WX PAY \' +  pay.getType() + \' success\');
           prompt.showToast({
              message: \'WX PAY \' +  pay.getType() + \' success\'
          })
      }
  })
}

(2)完成一个中间跳转页面

中间页需要在加载完成的时候从页面的get参数中解析出 mweb_url , 然后自动向这个url跳转,不需要任何其他的内容,也不需要ui。

关于这个中间页:

(1)为什么需要这个中间页?

因为微信h5支付拉起支付界面的方式就是向mweb_url跳转,不过因为微信会通过ref做防盗链检查,因为跳转动作需要在开发者的页面中完成

(2)这个中间页什么时候会被加载运行?

调用微信支付的pay接口之后,平台会自动加载运行这个页面

(3)加载运行这个中间页的时候,会拿到哪些参数?

调用微信支付的pay接口时传入的参数,会全部作为get参数传给这个页面

示例代码:

wxpay.pay({
    //微信网页支付的prepayId
    prepayid: \'your order prepayid,eg: wx20170101abcdef1234567890\',
    extra: {
        //传递给支付页面的自定义参数, 根据需要进行设置, 会被urlEncode之后拼接在配置的url尾部
        mweb_url: \'https://wx.tenpay.com/cgi-bin/mmpayweb-bin\',
        customeKey1: \'customeValue1\',
        customeKey2: \'customeValue2\'
    },
    fail: function(data, code) {
        console.log("WX H5 PAY handling fail, code=" + code);
    },
    cancel: function(data) {
        console.log("WX H5 PAY handling cancel");
    },
    success: function(data) {
        //H5方式下,支付成功的回调仅仅只是指将订单递交给微信,并不意味着支付已经成功完成
        console.log("WX H5 PAY handling success");
    }
})

4.在快应用中进行配置中间页地址

在manifest.json中声明wxpay这个feature时填上,参考快应用官方文档中接口声明的url字段。

FAQ:
1.我可以指定使用微信h5支付吗?
不可以,H5支付是App支付的fallback方案,如果可以app支付,不会fallback到h5支付。具体应该使用那种支付方式,以getType的返回值为准。

2.app支付下,收到了2001错误,怎么处理?

2001错误是微信拒绝了支付请求,可能的原因:

(1)微信后台或者manifest.json中的签名配置错误

(2)订单信息中的sign字段生成有误

(3)android app的后台审核流程还未通过

3.微信h5支付下,没有拉起微信支付界面,什么原因?

检查中间页自动向mweb_url跳转的逻辑是否有生效,如果没有请修改中间页的逻辑。另外,中间页因为不展示ui逻辑,只作跳转,因此除了js执行权限以外,其他的权限均未授予,包括常用的domStorage权限。

4.我们之前已经有一个上线了android app接入了微信支付,可以直接把这个app的包名和签名配置在快应用中使用吗?

不行,如果这么配置,快应用和android app同时发起微信支付时,会发生冲突。

附:
manifest.json中微信支付的配置样例:

{
  "name": "service.wxpay",
  "params": {
    "package": "com.your.package.name",
    "sign": "MIIDDTCCAfWgAwIBAgIEfiu92jANBgkqhkiG9w0BAQsFADA3MQswCQYDVQQGEwJVUzEQMA4GA1UEChMHQW5kcm9pZDEWMBQGA1UEAxMNQW5kcm9pZCBEZWJ1ZzAeFw0xNjA0MTMwNTUyMDhaFw00NjA0MDYwNTUyMDhaMDcxCzAJBgNVBAYTAlVTMRAwDgYDVQQKEwdBbmRyb2lkMRYwFAYDVQQDEw1BbmRyb2lkIERlYnVnMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAz/dFKLrU3NmabX/byI0vL5ctZkg64Yhas5dsvl6bZZO/FWrgR+ZWiCcVFLQt/CpzLj3fMpIBoUiEuqPVRJoZdRn4gML1oIfj1meM9X9HSQHXzXr0NkOZhOzrlGvuWuy0//m3I18I8V9HXka4xiT9xGBiiMTWbP90vj7fTU+B3Q0UQxbMibdZfap9gCn2QKq7Y8k73n9wLsbmznlHiBeL2kJAcVL+3EtEle1PZaN90w7YGjaKijuXwv8MS0guvzy63t2rqUjEL41wlBz+/DnzfdolAD6toN5aynuFan51pUqrY5CD9CQIbiTeJXgjsz8vaZotSj+61ISqy2sXrpySAwIDAQABoyEwHzAdBgNVHQ4EFgQUhtto5p0PfrnZlj12MpIF6gzYawEwDQYJKoZIhvcNAQELBQADggEBAJcNfFIJCWh9YIFzM7+eg4P9pNME+Q9Oug+NVA+g6+Vuhi2eFMBe29GnSr//EMpnluXhmfNy40whv9uUKdz4ekejDVyHucs8AvJI2cI5WhoenHO2jqw5IpsxIBqyca6zpXpElU35NZnqNoD9Rs5AZrEVxCB3AzhWviGe5QmxXqRMAVOju3X1B+Nv3dVvou9y64UI9mK3Z4Sz0gUNcYsyrSU3uPmCAYGgh/3/ygGZA9LL5a2jvWZVWPq2/+pFzWL10CbFLCXaWT0dJrxDbLWZcd/6N95kT0sMwVJkwL+v/jrnyXpCpbB7UaYw5JSLsWMnk+4/pSeAoDwcZIgdBlRYPmM=",
    "url": "https://your.transitional.page/para=value"
}
},

微信工具抓取的签名样例:
fcaa113908d343444c1894dc4b42ac13

原文链接:https://developer.huawei.com/...
原作者:Mayism

以上是关于手把手教你快应用接入微信H5网页支付的主要内容,如果未能解决你的问题,请参考以下文章

微信H5网页公众号外支付接入攻略demo

微信h5支付和jsapi支付的区别

H5网站接入微信支付(H5支付+JSAPI支付)

H5网站接入微信支付(H5支付+JSAPI支付)

H5网站接入微信支付(H5支付+JSAPI支付)

手把手教你撸支付宝红包