目前，從商城網站、餐廳、商場、超市到菜市、小賣部、路邊攤，移動支付無處不在，極大地方便了我們的生活。特別是微信支付，應用極廣，很受大眾歡迎。然而，對於擁有H5移動商城的商家來說，微信支付只能在微信客戶端內實現，而在微信中又無法使用支付寶，這是令人非常蛋疼的事。

現在，好訊息來了！微信已全面開放了H5支付功能，它將實現在微信客戶端之外的H5商城網頁場景完成支付，極大地滿足了商家的收款需求和買家便捷支付的要求。

好東西當然不能錯過，但如何快速將H5支付功能嵌入到您的H5商城中呢？微信並沒有提供官方Demo可以參考。沒關係，按照本文的方法，您不需要再花精力做額外的開發，只需三步就能輕鬆搞定。

【我的思路】

【準備工作】一、您已經調通了WxPayAPI_CS_v3（可以正常實現公眾號支付），二、您已經開通了H5支付功能（需要去微信商戶平臺上申請開通）。對這方面不清楚的朋友請查閱相關文件，它不是本文所要討論的話題。

現在，就讓我們開始吧！

第一步

在WxPayAPI/ business資料夾下新增一個類，將其命名為H5Pay（可從JsApiPay.cs中複製相關程式碼進行修改，重點是將交易型別trade_type設定為MWEB，另外還要傳遞終端IP），H5Pay.cs的完整程式碼如下：

using System.Web;

namespace WxPayAPI
{
    public class H5Pay
    {
        public string GetPayUrl(string thip)
        {
            Log.Info(this.GetType().ToString(), "H5 pay url is producing...");

            WxPayData data = new WxPayData();

            data.SetValue("body",”商品描述”);//這裡替換成你的資料
            data.SetValue("attach", "詳見我的訂單");//這裡替換成你的資料
            data.SetValue("out_trade_no",”商戶訂單號”);//這裡替換成你的資料
            data.SetValue("total_fee",”總金額”);//這裡替換成你的資料
            data.SetValue("spbill_create_ip",thip);//終端IP
            data.SetValue("trade_type", "MWEB");//交易型別
            data.SetValue("scene_info", "{'h5_info':{'type':'Wap','wap_url':'你的H5域名','wap_name':'你的商城名稱'}}");//場景資訊

            WxPayData result = WxPayApi.UnifiedOrder(data);//呼叫統一下單介面
            string url = result.GetValue("mweb_url").ToString();//獲得統一下單介面返回的連結

            Log.Info(this.GetType().ToString(), "Get H5 pay url : " + url);
            return url;
        }
    }
}
 

說明：GetPayUrl方法將返回微信支付中間頁的跳轉URL（即統一下單介面返回的mweb_url引數）。

第二步

在example資料夾下新增一個Web窗體，將其命名為H5PayPage，前臺H5PayPage.aspx裡不需要新增任何東西，在H5PayPage.aspx.cs中新增相關程式碼，其完整程式碼如下：

using System;
using System.Web;

namespace WxPayAPI
{
    public partial class H5PayPage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Log.Info(this.GetType().ToString(), "page load");
            H5Pay h5Pay = new H5Pay();
            string scip = GetIP();//獲取客戶端真實IP
            string url = h5Pay.GetPayUrl(scip);//通過統一下單介面進行H5支付
            Response.Redirect(url);//跳轉到微信支付中間頁
        }
        
        //因H5支付要求商戶在統一下單介面中上傳使用者真實ip地址“spbill_create_ip”，故需要呼叫以下方法。
        public string GetIP()
        {
            HttpRequest request = HttpContext.Current.Request;
            string result = request.ServerVariables["HTTP_X_FORWARDED_FOR"];
            if (string.IsNullOrEmpty(result))
            {
                result = request.ServerVariables["REMOTE_ADDR"];
            }
            if (string.IsNullOrEmpty(result))
            {
                result = request.UserHostAddress;
            }
            if (string.IsNullOrEmpty(result))
            {
                result = "0.0.0.0";
            }
            return result;
        }
    }
}

第三步

開啟WxPayAPI/lib/WxPayApi.cs檔案，找到UnifiedOrder方法，再找到如下原始碼：

inputObj.SetValue("appid", WxPayConfig.APPID);//公眾賬號ID
inputObj.SetValue("mch_id", WxPayConfig.MCHID);//商戶號
inputObj.SetValue("spbill_create_ip", WxPayConfig.IP);//終端ip
inputObj.SetValue("nonce_str", GenerateNonceStr());//隨機字串

將其修改為：

//若終端IP未設定，則使用配置檔案中的終端IP
if (!inputObj.IsSet("spbill_create_ip"))
{
	inputObj.SetValue("spbill_create_ip", WxPayConfig.IP);//終端IP
}
inputObj.SetValue("appid", WxPayConfig.APPID);//公眾賬號ID
inputObj.SetValue("mch_id", WxPayConfig.MCHID);//商戶號
inputObj.SetValue("nonce_str", GenerateNonceStr());//隨機字串

說明：因為原始碼傳遞給呼叫統一下單介面的終端IP是配置檔案Config.cs中的預設值（8.8.8.8），這樣肯定會出錯（H5支付要求上傳使用者真實IP），因此需要加上一個判斷，即如果已經設定了終端IP則不使用預設值。

OK，這樣就行了，是不是非常簡單？

（以上程式碼在VS2013下編譯通過，在上傳伺服器後經手機測試通過）

【最後要說的】一、建議在Default.aspx中新增一個連結（連線到H5PayPage.aspx）以方便測試。二、H5支付結果非同步回撥通知與公眾號支付（JSAPI支付）和掃碼支付都是通過ResultNotifyPage.aspx來接收和迴應的，如果你之前已做好了更新訂單的邏輯處理，那現在就不需要做重複勞動了，是不是很爽？三、還有就是您需要將釋出後的程式碼上傳伺服器並在移動端呼叫才能實現H5支付。