前后端分离开发—微信支付(wxpay)

通过微信平台为商家提供代收款服务

1.微信支付业务-商家主次微信商户号

https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F

1. 商户号：
2. 商户账号：
3. 商户key:

2.申请支付订单-商户向祝福平台申请支付链接

支付订单，并不是用户提交订单，而是提交商户向微信支付平台申请的支付链接

2.1项目中导入微信支付依赖

• wxpay的maven依赖

  <!-- https://mvnrepository.com/artifact/com.github.wxpay/wxpay-sdk -->
  <dependency>
      <groupId>com.github.wxpay</groupId>
      <artifactId>wxpay-sdk</artifactId>
      <version>0.0.3</version>
  </dependency>
  
  

• 有WxPay 这个java类

  在这里插入代码片
  

2.2创建微信恢复配置类，配置商户信息

• 创建一个类，实现WxPayConfig接口

• 重写三个方法，设置商户信息

  	package com.yu.digital.config;
  
  import com.github.wxpay.sdk.WXPayConfig;
  
  import java.io.InputStream;
  
  public class MyPayConfig implements WXPayConfig {
      @Override
      public String getAppID() {
          return "商户账号";
      }
  
      @Override
      public String getMchID() {
          return "商户号";
      }
  
      @Override
      public String getKey() {
          return "商户秘钥";
      }
  
      @Override
      public InputStream getCertStream() {
          return null;
      }
  
      @Override
      public int getHttpConnectTimeoutMs() {
          return 0;
      }
  
      @Override
      public int getHttpReadTimeoutMs() {
          return 0;
      }
  }
  

2.3

	Map<String, String> orderInfo = orderService.addOrder(cids, order);
    String orderId = orderInfo.get("orderId");

    if(orderId!=null) {
        //微信支付，申请支付链接
        WXPay wxPay = new WXPay(new MyPayConfig());
        //设置支付订单的参数
        HashMap<String, String> data = new HashMap<>();
        data.put("body", orderInfo.get("productNames"));              //商品描述,商品名称
        System.out.println(orderInfo.get("productNames"));
        data.put("out_trade_no", orderId);               //使用当前用户订单的编号作为当前支付交易的交易号
        data.put("fee_type", "CNY");                     //支付币种
        data.put("total_fee", order.getActualAmount() * 100 + "");          //支付金额
//            data.put("total_fee","1");                      //支付金额
        data.put("trade_type", "NATIVE");                //交易类型
        data.put("notify_url", "http://localhost:8888/pay/success");           //设置支付完成时的回调方法接口

        Map<String, String> resp = wxPay.unifiedOrder(data);
        orderInfo.put("payUrl", resp.get("code_url"));
        System.out.println(resp.get("code_url"));       //payUrl，生成支付短连接，按照链接生成二维码

        //orderInfo中包含：订单编号，购买的商品名称，支付链接
        resultVO = new ResultVO(ResStatus.OK,"提交订单成功！",orderInfo);
    }else{
        resultVO = new ResultVO(ResStatus.NO,"提交订单失败,该订单号不存在",null);
    }

3. 前端页面生成二维码

<script type="text/javascript">
			
	var vm = new Vue({
		el:"#container",
		data:{
			orderInfo:{}
		},
		//vue声明周期 ：  创建对象---beforeCreate---初始化data---created---加载模版---beforeMount---渲染数据---mounted
		created:function(){
			var jsonstr = localStorage.getItem("orderInfo");
			if(jsonstr!=null){
				localStorage.removeItem("orderInfo");
			}
			this.orderInfo = eval("("+jsonstr+")");
			console.log(this.orderInfo);
		},
		mounted:function(){
			//渲染二维码
			var qrcode = new QRCode($("#payQrcodeDiv")[0],{		
				width:200,
				height:200,
				colorDark: '#00FF00',
				colorLight: '#ffffff',
				correctLevel: QRCode.CorrectLevel.H
			});
			qrcode.makeCode(this.orderInfo.payUrl);
			
			//前端发送websocket连接请求
			var webSocketUrl = webSocketBaseUrl + "webSocket/"+ this.orderInfo.orderId;
			var websocket = new WebSocket( webSocketUrl );
			//只要后端通过websocket向此连接发消息就会触发onmessage事件
			websocket.onmessage = function(event){
				var msg = event.data;
				if(msg=="1"){
					$("#div1").html("<label style='font-size:20px; color:green'>订单支付完成！</label>");
				}
			}
		
		}
	});
</script>

支付回调

支付回调：当用户支付成功之后，支付平台回向我们指定的服务器接口发送请求返回传递订单支付状态数据，

1.创建回调接口

2.设置回调接口的URL

在订单接口中申请支付链接的时候将回调接口的连接设置给支付平台

 //微信支付，申请支付链接
 WXPay wxPay = new WXPay(new MyPayConfig());
  //设置支付订单的参数
  HashMap<String, String> data = new HashMap<>();
  data.put("body", orderInfo.get("productNames"));              //商品描述,商品名称
  data.put("out_trade_no", orderId);               //使用当前用户订单的编号作为当前支付交易的交易号
  data.put("fee_type", "CNY");                     //支付币种
  data.put("total_fee", order.getActualAmount() * 100 + "");          //支付金额
  data.put("trade_type", "NATIVE");                //交易类型
  data.put("notify_url", "http://localhost:8888/pay/callback");           //设置支付完成时的回调方法接口
	//发送请求，获取响应
  	//微信支付：申请支付连接
  Map<String, String> resp = wxPay.unifiedOrder(data);
  orderInfo.put("payUrl", resp.get("code_url"));
  System.out.println(resp.get("code_url"));       //payUrl，生成支付短连接，按照链接生成二维码

持续更新中…