微信支付教程系列之掃碼支付

時間 2019-11-08

標籤微信支付教程系列简体版

原文原文鏈接

微信支付教程系列之掃碼支付

今天，咱們來一塊兒探討一下這個微信掃碼支付。何爲掃碼支付呢？這裏面，掃的碼就是二維碼了，就是咱們常常掃一掃的那種二維碼圖片，例如，咱們本身添加好友的時候，能夠經過輸入對方的微信號，也能夠掃一掃對方的二維碼。掃碼支付，做爲，微信支付裏面，不可或缺的一個功能，對商品的支付提供了極爲方便的體驗，用途也很是的多。例如咱們在地鐵、公交站常見的那些自動售貨機（不錯，就是那種投硬幣，就能夠自動出貨的那種機器）中都用到。之前，那種機器，只能經過投硬幣或者紙幣，可是，這裏面也有必定的風險，例如：假幣，盜竊（真有人把機器砸了，把機器裏面的錢偷走的），因此，微信（支付寶）的掃碼支付的出現，大大的減小了這方面的風險，近些年來，二維碼的應用愈來愈廣，甚至有些地方，直接用來自動售票（就是把起始點設定好，票價設定好，直接把二維碼貼出來，讓乘客自動掃相關的二維碼，完成購票，上車的時候，只須要提供本身的支付憑證給乘車員驗證便可），這樣，不只綠色環保了，還大大的提升了售票的速度（去過大車站購票的人應該深有體驗，排隊買個票，好歹半個小時以上，內心也是萬頭草泥馬在奔騰的）。

咱就不扯遠了，說回咱麼今天要作的微信支付之掃碼支付。微信官方的文檔，這個掃碼支付（NativePay）分爲兩種，一種是「生成掃描支付模式」，另一種是「生成直接支付url，支付url有效期爲2小時」，至於這裏面，兩種掃碼模式，怎麼靈活利用呢，官方也沒有一個明確的說明。我的理解爲，第一種（生成掃描支付模式），適用於固定二維碼的，就是永久使用的那種，例如一些商家的公衆號的二維碼，是永久的，何時掃，都是關注這個公衆號的，可是，這種的話，我記得微信是有限量的，貌似是一個公衆號，限量10w，我的觀點，以爲這個限量，是足夠咱們使用的。第二種（生成直接支付url，支付url有效期爲2小時），這種的話，由於有有效期這種時間限制，超過了2個小時，該二維碼就失效，可是對生成的二維碼數量沒有限制，因此，這種我的觀點以爲適用於那種臨時根據實際狀況生成的二維碼，例如：公衆平臺登錄的時候二次驗證的二維碼，自定義生成，僅爲一次性繳費使用的二維碼，等等）。接下來，咱們就開始講講實際例子，首先將的就是第一種模式。

掃碼支付之模式一（生成掃描支付模式）：

首先，咱們新建一個「MVC」的項目（asp.net的官方的demo就是了，要asp.net的本身看demo吧，demo地址：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1），而後把系統自動生成的HomeControler和View中的Home都刪了。

而後本身新建一個HomeControler，代碼以下：

      // GET: Home public ActionResult Index() { return View(); }

再添加一個View，代碼以下：

@{
    Layout = null;
}
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>首頁</title> </head> <body> <div> </div> </body> </html>

接下來，咱們先把官方的demo的一些咱們會用到的東西拷貝過來，其中包括如下幾個文件夾,以下圖：

就這個lib和business兩個，把這兩個文件夾，支付複製到我們的新項目中，而且包含在項目中，以下：

而後咱們再「從新生成」如下項目，或者快捷鍵：ctrl+shift+b，這時候，會提下以下錯誤：

這時候，咱們去添加引用，把 lib文件夾中的 LitJson.dll 添加上便可，以下圖：

到這裏，咱們就基本把官方的demo的環境給搭建好了，接下來，咱們就要開始編寫代碼了。

