C# MVC 微信支付教程系列之公眾號支付代碼

C# MVC 微信支付教程系列之公眾號支付代碼_C#教程

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天，我們接著講微信支付的系列教程，前面，我們講了這個微信紅包和掃碼支付。現在，我們講講這個公眾號支付。公眾號支付的應用環境常見的使用者通過公眾號，然後再通過公眾號裡面的菜單連結，進入公眾號的商城，然後在裡面完成購買和支付功能，我們可以看看官方對這個公眾號支付的情境的解釋，連結：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1，通過這個官方的解釋，那我們大概清楚這個公眾號的用途了，下面，我就說說，做這個公眾號支付的準備工作有哪些了。

1、下載微信web開發人員工具，工具的使用方式，也看連結，地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140&token=&lang=zh_CN

2、配置“微信支付”環境，如下圖：

3、授權擷取使用者資訊，如下圖：

下面開始，一步一步往下走。

一、我們先開發程式，首先，建立一個MVC工程（asp.net的話，官方給的demo就是asp.net的，可以下載來參考：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1），名為：微信支付之公眾號支付，如下圖：

然後右鍵項目，我們修改一下屬性，如下圖：

然後我們再把程式自動產生的HomeController.cs和View裡面的刪掉，再建立一個HomeController.cs和添加View，代碼如下：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace Web.Controllers{ public class HomeController : Controller {  // GET: Home  public ActionResult Index()  {   return View();  } }}

View代碼：

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

嗯，沒錯，目前還是空的，現在我們開始寫前台，代碼如下（我先貼上代碼，後續再解釋為啥這麼做，因為如果一步步的寫下去，按照前面兩個的篇幅來，我覺得都可以開課了，所以，我先上代碼，然後再一步步解釋。）：

@{ 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" /> <style type="text/css">  body{   margin:0;   padding:0;  }  .logo {   width: 100%;   height: 70px;   background: url(/Images/EleLogo.png) 0 0 no-repeat;   background-size: 100% 100%;   padding: 0;   margin: 0;  }  .line {   width: 100%;   float: left;   height: auto;   text-align: center;   margin-top: 10px;  }  .lineText {   width: 100%;   float: left;   height: auto;   text-indent: 5%;   text-align: left;   font-size: x-large;   margin: 0;  }  .function {   height: 60pt;   line-height: 60pt;   width: 45%;   float: left;   border-radius: 10px;   background-color: #990000;   margin-left: 8pt;  }  .title {   font-family: "微軟雅黑";   font-size: x-large;   color: white;  }  a {   text-decoration: none;   color: white;  }  input {   vertical-align: central;  }  label {   vertical-align: central;  }  .lbBlock {   border: 1px solid #808080;   background-color: grey;   width: 90%;   margin-left: 5%;   font-size: x-large;   border-radius: 10px;   text-align: left;   text-indent: 10pt;   height: 30pt;   padding-top: 5pt;  }  .btn {   width: 90%;   height: 35pt;   font-size: x-large;   background-color: #990000;   color: white;   background: url(/Images/red.png) 0 0 repeat;   border: none;   border-radius: 10px;   margin: 10px 0 0 0;  }  .input {   height: 30pt;   width: 90%;   font-size: x-large;   border-radius: 10px;   margin: 0;   padding: 0;  } </style></head><body> <div class="logo"> </div> <form id="ChargeForm">    <div class="line">   <div class="lineText">    儲值金額:   </div>  </div>  <div class="line">   <input type="number" id="ChargeVal" name="ChargeVal" class="input" placeholder="單位:元" />  </div>   </form> <div class="line">  <input type="button" class="btn" value="立即儲值" onclick="fCharge()" style="margin-top: 20px;" /> </div> <div class="line">  <input type="button" id="btnHome" class="btn" value="返回首頁" onclick="fBackHome()" /> </div> <script src="~/Scripts/jquery-easyui-1.4.5/jquery.min.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 type="text/javascript">  $(function () {   var vCode = getQueryString("code");   if (vCode != "" && vCode != null) {    //alert(vCode);    $.ajax({     type: 'post',     data: {      code: vCode     },     url: '/Home/getWxInfo',     success: function (sjson) {      //alert(sjson);      //var vData = JSON.stringify(sjson);      //alert(vData);      $.messager.show({       title: '提示',       msg: '歡迎您來到微信端儲值中心。'      });     }    })   }   else {    $.ajax({     type: 'post',     url: '/Home/getCode',     success: function (sjson) {      //alert(sjson);      location.href = sjson;     }    })   }  })  //擷取url的參數  function getQueryString(name) {   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");   var r = window.location.search.substr(1).match(reg);   if (r != null) return unescape(r[2]); return null;  }  //初始化微信支付環境  function fCharge() {   if (typeof WeixinJSBridge == "undefined") {    if (document.addEventListener) {     document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);    } else if (document.attachEvent) {     document.attachEvent('WeixinJSBridgeReady', onBridgeReady);     document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);    }   } else {    fPostCharge();   }  }  //提交儲值資料  function fPostCharge() {   var vChargeVal = $("#ChargeVal").val();   vChargeVal = parseFloat(vChargeVal);   if (vChargeVal > 0) {    $.messager.progress({     title: "",     msg: "正在調用微信支付介面,請稍後..."    });    $.ajax({     type: "post",     data: "totalfee=" + vChargeVal,     url: "/Home/MeterRecharge",     success: function (json) {      $.messager.progress('close');//記得關閉      //var json = eval("(" + msg + ")");//轉換後的JSON對象      onBridgeReady(json);     },     error: function () {      $.messager.progress('close');//記得關閉      $.messager.alert("提示", '調用微信支付模組失敗，請稍後再試。', 'info')     }    })   }   else {    alert("房間名或者儲值金額不可以為空白或者為負數,請確認後再試.")   }  }  //調用微信支付模組  function onBridgeReady(json) {   WeixinJSBridge.invoke(   'getBrandWCPayRequest', {    "appId": json.appId,  //公眾號名稱，由商戶傳入    "timeStamp": json.timeStamp,   //時間戳記，自1970年以來的秒數    "nonceStr": json.nonceStr, //隨機串    "package": json.packageValue,    "signType": "MD5",   //微信簽名方式:    "paySign": json.paySign //微信簽名   },   function (res) {    if (res.err_msg == "get_brand_wcpay_request:ok") {     //alert("支付成功,請稍後查詢餘額,如有疑問,請聯絡管理員.");     fAlreadyPay();    }  // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在使用者支付成功後返回 ok，但並不保證它絕對可靠。   }   );  }  function fBackHome() {   location.href = "/";  } </script></body></html>

後台代碼如下：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using Web.Models;using WxPayAPI;namespace Web.Controllers{ public class HomeController : Controller {  JsApiPay jsApiPay = new JsApiPay();  // GET: Home  public ActionResult Index()  {   if (Session["openid"] == null)   {    try    {     //調用【網頁授權擷取使用者資訊】介面擷取使用者的openid和access_token     GetOpenidAndAccessToken();    }    catch (Exception ex)    {     //Response.Write(ex.ToString());     //throw;    }   }   return View();  }  /**  *   * 網頁授權擷取使用者基本資料的全部過程  * 詳情請參看網頁授權擷取使用者基本資料：http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html  * 第一步：利用url跳轉擷取code  * 第二步：利用code去擷取openid和access_token  *   */  public void GetOpenidAndAccessToken()  {   if (Session["code"] != null)   {    //擷取code碼，以擷取openid和access_token    string code = Session["code"].ToString();    Log.Debug(this.GetType().ToString(), "Get code : " + code);    jsApiPay.GetOpenidAndAccessTokenFromCode(code);   }   else   {    //構造網頁授權擷取code的URL    string host = Request.Url.Host;    string path = Request.Path;    string redirect_uri = HttpUtility.UrlEncode("http://" + host + path);    //string redirect_uri = HttpUtility.UrlEncode("http://gzh.lmx.ren");    WxPayData data = new WxPayData();    data.SetValue("appid", WxPayConfig.APPID);    data.SetValue("redirect_uri", redirect_uri);    data.SetValue("response_type", "code");    data.SetValue("scope", "snsapi_base");    data.SetValue("state", "STATE" + "#wechat_redirect");    string url = "https://open.weixin.qq.com/connect/oauth2/authorize?" + data.ToUrl();    Log.Debug(this.GetType().ToString(), "Will Redirect to URL : " + url);    Session["url"] = url;       }  }  /// <summary>  /// 擷取code  /// </summary>  /// <returns></returns>  [HttpPost]  public ActionResult getCode()  {   object objResult = "";   if (Session["url"] != null)   {    objResult = Session["url"].ToString();   }   else   {    objResult = "url為空白。";   }   return Json(objResult);  }  /// <summary>  /// 通過code換取網頁授權access_token和openid的返回資料  /// </summary>  /// <returns></returns>  [HttpPost]  public ActionResult getWxInfo()  {   object objResult = "";   string strCode = Request.Form["code"];   if (Session["access_token"] == null || Session["openid"] == null)   {    jsApiPay.GetOpenidAndAccessTokenFromCode(strCode);   }   string strAccess_Token = Session["access_token"].ToString();   string strOpenid = Session["openid"].ToString();   objResult = new { openid = strOpenid, access_token = strAccess_Token };   return Json(objResult);  }  /// <summary>  /// 儲值  /// </summary>  /// <returns></returns>  [HttpPost]  public ActionResult MeterRecharge()  {   object objResult = "";   string strTotal_fee = Request.Form["totalfee"];   string strFee = (double.Parse(strTotal_fee) * 100).ToString();   //若傳遞了相關參數，則調統一下單介面，獲得後續相關介面的入口參數   jsApiPay.openid = Session["openid"].ToString();   jsApiPay.total_fee = int.Parse(strFee);   //JSAPI支付預先處理   try   {    string strBody = "南宮蕭塵微信支付";//商品描述    WxPayData unifiedOrderResult = jsApiPay.GetUnifiedOrderResult(strBody);    WxPayData wxJsApiParam = jsApiPay.GetJsApiParameters();//擷取H5調起JS API參數，注意，這裡引用了官方的demo的方法，由於原方法是返回string的，所以，要對原方法改為下面的代碼，代碼在下一段    ModelForOrder aOrder = new ModelForOrder()    {     appId = wxJsApiParam.GetValue("appId").ToString(),     nonceStr = wxJsApiParam.GetValue("nonceStr").ToString(),     packageValue = wxJsApiParam.GetValue("package").ToString(),     paySign = wxJsApiParam.GetValue("paySign").ToString(),     timeStamp = wxJsApiParam.GetValue("timeStamp").ToString(),     msg = "成功下單,正在接入微信支付."    };    objResult = aOrder;   }   catch (Exception ex)   {    ModelForOrder aOrder = new ModelForOrder()    {     appId = "",     nonceStr = "",     packageValue = "",     paySign = "",     timeStamp = "",     msg = "下單失敗，請重試,多次失敗,請聯絡管理員."    };    objResult = aOrder;   }   return Json(objResult);  } }}

這裡就是上面修改了的代碼，童鞋們請注意

  /**  *   * 從統一下單成功返回的資料中擷取微信瀏覽器調起jsapi支付所需的參數，  * 微信瀏覽器調起JSAPI時的輸入參數格式如下：  * {  * "appId" : "wx2421b1c4370ec43b",  //公眾號名稱，由商戶傳入    * "timeStamp":" 1395712654",   //時間戳記，自1970年以來的秒數    * "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //隨機串    * "package" : "prepay_id=u802345jgfjsdfgsdg888",    * "signType" : "MD5",   //微信簽名方式:   * "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名   * }  * @return string 微信瀏覽器調起JSAPI時的輸入參數，json格式可以直接做參數用  * 更詳細的說明請參考網頁端調起支付API：http://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7  *   */  public WxPayData GetJsApiParameters()  {   Log.Debug(this.GetType().ToString(), "JsApiPay::GetJsApiParam is processing...");   WxPayData jsApiParam = new WxPayData();   jsApiParam.SetValue("appId", unifiedOrderResult.GetValue("appid"));   jsApiParam.SetValue("timeStamp", WxPayApi.GenerateTimeStamp());   jsApiParam.SetValue("nonceStr", WxPayApi.GenerateNonceStr());   jsApiParam.SetValue("package", "prepay_id=" + unifiedOrderResult.GetValue("prepay_id"));   jsApiParam.SetValue("signType", "MD5");   jsApiParam.SetValue("paySign", jsApiParam.MakeSign());   string parameters = jsApiParam.ToJson();   Log.Debug(this.GetType().ToString(), "Get jsApiParam : " + parameters);   return jsApiParam;  }

ModelForOrder類的代碼：

using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace Web.Models{ public class ModelForOrder {  public string appId { get; set; }  public string timeStamp { get; set; }  public string nonceStr { get; set; }  public string packageValue { get; set; }  public string paySign { get; set; }  public string msg { get; set; } }}

還有一個地方需要注意，修改一下的就是這裡WxLib/business/JsApiPay.cs，如下圖：

最後，把程式發布出來，這次咱們把Web發布在http://gzh.lmx.ren上，然後再把介面許可權，改為這樣的，如下圖：

注意，這裡面的網域名稱和上面我們發布的網域名稱要一致。

除此以外，我們還需要改這裡：

就是一定要授權這裡，否則，支付的時候，會提示其他錯誤，具體，我就不測試了。

另外，這裡其實已經完成了這個公眾號的支付的流程了，但是，我們頁面上，會友善的提醒（其實不友善，提示是紅色的，在頭部，提示別輸入密碼什麼），這是因為，我們還沒把咱們這個http://gzh.lmx.ren網域名稱設定為安全網域名稱，設定之後，就不會在提示了。設定方法如下圖：

在這裡面加入咱們的網域名稱，就完美了。。。

My Code都盡量精簡，多餘的，我都會丟掉，就是為了避免混淆視聽。如果代碼裡面，有寫的不清楚的，可以私信問我，或群裡來問我，群號在文章末端。

現在，我開始一一解釋我上面的做法。

首先，在後端，頁面載入的時候，他會先執行

public ActionResult Index()  {   if (Session["openid"] == null)   {    try    {     //調用【網頁授權擷取使用者資訊】介面擷取使用者的openid和access_token     GetOpenidAndAccessToken();    }    catch (Exception ex)    {     //Response.Write(ex.ToString());     //throw;    }   }   return View();  }

這裡面就是為了擷取使用者的Openid和Access_token，這個用途很大，還有就是，我們通過代碼可以知道，我們通過這個方法，可以擷取到微信的一些相關資訊，擷取完了之後，他會返回到我們的頁面上來，url就存在一個session裡面，如下：

Session["url"] = url;

接著，在前端：

當頁面載入完畢之後，會執行以下JS方法，如下：

 $(function () {   var vCode = getQueryString("code");   if (vCode != "" && vCode != null) {    //alert(vCode);    $.ajax({     type: 'post',     data: {      code: vCode     },     url: '/Home/getWxInfo',     success: function (sjson) {      //alert(sjson);      //var vData = JSON.stringify(sjson);      //alert(vData);      $.messager.show({       title: '提示',       msg: '歡迎您來到微信端儲值中心。'      });     }    })   }   else {    $.ajax({     type: 'post',     url: '/Home/getCode',     success: function (sjson) {      //alert(sjson);      location.href = sjson;     }    })   }  })

他會先擷取瀏覽器的url，然後擷取code，就是一般url後面的xxx.com?code=xxx，這裡面就是首先判斷有無code，如果沒有code，則，我們去後台請求這個code。為什麼請求這個code呢？我們來看這個方法： getWxInfo，如下圖：

/// <summary>  /// 擷取code  /// </summary>  /// <returns></returns>  [HttpPost]  public ActionResult getCode()  {   object objResult = "";   if (Session["url"] != null)   {    objResult = Session["url"].ToString();   }   else   {    objResult = "url為空白。";   }   return Json(objResult);  }

他就會返回url到前端，前端通過js去訪問那個網址，那個網址就是微信端擷取到我們的資訊之後，給我們按照規則再返回一個url，這rul就是我們後面需要後去的code的url。這個code對我們至關重要，因為後面我們要做跟支付有關的工作，都用到的。有了code，我們才能拿到openid和access_token。具體看代碼邏輯也可以明了。

好，走到這一步，我們已經知道openid和access_token了，這個時候，我們就負責處理前端的東西。

前端，我就一個金額輸入框，然後一個提交，實際應用中，我們肯定還需要傳入商品的參數，我這裡面就不寫那些多餘的了，後續你們自己加進去就可以了。這裡面在點擊提交的時候，會調用微信的環境，看下面的代碼：

 //初始化微信支付環境  function fCharge() {   if (typeof WeixinJSBridge == "undefined") {    if (document.addEventListener) {     document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);    } else if (document.attachEvent) {     document.attachEvent('WeixinJSBridgeReady', onBridgeReady);     document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);    }   } else {    fPostCharge();   }  }

他會初始化一下環境，如果初始化成功，代表，這個頁面是在微信用戶端裡面啟動並執行，那麼我們就給他運行我們真正的儲值代碼提交，所以，就會執行：fPostCharge();

提交之後，就會進入後台，後台需要組織我們前台需要用到的參數，其中包括如下：

/// <summary>  /// 儲值  /// </summary>  /// <returns></returns>  [HttpPost]  public ActionResult MeterRecharge()  {   object objResult = "";   string strTotal_fee = Request.Form["totalfee"];   string strFee = (double.Parse(strTotal_fee) * 100).ToString();   //若傳遞了相關參數，則調統一下單介面，獲得後續相關介面的入口參數   jsApiPay.openid = Session["openid"].ToString();   jsApiPay.total_fee = int.Parse(strFee);   //JSAPI支付預先處理   try   {    string strBody = "南宮蕭塵微信支付";//商品描述    WxPayData unifiedOrderResult = jsApiPay.GetUnifiedOrderResult(strBody);    WxPayData wxJsApiParam = jsApiPay.GetJsApiParameters();//擷取H5調起JS API參數    ModelForOrder aOrder = new ModelForOrder()    {     appId = wxJsApiParam.GetValue("appId").ToString(),     nonceStr = wxJsApiParam.GetValue("nonceStr").ToString(),     packageValue = wxJsApiParam.GetValue("package").ToString(),     paySign = wxJsApiParam.GetValue("paySign").ToString(),     timeStamp = wxJsApiParam.GetValue("timeStamp").ToString(),     msg = "成功下單,正在接入微信支付."    };    objResult = aOrder;   }   catch (Exception ex)   {    ModelForOrder aOrder = new ModelForOrder()    {     appId = "",     nonceStr = "",     packageValue = "",     paySign = "",     timeStamp = "",     msg = "下單失敗，請重試,多次失敗,請聯絡管理員."    };    objResult = aOrder;   }   return Json(objResult);  }

我們主要需要提供的就是這個類ModelForOrder 裡面的參數，然後再把這些參數返回給前台調用，如下：

 //調用微信支付模組  function onBridgeReady(json) {   WeixinJSBridge.invoke(   'getBrandWCPayRequest', {    "appId": json.appId,  //公眾號名稱，由商戶傳入    "timeStamp": json.timeStamp,   //時間戳記，自1970年以來的秒數    "nonceStr": json.nonceStr, //隨機串    "package": json.packageValue,    "signType": "MD5",   //微信簽名方式:    "paySign": json.paySign //微信簽名   },   function (res) {    if (res.err_msg == "get_brand_wcpay_request:ok") {     //alert("支付成功,請稍後查詢餘額,如有疑問,請聯絡管理員.");     fAlreadyPay();    }  // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在使用者支付成功後返回 ok，但並不保證它絕對可靠。   }   );  }

這樣，他就會彈出一個微信支付的視窗，如下：

然後我們確認付款之後，是否付款成功，如果付款成功，我們在執行： fAlreadyPay();

這個方法已經被我刪掉了，用途是用於，我們收到使用者的款之後，我們需要同步一些資料到我們的資料庫裡面去，所以，該怎麼操作，自己自行修改了。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More