先記錄一下正常接入微信支付步驟

微信公眾號配置：

1. 開通微信公眾號

這裡就沒什麼要講的了

2.伺服器配置

進入微信公眾平臺->開發->基本配置->伺服器配置，之後填寫伺服器地址和令牌，並按照微信官方教程配置即可。下面是我自己的一段Node.js版本的簡單伺服器配置:

var http = require("http");
var url = require("url");
var crypto = require('crypto');
var token = 'abc123'; //令牌
function getQuery(name,str) {
    var
 
 reg = new RegExp(name+'=([^&]*)');
    var matches = reg.exec(str);
    if (matches) {
        return matches[1];
    }
    return '';
}

/**
*監聽請求
*/
function onRequest(request,response){
    var urlParams = url.parse(request.url);
    var result = verify(urlParams.query);
    response.writeHead(200
 
,{"Content-type":"text/plain; charset=UTF-8"});
    response.write(result);
    response.end();
}


function verify(query) {
    var signature = getQuery('signature',query);
    var timestamp = getQuery('timestamp',query);
    var nonce = getQuery('nonce',query);
    var echostr = getQuery('echostr',query);

    var
 
 arr = [token,timestamp,nonce];
    arr.sort();
    var tempStr = arr.join('');
    var sha1 = crypto.createHash('sha1');
    var resultCode = sha1.update(tempStr,'utf-8').digest('hex');

    if (resultCode === signature) {
        return echostr;
    }
    return 'nomatch';
}

http.createServer(onRequest).listen(80);

3.js域名設定

進入微信公眾平臺->公眾號設定->功能配置，之後填寫業務域名、js介面安全域名和網頁授權域名，這三個域名的作用設定時看官方解釋即可。

4.獲取開發者密碼與AppId

進入微信公眾平臺->基本配置，設定或獲取開發者密碼與AppId,在獲取使用者user_info中將用到。

微信支付商戶平臺配置：

公眾平臺微信支付公眾號支付授權目錄、掃碼支付回撥URL配置入口已於8月1日遷移至商戶平臺（pay.weixin.qq.com）

1.支付授權目錄配置

微信支付商戶平臺->產品中心->開發配置->支付配置->新增授權目錄,在微信中呼叫支付時必須在新增的目錄中，否則將無法支付。

2.設定API金鑰

微信支付商戶平臺->賬戶中心->API安全->設定API金鑰，將金鑰記下（建立統一支付訂單時需要）

開發配置：

1.通過微信授權獲取使用者openid

第一步：使用者同意授權，獲取code
訪問下面的連結：

'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+微信公眾號AppId+'&redirect_uri='+跳轉地址+'wxoauth&response_type=code&scope=snsapi_userinfo#wechat_redirect'

還記得我們在上面微信公眾號配置->js域名設定,填寫的網頁授權域名嗎？當我們使用上面的連結獲取到code之後微信就會在URL query中攜帶著code跳轉到網頁授權域名。

第二步：通過code換取網頁授權access_token
通過GET方式獲取到ACCESS_TOKEN:

getWXToken: function(code) {
   let reqUrl = 'https://api.weixin.qq.com/sns/oauth2/access_token?';
    let params = {
        appid: wxConfig.appid,//微信公眾號AppId
        secret: wxConfig.appSecret,//微信公眾號開發者密碼
        code: code,//上一步獲取到的code
        grant_type: 'authorization_code'
    };
    let options = {
        method: 'get',
        url: reqUrl + CommonUtil.json2RequestParam(params)
    };
    return new Promise((resolve, reject) => {
        request(options, function(err, res, body) {
            if (res) {
                resolve(body);
            } else {
                reject(err);
            }
        })
    });
},

在上面的程式碼中用到了request庫,access_token和使用者openid就存在於body中.如果不需要獲取使用者資訊，那麼到這一步就可以了。

第三步：拉取使用者資訊(需scope為 snsapi_userinfo)

getWXUserInfo: function(AccessToken, openId) {
    let reqUrl = 'https://api.weixin.qq.com/sns/userinfo?';
    let params = {
        access_token: AccessToken,//上一步獲取到的AccessToken
        openid: openId,//上一步獲取到的使用者openId
        lang: 'zh_CN'
    };
    let options = {
        method: 'get',
        url: reqUrl + CommonUtil.json2RequestParam(params)
    };
    return new Promise((resolve, reject) => {
        request(options, function(err, res, body) {
            if (res) {
                resolve(body);
            } else {
                reject(err);
            }
        });
    })
},

2.建立微信統一訂單

//微信支付相關
var fs = require('fs');
var path = require('path');
var wxConfig = require('../config/weixin');
var util = require('./weixinUtil');
var request = require('request');
var md5 = require('MD5');

