Wechat payment

  • WeChat pay
    • Preparation before wechat pay
    • The background and development
    • Vue front-end

WeChat pay

Recently, the company wants to make an event forecast on the wechat public account, and the tickets for the event need to be paid in wechat.

Preparation before wechat pay

WeChat need a WeChat payment business (https://pay.weixin.qq.com/index.php/apply/applyment_home/guide_normal), please apply themselves to business platform. After applying for the business number, you need to register at“Wechat public Account Platform — > wechat Pay”In the access. After the connection is successful, you need to log in to the systemWechat public account platform – > Settings – > public account Settings – > Function SettingsSet up your domain name, domain name format: http://baidu.com/, and set your server IP into a whitelist, set up after you can start to develop wechat payment,

The background and development

Without more words, directly on the code, if you want to understand the details of the official document wechat payment

Control layer

@RequestMapping(value = "/wxpay", produces = MediaType.APPLICATION_JSON_VALUE) @ResponseBody public Map<String, Object> weixinPrePay(@RequestBody Pay pay,HttpServletRequest request) throws Exception { Map<String,Object> maps = new HashMap<String,Object>(); Pay.setopenid (pay.getopenid ().substring(0, pay.getopenid ().length()-1)); System.out.println(pay.getOpenid()); Double prices = pay.getprice ()*100; Double prices = pay.getprice ()*100; Integer total_fee = prices.intValue(); System.out.println(prices+"----"+pay.getPrice()+"----"+total_fee); Integer out_trade_no = (int) (system.currentTimemillis () / 1000+970516); SortedMap<String, Object> parameterMap = new TreeMap<String, Object>(); parameterMap.put("appid", Parm.APPID); Parametermap. put(" McH_id ", parm.mch_id /* payCommonUtil.mch_id */); Parametermap. put("device_info", "WEB"); parameterMap.put("nonce_str", randomString); Parametermap. put("body", "cheshi"); Parametermap. put(" out_trade_NO ", out_trade_NO); Parametermap. put("fee_type", "CNY"); // Merchant order number (unique) parameterMap is generated using the current timestamp + arbitrary number. CNY: CNY: parameterMap. Put ("total_fee", total_fee); Parametermap. put(" notifY_URL ", wxnotify); Parametermap. put("trade_type", "JSAPI"); //JSAPI--JSAPI payment (or small program payment), NATIVE-- NATIVE payment, APP-- APP payment, MWEB--H5 payment, Parametermap. put(" openID ", aseutil.aesdecrypt (pay.getopenid ()))); // Trade_type is JSAPI and openID. / / the MD5 encryption format WeChat underlying the default encryption is the HMAC - SHA256 specific you can go to see the WeChat pay the underlying code (https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1) parameterMap.put("sign_type", "MD5"); String sign = PayCommonUtil.createsign ("UTF-8", parameterMap); String sign = PayCommonUtil.createsign ("UTF-8", parameterMap) parameterMap.put("sign", sign); System.out.println(parameterMap); / / WeChat order with unified interface Need to set the parameters in the splicing into XML < > > < / XML format String requestXML = PayCommonUtil. GetRequestXml (parameterMap); System.out.println(requestXML); / / call WeChat unified order interface String result = PayCommonUtil. HttpsRequest (" https://api.mch.weixin.qq.com/pay/unifiedorder ", "POST", requestXML); System.out.println(result); Map<String, Object> map = null; Prepay_id map = payCommonUtil.doxmlparse (result); prepay_id map = payCommonUtil.doxmlparse (result); Put ("timestamp", system.currentTimemillis () / 1000); Wechat Pay signature requires two signatures, If ("SUCCESS".equals(map.get("result_code"))) {SortedMap<String, Object> map2 = new TreeMap<String, Object>(); Map2. put("appId", map.get(" appId")); map2.put("timeStamp", map.get("timestamp")); Map2. put("nonceStr", map.get("nonce_str"))); Put ("package", "prepay_id=" + map.get("prepay_id"))); Map2. put("signType", "MD5"); String sign2 = PayCommonUtil.createsign ("UTF-8", map2); Map<String,Object> payInfo = new HashMap<String,Object>(); payInfo.put("appId", map.get("appid")); payInfo.put("timeStamp", map.get("timestamp")); payInfo.put("nonceStr", map.get("nonce_str")); payInfo.put("prepay_id",map.get("prepay_id")); payInfo.put("signType", "MD5"); payInfo.put("paySign", sign2); Maps. put("status", 200); Maps. put(" MSG ", "unified order successful!") ); maps.put("data", payInfo); }else { maps.put("status", 500); Maps. put(" MSG ", "server busy, please try again later "); maps.put("data", null); } } catch (JDOMException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return maps; }Copy the code

Utility class(Refer to this website or use the demo provided by wechatWechat tool class(How do you choose

Vue front-end

OnBridgeReady () {let that = this; Let param = {openID: sessionStorage.getitem (" openID "), // openID price: that.ruleform.price // amount to pay}; Then (ref => {console.log(ref.data); if (ref.data.status == 200) { WeixinJSBridge.invoke( "getBrandWCPayRequest", { appId: Ref.data.data. appId, // appId of wechat timeStamp: ref.data.data.timeStamp, // timeStamp nonceStr: NonceStr, // random string package: "prepay_id=" + ref.data.data.prepay_id, // order number signType: "MD5", // wechat signature: paySign: Ref.data.data. paySign}, Function (res) {if (res.err_msg == "get_brand_wcpay_request: OK ") {if (res.err_msg == "get_brand_wcpay_request: OK ") { //res.err_msg will return OK after the user has paid successfully, but it is not guaranteed to be absolutely reliable. var equipments = ""; Equipments = "single package (one ticket, tent)"; Equipments = "double package (two tickets, one tent)"; } let params = { SysUser: { name: that.ruleForm.username, mobile: that.ruleForm.phone, openid: sessionStorage.getItem("openid") }, Info_id: that.ruleForm.info, Participants: that.ruleForm.numbers, Equipments: equipments, price: that.ruleForm.price }; console.log(params); InsertForecast (params). Then (ref => {if (ref. Data.status == 200) {that.$router.push({path: "/ForeacstList" }); } else {that.$message.error(" $message.error "); }}); } else {that.$message.error(" Failed to pay, please pay again "); }}); } else { that.$message.error(ref.data.msg); }}); }, // WeixinJs() {console.log(this.ruleform.price); 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 { this.onBridgeReady(); }}Copy the code

That’s the end of wechat Pay.