1 微信扫码支付开通

1.1 方式一

第一步：注册公众号

https://mp.weixin.qq.com/ 类型须为：服务号

请根据营业执照类型选择以下主体注册：个体工商户| 企业/公司| 政府| 媒体| 其他类型

第二步：认证公众号

公众号认证后才可申请微信支付，认证费：300元/次。

第三步：注册商户号

https://pay.weixin.qq.com PC网站接入支付

第四步：账户验证

step1：汇款验证

step2：等待审核，1-2个工作日

第五步：签署协议

第六步：关联APPID

将微信公众号appid关联至商户平台：

产品中心 ==> APPID授权管理 ==> 申请账号关联

第七步：设置API秘钥

账户中心 ==>API安全 ==> API秘钥 ==> 设置API秘钥

1.2方式二

第一步：注册公众号

https://mp.weixin.qq.com/ 类型须为：服务号

请根据营业执照类型选择以下主体注册：个体工商户| 企业/公司| 政府| 媒体| 其他类型

第二步：认证公众号

公众号认证后才可申请微信支付，认证费：300元/次。

第三步：提交资料申请微信支付

登录公众平台，点击左侧菜单【微信支付】，开始填写资料等待审核，审核时间为1-5个工作日内。

第四步：开户成功，登录商户平台进行账户验证

资料审核通过后，请登录联系人邮箱查收商户号和密码，并登录商户平台填写财付通备付金打的小额资金数额，完成账户验证。

第五步：签署协议

本协议为线上电子协议，签署后方可进行交易及资金结算，签署完立即生效。

第六步：设置API秘钥账户中心 ==>API安全 ==> API秘钥 ==> 设置API秘钥

2 开发文档

2.1 场景介绍

参考官方文档：https://pay.weixin.qq.com/wiki/doc/api/index.html Native支付

用户扫描商户展示在各种场景的二维码进行支付。

步骤1：商户根据微信支付的规则，为不同商品生成不同的二维码，展示在各种场景，用于用户扫描购买。

步骤2：用户使用微信“扫一扫”扫描二维码后，获取商品支付信息，引导用户完成支付。

步骤3：用户确认支付，输入支付密码。

步骤4：支付完成后会提示用户支付成功，商户后台得到支付成功的通知。

2.2 开发步骤

推荐使用模式二

1、模式一

参考流程：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_4

商户后台系统根据微信支付规则链接生成二维码，链接中带固定参数productid（可定义为产品标识或订单号）。用户扫码后，微信支付系统将productid和用户唯一标识(openid)回调商户后台系统(需要设置支付回调URL)，商户后台系统根据productid生成支付交易，最后微信支付系统发起用户支付流程。

2、模式二

参考流程：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_5（时序图中红色部分是需要我们开发的内容）

模式二与模式一相比，流程更为简单，不依赖设置的回调支付URL。商户后台系统先调用微信支付的统一下单接口，微信后台系统返回链接参数code_url，商户后台系统将code_url值生成二维码图片，用户使用微信客户端扫码后发起支付。注意：code_url有效期为2小时，过期后扫码不能再发起支付。

2.3 微信支付接口规则

微信支付接口调用的整体思路：按API要求组装参数，以XML方式发送（POST）给微信支付接口（URL）,微信支付接口也是以XML方式给予响应。

了解参考官方文档：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=4_1

协议规则

参数规定

安全规范

使用sdk可以简化接口的调用

3 生成支付二维码并支付

3.1 准备

1、添加微信支付SDK方式一：service_trade中添加依赖：

<dependencies>
    <!--微信支付-->
    <dependency>
        <groupId>com.github.wxpay</groupId>
        <artifactId>wxpay-sdk</artifactId>
        <version>0.0.3</version>
    </dependency>
</dependencies>

方式二：将下载的sdk源码放入service_trade源码目录中

2、配置yml参数

支付账户相关参数：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=3_1

weixin:
  pay:
    #关联的公众号appid
    appId: wxf913bfa3a225c7eeeb
    #商户号
    partner: 154333258551
    #商户key
    partnerKey: atguigu3b0kn9g5v25426MKfHQH7X8rKwb
    #回调地址
    notifyUrl: http://imhelen.free.idcfengye.com/api/trade/weixin-pay/callback/notify

配置后启动ngrok内网穿透工具

3、参数读取工具类

package com.oldlu.service.trade.util;
@Data
@Component
@ConfigurationProperties(prefix="weixin.pay")
public class WeixinPayProperties {
    private String appId;
    private String partner;
    private String partnerKey;
    private String notifyUrl;
}

