手把手教你快應用接入微信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