微信支付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 { // 獲取openid String 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/unifiedorder String url = "https://api.mch.weixin.qq.com/pay/unifiedorder"; String xml = ArrayToXml(paraMap); String xmlStr = HttpKit.post(url, xml); // 預付商品id String 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; } // 獲取openId private 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>
效果如下