微信支付以內置瀏覽器的H5頁面支付

時間 2019-11-09

標籤微信支付內置瀏覽器 h5 頁面欄目瀏覽器简体版

原文原文鏈接

微信支付以內置瀏覽器的H5頁面支付

由於項目須要，要在H5頁面中加入微信支付，因此便去嘗試，只想說真的很坑，尤爲調試起來不方便javascript

這是微信的官方API文檔微信APIphp

微信支付的準備工做

申請公衆號，申請開通支付，這個很簡單，自行百度
申請好以後在微信公衆平臺頁面的「微信支付」頁面中的「開發配置」Tab上配置「支付受權目錄」，「測試受權目錄」，「測試白名單」
在微信公衆平臺頁面的「開發者中心」中找到「AppID(應用ID)」和「AppSecret(應用密鑰)」
在商戶平臺中找到微信支付分配的商戶號，以及本身配置一個商戶支付密鑰

具體步驟

首先經過微信支付的api 得到支付用的prepay_id，這裏須要用到上面提到的「AppID(應用ID)」，「AppSecret(應用密鑰)」，
「微信支付分配的商戶號」，「商戶支付密鑰」以及其餘的一些參數（具體參照微信開發文檔）用MD5加密成簽名（第一次簽名）
得到prepay_id後，用prepay_id和一些其餘參數（具體參照微信開發文檔）用MD5加密成簽名（第二次簽名）

而後在前端經過微信內置瀏覽器提供的js API，WeixinJSBridge.invoke來調用微信支付的彈出頁面，這裏須要用到上面的第二次的簽名

具體代碼以下

$.get('/xxx',function(data){
        if(data && data !== ""){
            var _data = $.parseJSON(data)[0];
            if(parseInt(_data.userAgent) < 5){
                alert('您的微信版本低於5.0，沒法使用微信支付！');
                return false;
            }
            WeixinJSBridge.invoke('getBrandWCPayRequest',{
                'appId': _data.appId,
                'timeStamp': _data.timeStamp,
                'nonceStr': _data.nonceStr,
                'package': 'prepay_id=' + _data.packageOne,
                'signType': _data.signType,
                'paySign': _data.paySign
                },function(res){
                    if(res.err_msg === 'get_brand_wcpay_request:ok'){
                        alert('支付成功，返回訂單列表！');
                    }else if(res.err_msg === 'get_brand_wcpay_request:cancel'){
                        alert('取消支付！');
                    }
            });

        }
    });