微信支付 ——H5支付

先看下微信官方描述的H5支付应用场景：

H5支付是指商户在微信客户端外的移动端网页展示商品或服务，用户在前述页面确认使用微信支付时，商户发起本服务呼起微信客户端进行支付。
主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器唤起微信支付。

微信官方给出的描述里写到一个很重要的点：微信客户端外的的移动端网页 ，意思就是在微信应用之外的地方发起的支付功能，例如：百度丶谷歌等外部浏览器，官方不建议APP使用H5支付,官方有针对于APP的支付接口。

【本文介绍普通商户的H5支付】
前期的准备接口申请与准备工作没有什么难度,文档上的步骤已经写的非常清楚了非开发人员也能操作,详情请点击下方链接。

H5支付接入前准备

H5支付流程大概为：

1、用户在商户侧完成下单，使用微信支付进行支付

2、由商户后台向微信支付发起下单请求（调用统一下单接口）注：交易类型trade_type=MWEB

3、统一下单接口返回支付相关参数给商户后台，如支付跳转url（参数名“mweb_url”），商户通过mweb_url调起微信支付中间页

4、中间页进行H5权限的校验，安全性检查

5、如支付成功，商户后台会接收到微信侧的异步通知

6、用户在微信支付收银台完成支付或取消支付,返回商户页面（默认为返回支付发起页面）

7、商户在展示页面，引导用户主动发起支付结果的查询

8,9、商户后台判断是否接到收微信侧的支付结果通知，如没有，后台调用我们的订单查询接口确认订单状态

10、展示最终的订单支付结果给用户

开始接入支付

一丶调用统一下单接口获取mweb_url

  /*** 功能描述：微信H5下单** @author wxl* @date 2021/10/29* @param request 请求* @return response 响应*/
