88分布式电商项目 -微信支付二维码生成

需求分析与实现思路

在支付页面上生成支付二维码，并显示订单号和金额

用户拿出手机,打开微信扫描页面上的二维码,然后在微信中完成支付 实现思路： 我们通过 HttpClient 工具类实现对远程支付接口的调用。

接口链接：https://api.mch.weixin.qq.com/pay/unifiedorder

具体参数参见“统一下单”API, 构建参数发送给统一下单的 url ，返回的信息中有支付 url，根据 url 生成二维码，显示的订单号和金额也在返回的信息中。

后端代码实现

（1）在 pinyougou-pay-interface 创建包com.pinyougou.pay.service ，包下建立接口

package com.pinyougou.pay.service;
import java.util.Map;
/**
* 微信支付接口
* @author Administrator
*
*/
public interface WeixinPayService {
/**
* 生成微信支付二维码
* @param out_trade_no 订单号
* @param total_fee 金额(分)
* @return
*/
public Map createNative(String out_trade_no,String total_fee);
}

（2）pinyougou-pay-service 创建 com.pinyougou.pay.service.impl 包，新建类

@Service
public class WeixinPayServiceImpl implements WeixinPayService {
@Value("${appid}")
private String appid;
@Value("${partner}")
private String partner;
@Value("${partnerkey}")
private String partnerkey;
/**
* 生成二维码
* @return
*/
public Map createNative(String out_trade_no,String total_fee){
//1.创建参数
Map param=new HashMap();//创建参数
param.put("appid", appid);//公众号
param.put("mch_id", partner);//商户号
param.put("nonce_str", WXPayUtil.generateNonceStr());//随机字符串param.put("body", "品优购");//商品描述param.put("out_trade_no", out_trade_no);//商户订单号param.put("total_fee",total_fee);//总金额（分）param.put("spbill_create_ip", "127.0.0.1");//IPparam.put("notify_url", "http://test.itcast.cn");//回调地址(随便写)param.put("trade_type", "NATIVE");//交易类型try {//2.生成要发送的 xmlString xmlParam = WXPayUtil.generateSignedXml(param, partnerkeySystem.out.println(xmlParam);HttpClient client=newHttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");client.setHttps(true);client.setXmlParam(xmlParam);client.post();//3.获得结果String result = client.getContent();System.out.println(result);Map resultMap = WXPayUtil.xmlToMap(result);Map map=new HashMap();map.put("code_url", resultMap.get("code_url"));//支付地址map.put("total_fee", total_fee);//总金额map.put("out_trade_no",out_trade_no);//订单号
return map;
} catch (Exception e) {
e.printStackTrace();
return new HashMap();
}
 }
  }

（3）pinyougou-cart-web 创建 PayController.java

/**
* 支付控制层
* @author Administrator
*
*/
@RestController
@RequestMapping("/pay")
public class PayController {
@Reference
private WeixinPayService weixinPayService;
/**
* 生成二维码
* 
* @return*/
*@RequestMapping("/createNative")
public Map createNative(){
	IdWorker idworker=new IdWorker();
	return weixinPayService.createNative(idworker.nextId()+"","1");
	} 
}

这里我们订单号通过分布式 ID 生成器生成，金额暂时写死，后续开发我们再对接业务系统得到订单号和金额

浏览器测试

前端代码实现

在 pinyougou-cart-web 创建 payService.js

app.service('payService',function($http){
	//本地支付
	this.createNative=function(){
		return $http.get('pay/createNative.do');
	}
});

在 pinyougou-cart-web 创建 payController.js

app.controller('payController' ,function($scope ,payService){
//本地生成二维码
$scope.createNative=function({
	payService.createNative().success(function(response{
		$scope.money= (response.total_fee/100).toFixed(2) ; 
		//金额
		$scope.out_trade_no= response.out_trade_no;
		//订单号//二维码
		var qr = new QRious({element:document.getElementById('qrious'),size:250,level:'H',value:response.code_url});
		});
	}
 }
);

修改 pay.html ,引入 js

指令

设置二维码图片的 ID

 
	

		
		

		
请使用微信扫一扫
		
扫描二维码支付
	

显示订单号

订单号：{{out_trade_no}}

显示金额

￥{{money}}元