nodejs微信支付之掃碼支付

wclimb發表於2019-02-16
NodeJS

前言

本篇文章主要是記錄本人在微信掃碼支付過程中所遇到的問題，給大家一個借鑑作用，希望對你們有幫助

開發環境

  • nodejs v8.1.0
  • egg v1.1.0

準備工作

  • 微信公眾號-appid
  • 微信商戶號-mch_id
  • key值(簽名演算法所需,其實就是一個32位的密碼，可以用md5生成一個)(key設定路徑：微信商戶平臺(pay.weixin.qq.com)–>賬戶設定–>API安全–>金鑰設定)

掃碼支付-統一下單

以下才用的是微信模式二，因為比較簡單

    let MD5 = require(`md5`),
        xml2js = require(`xml2js`),
        url = "https://api.mch.weixin.qq.com/pay/unifiedorder",// 下單請求地址
        appid = `公眾號id`,
        mch_id = `微信商戶號`；
        notify_url = `回撥地址`,
        out_trade_no = `自己設定的訂單號`,// 微信會有自己訂單號、我們自己的系統需要設定自己的訂單號
        total_fee = `訂單金額`,// 注意，單位為分
        body = `商品簡單描述`, 
        trade_type = `NATIVE`,// 交易型別，JSAPI--公眾號支付、NATIVE--原生掃碼支付、APP--app支付
        nonce_str = moment().format(`YYYYMMDDHHmmssSSS`),// 隨機字串32位以下
        stringA = `appid=${公眾號id}&body=${body}&mch_id=${微信商戶號}&nonce_str=${nonce_str}&notify_url=${
        notify_url}&out_trade_no=${out_trade_no}&spbill_create_ip=${ctx.request.ip}&total_fee=${total_fee}&trade_type=${trade_type}`,
        stringSignTemp = stringA + "&key=xxxxxxxxxxxxxxxxx", //注：key為商戶平臺設定的金鑰key
        sign = MD5(stringSignTemp).toUpperCase();  //注：MD5簽名方式

以上就是我們所需要的一些引數
簽名生成演算法見微信官方
spbill_create_ip 是 終端ip地址

下面把所有的引數拼接成xml

    const formData = "<xml>";
        formData += "<appid>" + appid + "</appid>"; //appid
        formData += "<body>" + body + "</body>"; //商品或支付單簡要描述
        formData += "<mch_id>" + mch_id + "</mch_id>"; //商戶號
        formData += "<nonce_str>" + nonce_str + "</nonce_str>"; //隨機字串，不長於32位
        formData += "<notify_url>" + notify_url + "</notify_url>"; //支付成功後微信伺服器通過POST請求通知這個地址
        formData += "<out_trade_no>" + out_trade_no + "</out_trade_no>"; //訂單號
        formData += "<total_fee>" + total_fee + "</total_fee>"; //金額
        formData += "<spbill_create_ip>" + ctx.request.ip + "</spbill_create_ip>"; //ip
        formData += "<trade_type>NATIVE</trade_type>"; //NATIVE會返回code_url ，JSAPI不會返回
        formData += "<sign>" + sign + "</sign>";
        formData += "</xml>";
    // 這裡使用了egg裡面請求的方式
    const resultData = yield ctx.curl(url, {
            method: `POST`,
            content: formData,
            headers: {
                `content-type`: `text/html`,
            },
        });

    // xml轉json格式
    xml2js.parseString(resultData.data, function (err, json) {
        if (err) {
            new Error("解析xml報錯")
        } else {
            var result = formMessage(json.xml); // 轉換成正常的json 資料
            console.log(result) //列印出返回的結果
        }
    })
    var formMessage = function (result) {
        var message = {};
        if (typeof result === `object`) {
            var keys = Object.keys(result);
            for (var i = 0; i < keys.length; i++) {
                var item = result[keys[i]];
                var key = keys[i];
                if (!(item instanceof Array) || item.length === 0) {
                    continue;
                }
                if (item.length === 1) {
                    var val = item[0];
                    if (typeof val === `object`) {
                        message[key] = formMessage(val);
                    } else {
                        message[key] = (val || ``).trim();
                    }
                } else {
                    message[key] = [];
                    for (var j = 0, k = item.length; j < k; j++) {
                        message[key].push(formMessage(itemp[j]));
                    }
                }
            }
        }
        return message;
    }

上面使用了egg的請求方式，原生node可以使用request

    var request = require(`request`);
    request({
        url: url,
        method: "POST",
        body: formData
    }, function(error, response, body) {
        if (!error && response.statusCode == 200) {
        }
    });

如果請求成功會最終返回一個xml,然後我們進行解析成json的格式,裡面會有一個code_url和out_trade_no,我們需要把這兩個返回給前端，然後通過生成二維碼展示給使用者掃碼，完成支付

監聽支付是否成功

上面操作完成之後，我們需要知道使用者是否完成支付，因為使用者會停留在該頁面，我們需要在使用者付完款之後，通知使用者支付成功。
首先，使用者發起支付的時候我們會生成二維碼，讓使用者完成掃碼支付，我們還要做的是，開一個定時器，每隔一段時間去傳送一個請求，這個時候，我們node後臺就需要寫一個查詢訂單的介面，之前我們拿到了out_trade_no，也就是我們系統內部的訂單號，我們把這個資料傳送給後臺查詢訂單的介面，然後後臺接收到之後會請求微信的查詢介面地址https://api.mch.weixin.qq.com/pay/orderquery,流程跟上面一樣，只是介面地址和微信返回的xml不一樣而已，返回的欄位會有一個狀態即SUCCESS和NOTPAY，我們可以通過判斷是否支付返回給前端，成功之後提示給使用者支付成功，關閉定時器。

回撥地址

這個是非常重要的一環，大部分的操作其實在上面就可以完成，但是有特殊的情況，比如使用者電腦斷網傳送不了請求，但是手機付款了，這就會導致我們記錄不到使用者支付的資訊。這個時候回撥地址就很重要了

設定回撥地址

微信商戶中心->產品中心->開發配置->掃碼支付

之後我們需要做的是後端用post來接收微信傳送的非同步回撥資訊，也是xml的格式，這裡注意，如果不支援接收xml，可能會得到空的資料
這裡還需要注意的是，我們在儲存使用者支付資訊的同時，得先查改訂單是否支付，以免重複操作，可能會插入多條記錄的情況

總結

微信掃碼支付坑還是有的，如果你是第一次摸索的話，下面羅列一下需要注意的地方

  1. 簽名演算法要寫正確，不然是不會成功的，要拼接正確才行
  2. 微信返回的是xml格式的資料，我們得通過外掛轉成json，這樣才方便獲取資料
  3. 返回的code_url要給前端生成二維碼用，然後需要開一個定時器查詢該訂單是否完成支付，最終通知使用者結果
  4. 回撥地址很重要，我們後端需要post接收微信返回的回撥資訊，然後儲存資訊，不過在儲存使用者支付資訊的之前，我們得知道該訂單是否已經儲存過，以免重複新增。還有就是返回的是xml的資料，後端一定要保證能夠接收得到，按照正常的方式是接收不了的，得額外設定。

文章地址 nodejs微信支付之掃碼支付
個人部落格地址 http://www.wclimb.site
GitHub地址 wclimb

相關文章