【微信支付】公众号 JSAPI支付 HTML5(使用MUI前端框架)+WebApi 实现流程
必要参数：
1） AppID，AppSecret : 在微信公众号后台管理—>(菜单栏)开发 —> 基本设置
2）商户号 ：在微信公众号后台管理—>(菜单栏)微信支付—> 商户号管理
3）商户秘钥 ：在微信商户平台（可直接点击上图的“查看”）商户平台 —> 产品中心 —> 开发配置
基本配置：
1）IP白名单：a.测试电脑的ip地址，b.存放WebApi的服务器电脑ip地址
2）商户平台-->产品中心-->开发配置-->支付配置-->公众号支付：支付授权目录
注： a.前端页面的地址 b.后台支付方法的地址(都是域名而不是IP)
具体步骤：
1）添加充值按钮
<div class="mui-content-padded" style="margin-top: 6%;"> <button id='login' class="mui-btn mui-btn-block mui-btn-primary">充值</button> </div>
2）引用js
获取当前设备的IP地址： <script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
3）获取code ，openid
注：redirect_uri：是返回当前页面的 url,code的值会追加在这个地址后面，所以可以根据url的地址截取到需要的code值（如果有需要加的参数，可以直接写在后面，如标记的一样）
(function($) { $.init(); var url = location.search; var str = url.substr(1); code = str.split('code=')[1].split('&')[0]; //页面加载时，判断code有没有值，没有就访问 获取if (code == 'null') { var numberurl = cardnumber + "=" + id; window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=（是你的AppID）&redirect_uri=http://llcz.jolinmind.com/taocan.html?number=" + numberurl + "&id=" + id + "&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect"; } else { var codeN = code; mui.ajax({ url: '……/api/pay/get?jsoncallback=?', data: { code: codeN }, async: true, dataType: 'json', crossDomain: true, type: 'get', timeout: 10000, success: function(data) { openid=data; }, }); } })(mui);
后台Webapi：
_appid =AppID ，_secret =AppSecret
public object Get(string code) { string html = string.Empty; string url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid="+ _appid + "&secret="+ _secret + "&code="+ code + "&grant_type=authorization_code"; HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(url); request.Method = "GET"; request.ContentType = "text/html;charset=UTF-8"; HttpWebResponse response = request.GetResponse() as HttpWebResponse; Stream ioStream = response.GetResponseStream(); StreamReader sr = new StreamReader(ioStream, Encoding.UTF8); html = sr.ReadToEnd(); sr.Close(); ioStream.Close(); response.Close(); RepParamrepCode rep = JsonConvert.DeserializeObject<RepParamrepCode>(html); return rep.openid; } public class RepParamrepCode { public string access_token { get; set; } public string expires_in { get; set; } public string refresh_token { get; set; } public string openid { get; set; } public string scope { get; set; } }
4）支付
document.getElementById("login").addEventListener('tap', function() {
getCode();
});function getCode() {
mui.ajax({
url: '……/api/pay/get?jsoncallback=?',
data: {
openid: openid,
motto: returnCitySN.cip,(当前设备的IP地址)
xufei: （支付金额）
},
async: true,
dataType: 'json',
crossDomain: true,
type: 'get',
timeout: 10000,
success: function(res) {
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 {
onBridgeReady(res)
}
}
});
}
}
function onBridgeReady(data) {
var list = JSON.parse(data);
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": （你的AppId）,
"timeStamp": list['timeStamp'], //时间戳，自1970年以来的秒数
"nonceStr": list['nonceStr'], //随机串
"package": list['package1'],
"signType": list['signType'], //微信签名方式:
"paySign": list['paySign'] //微信签名
},
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
操作成功后，你自己的方法。
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
mui.alert('取消支付！', '提示');
} else {
mui.alert('支付失败！', '提示');
}
});
}
后台Webapi：
public string Get(string openid, string motto, int xufei) { return Getprepay_id(_appid, _mch_id, GetRandomString(30),"抬头", getRandomTime(), xufei, motto, "http://……/api/OM/get（支付成功后验证数据库是否有数据的地址）", openid); } //微信统一下单获取prepay_id & 再次签名返回数据 private static string Getprepay_id(string appid, string mch_id, string nonce_str, string body,string out_trade_no,int total_fee, string spbill_create_ip ,string notify_url, string openid) { var url = "https://api.mch.weixin.qq.com/pay/unifiedorder";//微信统一下单请求地址 string strA = "appid=" + appid + "&body=" + body + "&mch_id=" + mch_id + "&nonce_str=" + nonce_str + "¬ify_url=" + notify_url + "&openid=" + openid + "&out_trade_no=" + out_trade_no + "&spbill_create_ip=" + spbill_create_ip + "&total_fee=" + total_fee + "&trade_type=JSAPI"; string strk = strA + "&key=" + _key; //key为商户平台设置的密钥key(假) string strMD5 = MD5(strk).ToUpper();//签名 var 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>"; formData += "<openid>" + openid + "</openid>"; formData += "<out_trade_no>" + out_trade_no + "</out_trade_no>"; formData += "<spbill_create_ip>" + spbill_create_ip + "</spbill_create_ip>";//终端IP --用户ip formData += "<total_fee>" + total_fee + "</total_fee>"; formData += "<trade_type>JSAPI</trade_type>";//交易类型(JSAPI--公众号支付) formData += "<sign>" + strMD5 + "</sign>"; //签名 formData += "</xml>"; string v = sendPost(url, formData); string prepay_id = v; //时间戳 string _time = getTime().ToString(); string strB = "appId=" + appid + "&nonceStr=" + nonce_str + "&package=prepay_id=" + prepay_id + "&signType=MD5&timeStamp=" + _time + "&key=" + _key; wx w = new wx(); w.timeStamp = _time; w.nonceStr = nonce_str; w.package1 = "prepay_id=" + prepay_id; w.paySign = MD5(strB).ToUpper(); w.signType = "MD5"; return JsonConvert.SerializeObject(w); } private static string sendPost(string postUrl, string menuInfo) { string returnValue = string.Empty; byte[] byteData = Encoding.UTF8.GetBytes(menuInfo); Uri uri = new Uri(postUrl); HttpWebRequest webReq = (HttpWebRequest)WebRequest.Create(uri); webReq.Method = "POST"; webReq.ContentType = "application/x-www-form-urlencoded"; webReq.ContentLength = byteData.Length; //定义Stream信息 Stream stream = webReq.GetRequestStream(); stream.Write(byteData, 0, byteData.Length); stream.Close(); //获取返回信息 HttpWebResponse response = (HttpWebResponse)webReq.GetResponse(); StreamReader streamReader = new StreamReader(response.GetResponseStream(), Encoding.UTF8); returnValue = streamReader.ReadToEnd(); //关闭信息 streamReader.Close(); response.Close(); stream.Close(); XmlDocument doc = new XmlDocument(); doc.LoadXml(returnValue); XmlNodeList list = doc.GetElementsByTagName("xml"); XmlNode xn = list[0]; string prepay_ids = xn.SelectSingleNode("//prepay_id").InnerText; return prepay_ids; }
/// <summary> /// MD5签名方法 /// </summary> /// <param name="inputText">加密参数</param> /// <returns></returns> private static string MD5(string inputText) { MD5 md5 = new MD5CryptoServiceProvider(); byte[] fromData = System.Text.Encoding.UTF8.GetBytes(inputText); byte[] targetData = md5.ComputeHash(fromData); string byte2String = null; for (int i = 0; i < targetData.Length; i++) { byte2String += targetData[i].ToString("x2"); } return byte2String; }
/// <summary> /// 生成订单号 /// </summary> /// <returns></returns> private static string getRandomTime() { Random rd = new Random();//用于生成随机数 string DateStr = DateTime.Now.ToString("yyyyMMddHHmmssMM");//日期 string str = DateStr + rd.Next(10000).ToString().PadLeft(4, '0');//带日期的随机数 return str; }
/// <summary> /// 生成随机串 /// </summary> /// <param name="length">字符串长度</param> /// <returns></returns> private static string GetRandomString(int length) { const string key = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789"; if (length < 1) return string.Empty; Random rnd = new Random(); byte[] buffer = new byte[8]; ulong bit = 31; ulong result = 0; int index = 0; StringBuilder sb = new StringBuilder((length / 5 + 1) * 5); while (sb.Length < length) { rnd.NextBytes(buffer); buffer[5] = buffer[6] = buffer[7] = 0x00; result = BitConverter.ToUInt64(buffer, 0); while (result > 0 && sb.Length < length) { index = (int)(bit & result); sb.Append(key[index]); result = result >> 5; } } return sb.ToString(); }
/// <summary> /// 获取时间戳 /// </summary> /// <returns></returns> /// private static long getTime() { TimeSpan cha = (DateTime.Now - TimeZone.CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1))); long t = (long)cha.TotalSeconds; return t; }
微信支付接口签名验证工具：
https://pay.weixin.qq.com/wiki/doc/api/micropay.php?chapter=20_1
