【畅购商城】微信支付之支付模块

目录

支付页面

接口

后端实现

前端实现​​​​​​​

​​​​​​​支付页面

步骤一：创建 flow3.vue组件

步骤二：引入第三方资源（js、css）

<script>
import TopNav from '../components/TopNav'
import Footer from '../components/Footer'export default {head: {title: '首页',link: [{rel:'stylesheet',href: '/style/success.css'},],script: []},components: {TopNav,Footer,},
}
</script>

​​​​​​​接口

POST http://localhost:10010/order-service/pay
{"sn" : "1255513323915579400"
}

​​​​​​​后端实现

步骤一：编写 PayRequest，用于封装数据

package com.czxy.changgou4.vo;import lombok.Data;/*** @author 桐叔* @email [e-mail]*/
@Data
public class PayRequest {private Long sn;
}

步骤二：检查order服务，yml文件中是否有微信配置

sc:pay:appID: wx8397f8696b538317mchID: 1473426802key: T6m9iK73b0kn9g5v426MKfHQH7X8rKwbhttpConnectTimeoutMs: 5000httpReadTimeoutMs: 10000

步骤三：编写PayProperties，用于加载微信配置

package com.czxy.changgou4.config;import com.github.wxpay.sdk.WXPayConfig;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;import java.io.InputStream;/*** @author 桐叔* @email [e-mail]*/
@Data
@ConfigurationProperties(prefix = "sc.pay")
public class PayProperties implements WXPayConfig {private String appID;               // 公众账号IDprivate String mchID;               // 商户号private String key;                 // 生成签名的密钥private int httpConnectTimeoutMs;   // 连接超时时间private int httpReadTimeoutMs;      // 读取超时时间@Overridepublic InputStream getCertStream() {//加载证书，需要通过账号中心生成return null;}}

步骤四：编写PayState，自定义支付状态

package com.czxy.changgou4.utils;import lombok.Getter;/*** 自定义支付状态，微信支持多种状态，此处统一四种：* SUCCESS—支付成功、NOTPAY—未支付、CLOSED—已关闭、PAYERROR--支付失败* @author 桐叔* @email [e-mail]*/
@Getter
public enum PayState {NOT_PAY(0,"未支付"),SUCCESS(1,"支付成功"),CLOSED(2,"已关闭"),PAY_ERROR(3,"支付失败");PayState(int code,String desc) {this.code = code;this.desc = desc;}private int code;           //自定义编码private String desc;        //描述信息
}

步骤五：编写PayHelper，用于微信操作的工具类

package com.czxy.changgou4.utils;import com.czxy.changgou4.config.PayProperties;
import com.github.wxpay.sdk.WXPay;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;import java.util.HashMap;
import java.util.Map;/*** @author 桐叔* @email [e-mail]*/
@Component
@EnableConfigurationProperties(PayProperties.class)
public class PayHelper {private WXPay wxPay;@Beanpublic WXPay wxPay(PayProperties payProperties){if(wxPay == null){wxPay = new WXPay(payProperties);}return wxPay;}private static final Logger logger = LoggerFactory.getLogger(PayHelper.class);public PayHelper() {}public PayHelper(PayProperties payProperties) {wxPay = new WXPay(payProperties);}public String createPayUrl(Long sn) {String key = "pay.url." + sn;try {Map<String, String> data = new HashMap<>();// 商品描述data.put("body", "商城测试");// 订单号data.put("out_trade_no", sn.toString());//货币data.put("fee_type", "CNY");//金额，单位是分data.put("total_fee", "1");//调用微信支付的终端IP（商城的IP）data.put("spbill_create_ip", "127.0.0.1");//回调地址data.put("notify_url", "http://test.jingxi.com/wxpay/notify");// 交易类型为扫码支付data.put("trade_type", "NATIVE");//商品id,使用假数据data.put("product_id", "1234567");Map<String, String> result = this.wxPay.unifiedOrder(data);if ("SUCCESS".equals(result.get("return_code"))) {if("SUCCESS".equals(result.get("result_code"))){String url = result.get("code_url");return url;} else {logger.error("创建预交易订单失败，错误信息：{}", result.get("err_code_des"));return null;}} else {logger.error("创建预交易订单失败，错误信息：{}", result.get("return_msg"));return null;}} catch (Exception e) {logger.error("创建预交易订单异常", e);return null;}}/*** 查询订单状态* 交易状态参考：(trade_state)SUCCESS—支付成功REFUND—转入退款NOTPAY—未支付CLOSED—已关闭REVOKED—已撤销（付款码支付）USERPAYING--用户支付中（付款码支付）PAYERROR--支付失败(其他原因，如银行返回失败)* @param sn* @return*/public PayState queryOrder(Long sn) {Map<String, String> data = new HashMap<>();// 订单号data.put("out_trade_no", sn.toString());try {Map<String, String> result = this.wxPay.orderQuery(data);if("SUCCESS".equals(result.get("return_code"))){if("SUCCESS".equals(result.get("result_code"))) {String tradeState = result.get("trade_state");if ("SUCCESS".equals(tradeState)) {return PayState.SUCCESS;}if ("NOTPAY".equals(tradeState)) {return PayState.NOT_PAY;}if ("CLOSED".equals(tradeState)) {return PayState.CLOSED;}}}return PayState.PAY_ERROR;} catch (Exception e) {logger.error("查询订单状态异常", e);return PayState.PAY_ERROR;}}
}

步骤五：编写PayService，调用工具类，用于生成支付接口

package com.czxy.changgou4.service;import com.czxy.changgou4.vo.PayRequest;/*** @author 桐叔* @email [e-mail]*/
public interface PayService {public String pay(PayRequest payRequest);
}

package com.czxy.changgou4.service.impl;import com.czxy.changgou4.service.PayService;
import com.czxy.changgou4.utils.PayHelper;
import com.czxy.changgou4.vo.PayRequest;
import org.springframework.stereotype.Service;import javax.annotation.Resource;/*** @author 桐叔* @email [e-mail]*/
@Service
public class PayServiceImpl implements PayService {@Resourceprivate PayHelper payHelper;@Overridepublic String pay(PayRequest payRequest) {//根据sn查询订单//获得微信支付路径String payUrl = payHelper.createPayUrl(payRequest.getSn());//返回支付路径return payUrl;}
}

步骤六：编写PayController，根据sn生产微信支付路径

package com.czxy.changgou4.controller;import com.czxy.changgou4.service.PayService;
import com.czxy.changgou4.vo.BaseResult;
import com.czxy.changgou4.vo.PayRequest;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;/*** @author 桐叔* @email [e-mail]*/
@RestController
@RequestMapping("/pay")
public class PayController {@Resourceprivate PayService payService;@PostMappingpublic BaseResult pay(@RequestBody PayRequest payRequest){//获得支付路径String payUrl = payService.pay(payRequest);//返回return BaseResult.ok("二维码生产成功").append("wxurl",payUrl);}}

​​​​​​​前端实现

步骤一：修改apiclient.js文件，生成位置支付路径

  pay : ( params ) => {return axios.post("/order-service/pay" ,params )}

步骤二：拷贝qrcode.min.js 用于生成二维码

步骤三：导入qrcode.min.js

 script: [{ type: 'text/javascript', src: '/js/qrcode.min.js' }]

步骤四：页面加载成功，把微信支付路径生产二维码

  data() {return {sn: this.$route.query.sn,}},async mounted() {let {data} = await this.$request.pay({"sn":this.sn})new QRCode( document.getElementById("qrcode") , data.other.wxurl )},

步骤五：确定二维码生成的位置

<p><div id="qrcode" style="width:256px;margin: 0 auto;"></div>
</p>

步骤六：优化，添加样式，

<style>#qrcode img {background-color: #fff;padding: 6px;}
</style>