这次给大家带来公众号支付接口的开发，公众号支付接口开发的注意事项有哪些，下面就是实战案例，一起来看一下。
公众号支付就是在微信里面的h5页面唤起微信支付，不用扫码即可付款的功能。做这个功能首先要明确的就是，只有和商户号mch_id匹配的appid才能成功支付。商户号在注册成功的时候就会将相关信息发送到邮箱里面。而唤起支付的一个关键是靠openid拿到统一下单。而openid是和appid一一对应的。也就是说如果你登录使用的appid不是公众号的appid，得到的openid就无法唤起公众号内的支付(会出现appid和商户号不匹配的错误)。曾经就在这个地方绕了个弯，因为微信的开放平台可以创建网站应用，也有一个appid和appsecreat，也可以在微信里面一键登录。
业务流程下面是微信的官方流程，看似有点复杂，重点就是要拿到统一下单接口返回的json串，其他按照官方demo基本就能正确，下面说一下几个细节。
创建订单在调用微信公众号支付之前，首先我们自己要把订单创建好。比如一个充值的订单。主要是先确定下金额再进行下一步。
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即可。然后里面的方法就可以直接用了。
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。
唤起支付官方页面的示例如下：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 但主要的参数(mark部分)是由后台生成的，也就是上一个步骤的viewbag.wxjsapiparam
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;
}<p class="page" id="wxpayment">
<p class="content">
<p>订单详情：@html.raw(viewbag.unifiedorder)</p>
<button id="h5pay" onclick="callpay()">支付</button>
</p>
<input type="hidden" value="@viewbag.ordernumber" id="ordernum"/></p>
<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(统一下单失败!);
}
});
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
webpack自动刷新与解析的使用
webpack的模块热替换详解
js事件先发布后订阅的方法
以上就是公众号支付接口的开发的详细内容。