尚医通（二十三）微信支付

最新推荐文章于 2025-05-30 17:46:23 发布

Knight_AL

最新推荐文章于 2025-05-30 17:46:23 发布

阅读量427

点赞数

分类专栏：尚医通项目文章标签：微信 springboot vue

本文链接：https://blog.csdn.net/qq_46548855/article/details/129194734

版权

尚医通项目专栏收录该内容

25 篇文章

订阅专栏

一、微信支付介绍

1、微信扫码支付申请

微信扫码支付是商户系统按微信支付协议生成支付二维码，用户再用微信“扫一扫”完成支付的模式。该模式适用于PC网站支付、实体店单品或订单支付、媒体广告支付等场景。
申请步骤：（了解）
第一步：注册公众号（类型须为：服务号）
请根据营业执照类型选择以下主体注册：个体工商户| 企业/公司| 政府| 媒体| 其他类型。
第二步：认证公众号
公众号认证后才可申请微信支付，认证费：300元/年。
第三步：提交资料申请微信支付
登录公众平台，点击左侧菜单【微信支付】，开始填写资料等待审核，审核时间为1-5个工作日内。
第四步：开户成功，登录商户平台进行验证
资料审核通过后，请登录联系人邮箱查收商户号和密码，并登录商户平台填写财付通备付金打的小额资金数额，完成账户验证。
第五步：在线签署协议
本协议为线上电子协议，签署后方可进行交易及资金结算，签署完立即生效。

2、开发文档

微信支付接口调用的整体思路：
按API要求组装参数，以XML方式发送（POST）给微信支付接口（URL）,微信支付接口也是以XML方式给予响应。程序根据返回的结果（其中包括支付URL）生成二维码或判断订单状态。
在线微信支付开发文档：
https://pay.weixin.qq.com/wiki/doc/api/index.html
（1）appid：微信公众账号或开放平台APP的唯一标识
（2）mch_id：商户号 (配置文件中的partner)
（3）partnerkey：商户密钥
（4）sign:数字签名, 根据微信官方提供的密钥和一套算法生成的一个加密信息, 就是为了保证交易的安全性

3、微信支付SDK

在这里插入图片描述
我们主要会用到微信支付SDK的以下功能：

（1）获取随机字符串

WXPayUtil.generateNonceStr()

（2）MAP转换为XML字符串（自动添加签名）

WXPayUtil.generateSignedXml(param, partnerkey)

（3）XML字符串转换为MAP

WXPayUtil.xmlToMap(result)

二、微信支付开发

1、微信支付接口-生成微信支付二维码
场景：用户扫描商户展示在各种场景的二维码进行支付
使用案例：
线下：家乐福超市、7-11便利店、上品折扣线下店等
线上：大众点评网站、携程网站、唯品会、美丽说网站等
开发模式：
模式一：商户在后台给你生成二维码，用户打开扫一扫
模式二：商户后台系统调用微信支付统一下单API生成预付交易，将接口返回的链接生成二维码，用户扫码后输入密码完成支付交易。注意：该模式的预付单有效期为2小时，过期后无法支付。
微信支付：生成xml发送请求
操作模块：service_orders
（1）service_order引入依赖

<dependency>
    <groupId>com.github.wxpay</groupId>
    <artifactId>wxpay-sdk</artifactId>
    <version>0.0.3</version>
</dependency>

（2）添加配置
在resource下面创建weipay.properties

#关联的公众号appid
weixin.pay.appid=wx74862e0dfcf69954
#商户号
weixin.pay.partner=1558950191
#商户key
weixin.pay.partnerkey=T6m9iK73b0kn9g5v426MKfHQH7X8rKwb

读取properties工具类
WeiPayProperties

@ConfigurationProperties(prefix = "weixin.pay")
@PropertySource(value = "classpath:weipay.properties")
@Component
@Data
public class WeiPayProperties {
    private String appid;
    private String partner;
    private String partnerkey;

}

（3）复制工具类
在这里插入图片描述

（4）添加添加交易记录方法
添加PaymentMapper接口

public interface PaymentMapper extends BaseMapper<PaymentInfo> {
}

添加PaymentService接口

public interface PaymentService extends IService<PaymentInfo> {

    /**
     * 保存交易记录
     * @param order
     * @param paymentType 支付类型（1：微信 2：支付宝）
     */
    void savePaymentInfo(OrderInfo order, Integer paymentType);


}

添加PaymentServiceImpl实现类

@Service
public class PaymentServiceImpl extends ServiceImpl<PaymentMapper, PaymentInfo> implements PaymentService {

