【微信開發】-- 公衆號支付

時間  2019-11-08
標籤 微信開發 公衆號 支付 简体版
原文   原文鏈接

公衆號支付就是在微信裏面的H5頁面喚起微信支付，不用掃碼便可付款的功能。作這個功能首先要明確的就是，只有和商戶號mch_id匹配的appid才能成功支付。商戶號在註冊成功的時候就會將相關信息發送到郵箱裏面。而喚起支付的一個關鍵是靠openid拿到統一下單。而openid是和appid一一對應的。也就是說若是你登陸使用的appid不是公衆號的appid，獲得的openid就沒法喚起公衆號內的支付(會出現appid和商戶號不匹配的錯誤)。曾經就在這個地方繞了個彎，由於微信的開放平臺能夠建立網站應用，也有一個appid和appsecreat，也能夠在微信裏面一鍵登陸。javascript

業務流程

下面是微信的官方流程，看似有點複雜，重點就是要拿到統一下單接口返回的json串，其餘按照官方demo基本就能正確，下面說一下幾個細節。php

建立訂單

在調用微信公衆號支付以前，首先咱們本身要把訂單建立好。好比一個充值的訂單。主要是先肯定下金額再進行下一步。html

  public JsonResult CreateRecharegOrder(decimal money)
        {
            if (money < (decimal)0.01) return Json(new PaymentResult("充值金額非法！"));
            var user = _workContext.CurrentUser;
            var order = _paymentService.CreateRechargeOrder(user.Id, money);
            return Json(new PaymentResult(true) {OrderId = order.OrderNumber});
        }

調用統一下單

訂單建立成功以後，頁面跳轉到支付頁面，這個時候就是按照官方的流程去拿prepay_id和paySign,微信的demo中提供了一個jsApiPay的對象。但這個對象須要一個page對象初始化。前端

       [LoginValid]
        public ActionResult H5Pay(string orderNumber)
        {
            var user = _workContext.CurrentUser;
            var order = _paymentService.GetOrderByOrderNumber(orderNumber);
            //判斷訂單是否存在
            //訂單是否已經支付了
            var openid = user.OpenId;
            var jsApipay = new JsApiPayMvc(this.ControllerContext.HttpContext);
            jsApipay.openid = openid;
            jsApipay.total_fee = (int)order.Amount * 100;
            WxPayData unifiedOrderResult = jsApipay.GetUnifiedOrderResult();
            ViewBag.wxJsApiParam = jsApipay.GetJsApiParameters();//獲取H5調起JS API參數     
            ViewBag.unifiedOrder = unifiedOrderResult.ToPrintStr();
            ViewBag.OrderNumber = order.OrderNumber;
            return View();
        }

在MVC中咱們簡單改一下就能夠了。也就是把page對象換成httpContext便可。而後裏面的方法就能夠直接用了。java

JsApiPayMvc：算法

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Runtime.Serialization;
using System.IO;
using System.Text;
using System.Net;
using System.Web.Security;
using LitJson;

namespace WxPayAPI
{
    public class JsApiPayMvc
    {
        /// <summary>
        /// 保存頁面對象，由於要在類的方法中使用Page的Request對象
        /// </summary>
        public HttpContextBase context { get; set; }
        /// <summary>
        /// openid用於調用統一下單接口
        /// </summary>
        public string openid { get; set; }

        /// <summary>
        /// access_token用於獲取收貨地址js函數入口參數
        /// </summary>
        public string access_token { get; set; }

        /// <summary>
        /// 商品金額，用於統一下單
        /// </summary>
        public int total_fee { get; set; }

        /// <summary>
        /// 統一下單接口返回結果
        /// </summary>
        public WxPayData unifiedOrderResult { get; set; }

        public JsApiPayMvc(HttpContextBase _context)
        {
            context = _context;
        }


