現象描述
微信支付支持兩種接入支付方式: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方式)
示例代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
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參數傳給這個頁面
示例代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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中微信支付的配置樣例:
1
2
3
4
5
6
7
8
|
{
"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