首先，個人邏輯是，從前到後，就是從前端到後端。前端是顯示二維碼的地方，那麼咱們就先給他一個div（本文使用到的是jquery的二維碼生成插件，全名叫：jquery.qrcode.min.js，我會傳到附件上），而後在頁面加載完畢的時候，會請求後臺，讓他返回二維碼字符串，而後再經過jquery的二維碼生成插件，讓他生成二維碼並顯示在前臺，代碼以下：

前端：

@{
    Layout = null;
}
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>首頁</title> <link href="~/Scripts/jquery-easyui-1.4.5/themes/bootstrap/easyui.css" rel="stylesheet" /> <link href="~/Scripts/jquery-easyui-1.4.5/themes/mobile.css" rel="stylesheet" /> <link href="~/Scripts/jquery-easyui-1.4.5/themes/icon.css" rel="stylesheet" /> </head> <body> <p> 模式一：生成掃描支付模式 <br /> <div id="QRCode1"> </div> </p> <p> 模式二：生成直接支付url，支付url有效期爲2小時 <br /> <div id="QRCode2"> </div> </p> <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery-easyui-1.4.5/jquery.easyui.min.js"></script> <script src="~/Scripts/jquery-easyui-1.4.5/jquery.easyui.mobile.js"></script> <script src="~/Scripts/jquery-easyui-1.4.5/easyloader.js"></script> <script src="~/Scripts/jquery.qrcode.min.js"></script> <script type="text/javascript"> $(function () { fGetQRCode1(); }) function fGetQRCode1() { $.messager.progress({ title: "", msg: "正在生成二維碼:模式一,請稍後..." }); $.ajax({ type: "post", url: "/Home/GetQRCode1", data: { time: new Date(), productId:7788 }, success: function (json) { $.messager.progress('close');//記得關閉 if (json.result) { $('#QRCode1').qrcode(json.str); //生成二維碼  } else { $('#QRCode1').html("二維碼生成失敗"); } } }) } </script> </body> </html>

後端：

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using WxPayAPI; namespace WxPay.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } /// <summary> /// 模式一 /// </summary> /// <returns></returns>  [HttpPost] public ActionResult GetQRCode1() { object objResult = ""; string strProductID = Request.Form["productId"]; string strQRCodeStr = GetPrePayUrl(strProductID); if (!string.IsNullOrWhiteSpace(strProductID)) { objResult = new { result = true, str = strQRCodeStr }; } else { objResult = new { result = false }; } return Json(objResult); } /** * 生成掃描支付模式一URL * @param productId 商品ID * @return 模式一URL */ public string GetPrePayUrl(string productId) { WxPayData data = new WxPayData(); data.SetValue("appid", WxPayConfig.APPID);//公衆賬號id data.SetValue("mch_id", WxPayConfig.MCHID);//商戶號 data.SetValue("time_stamp", WxPayApi.GenerateTimeStamp());//時間戳 data.SetValue("nonce_str", WxPayApi.GenerateNonceStr());//隨機字符串 data.SetValue("product_id", productId);//商品ID data.SetValue("sign", data.MakeSign());//簽名 string str = ToUrlParams(data.GetValues());//轉換爲URL串 string url = "weixin://wxpay/bizpayurl?" + str; return url; } /** * 參數數組轉換爲url格式 * @param map 參數名與參數值的映射表 * @return URL字符串 */ private string ToUrlParams(SortedDictionary<string, object> map) { string buff = ""; foreach (KeyValuePair<string, object> pair in map) { buff += pair.Key + "=" + pair.Value + "&"; } buff = buff.Trim('&'); return buff; } } }

這時候，模式一是否是感受就完成了？那麼咱們如今試試，咱們瀏覽該頁面，以下：

而後用微信掃一掃功能掃一下，發現提示以下：