4、辅助业务方法

OrderService：getOrderByOrderNo 根据订单号查询订单

接口：

Order getOrderByOrderNo(String orderNo);

实现：

public Order getOrderByOrderNo(String orderNo) {
    QueryWrapper<Order> queryWrapper = new QueryWrapper<>();
    queryWrapper.eq("order_no", orderNo);
    return baseMapper.selectOne(queryWrapper);
}

3.2 生成支付二维码

1、统一下单接口文档

https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1

调用统一下单接口，根据返回值中的code_url在前端使用javascript工具生成支付二维码

2、业务层

接口：创建 WeixinPayService：createNative

package com.atguigu.guli.service.order.service;
public interface WeixinPayService {
    Map<String, Object> createNative(String orderNo, String remoteAddr);
}

实现：

package com.oldlu.service.trade.service.impl;
@Service
@Slf4j
public class WeixinPayServiceImpl implements WeixinPayService {
    @Autowired
    private OrderService orderService;
    @Autowired
    private WeixinPayProperties weixinPayProperties;
    @Override
    public Map<String, Object> createNative(String orderNo, String remoteAddr) {
        try{
            //根据课程订单号获取订单
            Order order = orderService.getOrderByOrderNo(orderNo);
            //调用微信api接口：统一下单（支付订单）
            HttpClientUtils client = new HttpClientUtils("https://api.mch.weixin.qq.com/pay/unifiedorder");
            //组装接口参数
            Map<String, String> params = new HashMap<>();
            params.put("appid", weixinPayProperties.getAppId());//关联的公众号的appid
            params.put("mch_id", weixinPayProperties.getPartner());//商户号
            params.put("nonce_str", WXPayUtil.generateNonceStr());//生成随机字符串
            params.put("body", order.getCourseTitle());
            params.put("out_trade_no", orderNo);
            //注意，这里必须使用字符串类型的参数（总金额：分）
            String totalFee = order.getTotalFee().intValue() + "";
            params.put("total_fee", totalFee);
            params.put("spbill_create_ip", remoteAddr);
            params.put("notify_url", weixinPayProperties.getNotifyUrl());
            params.put("trade_type", "NATIVE");
            //将参数转换成xml字符串格式：生成带有签名的xml格式字符串
            String xmlParams = WXPayUtil.generateSignedXml(params, weixinPayProperties.getPartnerKey());
            log.info("\n xmlParams：\n" + xmlParams);
            client.setXmlParam(xmlParams);//将参数放入请求对象的方法体
            client.setHttps(true);//使用https形式发送
            client.post();//发送请求
            String resultXml = client.getContent();//得到响应结果
            log.info("\n resultXml：\n" + resultXml);
            //将xml响应结果转成map对象
            Map<String, String> resultMap = WXPayUtil.xmlToMap(resultXml);
            //错误处理
            if("FAIL".equals(resultMap.get("return_code")) || "FAIL".equals(resultMap.get("result_code"))){
                log.error("微信支付统一下单错误 - "
                        + "return_code: " + resultMap.get("return_code")
                        + "return_msg: " + resultMap.get("return_msg")
                        + "result_code: " + resultMap.get("result_code")
                        + "err_code: " + resultMap.get("err_code")
                        + "err_code_des: " + resultMap.get("err_code_des"));
                throw new GuliException(ResultCodeEnum.PAY_UNIFIEDORDER_ERROR);
            }
            //组装需要的内容
            Map<String, Object> map = new HashMap<>();
            map.put("result_code", resultMap.get("result_code"));//响应码
            map.put("code_url", resultMap.get("code_url"));//生成二维码的url
            map.put("course_id", order.getCourseId());//课程id
            map.put("total_fee", order.getTotalFee());//订单总金额
            map.put("out_trade_no", orderNo);//订单号
            return map;
        } catch (Exception e) {
            log.error(ExceptionUtils.getMessage(e));
            throw new GuliException(ResultCodeEnum.PAY_UNIFIEDORDER_ERROR);
        }
    }
}

4、web层

创建 ApiWeixinPayController：createNative

package com.oldlu.service.trade.controller.api;
@RestController
@RequestMapping("/api/trade/weixin-pay")
@Api(description = "网站微信支付")
@CrossOrigin //跨域
@Slf4j
public class ApiWeixinPayController {
    @Autowired
    private WeixinPayService weixinPayService;
    @GetMapping("create-native/{orderNo}")
    public R createNative(@PathVariable String orderNo, HttpServletRequest request) {
        String remoteAddr = request.getRemoteAddr();
        Map map = weixinPayService.createNative(orderNo, remoteAddr);
        return R.ok().data(map);
    }
}