function WXPay() {

    if (!(this instanceof WXPay)) {
        return new WXPay(arguments[0]);
    };

    this.options = arguments[0];
    this.wxpayID = { appid: wxConfig.appid, mch_id: wxConfig.mch_id };
};

WXPay.mix = function() {
    switch (arguments.length) {
        case 1:
            var obj = arguments[0];
            for (var key in obj) {
                if (WXPay.prototype.hasOwnProperty(key)) {
                    throw new Error('Prototype method exist. method: ' + key);
                }
                WXPay.prototype[key] = obj[key];
            }
            break;
        case 2:
            var key = arguments[0].toString(),
                fn = arguments[1];
            if (WXPay.prototype.hasOwnProperty(key)) {
                throw new Error('Prototype method exist. method: ' + key);
            }
            WXPay.prototype[key] = fn;
            break;
    }
};

WXPay.mix('option', function(option) {
    for (var k in option) {
        this.options[k] = option[k];
    }
});

WXPay.mix('sign', function(param) {
    var str = '';
    var arr = [];
    for (var name in param) {
        if (param[name] != null && param[name] != '') {
            arr.push(name + '=' + param[name]);
        }
    }
    arr.sort();
    str = arr.join('&');
    str = str + '&key=' + wxConfig.mch_key;
    return md5(str).toUpperCase();
});

WXPay.mix('createWCPayOrder', function(order) {
    order.spbill_create_ip = order.spbill_create_ip.match(/\d+.\d+.\d+.\d+/)[0];//請求Ip
    order.trade_type = "JSAPI";
    order.nonce_str = order.nonce_str || util.generateNonceString();//隨機字串
    util.mix(order, this.wxpayID);//加入公眾號AppId和微信支付商戶Id
    order.sign = this.sign(order);
    var self = this;
    return new Promise(function(resolve, reject) {
        self.requestUnifiedOrder(order, function(err, data) {
            if (err) {
                reject(err);
            } else {
                if (data.return_code == 'SUCCESS' && data.result_code == 'SUCCESS') {
                    var resParam = {
                        "appId": data.appid, //公眾號名稱，由商戶傳入     
                        "timeStamp": Math.floor(Date.now() / 1000) + "", //時間戳，自1970年以來的秒數     
                        "nonceStr": data.nonce_str, //隨機串     
                        "package": "prepay_id=" + data.prepay_id,
                        "signType": "MD5" //微信簽名方式：     
                    };
                    resParam.paySign = self.sign(resParam);
                    resolve(resParam);
                } else {
                    reject(data);
                }
            }
        }, function(err) {
            reject(err);
        });
    });
});

WXPay.mix('requestUnifiedOrder', function(order, fn, errFn) {
    request({
        url: "https://api.mch.weixin.qq.com/pay/unifiedorder",
        method: 'POST',
        body: util.buildXML(order)
    }, function(err, response, body) {
        if (err) {
            errFn();
        } else {
            console.log('body:' + body);
            util.parseXML(body, fn);
        }
    });
});
exports = module.exports = WXPay;

以上程式碼是一個封裝好的建立微信統一支付的類,使用方法如下:

var wxpay = new WeixinPay();
var wxOrder = await wxpay.createWCPayOrder({
    openid: ctx.session.openid,//使用者openid
    body: '購買商品',
    detail: '購買商品',
    out_trade_no: orderDetail.code, //平臺內部訂單號
    total_fee: parseInt(orderDetail.totalPrice*100,10),//總價格
    spbill_create_ip: ctx.ip,//ip
    notify_url: 'http://baebae.cn/api/order/paynotify'//支付回撥地址
});

接下來將wxOrder返回給前端即可。

3.前端呼叫微信支付

wxPay: function(order, fn) {
    if (typeof window.WeixinJSBridge === 'undefined') {
        return;
    }
    window.WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        order,
        function(res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
                fn(true);
            } else {
                fn(false);
            }
        }
    );
},

通過將上一步wxOrder傳入上面的方法即可喚起微信支付,當用戶支付後微信將回調上一步建立訂單時傳入的回撥地址。

4.回撥處理

payNotify: async function(ctx) {
    var body = ctx.request.body;
    if (body.return_code == 'SUCCESS' && body.result_code == 'SUCCESS') {
        // 支付成功處理
    }
    var message = '<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>';
    ctx.body = message;
},

這個方法便是回撥處理方法，當請求中的return_code和result_code皆為SUCCESS表示支付成功,之後還應返回一段狀態XML(即上述程式碼中的message)給微信表示已獲取到微信提示，否則微信將以某種策略一直請求回撥地址。微信官方文件: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

遇到的坑

我有兩個支付頁面，當我按照上面的步驟做了之後發現在我的手機中(IOS)支付沒有問題，但是當在安卓手機中卻無法正常支付。後來弄了很久，發現在上述：微信支付商戶平臺配置->支付授權目錄時並沒有寫完全（只寫了一個目錄）。