        /**
        * 
        * 網頁受權獲取用戶基本信息的所有過程
        * 詳情請參看網頁受權獲取用戶基本信息：http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html
        * 第一步：利用url跳轉獲取code
        * 第二步：利用code去獲取openid和access_token
        * 
        */
        public void GetOpenidAndAccessToken(string code)
        {
            if (!string.IsNullOrEmpty(code))
            {
                //獲取code碼，以獲取openid和access_token
                Log.Debug(this.GetType().ToString(), "Get code : " + code);
                GetOpenidAndAccessTokenFromCode(code);
            }
            else
            {
                //構造網頁受權獲取code的URL
                string host = context.Request.Url.Host;
                string path = context.Request.Path;
                string redirect_uri = HttpUtility.UrlEncode("http://" + host + path);
                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);
                try
                {
                    //觸發微信返回code碼         
                    context.Response.Redirect(url);//Redirect函數會拋出ThreadAbortException異常，不用處理這個異常
                }
                catch(System.Threading.ThreadAbortException ex)
                {
                }
            }
        }


        /**
        * 
        * 經過code換取網頁受權access_token和openid的返回數據，正確時返回的JSON數據包以下：
        * {
        *  "access_token":"ACCESS_TOKEN",
        *  "expires_in":7200,
        *  "refresh_token":"REFRESH_TOKEN",
        *  "openid":"OPENID",
        *  "scope":"SCOPE",
        *  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
        * }
        * 其中access_token可用於獲取共享收貨地址
        * openid是微信支付jsapi支付接口統一下單時必須的參數
        * 更詳細的說明請參考網頁受權獲取用戶基本信息：http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html
        * @失敗時拋異常WxPayException
        */
        public void GetOpenidAndAccessTokenFromCode(string code)
        {
            try
            {
                //構造獲取openid及access_token的url
                WxPayData data = new WxPayData();
                data.SetValue("appid", WxPayConfig.APPID);
                data.SetValue("secret", WxPayConfig.APPSECRET);
                data.SetValue("code", code);
                data.SetValue("grant_type", "authorization_code");
                string url = "https://api.weixin.qq.com/sns/oauth2/access_token?" + data.ToUrl();

                //請求url以獲取數據
                string result = HttpService.Get(url);

                Log.Debug(this.GetType().ToString(), "GetOpenidAndAccessTokenFromCode response : " + result);

                //保存access_token，用於收貨地址獲取
                JsonData jd = JsonMapper.ToObject(result);
                access_token = (string)jd["access_token"];

                //獲取用戶openid
                openid = (string)jd["openid"];

                Log.Debug(this.GetType().ToString(), "Get openid : " + openid);
                Log.Debug(this.GetType().ToString(), "Get access_token : " + access_token);
            }
            catch (Exception ex)
            {
                Log.Error(this.GetType().ToString(), ex.ToString());
                throw new WxPayException(ex.ToString());
            }
        }

        /**
         * 調用統一下單，得到下單結果
         * @return 統一下單結果
         * @失敗時拋異常WxPayException
         */
        public WxPayData GetUnifiedOrderResult()
        {
            //統一下單
            WxPayData data = new WxPayData();
            data.SetValue("body", "test");
            data.SetValue("attach", "test");
            data.SetValue("out_trade_no", WxPayApi.GenerateOutTradeNo());
            data.SetValue("total_fee", total_fee);
            data.SetValue("time_start", DateTime.Now.ToString("yyyyMMddHHmmss"));
            data.SetValue("time_expire", DateTime.Now.AddMinutes(10).ToString("yyyyMMddHHmmss"));
            data.SetValue("goods_tag", "test");
            data.SetValue("trade_type", "JSAPI");
            data.SetValue("openid", openid);

            WxPayData result = WxPayApi.UnifiedOrder(data);
            if (!result.IsSet("appid") || !result.IsSet("prepay_id") || result.GetValue("prepay_id").ToString() == "")
            {
                Log.Error(this.GetType().ToString(), "UnifiedOrder response error!");
                throw new WxPayException("UnifiedOrder response error!");
            }

            unifiedOrderResult = result;
            return result;
        }

