手把手教你快應用接入微信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: '
      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: '
        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": "
}
},

微信工具抓取的簽名樣例：
fcaa113908d343444c1894dc4b42ac13

原文連結： https://developer.huawei.com/consumer/cn/forum/topic/0201423013046800608?fid=18

原作者：Mayism