3

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

 1 year ago
source link: https://segmentfault.com/a/1190000040065594
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

发布于 11 分钟前

微信支付支持两种接入支付方式: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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK