项目开发过程中，涉及到了微信支付功能，这里做一个详细的记录。
小程序和H5的后端代码是通用的，前端调用不同的代码实现，这里不是重点，会简单的给出相关的代码。
微信支付，官方给了开发文档，但是其中还是有一部分需要自己去摸索一下，刚开始接触走一点弯路踩一点坑也比较正常。
当然微信支付这边涉及到商户平台，需要进行验证，使用的是公司的账号，个人小程序没有支付的权限。
1.开发之前的认知
先了解一下铺垫的知识，会让开发的思路更加的清楚，当时觉得这些没啥用，现在回想回想这些流程确实会更加的明确开发的流程，这张时序图就很清楚的描述了流程。这里是小程序的支付模式。
这里知道了大概流程就可以了，是在没办法开发时比对自己的代码逻辑，会发现跟这个时序图还是完全吻合的。
需要：appid，商户mchid，商户秘钥key
支付的开发步骤：
这里官方文档罗列了JSAPI与JSSDK之间的整体流程和一些小区别。H5进行支付时需要在后台设置授权域名，当然也都需要设置微信支付通知的回调接口url，微信会向接口发送支付结果的通知，会按照一定的时间间隔进行通知，接收到支付结果的服务器返回微信成功或失败结果，微信接收到成功结果便不会再进行消息的通知。
了解了基本的流程之后，附上代码为敬。
（1）前端简单的流程就是点击支付按钮
（2）将支付金额等数据传到后台，后台进行处理，并生成预支付订单
//Controller方法 返回给小程序端需要的参数Map集合
Map<String, Object> resultMap = new HashMap<String, Object>();public class IpUtil {
/**
* IpUtils工具类方法
* 获取真实的ip地址
* @param request
* @return
*/
public static String getIpAddr(HttpServletRequest request) {
String ip = request.getHeader("X-Forwarded-For");
if(StringUtils.isNotEmpty(ip) && !"unKnown".equalsIgnoreCase(ip)){
//多次反向代理后会有多个ip值，第一个ip才是真实ip
int index = ip.indexOf(",");
if(index != -1){
return ip.substring(0,index);
}else{
return ip;
}
}
ip = request.getHeader("X-Real-IP");
if(StringUtils.isNotEmpty(ip) && !"unKnown".equalsIgnoreCase(ip)){
return ip;
}
return request.getRemoteAddr();
}
}public static Map<String, Object> wxPay(String ip,UserInfo user,int inviteAnswerId) throws Exception
{
InviteAnswer answer = seekHelpAnswerService.getInviteAnswer(inviteAnswerId);
Question question = seekHelpQuestionService.getQuestion(answer.questionId);//直接调固定的方法
Account myAccount = seekHelpPayService.getUserAccount(user.id);
BigDecimal qMoney = new BigDecimal(question.money.toString());
BigDecimal totalMoney = new BigDecimal("0");
if(null != answer.helperId && null != question.extraAward && question.extraAward != QuestionExtraAwardType.暂无.code)
{
totalMoney = SeniorBigDecimalUtil.add(qMoney, question.extraAwardMoney);
}else{
totalMoney = qMoney;
}
BigDecimal needPayMoney = SeniorBigDecimalUtil.sub(myAccount.money, totalMoney).abs();
BigDecimal needPayMoneyFormatCent = SeniorBigDecimalUtil.mul(needPayMoney, new BigDecimal("100"));//将需要支付的金额转换为以分为单位的金额
Integer totalFee = needPayMoneyFormatCent.intValue();
//Integer totalFee = 1;
String nonce_str = WxPayOperate.getRandomStringByLength(32); //生成的随机字符串
String body = "求助支付"; //商品名称
String out_trade_no = DateTimeOper.getStrForDate(new Date()) + inviteAnswerId;//充值订单号
Map<String, String> packageParams = new HashMap<String, String>(); //组装参数，用户生成统一下单接口的签名
packageParams.put("appid", WxPayConfig.appid);
packageParams.put("mch_id", WxPayConfig.mch_id);
packageParams.put("nonce_str", nonce_str);
packageParams.put("body", body);
packageParams.put("out_trade_no", out_trade_no);//商户订单号
packageParams.put("total_fee", String.valueOf(totalFee));//支付金额，这边需要转成字符串类型，否则后面的签名会失败
packageParams.put("ip", ip);
packageParams.put("notify_url", WxPayConfig.notify_url);//支付成功后的回调地址
packageParams.put("trade_type", WxPayConfig.TRADETYPE);//支付方式
packageParams.put("openid", user.openId);
String prestr = PayUtil.createLinkString(packageParams); // 把数组所有元素，按照“参数=参数值”的模式用“&”字符拼接成字符串
String mysign = PayUtil.sign(prestr, WxPayConfig.key, "utf-8").toUpperCase();//MD5运算生成签名，这里是第一次签名，用于调用统一下单接口
String xml = "<xml>" + "<appid>" + WxPayConfig.appid + "</appid>" //拼接统一下单接口使用的xml数据，要将上一步生成的签名一起拼接进去
+ "<body><![CDATA[" + body + "]]></body>"
+ "<mch_id>" + WxPayConfig.mch_id + "</mch_id>"
+ "<nonce_str>" + nonce_str + "</nonce_str>"
+ "<notify_url>" + WxPayConfig.notify_url + "</notify_url>"
+ "<openid>" + user.openId + "</openid>"
+ "<out_trade_no>" + out_trade_no + "</out_trade_no>"
+ "<ip>" + ip+ "</ip>"
+ "<total_fee>" + String.valueOf(totalFee) + "</total_fee>"
+ "<trade_type>" + WxPayConfig.TRADETYPE + "</trade_type>"
+ "<sign>" + mysign + "</sign>"
+ "</xml>";
String result = PayUtil.httpRequest(WxPayConfig.pay_url, "POST", xml);//调用统一下单接口，并接受返回的结果
Map<?, ?> map = PayUtil.doXMLParse(result);// 将解析结果存储在HashMap中
String return_code = (String) map.get("return_code");//返回状态码
Map<String, Object> resultMap = new HashMap<String, Object>();//返回给小程序端需要的参数
if(return_code.equals("SUCCESS"))
{
String result_code = (String)map.get("result_code");
if(result_code.equals("SUCCESS"))
{
String prepay_id = (String) map.get("prepay_id");//返回的预付单信息
resultMap.put("nonceStr", nonce_str);
resultMap.put("package", "prepay_id=" + prepay_id);
Long timeStamp = System.currentTimeMillis() / 1000;
resultMap.put("timeStamp", timeStamp + "");//这边要将返回的时间戳转化成字符串，不然小程序端调用wx.requestPayment方法会报签名错误
String stringSignTemp = "appId=" + WxPayConfig.appid + "&nonceStr=" + nonce_str + "&package=prepay_id=" + prepay_id+ "&signType=MD5&timeStamp=" + timeStamp; //拼接签名需要的参数
String paySign = PayUtil.sign(stringSignTemp, WxPayConfig.key, "utf-8").toUpperCase(); //再次签名，这个签名用于小程序端调用wx.requesetPayment方法
resultMap.put("paySign", paySign);
}else{
return_code = "FAIL";//result_code决定最终请求结果，result_code为FAIL，则表示请求支付失败,return_code也置为FAIL
String err_code = (String)map.get("err_code");
String err_code_des = (String) map.get("err_code_des");
order.err_code = err_code;
order.err_code_des = err_code_des;
}
}
resultMap.put("appid", WxPayConfig.appid);
resultMap.put("flag", return_code);
resultMap.put("tradeNo", out_trade_no);
return resultMap;
}不好的习惯，代码的注释写的很少。大致的流程就是就官方要求的参加添加到Map中，然后将元素转换成“参数=参数值”的模式用“&”字符拼接成字符串，使用PayUtil.sign方法与商户秘钥key进行参数第一次签名，后面统一下单接口调用需要使用。
拼接统一下单接口使用的xml数据，post请求统一下单接口，https://api.mch.weixin.qq.com/pay/unifiedorder，获取统一下单接口返回的xml格式数据，解析返回的xml数据，保存在map中，根据返回的状态码判断下单是否成功。如果成功，将成功的信息返回给小程序端准备调用微信app的支付功能。
这部分多看看官方的文档，会有比较详细的流程，下单请求需要的参数，以及返回的数据字段等等。
- 元素转换成“参数=参数值”的模式用“&”字符拼接成字符串
/**
* 把数组所有元素排序，并按照“参数=参数值”的模式用“&”字符拼接成字符串
* @param params 需要排序并参与字符拼接的参数组
* @return 拼接后字符串
*/
public static String createLinkString(Map<String, String> params) {
List<String> keys = new ArrayList<String>(params.keySet());
Collections.sort(keys);
String prestr = "";
for (int i = 0; i < keys.size(); i++) {
String key = keys.get(i);
String value = params.get(key);
if(value != null && (!key.equals("sign")))
{
if (i == keys.size() - 1) {// 拼接时，不包括最后一个&字符
prestr = prestr + key + "=" + value;
} else {
prestr = prestr + key + "=" + value + "&";
}
}
}
return prestr;
} - MD5运算签名
/**
* 签名字符串
* @param text需要签名的字符串
* @param key 密钥
* @param input_charset编码格式
* @return 签名结果
* @throws Exception
*/
public static String sign(String text, String key, String input_charset) throws Exception {
text = text + "&key=" + key;
return MD5(text).toUpperCase();
} /**
* 生成 MD5
*
* @param data 待处理数据
* @return MD5结果
*/
public static String MD5(String data) throws Exception {
java.security.MessageDigest md = MessageDigest.getInstance("MD5");
byte[] array = md.digest(data.getBytes("UTF-8"));
StringBuilder sb = new StringBuilder();
for (byte item : array) {
sb.append(Integer.toHexString((item & 0xFF) | 0x100).substring(1, 3));
}
return sb.toString().toUpperCase();
}- 拼接xml格式数据
- post请求统一下单地址
使用了最基本的HttpURLConnection方式，这里可以自己更好的实现，目的是获取返回的结果
/**
*
* @param requestUrl请求地址
* @param requestMethod请求方法
* @param outputStr参数
*/
public static String httpRequest(String requestUrl,String requestMethod,String outputStr){
StringBuffer buffer = null;
try{
URL url = new URL(requestUrl);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setRequestMethod(requestMethod);
conn.setDoOutput(true);
conn.setDoInput(true);
conn.connect();
//往服务器端写内容
if(null !=outputStr){
OutputStream os=conn.getOutputStream();
os.write(outputStr.getBytes("utf-8"));
os.close();
}
// 读取服务器端返回的内容
InputStream is = conn.getInputStream();
InputStreamReader isr = new InputStreamReader(is, "utf-8");
BufferedReader br = new BufferedReader(isr);
buffer = new StringBuffer();
String line = null;
while ((line = br.readLine()) != null) {
buffer.append(line);
}
}catch(Exception e){
e.printStackTrace();
}
return buffer.toString();
- 解析xml数据
/**
* 解析xml,返回第一级元素键值对。如果第一级元素有子节点，则此节点的值是子节点的xml数据。
* @param strxml
* @return
* @throws JDOMException
* @throws IOException
*/
public static Map<String, String> doXMLParse(String strxml) throws Exception {
if(null == strxml || "".equals(strxml)) {
return null;
}
Map<String, String> m = new HashMap<String, String>();
InputStream in = String2Inputstream(strxml);
SAXBuilder builder = new SAXBuilder();
Document doc = builder.build(in);
Element root = doc.getRootElement();
List<?> list = root.getChildren();
Iterator<?> it = list.iterator();
while(it.hasNext()) {
Element e = (Element) it.next();
String k = e.getName();
String v = "";
List<?> children = e.getChildren();
if(children.isEmpty()) {
v = e.getTextNormalize();
} else {
v = getChildrenText(children);
}
m.put(k, v);
}
//关闭流
in.close();
return m;
}
/**
* 获取子结点的xml
* @param children
* @return String
*/
public static String getChildrenText(List<?> children) {
StringBuffer sb = new StringBuffer();
if(!children.isEmpty()) {
Iterator<?> it = children.iterator();
while(it.hasNext()) {
Element e = (Element) it.next();
String name = e.getName();
String value = e.getTextNormalize();
List<?> list = e.getChildren();
sb.append("<" + name + ">");
if(!list.isEmpty()) {
sb.append(getChildrenText(list));
}
sb.append(value);
sb.append("</" + name + ">");
}
}
return sb.toString();
}
public static InputStream String2Inputstream(String str) throws UnsupportedEncodingException {
return new ByteArrayInputStream(str.getBytes("UTF-8"));
}- 重要的地方，二次签名
//拼接签名需要的参数
String stringSignTemp = "appId=" + WxPayConfig.appid + "&nonceStr=" + nonce_str + "&package=prepay_id=" + prepay_id+ "&signType=MD5&timeStamp=" + timeStamp;
//再次签名，这个签名用于小程序端调用wx.requesetPayment方法
String paySign = PayUtil.sign(stringSignTemp, WxPayConfig.key, "utf-8").toUpperCase(); 3.小程序端获取预支付订单数据，调用支付组件
/**
* 充值并支付成功回调
*/
function rechargeAndPaySuc(data) {
if (data.flag === "SUCCESS") {
var timeStamp = data.timeStamp;
var nonceStr = data.nonceStr;
var pack = data.package;
var paySign = data.paySign;
tradeNo = data.tradeNo;
wx.requestPayment({
timeStamp: timeStamp,
nonceStr: nonceStr,
package: pack,
signType: 'MD5',
paySign: paySign,
success: function (re) {
//支付成功
},
fail: function (re) {
// cancalPay();
},
complete: function (re) {
if (re.errMsg == "requestPayment:fail cancel") {
cancalPay();
} else if (re.errMsg == "requestPayment:ok") {
//进行一些页面逻辑的处理
} else {
cancalPay();
}
}
})
} else {
//调用微信支付接口生成预付订单失败
cancalPay();
}
}这里选择在complete回调函数进行页面的处理，但是真正的业务逻辑确认需要在微信通知结果获取后进行处理，这里的返回结果并不一定准确。
4.微信通知支付结果，根据设置的结果回调url进行处理
/**
* @Title: wxPayNotify
* @Description: 支付回调通知 微信异步通知
* 订单待确认状态
*
* 如果订单确认，则进行账户金额的划转
*
* 如果订单没有支付成功，则返回给失败状态给客户端
*
* @param @param request
* @param @param response
* @param @throws Exception
* @return String
* @throws
*/
@RequestMapping("/wxPayNotify")
@ResponseBody
public String wxPayNotify(HttpServletRequest request, HttpServletResponse response) throws Exception
{
InputStream inputStream = null;
inputStream = request.getInputStream();
StringBuffer sb = new StringBuffer();
BufferedReader in = new BufferedReader(new InputStreamReader(inputStream,"UTF-8"));
String line = null;
while((line = in.readLine()) != null)
{
sb.append(line);
}
in.close();
inputStream.close();
String result = seekHelpPayService.processWxPayNotifyInfoToDB(sb.toString());
String xml = null;
if(result.equals("success"))
{
xml = "<xml>" + "<return_code><![CDATA[" + "SUCCESS" + "]]></return_code>"
+ "<return_msg><![CDATA[" + "OK" + "]]></return_msg>"
+ "</xml>";
}
return xml;
}这里就是对获取的微信支付通知结果进行的处理。
整个单机系统的微信支付流程就完成了，首先最重要的还是要看微信的官方文档，明白开发的流程，理解了流程，剩下就是业务逻辑的处理了，对于开发人员并没有太大的难度。
H5页面与小程序端对比，前端调用有所不同，这里的H5支付是在微信环境中的H5
H5页面js：
$.ajax({
url:urlHeader + "/xxx/xxxx",
type:"post",
dataType:"json",
data:{
xxxxxx
},
success:function(data){
console.log("预支付订单请求成功:");
if(data.flag == "SUCCESS"){
appId = data.appid;
timeStamp = data.timeStamp;
nonceStr = data.nonceStr;
packageStr = data.packageStr;
signType = data.signType;
paySign = data.paySign;
out_trade_no = data.tradeNo;
}
callPay();
},
error:function(data){
console.log(data);
alert("支付失败");
}
})下面的两个js方法是官方提供的，大致意思是调用微信内置的js
function onBridgeReady(){
console.log("申请支付页面");
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":appId,
"timeStamp":timeStamp,
"nonceStr":nonceStr,
"package":packageStr,
"signType":signType,
"paySign":paySign
},
function(res){
console.log("支付请求返回结果");
console.log(res);
if(res.err_msg == "get_brand_wcpay_request:ok" ){
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
//执行成功后的页面逻辑
}else if(res.err_msg == "get_brand_wcpay_request:fail"){
alert("支付失败");
}
});
}
function callPay(){
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();
}
}基本的流程就是这样了，代码写的比较差，持续努力中。
如有问题，欢迎添加我的微信：llbbaa
一起交流，共同学习。。。