    @Override
    public void savePaymentInfo(OrderInfo order, Integer paymentType) {
        QueryWrapper<PaymentInfo> queryWrapper=new QueryWrapper<PaymentInfo>();
        queryWrapper.eq("order_id",order.getId());
        PaymentInfo paymentInfo1 = baseMapper.selectOne(queryWrapper);
        if(paymentInfo1 != null){
            return;
        }

        PaymentInfo paymentInfo=new PaymentInfo();
        paymentInfo.setOutTradeNo(order.getOutTradeNo());
        paymentInfo.setOrderId(order.getId());
        paymentInfo.setPaymentType(paymentType);
        paymentInfo.setTotalAmount(order.getAmount());

        String subject = new DateTime(order.getReserveDate()).toString("yyyy-MM-dd")+"|"+order.getHosname()+"|"+order.getDepname()+"|"+order.getTitle();
        paymentInfo.setSubject(subject);
        paymentInfo.setPaymentStatus(PaymentStatusEnum.UNPAID.getStatus()); //支付状态
        baseMapper.insert(paymentInfo);
    }
}

（5）添加支付service接口与实现
添加WeixinService接口

@Service
public class WeixinServiceImpl implements WeixinService {

    @Autowired
    private OrderInfoService orderInfoService;
    @Autowired
    private PaymentService paymentService;
    @Autowired
    private WeiPayProperties weiPayProperties;

    @Override
    public String createNative(Long orderId) {
        //1.根据订单id去数据库中获取订单信息
        OrderInfo orderInfo = orderInfoService.getById(orderId);
        //2.保存支付记录信息
        paymentService.savePaymentInfo(orderInfo, PaymentTypeEnum.WEIXIN.getStatus());
        //3.请求微信服务器获取微信支付的url地址
        HttpClient httpClient=new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");
        Map<String,String> paramMap=new HashMap<String,String>();

        paramMap.put("appid",weiPayProperties.getAppid());
        paramMap.put("mch_id",weiPayProperties.getPartner());
        paramMap.put("nonce_str", WXPayUtil.generateNonceStr());

        Date reserveDate = orderInfo.getReserveDate();
        String reserveDateString = new DateTime(reserveDate).toString("yyyy/MM/dd");
        String body = reserveDateString + "就诊"+ orderInfo.getDepname();

        paramMap.put("body",body);
        paramMap.put("out_trade_no",orderInfo.getOutTradeNo());
        paramMap.put("total_fee","1");  //为了测试  整1分

        paramMap.put("spbill_create_ip","127.0.0.1");
        paramMap.put("notify_url","http://guli.shop/api/order/weixinPay/weixinNotify");
        paramMap.put("trade_type","NATIVE");

        try{
            httpClient.setXmlParam(WXPayUtil.generateSignedXml(paramMap, weiPayProperties.getPartnerkey()));//设置超参数
            httpClient.setHttps(true);//支持https协议
            httpClient.post(); //发送请求

            String xmlResult = httpClient.getContent();
            Map<String, String> stringStringMap = WXPayUtil.xmlToMap(xmlResult);
            return stringStringMap.get("code_url");
        }catch (Exception ex){
            return "";
        }

    }
}

（6）添加Controller方法
添加WeixinController类

@RestController
@RequestMapping("/api/order/weixin")
public class WeixinController {

    @Autowired
    private WeixinService weiPayService;
    /**
     * 下单 生成二维码
     */
    @GetMapping("/{orderId}")
    public R createNative(@PathVariable Long orderId){
        String url=  weiPayService.createNative(orderId);
        return R.ok().data("url",url);
    }
}

2、微信支付前端整合

（1）在wx.js定义方法

  createNative(orderId) {
    return request({
      url: `/api/order/weixin/${orderId}`,
      method: `get`
    })
  },

（2）安装npm install vue-qriously
前端入口文件中引入(nuxt)

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

在这里插入图片描述

（3）修改order/show.vue组件

