手把手教你快应用接入微信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/cgi-bin/frame?t=home/web_tmpl&lang=zh_CN

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/consumer/cn/forum/topic/0201423013046800608?fid=18

原作者：Mayism

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

【快应用】微信H5 referer支付未拉起微信收银台
现象描述快应用使用微信H5 referer方式支付, wxpay.pay调用后回调success得到url,但并未拉起微信收银台,无法支付.另外,应用微信h5支付都是通的,在浏览器端是可以直接支付 ...
微信html5 支付接口,黄聪：详解申请微信h5支付方法，开通微信h5网页支付接口（转）...
现在大街小巷的商家都在使用微信支付, 但是一些商家使用的是个人微信收款, 这个虽然很便利, 但是如果你想要数据统计汇总, 让客户在网络上在线付款, 就需要用到微信的h5支付. 微信h5支付今天子恒老 ...
详解申请微信h5支付方法，开通微信h5网页支付接口（转）
现在大街小巷的商家都在使用微信支付, 但是一些商家使用的是个人微信收款, 这个虽然很便利, 但是如果你想要数据统计汇总, 让客户在网络上在线付款, 就需要用到微信的h5支付. 微信h5支付今天子恒老 ...
Golang Gin接入支付宝H5网页支付
安装依赖 go get github.com/smartwalle/alipay/v3 发起账单接口 func FinishAliPayment(c *gin.Context) {appG := ap ...
真正手把手教你用unity接入苹果内购（IAP）
原帖:真正手把手教你用unity接入苹果内购(IAP) http://www.manew.com/thread-100403-1-1.html (出处: -[游戏蛮牛]-ar增强现实,虚拟现实,uni ...
微信无法连接支付服务器,App接入微信H5支付常见错误及原因
在App上接入微信H5支付一般都会遇到一些错误.本文讨论了这些错误的解决方案和背后的原因,希望能让读者能少踩些坑. 错误可以分为两类:一是H5支付域名设置错误,二是URL Scheme跳转App错误. ...
Uniapp 接入微信H5登录，并获取openid和unionid 含Sql、PHP完整代码
Uniapp 接入微信H5登录,并获取openid和unionid 实现目标:通过微信H5接入微信获取openid和unionid.用户头像,以及实现登录. 实现目标,如图: 具体实现 MySQL代码 ...
微信H5网页链接如何自定义分享标题，简介和图片
微信H5网页链接怎么才能自定义分享标题,简介和图片? 需求概述微信中可以直接转发网页链接,用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友,朋友圈,QQ等.但直接这样分享的话,用 ...
ASP.NET Core Web 支付功能接入微信-扫码支付篇
// 随着版本更迭,新版本可能无法完全适用,请参考仓库内的示例. 这篇文章将介绍ASP.NET Core中使用开源项目 Payment(https://github.com/Essensoft/Pa ...
教你玩转HTML(html5)h5网页设计，网站开发-刘青-专题视频课程
教你玩转HTML(html5)h5网页设计,网站开发-54965人已学习课程介绍教你玩转HTML(html5)h5网页设计,网站开课程收益教你玩转HTML(html5) ...

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

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

最新文章

热门文章