3.3 支付前端

1、安装二维码生成器

npm install vue-qriously@1.1.1

2、配置插件

创建 plugins/vue-qriously-plugin.js

import Vue from 'vue'
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

nuxt.config.js中配置

plugins: [
    { src: '~/plugins/vue-qriously-plugin.js', ssr: true }
],

3、api

创建 api/pay.js

import request from '~/utils/request'
export default {
  createNative(orderNo) {
    return request({
      baseURL: 'http://localhost:8170',
      url: `/api/trade/weixin-pay/create-native/${orderNo}`,
      method: 'get'
    })
  }
}

4、订单页面

html：

<el-button :disabled="!agree" type="danger" @click="toPay()">去支付</el-button>

脚本：

methods: {
    toPay() {
        if (this.agree) {
            this.$router.push({ path: '/pay/' + this.order.orderNo })
        }
    }
}

5、支付页面

创建pages/pay/_id.vue

<template>
  <div class="cart py-container">
    <!--主内容-->
    <div class="checkout py-container  pay">
      <div class="checkout-tit" style="width: 1050px; margin: 0 auto; padding: 10px 0;">
        <h4 class="fl tit-txt"><span class="success-info">支付申请提交成功，请您及时付款！订单号：{{ payObj.out_trade_no }}</span>
        </h4>
        <span class="fr"><em class="sui-lead">应付金额：</em><em class="orange money">￥{{ payObj.total_fee/100 }}</em></span>
        <div class="clearfix"/>
      </div>
      <div class="checkout-steps">
        <div class="fl weixin">微信支付</div>
        <div class="fl sao">
          <div class="fl code">
            <!-- <img id="qrious" src="~/assets/img/erweima.png" alt=""> -->
            <qriously :value="payObj.code_url" :size="338"/>
          </div>
          <div style="color: red; text-align:center;">请使用微信扫一扫</div>  
        </div>
        <div class="clearfix"/>
        <!-- <p><a href="pay.html" target="_blank"> 其他支付方式</a></p> -->
      </div>
    </div>
  </div>
</template>
<script>
import payApi from '~/api/pay'
export default {
  async asyncData(page) {
    const response = await payApi.createNative(page.route.params.id)
    return {
      payObj: response.data
    }
  }
  // 在created中获取数据，报告Invalid prop: type check failed for prop "value".
  // created() {
  //   payApi.createNative(this.$route.params.id).then(response => {
  //     this.payObj = response.data
  //   })
  // }
}
</script>

4 支付回调

4.1 准备

1、配置ngrok内网穿透

将ngrok映射到本地8170端口，并启动

2、添加工具类

在common_util中添加工具类

StreamUtils.java

4.2 支付回调

1、回调方法

该链接是通过【统一下单API】中提交的参数notify_url设置，如果链接无法访问，商户将无法接收到微信通知。

参考文档：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_7&index=8

ApiWeixinPayController

@Autowired
private WeixinPayProperties weixinPayProperties;
@Autowired
private OrderService orderService;
/**
     * 支付回调：注意这里是【post】方式
     */
@PostMapping("callback/notify")
public String wxNotify(HttpServletRequest request, HttpServletResponse response) throws Exception {
    System.out.println("callback/notify 被调用");
    // 获得通知结果
    ServletInputStream inputStream = request.getInputStream();
    String notifyXml = StreamUtils.inputStream2String(inputStream, "utf-8");
    System.out.println("xmlString = " + notifyXml);
    // 定义响应对象
    HashMap<String, String> returnMap = new HashMap<>();
    // 签名验证：防止伪造回调
    if (WXPayUtil.isSignatureValid(notifyXml, weixinPayProperties.getPartnerKey())) {
        // 解析返回结果
        Map<String, String> notifyMap = WXPayUtil.xmlToMap(notifyXml);
        //判断支付是否成功
        if("SUCCESS".equals(notifyMap.get("result_code"))){
            // 校验订单金额是否一致
            String totalFee = notifyMap.get("total_fee");
            String outTradeNo = notifyMap.get("out_trade_no");
            Order order = orderService.getOrderByOrderNo(outTradeNo);
            if(order != null && order.getTotalFee().intValue() == Integer.parseInt(totalFee)){
                // 判断订单状态：保证接口调用的幂等性，如果订单状态已更新直接返回成功响应
                // 幂等性：无论调用多少次结果都是一样的
                if(order.getStatus() == 1){
                    returnMap.put("return_code", "SUCCESS");
                    returnMap.put("return_msg", "OK");
                    String returnXml = WXPayUtil.mapToXml(returnMap);
                    response.setContentType("text/xml");
                    log.warn("通知已处理");
                    return returnXml;
                }else{
                    // 更新订单支付状态，并返回成功响应
                    orderService.updateOrderStatus(notifyMap);
                    returnMap.put("return_code", "SUCCESS");
                    returnMap.put("return_msg", "OK");
                    String returnXml = WXPayUtil.mapToXml(returnMap);
                    response.setContentType("text/xml");
                    log.info("支付成功，通知已处理");
                    return returnXml;
                }
            }
        }
    }
    // 校验失败，返回失败应答
    returnMap.put("return_code", "FAIL");
    returnMap.put("return_msg", "");
    String returnXml = WXPayUtil.mapToXml(returnMap);
    response.setContentType("text/xml");
    log.warn("校验失败");
    return returnXml;
}