        /**
        *  
        * 從統一下單成功返回的數據中獲取微信瀏覽器調起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 string 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 parameters;
        }


        /**
        * 
        * 獲取收貨地址js函數入口參數,詳情請參考收貨地址共享接口：http://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_9
        * @return string 共享收貨地址js函數須要的參數，json格式能夠直接作參數使用
        */
        public string GetEditAddressParameters()
        {
            string parameter = "";
            try
            {
                string host = context.Request.Url.Host;
                string path = context.Request.Path;
                string queryString = context.Request.Url.Query;
                //這個地方要注意，參與簽名的是網頁受權獲取用戶信息時微信後臺回傳的完整url
                string url = "http://" + host + path + queryString;

                //構造須要用SHA1算法加密的數據
                WxPayData signData = new WxPayData();
                signData.SetValue("appid",WxPayConfig.APPID);
                signData.SetValue("url", url);
                signData.SetValue("timestamp",WxPayApi.GenerateTimeStamp());
                signData.SetValue("noncestr",WxPayApi.GenerateNonceStr());
                signData.SetValue("accesstoken",access_token);
                string param = signData.ToUrl();

                Log.Debug(this.GetType().ToString(), "SHA1 encrypt param : " + param);
                //SHA1加密
                string addrSign = FormsAuthentication.HashPasswordForStoringInConfigFile(param, "SHA1");
                Log.Debug(this.GetType().ToString(), "SHA1 encrypt result : " + addrSign);

                //獲取收貨地址js函數入口參數
                WxPayData afterData = new WxPayData();
                afterData.SetValue("appId",WxPayConfig.APPID);
                afterData.SetValue("scope","jsapi_address");
                afterData.SetValue("signType","sha1");
                afterData.SetValue("addrSign",addrSign);
                afterData.SetValue("timeStamp",signData.GetValue("timestamp"));
                afterData.SetValue("nonceStr",signData.GetValue("noncestr"));

                //轉爲json格式
                parameter = afterData.ToJson();
                Log.Debug(this.GetType().ToString(), "Get EditAddressParam : " + parameter);
            }
            catch (Exception ex)
            {
                Log.Error(this.GetType().ToString(), ex.ToString());
                throw new WxPayException(ex.ToString());
            }

            return parameter;
        }
    }
}
View Code

這個頁面能夠在本地調試，能夠比較方便的確認參數是否ok。json

喚起支付

官方頁面的示例以下：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 但主要的參數(mark部分)是由後臺生成的，也就是上一個步驟的ViewBag.wxJsApiParamapi

function onBridgeReady(){
   WeixinJSBridge.invoke(
       'getBrandWCPayRequest', {
           "appId" ： "wx2421b1c4370ec43b", //公衆號名稱，由商戶傳入 "timeStamp"：" 1395712654", //時間戳，自1970年以來的秒數 "nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //隨機串 "package" ： "prepay_id=u802345jgfjsdfgsdg888", "signType" ： "MD5", //微信簽名方式： "paySign" ： "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 
       },
       function(res){     
           if(res.err_msg == "get_brand_wcpay_request：ok" ) {}     // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功後返回    ok，但並不保證它絕對可靠。 
       }
   ); 
}

因此在MVC中要這樣寫：瀏覽器

@{
    ViewBag.Title = "微信支付";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="page" id="Wxpayment">
    <div class="content">
        <div>訂單詳情：@Html.Raw(ViewBag.unifiedOrder)</div>
        <button id="h5pay" onclick="callpay()">支付</button>
    </div>
    <input type="hidden" value="@ViewBag.OrderNumber" id="ordernum"/>
</div>
 
<script type="text/javascript">

    //調用微信JS api 支付
    function jsApiCall() {
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest',
            @Html.Raw(ViewBag.wxJsApiParam),//josn串
            function (res)
            {
                WeixinJSBridge.log(res.err_msg);
                //alert(res.err_code + res.err_desc + res.err_msg);
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                   var num = $("#ordernum").val();
                    $.post("/payment/WeiXinPaySuccess", { ordernumber: num }, function(data) {
                        if (data.IsSuccess === true) {
                            alert("支付成功");
                            location.href = document.referrer;
                        } else {
                            
                        }
                    });
                } 
                if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                      $('.button').removeAttr('submitting');
                      alert('取消支付');
                } 
            }
        );
    }

    function callpay()
    {
        if (typeof WeixinJSBridge == "undefined")
        {
            alert("WeixinJSBridge =");
            if (document.addEventListener)
            {
                document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
            }
            else if (document.attachEvent)
            {
                document.attachEvent('WeixinJSBridgeReady', jsApiCall);
                document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
            }
        }
        else
        {
            jsApiCall();
        }
    }