<template>
    <!-- header -->
    <div class="nav-container page-component">
      <!--左侧导航 #start -->
      <div class="nav left-nav">
        <div class="nav-item ">
          <span class="v-link clickable dark" onclick="javascript:window.location='/user'">实名认证 </span>
        </div>
        <div class="nav-item selected">
          <span class="v-link selected dark" onclick="javascript:window.location='/order'"> 挂号订单 </span>
        </div>
        <div class="nav-item ">
          <span class="v-link clickable dark" onclick="javascript:window.location='/patient'"> 就诊人管理 </span>
        </div>
        <div class="nav-item ">
          <span class="v-link clickable dark"> 修改账号信息 </span>
        </div>
        <div class="nav-item ">
          <span class="v-link clickable dark"> 意见反馈 </span>
        </div>
      </div>
      <!-- 左侧导航 #end -->
      <!-- 右侧内容 #start -->
      <div class="page-container">
        <div class="order-detail">
          <div class="title"> 挂号详情</div>
          <div class="status-bar">
            <div class="left-wrapper">
              <div class="status-wrapper BOOKING_SUCCESS">
                <span class="iconfont"></span> {{ orderInfo.param.orderStatusString }}
              </div>
            </div>
            <div class="right-wrapper">
              <img src="//img.114yygh.com/static/web/code_order_detail.png" class="code-img">
              <div class="content-wrapper">
                <div> 微信<span class="iconfont"></span>关注“北京114预约挂号”</div>
                <div class="watch-wrapper"> 快速挂号，轻松就医</div>
              </div>
            </div>
          </div>
          <div class="info-wrapper">
            <div class="title-wrapper">
              <div class="block"></div>
              <div>挂号信息</div>
            </div>
            <div class="info-form">
              <el-form ref="form" :model="form">
                <el-form-item label="就诊人信息：">
                  <div class="content"><span>{{ orderInfo.patientName }}</span></div>
                </el-form-item>
                <el-form-item label="就诊日期：">
                  <div class="content"><span>{{ orderInfo.reserveDate }} {{ orderInfo.reserveTime == 0 ? '上午' : '下午' }}</span></div>
                </el-form-item>
                <el-form-item label="就诊医院：">
                  <div class="content"><span>{{ orderInfo.hosname }} </span></div>
                </el-form-item>
                <el-form-item label="就诊科室：">
                  <div class="content"><span>{{ orderInfo.depname }} </span></div>
                </el-form-item>
                <el-form-item label="医生职称：">
                  <div class="content"><span>{{ orderInfo.title }} </span></div>
                </el-form-item>
                <el-form-item label="医事服务费：">
                  <div class="content">
                    <div class="fee">{{ orderInfo.amount }}元
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="挂号单号：">
                  <div class="content"><span>{{ orderInfo.outTradeNo }} </span></div>
                </el-form-item>
                <el-form-item label="挂号时间：">
                  <div class="content"><span>{{ orderInfo.createTime }}</span></div>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="rule-wrapper mt40">
            <div class="rule-title"> 注意事项</div>
            <div>1、请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；<br>
              <span style="color:red">2、【取号】就诊当天需在{{ orderInfo.fetchTime }}在医院取号，未取号视为爽约，该号不退不换；</span><br>
              3、【退号】在{{ orderInfo.quitTime }}前可在线退号 ，逾期将不可办理退号退费；<br>
              4、北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；<br>
              5、请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。
            </div>
          </div>
          <div class="bottom-wrapper mt60" v-if="orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1">
            <div class="button-wrapper">
              <div class="v-button white" @click="cancelOrder()">取消预约</div>
            </div>
            <div class="button-wrapper ml20" v-if="orderInfo.orderStatus == 0">
              <div class="v-button" @click="pay()">支付</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容 #end -->
      <!-- 微信支付弹出框 -->
      <el-dialog :visible.sync="dialogPayVisible" style="text-align: left" :append-to-body="true" width="500px" @close="closeDialog">
          <div class="container">
            <div class="operate-view" style="height: 350px;">
              <div class="wrapper wechat">
                <div>
                  <qriously :value="url" :size="220"/>
                  <div style="text-align: center;line-height: 25px;margin-bottom: 40px;">
                    请使用微信扫一扫<br/>
                    扫描二维码支付
                  </div>
                </div>
              </div>
            </div>
          </div>
          </el-dialog>
    </div>
    <!-- footer -->
  </template>
  <script>
  import '~/assets/css/hospital_personal.css'
  import '~/assets/css/hospital.css'
  import orderInfoApi from '@/api/order'
  import wxApi from '@/api/wx'
  export default {
    data() {
      return {
        orderId: null,
        orderInfo: {
          param: {}
        },
        dialogPayVisible: false,
        payObj: {},
        timer: null,  // 定时器名称
        url:null
      }
    },
    created() {
      this.orderId = this.$route.query.orderId
      this.init()
    },
    methods: {
      pay(){
        this.dialogPayVisible=true
        //请求后端，拿到微信支付的地址，通过前端组件将地址转换成二维码
        wxApi.createNative(this.orderId).then(response=>{
          this.url = response.data.url;

        })
      },


      init() {
        orderInfoApi.getOrders(this.orderId).then(response => {
          console.log(response.data);
          this.orderInfo = response.data.orderInfo
        })
      }
    }
  }
  </script>
  <style>
    .info-wrapper {
      padding-left: 0;
      padding-top: 0;
    }
    .content-wrapper {
      color: #333;
      font-size: 14px;
      padding-bottom: 0;
    }
    .bottom-wrapper {
      width: 100%;
    }
    .button-wrapper {
      margin: 0;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .bottom-wrapper .button-wrapper {
      margin-top: 0;
    }
  </style>

三、订单支付后处理

1、前端页面修改
添加定时器方法，每隔3秒去查询一次支付状态
（1）封装api方法

  queryPayStatus(orderId) {
    return request({
        url: `/api/order/weixin/status/${orderId}`,
        method: 'get'
    })
},

（2）修改页面调用

  import '~/assets/css/hospital_personal.css'
  import '~/assets/css/hospital.css'
  import orderInfoApi from '@/api/order'
  import wxApi from '@/api/wx'
  export default {
    data() {
      return {
        orderId: null,
        orderInfo: {
          param: {}
        },
        dialogPayVisible: false,
        payObj: {},
        timer: null,  // 定时器名称
        url:null
      }
    },
    created() {
      this.orderId = this.$route.query.orderId
      this.init()
    },
    methods: {
      pay(){
        this.dialogPayVisible=true
        //请求后端，拿到微信支付的地址，通过前端组件将地址转换成二维码
        wxApi.createNative(this.orderId).then(response=>{
          this.url = response.data.url;
          if(this.url == '') {
          this.dialogPayVisible = false
          this.$message.error("支付错误")
        } else {
          this.timer = setInterval(() => {
            this.queryPayStatus(this.orderId)
          }, 3000);
        }
      })
    },
    queryPayStatus(orderId) {
      wxApi.queryPayStatus(orderId).then(response => {
        if (response.message == '支付中') {
          return
        }
        clearInterval(this.timer);
        window.location.reload()
      })
    },
      init() {
        orderInfoApi.getOrders(this.orderId).then(response => {
          console.log(response.data);
          this.orderInfo = response.data.orderInfo
        })
      }
    }
  }
  </script>
  <style>
    .info-wrapper {
      padding-left: 0;
      padding-top: 0;
    }
    .content-wrapper {
      color: #333;
      font-size: 14px;
      padding-bottom: 0;
    }
    .bottom-wrapper {
      width: 100%;
    }
    .button-wrapper {
      margin: 0;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .bottom-wrapper .button-wrapper {
      margin-top: 0;
    }
  </style>

2、创建查询支付状态接口
（1）添加WeixinService方法和实现

    /**
     * 根据订单号去微信第三方查询支付状态
    */
    Map<String, String> queryPayStatus(Long orderId);

    //实现方法
    @Override
    public Map<String, String> queryPayStatus(Long orderId) {


        OrderInfo orderInfo = orderInfoService.getById(orderId);

        HttpClient httpClient =new HttpClient("https://api.mch.weixin.qq.com/pay/orderquery");
        Map<String,String> map = new HashMap<String,String>();
        map.put("appid", weiPayProperties.getAppid());
        map.put("mch_id", weiPayProperties.getPartner());
        map.put("out_trade_no", orderInfo.getOutTradeNo());//商户订单号
        map.put("nonce_str",WXPayUtil.generateNonceStr());


        try{
            httpClient.setXmlParam(WXPayUtil.generateSignedXml(map, weiPayProperties.getPartnerkey()));
            httpClient.setHttps(true);
            httpClient.post();
            String content = httpClient.getContent();
            Map<String, String> stringStringMap = WXPayUtil.xmlToMap(content);

            return stringStringMap; //支付
        } catch (Exception ex){
            return  null;
        }
    }

（2）添加PaymentService方法和实现

    //更新支付状态
    void paySuccess(Long orderId, Map<String, String> map);


    @Autowired
    private OrderInfoService orderInfoService;

    //更新支付状态
    @Transactional
    @Override
    public void paySuccess(Long orderId, Map<String,String> map) {
        //更新订单表的订单状态
        OrderInfo orderInfo=new OrderInfo();
        orderInfo.setId(orderId);
        orderInfo.setOrderStatus(OrderStatusEnum.PAID.getStatus());
        orderInfoService.updateById(orderInfo);
        //更新支付记录表的支付状态
        UpdateWrapper updateWrapper=new UpdateWrapper();
        updateWrapper.eq("order_id",orderId);
        updateWrapper.set("trade_no",map.get("transaction_id")); //微信支付的订单号[微信服务器]
        updateWrapper.set("payment_status", PaymentStatusEnum.PAID.getStatus());
        updateWrapper.set("callback_time",new Date());

        updateWrapper.set("callback_content", JSONObject.toJSONString(map));
        paymentService.update(updateWrapper);
    }
}

（3）添加Controller方法


    @Autowired
    private WeixinService weiPayService;

    @GetMapping("/status/{orderId}")
    public R getPayStatus(@PathVariable Long orderId){
        Map<String,String> map=weiPayService.queryPayStatus(orderId);
        if(map == null){
            return R.error().message("查询失败");
        }
        //查询成功+支付成功
        if("SUCCESS".equals(map.get("trade_state"))){ //支付成功
            weiPayService.paySuccess(orderId,map);//更新了订单状态0 1 +支付记录表的支付状态:1 2
            return R.ok();
        }
        //
        return R.ok().message("支付中"); //支付失败
    }