這是什麼鬼，是否是，你內心面是否是想知道爲啥，那我來告訴你，這是爲啥，這是由於，你尚未設置回調頁面或者回調頁面有問題，這個時候，咱們再新建一個Control，命名爲：NativeNotifyController.cs，代碼以下：

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web; using System.Web.Mvc; using WxPayAPI; namespace WxPay.Controllers { public class NativeNotifyController : Controller { // GET: NativeNotify public ActionResult Index() { string strData = ProcessNotify(); Response.Write(strData); return View(); } public string ProcessNotify() { WxPayData notifyData = GetNotifyData(); //檢查openid和product_id是否返回 if (!notifyData.IsSet("openid") || !notifyData.IsSet("product_id")) { WxPayData res = new WxPayData(); res.SetValue("return_code", "FAIL"); res.SetValue("return_msg", "回調數據異常"); return res.ToXml(); } //調統一下單接口，得到下單結果 string openid = notifyData.GetValue("openid").ToString(); string product_id = notifyData.GetValue("product_id").ToString(); WxPayData unifiedOrderResult = new WxPayData(); try { unifiedOrderResult = UnifiedOrder(openid, product_id); } catch (Exception ex)//若在調統一下單接口時拋異常，當即返回結果給微信支付後臺  { WxPayData res = new WxPayData(); res.SetValue("return_code", "FAIL"); res.SetValue("return_msg", "統一下單失敗"); return res.ToXml(); } //若下單失敗，則當即返回結果給微信支付後臺 if (!unifiedOrderResult.IsSet("appid") || !unifiedOrderResult.IsSet("mch_id") || !unifiedOrderResult.IsSet("prepay_id")) { WxPayData res = new WxPayData(); res.SetValue("return_code", "FAIL"); res.SetValue("return_msg", "統一下單失敗"); return res.ToXml(); } //統一下單成功,則返回成功結果給微信支付後臺 WxPayData data = new WxPayData(); data.SetValue("return_code", "SUCCESS"); data.SetValue("return_msg", "OK"); data.SetValue("appid", WxPayConfig.APPID); data.SetValue("mch_id", WxPayConfig.MCHID); data.SetValue("nonce_str", WxPayApi.GenerateNonceStr()); data.SetValue("prepay_id", unifiedOrderResult.GetValue("prepay_id")); data.SetValue("result_code", "SUCCESS"); data.SetValue("err_code_des", "OK"); data.SetValue("sign", data.MakeSign()); return data.ToXml(); } /// <summary> /// 接收從微信支付後臺發送過來的數據並驗證簽名 /// </summary> /// <returns>微信支付後臺返回的數據</returns> public WxPayData GetNotifyData() { //接收從微信後臺POST過來的數據 System.IO.Stream s = Request.InputStream; int count = 0; byte[] buffer = new byte[1024]; StringBuilder builder = new StringBuilder(); while ((count = s.Read(buffer, 0, 1024)) > 0) { builder.Append(Encoding.UTF8.GetString(buffer, 0, count)); } s.Flush(); s.Close(); s.Dispose(); //轉換數據格式並驗證簽名 WxPayData data = new WxPayData(); try { data.FromXml(builder.ToString()); } catch (WxPayException ex) { //若簽名錯誤，則當即返回結果給微信支付後臺 WxPayData res = new WxPayData(); res.SetValue("return_code", "FAIL"); res.SetValue("return_msg", ex.Message); } return data; } private WxPayData UnifiedOrder(string openId, string productId) { //統一下單 WxPayData req = new WxPayData(); req.SetValue("body", "廣東XXXX股份有限公司"); req.SetValue("attach", "附加信息,用於後臺或者存入數據庫,作本身的判斷"); req.SetValue("out_trade_no", WxPayApi.GenerateOutTradeNo()); req.SetValue("total_fee", 1); req.SetValue("time_start", DateTime.Now.ToString("yyyyMMddHHmmss")); req.SetValue("time_expire", DateTime.Now.AddMinutes(10).ToString("yyyyMMddHHmmss")); req.SetValue("goods_tag", "商品的備忘,能夠自定義"); req.SetValue("trade_type", "NATIVE"); req.SetValue("openid", openId); req.SetValue("product_id", productId); WxPayData result = WxPayApi.UnifiedOrder(req); return result; } } }

記得，也要新建一個View，就是在Index那裏，右鍵添加一個View，View的代碼以下（你沒眼花，就是空的，無論他）：

@{
    Layout = null;
}
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> </div> </body> </html>

接着，把這個項目，發佈出來，放到服務器的iis上，這裏面，我把他發佈在 http://sm.lmx.ren/ 上面（必需要發佈到網上哈，若是不懂發佈的，你能夠本身去學習基礎知識先了），這還沒完，還須要把到公衆平臺上，設置回調頁面，操做以下：

這樣，就大功告成了。這時候，咱們再試試掃碼，發現已經獲得如下提示了，這樣子，就表明，咱們的模式一，已經成功完成了。以下圖：

這時候，細心的朋友就會提問了，我這都支付成功了，怎麼頁面沒啥提示呀，這頁面不交互很不友好啊。嗯，沒錯，童鞋，你有前途，如今我就告訴你，怎麼作交互，可是，爲了你往後更加有前途，我只告訴你邏輯，具體怎麼實現，本身來想，多動腦。

那麼邏輯是怎麼的呢？常規邏輯下，咱們微信掃頁面上的這個二維碼的時候，這個時候，他已經把咱們二維碼裏面的參數，傳到微信服務器，而後有他們開始統一下單（若是對邏輯不清晰，能夠看看官方的文檔： https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_3 ）：他們在統一下單的時候，就會生成一個product_id，這個傢伙的做用呢，就是告訴你如今微信服務器，已經生成了一個單號，勞資已經收到你的支付請求了，趕忙給老子付款，O(∩_∩)O哈哈~。。。停，停，停。這時候，思路不能繼續往下走了。記得，前面有個叫作「統一下單「，那既然有這個步驟，那咱們能夠利用一下，就是當他統一下單成功的時候，咱們能夠在頁面更新一下狀態，告訴客戶：您已成功掃描，並下單成功，請支付。是否是，咱們能夠提示他們這個。而後等用戶在手機上，支付成功的時候，這個時候，頁面是否是也要反饋給用戶，告訴他，小子，你的錢已經到個人口袋了，你能夠走了（你走，我沒有你這樣的寶寶）。O(∩_∩)O哈哈~，可是，你還要停，停住，停下來。咱們服務公司怎麼知道這個微信用戶已經付款成功了呢？來，咱們把視線回到代碼上，找到lib/Config.cs,以下圖：

而後打開config.cs，找到如下代碼：

對了，你很聰明。微信的處理邏輯就是，等用戶支付成功以後，他會給這個連接發送支付結果，默認是之前那個aspx的頁面，如今我換成mvc，因此，咱們得手動新建一個control了，命名爲：ResultNotifyController ，而後代碼以下：

using LmxPublic.Log; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web; using System.Web.Mvc; using WxPayAPI; namespace WxPay.Controllers { public class ResultNotifyController : Controller { // GET: ResultNotify public ActionResult Index() { string strData = ProcessNotify(); Response.Write(strData); return View(); } public string ProcessNotify() { WxPayData notifyData = GetNotifyData(); //檢查支付結果中transaction_id是否存在 if (!notifyData.IsSet("transaction_id")) { //若transaction_id不存在，則當即返回結果給微信支付後臺 WxPayData res = new WxPayData(); res.SetValue("return_code", "FAIL"); res.SetValue("return_msg", "支付結果中微信訂單號不存在"); return res.ToXml(); } string transaction_id = notifyData.GetValue("transaction_id").ToString(); //查詢訂單，判斷訂單真實性 if (!QueryOrder(transaction_id)) { //若訂單查詢失敗，則當即返回結果給微信支付後臺 WxPayData res = new WxPayData(); res.SetValue("return_code", "FAIL"); res.SetValue("return_msg", "訂單查詢失敗"); return res.ToXml(); } //查詢訂單成功 else { WxPayData res = new WxPayData(); res.SetValue("return_code", "SUCCESS"); res.SetValue("return_msg", "OK"); Log.Info(this.GetType().ToString(), "order query success : " + res.ToXml()); string strXml = res.ToXml(); FileLog.WriteLog(strXml); return res.ToXml();//若是咱們走到這一步了，那就表明，用戶已經支付成功了，因此，該幹嗎幹嗎了。  } } /// <summary> /// 接收從微信支付後臺發送過來的數據並驗證簽名 /// </summary> /// <returns>微信支付後臺返回的數據</returns> public WxPayData GetNotifyData() { //接收從微信後臺POST過來的數據 System.IO.Stream s = Request.InputStream; int count = 0; byte[] buffer = new byte[1024]; StringBuilder builder = new StringBuilder(); while ((count = s.Read(buffer, 0, 1024)) > 0) { builder.Append(Encoding.UTF8.GetString(buffer, 0, count)); } s.Flush(); s.Close(); s.Dispose(); Log.Info(this.GetType().ToString(), "Receive data from WeChat : " + builder.ToString()); //轉換數據格式並驗證簽名 WxPayData data = new WxPayData(); try { data.FromXml(builder.ToString()); } catch (WxPayException ex) { //若簽名錯誤，則當即返回結果給微信支付後臺 WxPayData res = new WxPayData(); res.SetValue("return_code", "FAIL"); res.SetValue("return_msg", ex.Message); Log.Error(this.GetType().ToString(), "Sign check error : " + res.ToXml()); return res; } return data; } //查詢訂單 private bool QueryOrder(string transaction_id) { WxPayData req = new WxPayData(); req.SetValue("transaction_id", transaction_id); WxPayData res = WxPayApi.OrderQuery(req); if (res.GetValue("return_code").ToString() == "SUCCESS" && res.GetValue("result_code").ToString() == "SUCCESS") { return true; } else { return false; } } } }

前臺，對，也是要新建一個View，代碼以下（沒錯，也是空的）

@{
    Layout = null;
}
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> </div> </body> </html>

好，模式一就到這裏了，呼呼。。。沒想到啊，一個模式一，讓我從上午寫到下午，真心累。。。還有一個模式二呢。。。喝口水先，咱，接着來。

好，喝完水，接着幹，下面是模式二：

模式二（生成直接支付url，支付url有效期爲2小時）

因爲有了上面模式一的詳細說明，模式二，我就簡單一點的來講了，若是又不懂的，到羣裏來問我吧。

模式二，前端，增長一些代碼，以下（完整的，包括模式一的代碼了）：

@{
    Layout = null;
}
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>首頁</title> <link href="~/Scripts/jquery-easyui-1.4.5/themes/bootstrap/easyui.css" rel="stylesheet" /> <link href="~/Scripts/jquery-easyui-1.4.5/themes/mobile.css" rel="stylesheet" /> <link href="~/Scripts/jquery-easyui-1.4.5/themes/icon.css" rel="stylesheet" /> </head> <body> <p> 模式一：生成掃描支付模式 <br /> <div id="QRCode1"> </div> </p> <p> 模式二：生成直接支付url，支付url有效期爲2小時 <br /> <div id="QRCode2"> </div> </p> <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery-easyui-1.4.5/jquery.easyui.min.js"></script> <script src="~/Scripts/jquery-easyui-1.4.5/jquery.easyui.mobile.js"></script> <script src="~/Scripts/jquery-easyui-1.4.5/easyloader.js"></script> <script src="~/Scripts/jquery.qrcode.min.js"></script> <script type="text/javascript"> $(function () { fGetQRCode1(); }) function fGetQRCode1() { $.messager.progress({ title: "", msg: "正在生成二維碼:模式一,請稍後..." }); $.ajax({ type: "post", url: "/Home/GetQRCode1", data: { time: new Date(), productId:7788 }, success: function (json) { $.messager.progress('close');//記得關閉 if (json.result) { $('#QRCode1').qrcode(json.str); //生成二維碼  } else { $('#QRCode1').html("二維碼生成失敗"); } fGetQRCode2(); }, error: function (json) { $('#QRCode1').html("二維碼生成失敗"); fGetQRCode2(); } }) } function fGetQRCode2() { $.messager.progress({ title: "", msg: "正在生成二維碼:模式二,請稍後..." }); $.ajax({ type: "post", url: "/Home/GetQRCode2", data: { time: new Date(), productId: 7788 }, success: function (json) { $.messager.progress('close');//記得關閉 if (json.result) { $('#QRCode2').qrcode(json.str); //生成二維碼 } else { $('#QRCode2').html("二維碼生成失敗"); } }, error: function (json) { $('#QRCode2').html("二維碼生成失敗"); } }) } </script> </body> </html>

後端：

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using WxPayAPI; namespace WxPay.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } /// <summary> /// 模式一 /// </summary> /// <returns></returns>  [HttpPost] public ActionResult GetQRCode1() { object objResult = ""; string strProductID = Request.Form["productId"]; string strQRCodeStr = GetPrePayUrl(strProductID); if (!string.IsNullOrWhiteSpace(strProductID)) { objResult = new { result = true, str = strQRCodeStr }; } else { objResult = new { result = false }; } return Json(objResult); } /// <summary> /// 模式二 /// </summary> /// <returns></returns>  [HttpPost] public ActionResult GetQRCode2() { object objResult = ""; string strProductID = Request.Form["productId"]; string strQRCodeStr = GetPayUrl(strProductID); if (!string.IsNullOrWhiteSpace(strProductID)) { objResult = new { result = true, str = strQRCodeStr }; } else { objResult = new { result = false }; } return Json(objResult); } /** * 生成掃描支付模式一URL * @param productId 商品ID * @return 模式一URL */ public string GetPrePayUrl(string productId) { WxPayData data = new WxPayData(); data.SetValue("appid", WxPayConfig.APPID);//公衆賬號id data.SetValue("mch_id", WxPayConfig.MCHID);//商戶號 data.SetValue("time_stamp", WxPayApi.GenerateTimeStamp());//時間戳 data.SetValue("nonce_str", WxPayApi.GenerateNonceStr());//隨機字符串 data.SetValue("product_id", productId);//商品ID data.SetValue("sign", data.MakeSign());//簽名 string str = ToUrlParams(data.GetValues());//轉換爲URL串 string url = "weixin://wxpay/bizpayurl?" + str; return url; } /** * 參數數組轉換爲url格式 * @param map 參數名與參數值的映射表 * @return URL字符串 */ private string ToUrlParams(SortedDictionary<string, object> map) { string buff = ""; foreach (KeyValuePair<string, object> pair in map) { buff += pair.Key + "=" + pair.Value + "&"; } buff = buff.Trim('&'); return buff; } /** * 生成直接支付url，支付url有效期爲2小時,模式二 * @param productId 商品ID * @return 模式二URL */ public string GetPayUrl(string productId) { WxPayData data = new WxPayData(); data.SetValue("body", "廣東XXXX股份有限公司");//商品描述 data.SetValue("attach", "附加信息,用於後臺或者存入數據庫,作本身的判斷");//附加數據 data.SetValue("out_trade_no", WxPayApi.GenerateOutTradeNo());//隨機字符串 data.SetValue("total_fee", 1);//總金額 data.SetValue("time_start", DateTime.Now.ToString("yyyyMMddHHmmss"));//交易起始時間 data.SetValue("time_expire", DateTime.Now.AddMinutes(10).ToString("yyyyMMddHHmmss"));//交易結束時間 data.SetValue("goods_tag", "商品的備忘,能夠自定義");//商品標記 data.SetValue("trade_type", "NATIVE");//交易類型 data.SetValue("product_id", productId);//商品ID WxPayData result = WxPayApi.UnifiedOrder(data);//調用統一下單接口 string url = result.GetValue("code_url").ToString();//得到統一下單接口返回的二維碼連接 return url; } } }