nodejs實作微信掃碼支付功能-js教程-PHP中文網

首頁

web前端

js教程

nodejs實作微信掃碼支付功能

小云云

Feb 22, 2018 am 09:00 AM

javascript nodejs 功能

準備工作

微信公眾號-appid

微信商家號碼-mch_id

key值(簽章演算法所需,其實就是一個32位元的密碼，可以用md5產生一個)(key設定路徑：微信商家平台(pay.weixin.qq.com)-->帳號設定-->API安全-->金鑰設定)

掃碼支付-統一下單

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

  let MD5 = require(&#39;md5&#39;),
    xml2js = require(&#39;xml2js&#39;),
    url = "https://api.mch.weixin.qq.com/pay/unifiedorder",// 下单请求地址
    appid = &#39;公众号id&#39;,
    mch_id = &#39;微信商户号&#39;；
    notify_url = &#39;回调地址&#39;,
    out_trade_no = &#39;自己设置的订单号&#39;,// 微信会有自己订单号、我们自己的系统需要设置自己的订单号
    total_fee = &#39;订单金额&#39;,// 注意，单位为分
    body = &#39;商品简单描述&#39;, 
    trade_type = &#39;NATIVE&#39;,// 交易类型，JSAPI--公众号支付、NATIVE--原生扫码支付、APP--app支付
    nonce_str = moment().format(&#39;YYYYMMDDHHmmssSSS&#39;),// 随机字符串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，可能會得到空的資料

這裡還要注意的是，我們在保存用戶支付資訊的同時，得先查改訂單是否支付，以免重複操作，可能會插入多條記錄的情況

#總結

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

簽章演算法要寫正確，不然是不會成功的，要拼接正確才行
微信回傳的是xml格式的數據，我們得透過外掛程式轉成json，這樣才方便取得資料
傳回的code_url要為前端產生二維碼用，然後需要開一個計時器查詢該訂單是否完成支付，最後通知使用者結果
回呼地址很重要，我們後端需要post接收微信回傳的回調訊息，然後保存訊息，不過在保存用戶支付資訊的之前，我們得知道該訂單是否已經保存過，以免重複添加。還有回傳的是xml的數據，後端一定要確保能夠接收得到，按照正常的方式是接收不了的，得額外設定。

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7814

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

nodejs是後端框架嗎 Apr 21, 2024 am 05:09 AM

Node.js 可作為後端框架使用，因為它提供高效能、可擴展性、跨平台支援、豐富的生態系統和易於開發等功能。

nodejs怎麼連接mysql資料庫 Apr 21, 2024 am 06:13 AM

要連接 MySQL 資料庫，需要遵循以下步驟：安裝 mysql2 驅動程式。使用 mysql2.createConnection() 建立連接對象，其中包含主機位址、連接埠、使用者名稱、密碼和資料庫名稱。使用 connection.query() 執行查詢。最後使用 connection.end() 結束連線。

nodejs中的全域變數有哪些 Apr 21, 2024 am 04:54 AM

Node.js 中存在以下全域變數：全域物件：global核心模組：process、console、require執行階段環境變數：__dirname、__filename、__line、__column常數：undefined、null、NaN、Infinity、-Infinity

nodejs安裝目錄裡的npm與npm.cmd檔有什麼差別 Apr 21, 2024 am 05:18 AM

Node.js 安裝目錄中有兩個與 npm 相關的文件：npm 和 npm.cmd，區別如下：擴展名不同：npm 是可執行文件，npm.cmd 是命令視窗快捷方式。 Windows 使用者：npm.cmd 可以在命令提示字元中使用，npm 只能從命令列執行。相容性：npm.cmd 特定於 Windows 系統，npm 跨平台可用。使用建議：Windows 使用者使用 npm.cmd，其他作業系統使用 npm。

nodejs和java的差別大嗎 Apr 21, 2024 am 06:12 AM

Node.js 和 Java 的主要差異在於設計和特性：事件驅動與執行緒驅動：Node.js 基於事件驅動，Java 基於執行緒驅動。單執行緒與多執行緒：Node.js 使用單執行緒事件循環，Java 使用多執行緒架構。執行時間環境：Node.js 在 V8 JavaScript 引擎上運行，而 Java 在 JVM 上運行。語法：Node.js 使用 JavaScript 語法，而 Java 使用 Java 語法。用途：Node.js 適用於 I/O 密集型任務，而 Java 適用於大型企業應用程式。