</script>

必需要用Html.Raw，否則json解析不對，沒法支付。這個時候點擊頁面，會出現微信的加載效果，但別高興的太早，仍是會出錯，出現一個「3當前的URL未註冊」微信

緣由就在於，須要在公衆號中設置支付目錄。而這個支付目錄是大小寫敏感的，因此你得多試幾回。直到彈出輸入密碼的窗口才是真的流程正確了。而後支付成功以後立刻就能夠收到js中的回調，這個時候你能夠去處理你的訂單和業務邏輯。

小結 

若是是生產環境，咱們須要再多個地方調用，須要再封裝一下。

function jsApiCall(json, success, fail) {
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        json,//josn串
        function (res)
        {
            WeixinJSBridge.log(res.err_msg);
            //alert(res.err_code + res.err_desc + res.err_msg);
            if (res.err_msg == "get_brand_wcpay_request:ok") {
                //充值進去 要區分是出題充值 仍是購買懸賞 前者衝到他的錢包
                //後者直接衝到系統帳戶
                if (success) success();
            } 
            if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                // alert('取消支付');
                if (fail)fail();
            } 
        }
    );
}

function callpay(json,success,fail)
{
    if (typeof WeixinJSBridge == "undefined")
    {
        alert("請在微信中打開!");
        if (document.addEventListener)
        {
            document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
        }
        else if (document.attachEvent)
        {
            document.attachEvent('WeixinJSBridgeReady', jsApiCall);
            document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
        }
    }
    else
    {
        jsApiCall(json, success, fail);
    }
}
View Code 
  [LoginValid]
        public ActionResult H5PayJson(string orederId)
        {
            var user = _workContext.CurrentUser;
            var order = _paymentService.GetOrderByOrderNumber(orederId);
            //判斷訂單是否存在
            //訂單是否已經支付了
            var openid = user.OpenId;
            var jsApipay = new JsApiPayMvc(ControllerContext.HttpContext)
            {
                openid = openid,
                total_fee = (int) order.Amount*100
            };
            try
            {
                jsApipay.GetUnifiedOrderResult();
                return Json(jsApipay.GetJsApiParameters());//實際仍是字符串
            }
            catch (Exception e)
            {
                //統一下單失敗
                return Json(new PortalResult(false, e.Message));
            }
        }

調用的時候這樣直接喚起支付了。 但若是傳入的json不是json對象，微信加載動畫會一直卡在哪兒。

 $.post("/Checkout/H5PayJson", { orederId: orderId }, function (jsondata) {
                                var jdata = JSON.parse(jsondata); if (jdata.appId) {
                                    callpay(jdata, function () {
                                        $.post("/payment/WeiXinPaySuccess", { ordernumber: orderId }, function (paymentdata) {
                                            if (paymentdata.IsSuccess === true) {
                                                submitQuestion();
                                            } else {
                                                $.alert(paymentdata.Message);
                                            }
                                        });
                                    }, function () {
                                        $.alert("你已取消支付!");
                                    });
                                } else {
                                    alert("統一下單失敗!");
                                }
                            });

 

官方文檔：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3

微信登陸：http://www.cnblogs.com/stoneniqiu/p/5380606.html 

微信掃碼支付及MVC demo：http://www.cnblogs.com/stoneniqiu/p/5525548.html

 官方demo：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程