微信支付H5调用支付详解

微信公众号支付H5调用支付详解

最近项目需要微信支付，然后看了下微信公众号支付，，虽然不难，但是细节还是需要注意的，用了大半天时间写了个demo，并且完整的测试了一下支付流程，下面分享一下微信公众号支付的经验。

一、配置公众号微信支付  

   需要我们配置微信公众号支付地址和测试白名单。

  

     比如：支付JS页面的地址为 http://www.xxx.com/shop/pay/

            那此处配置www.xxx.com/shop/pay/

  二、开发流程

     借用微信公众号支付api(地址 http://pay.weixin.qq.com/wiki/doc/api/index.php?chapter=7_4)，我们需要开发的为红色标记出的。如下：

    

 

三、向微信服务器端下订单

             调用统一下单接口，这样就能获取微信支付的prepay_id（http://pay.weixin.qq.com/wiki/doc/api/index.php?chapter=9_1）。

     在调用该接口前有几个字段是H5支付必须填写的openid

    3.1 获取openid

         可以通过网页授权形式（http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html）

       在微信中发送如下链接

      

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=要跳转的下订单的url&response_type=code&scope=snsapi_base&state=123#wechat_redirect

   3.2 下订单获取prepay_id

    代码如下，实际上是通过post发送一个xml 文件，获取微信服务器端发送过来的prepay_id。

   

import java.io.ByteArrayInputStream;import java.io.IOException;import java.io.InputStream;import java.io.UnsupportedEncodingException;import java.util.Date;import java.util.HashMap;import java.util.Iterator;import java.util.Map;import java.util.Map.Entry;import java.util.Random;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.codec.digest.DigestUtils;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.xmlpull.v1.XmlPullParser;import org.xmlpull.v1.XmlPullParserException;import org.xmlpull.v1.XmlPullParserFactory;import com.fasterxml.jackson.databind.JsonNode;import com.gson.oauth.Oauth;import com.gson.oauth.Pay;import com.gson.util.HttpKit;import com.sy.util.DatetimeUtil;import com.sy.util.JsonUtil;@Controller@RequestMapping("/pay")public class WXPayController {@RequestMapping(value = "wxprepay.do")public void jspay(HttpServletRequest request, HttpServletResponse response, String callback) throws Exception {// 获取openidString openId = SessionUtil.getAtt(request, "openId");if (openId == null) {openId = getUserOpenId(request);}String appid = "wx16691fcb0523c1a4";String paternerKey = "ININGFENG1234567fdfwfdfd1ss234567";String out_trade_no = getTradeNo();Map<String, String> paraMap = new HashMap<String, String>();paraMap.put("appid", appid);paraMap.put("attach", "测试");paraMap.put("body", "测试购买支付");paraMap.put("mch_id", "10283271");paraMap.put("nonce_str", create_nonce_str());paraMap.put("openid", openId);paraMap.put("out_trade_no", out_trade_no);paraMap.put("spbill_create_ip", getAddrIp(request));paraMap.put("total_fee", "1");paraMap.put("trade_type", "JSAPI");paraMap.put("notify_url", "http://www.xxx.co/bank/page/wxnotify");String sign = getSign(paraMap, paternerKey);paraMap.put("sign", sign);// 统一下单 https://api.mch.weixin.qq.com/pay/unifiedorderString url = "https://api.mch.weixin.qq.com/pay/unifiedorder";String xml = ArrayToXml(paraMap);String xmlStr = HttpKit.post(url, xml);// 预付商品idString prepay_id = "";if (xmlStr.indexOf("SUCCESS") != -1) {Map<String, String> map = doXMLParse(xmlStr);prepay_id = (String) map.get("prepay_id");}Map<String, String> payMap = new HashMap<String, String>();payMap.put("appId", appid);payMap.put("timeStamp", create_timestamp());payMap.put("nonceStr", create_nonce_str());payMap.put("signType", "MD5");payMap.put("package", "prepay_id=" + prepay_id);String paySign = getSign(payMap, paternerKey);payMap.put("pg", prepay_id);payMap.put("paySign", paySign);WebUtil.response(response, WebUtil.packJsonp(callback, JsonUtil.warpJsonNodeResponse(JsonUtil.objectToJsonNode(payMap)).toString()));}/** * map转成xml *  * @param arr * @return */public String ArrayToXml(Map<String, String> arr) {String xml = "<xml>";Iterator<Entry<String, String>> iter = arr.entrySet().iterator();while (iter.hasNext()) {Entry<String, String> entry = iter.next();String key = entry.getKey();String val = entry.getValue();xml += "<" + key + ">" + val + "</" + key + ">";}xml += "</xml>";return xml;}// 获取openIdprivate String getUserOpenId(HttpServletRequest request) throws Exception {String code = request.getParameter("code");if (code == null) {String openId = request.getParameter("openId");return openId;}Oauth o = new Oauth();String token = o.getToken(code);JsonNode node = JsonUtil.StringToJsonNode(token);String openId = node.get("openid").asText();return openId;}private String create_nonce_str() {String chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";String res = "";for (int i = 0; i < 16; i++) {Random rd = new Random();res += chars.charAt(rd.nextInt(chars.length() - 1));}return res;}private String getAddrIp(HttpServletRequest request){return request.getRemoteAddr();}private String create_timestamp() {return Long.toString(System.currentTimeMillis() / 1000);}private String getTradeNo(){String timestamp = DatetimeUtil.formatDate(new Date(), DatetimeUtil.DATETIME_PATTERN);return "HZNO" + timestamp;}private String getSign(Map<String, String> params, String paternerKey )throws UnsupportedEncodingException {String string1 = Pay.createSign(params, false);String stringSignTemp = string1 + "&key=" + paternerKey;String signValue = DigestUtils.md5Hex(stringSignTemp).toUpperCase();return  signValue;}private Map<String, String> doXMLParse(String xml)throws XmlPullParserException, IOException {InputStream inputStream = new ByteArrayInputStream(xml.getBytes());Map<String, String> map = null;XmlPullParser pullParser = XmlPullParserFactory.newInstance().newPullParser();pullParser.setInput(inputStream, "UTF-8"); // 为xml设置要解析的xml数据int eventType = pullParser.getEventType();while (eventType != XmlPullParser.END_DOCUMENT) {switch (eventType) {case XmlPullParser.START_DOCUMENT:map = new HashMap<String, String>();break;case XmlPullParser.START_TAG:String key = pullParser.getName();if (key.equals("xml"))break;String value = pullParser.nextText();map.put(key, value);break;case XmlPullParser.END_TAG:break;}eventType = pullParser.next();}return map;}}

四、H5支付

      H5支付其实很简单，只需要调用微信内嵌浏览器的js方法就行（http://pay.weixin.qq.com/wiki/doc/api/index.php?chapter=7_7）

   

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %><%    String path = request.getContextPath();    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta name="format-detection" content="telephone=no" /><title>测试支付</title><link href="../css/css.css?v=1.0" rel="stylesheet" type="text/css"></head><body><div class="index_box"><div class="apply_name">微信js支付测试</div><div class="branch_con"><ul><li><span class="name">测试支付信息</span></li></ul><p class="cz_btn"><a href="javascript:pay();" class="btn_1">立即支付</a></p></div></div><script type="text/javascript" src="../js/zepto.min.js"></script><script type="text/javascript" src="../js/common.js"></script><script type="text/javascript"> var appId = urlparameter("appId");var timeStamp = urlparameter("timeStamp");var nonceStr = urlparameter("nonceStr");var pg = urlparameter("pg");var signType = urlparameter("signType");var paySign = urlparameter("paySign");  function onBridgeReady(){    WeixinJSBridge.invoke(       'getBrandWCPayRequest', {           "appId" : appId,     //公众号名称，由商户传入                "timeStamp": timeStamp,         //时间戳，自1970年以来的秒数                "nonceStr" : nonceStr, //随机串                "package" : "prepay_id=" + pg,                "signType" : signType,         //微信签名方式:                "paySign" : paySign    //微信签名        },              function(res){                if(res.err_msg == "get_brand_wcpay_request:ok" ) {                      alert("支付成功");           }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。        }   ); }        function pay(){    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();}         }</script></body></html>

效果如下