@RequestMapping("/WXpayh5")public @ResponseBody Map<String, String> H5orders(HttpServletRequest request, HttpServletResponse response) {log.info("进入h5支付方法");try {int fee = 0;//得到价格，传过来的值*100；if (null != request.getParameter("price")) {fee = Integer.parseInt(request.getParameter("price").toString());}log.info("得到的金额:"+fee);//订单编号String did = request.getParameter("did");log.info("得到的订单编号:"+did);//订单标题String title = request.getParameter("title");log.info("得到的订单标题:"+title);// 获取请求ip地址String ip = request.getHeader("x-forwarded-for");if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {ip = request.getHeader("Proxy-Client-IP");}if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {ip = request.getHeader("WL-Proxy-Client-IP");}if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {ip = request.getRemoteAddr();}if (ip.indexOf(",") != -1) {String[] ips = ip.split(",");ip = ips[0].trim();}// 拼接统一下单地址参数Map<String, String> paraMap = new HashMap<String, String>();paraMap.put("appid", AuthUtil.APPID); // 商家平台IDparaMap.put("body", title); // 商家名称-销售商品类目、String(128)paraMap.put("mch_id", AuthUtil.MCHID); // 商户IDparaMap.put("nonce_str", WXPayUtil.generateNonceStr()); // UUID 随机字符串paraMap.put("out_trade_no", did);// 订单号,每次都不同paraMap.put("spbill_create_ip", ip); //用户ip地址paraMap.put("total_fee", fee+""); // 支付金额，单位分paraMap.put("trade_type", "MWEB"); // 支付类型 paraMap.put("notify_url", "https://www.baidu.com");// 此路径是微信服务器调用支付结果通知路径,可以填写自己的回调地址// 拼接门店信息，各种门店传参各不一致可参考微信官方，我的为线上服务所以type为WapMap<String, String> paraMap2 = new HashMap<String, String>();paraMap2.put("type","Wap");//项目类型paraMap2.put("wap_url","https://www.baidu.com");//项目urlparaMap2.put("wap_name","小宋宋爱吃兔");//项目名称Map<String, String> paraMap1 = new HashMap<String, String>();paraMap1.put("h5_info",paraMap2.toString());paraMap.put("scene_info",paraMap1.toString());String sign = WXPayUtil.generateSignature(paraMap, AuthUtil.PATERNERKEY); //生成签名paraMap.put("sign", sign);String xml = WXPayUtil.mapToXml(paraMap);// 将所有参数(map)转xml格式log.info("将所有参数转XML:"+xml);// 统一下单 https://api.mch.weixin.qq.com/pay/unifiedorderString unifiedorder_url = "https://api.mch.weixin.qq.com/pay/unifiedorder";String xmlStr = HttpRequest.httpsRequest(unifiedorder_url, "POST", xml);String mweb_url = "";// 跳转urlif (xmlStr.indexOf("SUCCESS") != -1) {   //如果接口访问成功就获取mweb_urlMap<String, String> map = WXPayUtil.xmlToMap(xmlStr);mweb_url = (String) map.get("mweb_url");//再此拼接用户支付完成之后的回跳页面路径 }Map<String, String> payMap = new HashMap<String, String>();payMap.put("mweb_url", mweb_url); payMap.put("did",did);log.info("返回给前端的参数为：" + payMap);return payMap;} catch (Exception e) {e.printStackTrace();}return null;}

步骤说明：通过H5下单API成功获取H5下单返回的支付中间页（mweb_url 以下统称h5_url）后，用户需要通过微信外部的浏览器调起微信支付收银台

注意：

h5_url为拉起微信支付收银台的中间页面，可通过访问该url来拉起微信客户端，完成支付，h5_url的有效期为5分钟
微信支付收银台中间页会进行H5权限的校验，安全性检查
正常流程用户支付完成后会返回至发起支付的页面，如需返回至指定页面，则可以在h5_url后拼接上redirect_url参数，来指定回调页面。您希望用户支付完成后跳转至https://www.wechatpay.com.cn，则拼接后的地址为h5_url= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn
需对redirect_url进行urlencode处理

二丶【服务端】接收支付结果通知

步骤说明：当用户完成支付，微信会把相关支付结果将通过异步回调的方式通知商户，商户需要接收处理，并按文档规范返回应答

  /*** 功能描述：微信回调通知** @author wxl* @date 2021/10/29* @param request 请求* @return response 响应*/@RequestMapping("/notify")@ResponseBodypublic String callBack(HttpServletRequest request, HttpServletResponse response) throws Exception {log.info("notify 支付回调接口被调用");ServletInputStream inputStream = request.getInputStream();String notifyXml = StreamUtils.inputStream2String(inputStream, "utf-8");log.info("接收到的微信通知信息：" + notifyXml);// 解析返回结果Map<String, String> notifyMap = WXPayUtil.xmlToMap(notifyXml);log.info("解析后的返回结果:"+notifyMap);// 判断支付是否成功if ("SUCCESS".equals(notifyMap.get("result_code"))) {String outTradeNo = notifyMap.get("out_trade_no");//订单号/***   在这里写自己的业务逻辑,我自己的业务逻辑就不贴了**/// 支付成功：给微信发送我已接收通知的响应// 创建响应对象Map<String, String> returnMap = new HashMap<>();returnMap.put("return_code", "SUCCESS");returnMap.put("return_msg", "OK");String returnXml = WXPayUtil.mapToXml(returnMap);response.setContentType("text/xml");log.info("支付成功，通知已处理");return returnXml;}// 创建响应对象：微信接收到校验失败的结果后，会反复的调用当前回调函数Map<String, String> returnMap = new HashMap<>();returnMap.put("return_code", "FAIL");returnMap.put("return_msg", "");String returnXml = WXPayUtil.mapToXml(returnMap);response.setContentType("text/xml");log.info("校验失败");return returnXml;}

三丶【服务端】查询订单状态

步骤说明：当商户后台、网络、服务器等出现异常，商户系统最终未接收到支付通知时商户可通过查询订单接口核实订单支付状态

 /*** 功能描述：查询微信订单状态** @author wxl* @date 2021/10/29* @param request 请求* @return response 响应*/
@RequestMapping("/Queryorder")public @ResponseBody Map<String, String> Queryorder(HttpServletRequest request, HttpServletResponse response) {log.info("进入订单查询方法");try {//订单编号String did = request.getParameter("did");log.info("得到的订单编号:"+did);// 拼接统一下单地址参数Map<String, String> paraMap = new HashMap<String, String>();paraMap.put("appid", AuthUtil.APPID); // 商家平台IDparaMap.put("mch_id", AuthUtil.MCHID); // 商户IDparaMap.put("nonce_str", WXPayUtil.generateNonceStr()); // UUIDparaMap.put("out_trade_no", did);// 订单号,每次都不同String sign = WXPayUtil.generateSignature(paraMap, AuthUtil.PATERNERKEY);paraMap.put("sign", sign);//签名String xml = WXPayUtil.mapToXml(paraMap);// 将所有参数(map)转xml格式log.info("将所有参数转XML:"+xml);// 查询订单接口String unifiedorder_url = "https://api.mch.weixin.qq.com/pay/orderquery";String xmlStr = HttpRequest.httpsRequest(unifiedorder_url, "POST", xml);log.info("获取到的订单接口数据为：" + xmlStr);// 以下内容是返回前端页面的json数据String resultcode = "";// 接口状态码String out_trade_no = "";//订单号String trade_state_desc = ""; //交易状态描述String trade_state="";//交易状态码if (xmlStr.indexOf("SUCCESS") != -1) {Map<String, String> map = WXPayUtil.xmlToMap(xmlStr);resultcode = (String) map.get("result_code");out_trade_no = (String) map.get("out_trade_no");trade_state_desc = (String) map.get("trade_state_desc");trade_state = (String) map.get("trade_state");}Map<String, String> payMap = new HashMap<String, String>();payMap.put("resultcode", resultcode);payMap.put("did",out_trade_no);payMap.put("trade_state",trade_state);payMap.put("trade_state_desc",trade_state_desc);log.info("返回给前端的参数为：" + payMap);return payMap;} catch (Exception e) {e.printStackTrace();}return null;}

返回参数详细说明请移步微信官方文档进行查看：

查询订单

开发过程中所涉及到的工具类

AuthUtil.java

import net.sf.json.JSONObject;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.util.EntityUtils;import java.io.IOException;public class AuthUtil {public static final String APPID = ""; //公众号idpublic static final String APPSECRET = "";  //公众号密匙public static final String MCHID = ""; //微信支付商户号public static final String PATERNERKEY = ""; //微信支付密匙public static JSONObject doGetJson(String url) throws ClientProtocolException, IOException {JSONObject jsonObject = null;// 首先初始化HttpClient对象DefaultHttpClient client = new DefaultHttpClient();// 通过get方式进行提交HttpGet httpGet = new HttpGet(url);// 通过HTTPclient的execute方法进行发送请求HttpResponse response = client.execute(httpGet);// 从response里面拿自己想要的结果HttpEntity entity = response.getEntity();if (entity != null) {String result = EntityUtils.toString(entity, "UTF-8");jsonObject = JSONObject.fromObject(result);}// 把链接释放掉httpGet.releaseConnection();return jsonObject;}
}

WXPayUtil.java

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.*;
import java.security.MessageDigest;
import java.security.SecureRandom;
import java.util.*;public class WXPayUtil {private static final String SYMBOLS = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";private static final Random RANDOM = new SecureRandom();/*** XML格式字符串转换为Map** @param strXML XML字符串* @return XML数据转换后的Map* @throws Exception*/public static Map<String, String> xmlToMap(String strXML) throws Exception {try {Map<String, String> data = new HashMap<String, String>();DocumentBuilder documentBuilder = WXPayXmlUtil.newDocumentBuilder();InputStream stream = new ByteArrayInputStream(strXML.getBytes("UTF-8"));org.w3c.dom.Document doc = documentBuilder.parse(stream);doc.getDocumentElement().normalize();NodeList nodeList = doc.getDocumentElement().getChildNodes();for (int idx = 0; idx < nodeList.getLength(); ++idx) {Node node = nodeList.item(idx);if (node.getNodeType() == Node.ELEMENT_NODE) {org.w3c.dom.Element element = (org.w3c.dom.Element) node;data.put(element.getNodeName(), element.getTextContent());}}try {stream.close();} catch (Exception ex) {// do nothing}return data;} catch (Exception ex) {WXPayUtil.getLogger().warn("Invalid XML, can not convert to map. Error message: {}. XML content: {}", ex.getMessage(), strXML);throw ex;}}/*** 将Map转换为XML格式的字符串** @param data Map类型数据* @return XML格式的字符串* @throws Exception*/public static String mapToXml(Map<String, String> data) throws Exception {org.w3c.dom.Document document = WXPayXmlUtil.newDocument();org.w3c.dom.Element root = document.createElement("xml");document.appendChild(root);for (String key: data.keySet()) {String value = data.get(key);if (value == null) {value = "";}value = value.trim();org.w3c.dom.Element filed = document.createElement(key);filed.appendChild(document.createTextNode(value));root.appendChild(filed);}TransformerFactory tf = TransformerFactory.newInstance();Transformer transformer = tf.newTransformer();DOMSource source = new DOMSource(document);transformer.setOutputProperty(OutputKeys.ENCODING, "UTF-8");transformer.setOutputProperty(OutputKeys.INDENT, "yes");StringWriter writer = new StringWriter();StreamResult result = new StreamResult(writer);transformer.transform(source, result);String output = writer.getBuffer().toString(); //.replaceAll("\n|\r", "");try {writer.close();}catch (Exception ex) {}return output;}/*** 生成带有 sign 的 XML 格式字符串** @param data Map类型数据* @param key API密钥* @return 含有sign字段的XML*/public static String generateSignedXml(final Map<String, String> data, String key) throws Exception {return generateSignedXml(data, key, WXPayConstants.SignType.MD5);}/*** 生成带有 sign 的 XML 格式字符串** @param data Map类型数据* @param key API密钥* @param signType 签名类型* @return 含有sign字段的XML*/public static String generateSignedXml(final Map<String, String> data, String key, WXPayConstants.SignType signType) throws Exception {String sign = generateSignature(data, key, signType);data.put(WXPayConstants.FIELD_SIGN, sign);return mapToXml(data);}/*** 判断签名是否正确** @param xmlStr XML格式数据* @param key API密钥* @return 签名是否正确* @throws Exception*/public static boolean isSignatureValid(String xmlStr, String key) throws Exception {Map<String, String> data = xmlToMap(xmlStr);if (!data.containsKey(WXPayConstants.FIELD_SIGN) ) {return false;}String sign = data.get(WXPayConstants.FIELD_SIGN);return generateSignature(data, key).equals(sign);}/*** 判断签名是否正确，必须包含sign字段，否则返回false。使用MD5签名。** @param data Map类型数据* @param key API密钥* @return 签名是否正确* @throws Exception*/public static boolean isSignatureValid(Map<String, String> data, String key) throws Exception {return isSignatureValid(data, key, WXPayConstants.SignType.MD5);}/*** 判断签名是否正确，必须包含sign字段，否则返回false。** @param data Map类型数据* @param key API密钥* @param signType 签名方式* @return 签名是否正确* @throws Exception*/public static boolean isSignatureValid(Map<String, String> data, String key, WXPayConstants.SignType signType) throws Exception {if (!data.containsKey(WXPayConstants.FIELD_SIGN) ) {return false;}String sign = data.get(WXPayConstants.FIELD_SIGN);return generateSignature(data, key, signType).equals(sign);}/*** 生成签名** @param data 待签名数据* @param key API密钥* @return 签名*/public static String generateSignature(final Map<String, String> data, String key) throws Exception {return generateSignature(data, key, WXPayConstants.SignType.MD5);}/*** 生成签名. 注意，若含有sign_type字段，必须和signType参数保持一致。** @param data 待签名数据* @param key API密钥* @param signType 签名方式* @return 签名*/public static String generateSignature(final Map<String, String> data, String key, WXPayConstants.SignType signType) throws Exception {Set<String> keySet = data.keySet();String[] keyArray = keySet.toArray(new String[keySet.size()]);Arrays.sort(keyArray);StringBuilder sb = new StringBuilder();for (String k : keyArray) {if (k.equals(WXPayConstants.FIELD_SIGN)) {continue;}if (data.get(k).trim().length() > 0) // 参数值为空，则不参与签名sb.append(k).append("=").append(data.get(k).trim()).append("&");}sb.append("key=").append(key);if (WXPayConstants.SignType.MD5.equals(signType)) {return MD5(sb.toString()).toUpperCase();}else if (WXPayConstants.SignType.HMACSHA256.equals(signType)) {return HMACSHA256(sb.toString(), key);}else {throw new Exception(String.format("Invalid sign_type: %s", signType));}}/*** 获取随机字符串 Nonce Str** @return String 随机字符串*/public static String generateNonceStr() {char[] nonceChars = new char[32];for (int index = 0; index < nonceChars.length; ++index) {nonceChars[index] = SYMBOLS.charAt(RANDOM.nextInt(SYMBOLS.length()));}return new String(nonceChars);}/*** 生成 MD5** @param data 待处理数据* @return MD5结果*/public static String MD5(String data) throws Exception {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();}/*** 生成 HMACSHA256* @param data 待处理数据* @param key 密钥* @return 加密结果* @throws Exception*/public static String HMACSHA256(String data, String key) throws Exception {Mac sha256_HMAC = Mac.getInstance("HmacSHA256");SecretKeySpec secret_key = new SecretKeySpec(key.getBytes("UTF-8"), "HmacSHA256");sha256_HMAC.init(secret_key);byte[] array = sha256_HMAC.doFinal(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();}public static String InputStream2String(InputStream is) throws IOException {ByteArrayOutputStream baos = new ByteArrayOutputStream();byte[] buffer = new byte[1024];int len = -1;while ((len = is.read(buffer)) != -1) {baos.write(buffer, 0, len);}baos.close();is.close();byte[] lens = baos.toByteArray();String result = new String(lens,"UTF-8");//内容乱码处理return result;}/*** 日志* @return*/public static Logger getLogger() {Logger logger = LoggerFactory.getLogger("wxpay java sdk");return logger;}/*** 获取当前时间戳，单位秒* @return*/public static long getCurrentTimestamp() {return System.currentTimeMillis()/1000;}/*** 获取当前时间戳，单位毫秒* @return*/public static long getCurrentTimestampMs() {return System.currentTimeMillis();}}