2、更新订单状态

更新订单支付状态并记录支付日志，将微信返回的支付结果全部记录进数据库的json字段中

接口：OrderService

void updateOrderStatus(Map<String, String> map);

实现：OrderServiceImpl

@Autowired
private PayLogMapper payLogMapper;
@Transactional(rollbackFor = Exception.class)
@Override
public void updateOrderStatus(Map<String, String> map) {
    //更新订单状态
    String orderNo = map.get("out_trade_no");
    Order order = this.getOrderByOrderNo(orderNo);
    order.setStatus(1);//支付成功
    baseMapper.updateById(order);
    //记录支付日志
    PayLog payLog = new PayLog();
    payLog.setOrderNo(orderNo);
    payLog.setPayTime(new Date());
    payLog.setPayType(1);//支付类型
    payLog.setTotalFee(Long.parseLong(map.get("total_fee")));//总金额(分)
    payLog.setTradeState(map.get("result_code"));//支付状态
    payLog.setTransactionId(map.get("transaction_id"));
    payLog.setAttr(new Gson().toJson(map));
    payLogMapper.insert(payLog);
}

5 查询支付状态

5.1 查询支付状态

1、业务层

接口：OrderService

boolean queryPayStatus(String orderNo);

实现：OrderServiceImpl

@Override
public boolean queryPayStatus(String orderNo) {
    QueryWrapper<Order> queryWrapper = new QueryWrapper<>();
    queryWrapper.eq("order_no", orderNo);
    Order order = baseMapper.selectOne(queryWrapper);
    return order.getStatus() == 1;
}

2、web层

ApiOrderController：queryPayStatus

@GetMapping("/query-pay-status/{orderNo}")
public R queryPayStatus(@PathVariable String orderNo) {
    boolean result = orderService.queryPayStatus(orderNo);
    if (result) {//支付成功
        return R.ok().message("支付成功");
    }
    return R.setResult(ResultCodeEnum.PAY_RUN);//支付中
}

5.2 前端整合

1、api

api/order.js

queryPayStatus(orderNo) {
    return request({
        baseURL: 'http://localhost:8170',
        url: `/api/trade/order/query-pay-status/${orderNo}`,
        method: 'get'
    })
}

2、axios响应拦截

utils/request.js中的response响应拦截器

else if (res.code === 25000) { // 支付中
  return response.data // 不显示错误信息
}

3、支付页面

pages/pay/_id.vue

import orderApi from '~/api/order'

data() {
    return {
      timer: null // 定时器
    }
},
// created的时候就查询支付状态，没有必要，因为二维码页面尚未渲染，不可能支付成功
mounted() {
    // 启动定时器
    this.timer = setInterval(() => {
      this.queryPayStatus()
    }, 3000)
},
methods: {
    // 查询订单状态
    queryPayStatus() {
      orderApi.queryPayStatus(this.payObj.out_trade_no).then(response => {
        console.log('查询订单状态：' + response.code)
        // 支付成功后的页面跳转
        if (response.success) {
          this.$message.success(response.message)
          console.log('清除定时器')
          clearInterval(this.timer)
          // 三秒后跳转到课程详情页面观看视频
          setTimeout(() => {
            this.$router.push({ path: '/course/' + this.payObj.course_id })
          }, 3000)
        }
      })
    }
}

网页实现微信支付