微信公衆平臺H5支付

首先說明一點但凡平臺開發接口開發都不會太難最主要的一點是看文檔~看文檔~看文檔。
按照文檔,第一步,預下單。
**推薦看文檔**
[API列表統一下單](https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1)

值得注意的是openid值的獲取, 直接貼代碼這裏輸入代碼`javascript

/**
	 * 微信統一下單
	 * 
	 * @param fenpay
	 * @param orderStr
	 * @return
	 */
	private String placOrder(int fenpay, String orderStr, String subject) {
		Object openid = WebUtils.getSessionAttribute("openid");
		if (openid == null) {
			throw new ServiceException("沒有得到微信受權,不能使用微信支付");
		}
		String url = "https://api.mch.weixin.qq.com/pay/unifiedorder";
		SortedMap<String, String> sm = new TreeMap<String, String>();
		// 添加三個固定的參數
		sm.put("appid", WeiXinUtil.APPID);
		sm.put("mch_id", WeiXinUtil.MCH_ID);
		sm.put("notify_url", WeiXinUtil.NOTIFY_URL);
		sm.put("trade_type", WeiXinUtil.TRADE_TYPE);
		sm.put("nonce_str", RandomStringGenerator.getRandomStringByLength(8));
		sm.put("body", subject);
		sm.put("out_trade_no", orderStr);
		sm.put("total_fee", String.valueOf(fenpay));
		sm.put("spbill_create_ip", "127.0.0.1");
		// 如今寫死的
		// sm.put("openid", "oMEZLt3zK-GrAnkHRsHxKOaDONpM");
		//
		String openidStr = openid.toString();
		sm.put("openid", openidStr);
		getLogger().debug("opendid:" + openid);
		String sign = WeiXinUtil.createSign(sm);
		getLogger().debug("sign:" + sign);
		String xml = XmlUtil.createXml(sm, sign);
		getLogger().debug("post:" + xml);
		String result = HttpClientUtil.postXML(url, xml);
		getLogger().debug("result:" + result);
		Map<String, String> xmlmap = XmlUtil.parseXml(result);
		// 返回預支付標識
		String prepay_id = xmlmap.get("prepay_id");
		// 凡是拿不到prepay_id都通通歸結爲下單失敗
		if (StringUtils.isEmpty(prepay_id)) {
			throw new ServiceException("微信下單失敗");
		}
		return "prepay_id=" + prepay_id;
	}

我是經過受權跳轉的方式獲取openid,即在點擊「去支付」按鈕的時候跳轉到微信平臺進行自動受權而後跳轉會指定頁面,也可在系統登陸的時候就進行受權跳轉。貼代碼注意加粗代碼便可。仍是推薦看文檔 受權跳轉 頁面跳轉受權php

<a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${payUrl2}&response_type=code&state=${user.uid}&scope=snsapi_base" class="paymentbtn">

redirect_uri爲你要受權以後跳轉回來的urlcss

/**
	 * 
	 * 活動報名
	 * 
	 * @return
	 */
	@SuppressWarnings("unchecked")
	public String payApply() {
		Map<String, Object> user = (Map<String, Object>) WebUtils.getSessionAttribute("user");
**		// 得到微信支付返回來的state,用來存儲登陸用戶的uid這個時候從新從接口中
		String state = WebUtils.getParameter("state");**
		getLogger().info("獲取受權以後的state" + state);
		if (user == null && StringUtils.isNotEmpty(state)) {
			Map<String, Object> map = new HashMap<String, Object>();
			map.put("uid", state);
			String userStr = HttpClientUtil.doGet("http://120.24.240.104/bikeapi/?m=user&a=get_user", map);
			user = (Map<String, Object>) JSON.parse(userStr);
			ActionContext.getContext().getSession().put("user", user);
		}

		if (getActivityId() == null) {
			return "activityerror";
		}
		Activity av = activityService.findById(getActivityId());
		setActivity(av);
**		// 得到用戶的openid,支付的時候須要用到
		String code = WebUtils.getParameter("code");**
		// String code = "021ed6c6c2f9b4689e166d7d0ea9caaD";
		if (StringUtils.isEmpty(code)) {
			// 不能得到支付受權
			setMsg("得到微信支付受權失敗,不能使用微信支付");
		} else {
**			// ------------一下爲獲取openid的代碼
			String url = "https://api.weixin.qq.com/sns/oauth2/access_token";
			Map<String, Object> map = new HashMap<String, Object>();
			map.put("appid", WeiXinUtil.APPID);
			map.put("secret", WeiXinUtil.APPSECRET);
			map.put("code", code);
			map.put("grant_type", "authorization_code");
			try {
				// 受權字符串
				String authStr = HttpClientUtil.doPost(url, map);
				JSONObject json = new JSONObject(authStr);
				String openid = json.getString("openid");
				// 把他set到session中,這應該是最簡單的了吧
				WebUtils.getSession().setAttribute("openid", openid);**
			} catch (Exception e) {
				e.printStackTrace();
				setMsg("得到微信支付受權失敗,不能使用微信支付");
			}
		}
		// 沒有登陸不能報名
		if (user != null) {
			// 查詢當前用戶的餘額,若是查不到那麼就是0元咯
			BigDecimal balance = userService.findBalanceByUid(Long.valueOf(user.get("uid").toString()));
			this.setUserBalance(balance);
			return "payapply";
		} else {
			fromUrl = "/index/index!login.action?from_url=/activity/activity!apply.action?id="
					+ String.valueOf(getActivityId());
			return "login";
		}
	}

好的,完成了統一下單以後你應該獲取到一個package格式爲prepay_id=123456789這樣子的訂單信息,那麼接下來就能夠在頁面發起支付請求了。 剛開始的時候我按照文檔的發起H5支付,結果怎麼調試都不成功,相信不少朋友也是在這個地方遇到問題 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7 這個應該是官方文檔沒更新的緣由,新版的微信中已經支持這種發起支付調用,而應該採用JSSDK發起支付請求。直接看到支付的api 輸入連接說明 輸入圖片說明 遇到不懂的地方或者缺乏的參數請往上看文檔。 主要具體步驟有 輸入圖片說明html

最後貼一下個人發起支付的頁面代碼,我只能幫大家到這裏了,剩下的就是調試了。java

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/header.jsp" %>
<title>微信支付</title>
<link rel="stylesheet" type="text/css" href="css/activity.css">
<script type="text/javascript" charset="UTF-8" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">

function pay(){
	var appId = $('#appId').val();
	var timeStamp = $('#timeStamp').val();
	var nonceStr = $('#nonceStr').val();
	var pk = $('#package').val();
	var signType = $('#signType').val();
	var paySign = $('#paySign').val();
	//config
	var timeStamp2 = $('#timeStamp2').val();
	var nonceStr2 = $('#nonceStr2').val();
	var signature = $('#signature').val();
	//
	var activityId = $('#activityId').val();
	
	wx.config({
	    debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來,若要查看傳入的參數,能夠在pc端打開,參數信息會經過log打出,僅在pc端時纔會打印。
	    appId: appId, // 必填,公衆號的惟一標識
	    timestamp:timeStamp2 , // 必填,生成簽名的時間戳
	    nonceStr: nonceStr2, // 必填,生成簽名的隨機串
	    signature: signature,// 必填,簽名,見附錄1
	    jsApiList: ['chooseWXPay'] // 必填,須要使用的JS接口列表,全部JS接口列表見附錄2
	});
	wx.ready(function(){
	    // config信息驗證後會執行ready方法,全部接口調用都必須在config接口得到結果以後,config是一個客戶端的異步操做,因此若是須要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口,則能夠直接調用,不須要放在ready函數中。
		wx.chooseWXPay({
		    timestamp: timeStamp, // 支付簽名時間戳,注意微信jssdk中的全部使用timestamp字段均爲小寫。但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符
		    nonceStr: nonceStr, // 支付簽名隨機串,不長於 32 位
		    package: pk, // 統一支付接口返回的prepay_id參數值,提交格式如:prepay_id=***)
		    signType: signType, // 簽名方式,默認爲'SHA1',使用新版支付需傳入'MD5'
		    paySign: paySign, // 支付簽名
		    complete: function (res) {
		        // 支付成功後的回調函數
		    	location.href=basePath+'/activityorder/activity-order!list.action?activityId='+activityId;
		    }
		});
	});
}
</script>
</head>
<body onload="pay()">
	<input id="activityId" type="hidden" value="${activityId}" />
	
	<input id="appId" type="hidden" value="${payparam.appId}" />
	<input id="timeStamp" type="hidden" value="${payparam.timeStamp}" />
	<input id="nonceStr" type="hidden" value="${payparam.nonceStr}" />
	<input id="package" type="hidden" value="${payparam.package1}" />
	<input id="signType" type="hidden" value="${payparam.signType}" />
	<input id="paySign" type="hidden" value="${payparam.paySign}" />
	
	<input id="timeStamp2" type="hidden" value="${apijsmap.timestamp}" />
	<input id="nonceStr2" type="hidden" value="${apijsmap.noncestr}" />
	<input id="signature" type="hidden" value="${apijsmap.signature}" />
</body>
</html>

最後記得在公衆平臺的公衆權限配置,你發起支付的頁面必定要是在公衆平臺設置了受權的頁面,調用jsjdk的頁面也要受權了的。至於具體要哪些受權,地方太多了慢慢找吧。json

相關文章
相關標籤/搜索