首頁  >  文章  >  web前端  >  在nodejs環境下微信掃碼支付功能如何實現?

在nodejs環境下微信掃碼支付功能如何實現?

亚连
亚连原創
2018-06-05 17:18:481550瀏覽

本片文章透過程式碼範例給大家詳細講述如何用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签名方式

以上就是我們所需要的一些參數

簽名生成演算法見微信官方:https://pay. weixin.qq.com/wiki/doc/api/native.php?chapter=4_3

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: &#39;POST&#39;,
      content: formData,
      headers: {
        &#39;content-type&#39;: &#39;text/html&#39;,
      },
    });

  // 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 === &#39;object&#39;) {
      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 === &#39;object&#39;) {
            message[key] = formMessage(val);
          } else {
            message[key] = (val || &#39;&#39;).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(&#39;request&#39;);
  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的數據,後端一定要確保能夠接收得到,按照正常的方式是接收不了的,得額外設定。

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

Vue中v-for的資料分組實例

vue2.0 computed 計算list循環後累加值的實例

vue.js 巢狀迴圈、if判斷、動態刪除的實例

以上是在nodejs環境下微信掃碼支付功能如何實現?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn