生成vx支付二维码

简介: 生成vx支付二维码

准备工作:

需要:

微信支付id、商户号、商户key、回调地址

# 微信支付所需固定参数

weixin.pay.appid=wx74862e0dfcf69954
weixin.pay.partner=1558950191
weixin.pay.partnerkey=T6m9iK73b0kn9g5v426MKfHQH7X8rKwb
weixin.pay.notifyurl=http://localhost/api/order/weixinPay/weixinNotify

 

支付流程

创建订单

前端发送课程号和请求头中带有用户信息的token后端使用jwt进行解析用户id,之后根据courseID和userId创建订单信息,最后将订单id发送给前端,前端带着订单id进行购物车页面的跳转,在购物车页面进行异步获取订单信息,进行渲染

image.png


前端

//course详情页面点击购买
    createOrder() {
      orders.createOrder(this.courseId).then(res => {
        // 获取订单号
        // res.data.data.orderNo
        // 生成订单之后跳转到订单的显示页面
        this.$router.push({ path: '/orders/' + res.data.data.orderNo })
      })
    }
    
    //购物车order页面异步渲染
    asyncData({ params, error }) {
    return orders.getById(params.orderId).then(res => {
      console.log(res.data)
      return { order: res.data.data.item }
    })
  },

后端

controller
    //生成订单的方法
    @GetMapping("createOrder/{courseId}")
    public R saveOrder(@PathVariable String courseId, HttpServletRequest request){
        String userId = JwtUtils.getMemberIdByJwtToken(request);
        //创建订单返回订单号
        String orderNo = orderService.createOrders(courseId,userId);
        return R.ok().data("orderNo",orderNo);
    }
    //根据订单id查询订单信息
    @GetMapping("/getOrderInfo/{orderId}")
    public R getOrderInfo(@PathVariable String orderId){
        LambdaQueryWrapper<Order> lambdaQueryWrapper = new LambdaQueryWrapper<>();
        lambdaQueryWrapper.eq(Order::getOrderNo,orderId);
        Order order = orderService.getOne(lambdaQueryWrapper);
        return R.ok().data("item",order);
    }

service生成订单的业务逻辑,通过feign远程调用edu模块和ucenter模块根据courseid和userid获取课程信息、用户信息、教师信息

//生成订单的方法
@Override
public String createOrders(String courseId, String userId) {
    //通过远程调用获取课程信息
    CourseInfoVO courseInfo = getCourseInfoById.getCourseInfo(courseId);
    //通过远程调用获取用户信息
    UcenterMemberOrder userInfo = getUserInfoById.getUcenterMember(userId);
    //通过远程调用获取老师信息
    TeacherVO teacherInfo = getTeacherInfoById.getTeacherInfo(courseInfo.getTeacherId());
    Order order = new Order();
    order.setOrderNo(OrderNoUtil.getOrderNo());
    order.setCourseId(courseId);
    order.setCourseTitle(courseInfo.getTitle());
    order.setCourseCover(courseInfo.getCover());
    order.setTeacherName(teacherInfo.getName());
    order.setTotalFee(courseInfo.getPrice());
    order.setMemberId(userId);
    order.setMobile(userInfo.getMobile());
    order.setNickname(userInfo.getNickname());
    order.setStatus(0);
    order.setPayType(1);
    baseMapper.insert(order);
    return order.getOrderNo();
}

购物车order页面渲染订单信息后,用户确认立即支付带着订单号跳转到支付pay页面,支付页面根据订单号异步向后端发起请求获取支付的微信付款码和订单基本信息例如金额,订单号等,封装成map返回给前端进行渲染


相关文章
|
7月前
|
存储 前端开发 JavaScript
【Uniapp】支付链转二维码
【Uniapp】支付链转二维码
|
6天前
|
前端开发
生成vx支付二维码2
生成vx支付二维码2
10 1
|
7月前
|
网络安全 开发工具 Android开发
微信刷脸支付插件
微信刷脸支付插件
96 0
|
10月前
uniapp实现微信扫二维码进行核销
uniapp实现微信扫二维码进行核销
220 0
|
存储 传感器 文字识别
二维码支付功能设计【系列文章,本章1】
扫一扫已经是我们生活中非常熟悉的功能,而扫一扫离不开二维码,那么二维码扫码原理是什么,如何实现的,如果企业要上自己的扫码功能如何实现? 本章将从二维码原理讲起。
376 0
二维码支付功能设计【系列文章,本章1】
|
XML 移动开发 JavaScript
【畅购商城】微信支付模块之微信支付二维码
【畅购商城】微信支付模块之微信支付二维码
154 0
【畅购商城】微信支付模块之微信支付二维码
|
数据可视化
一张收款码,同时支持微信、云闪付、支付宝、信用卡支付
想必你也有过这样的经历,在门店消费时,看过商家只张贴了一张收款码,用微信或者支付宝扫码都可以支付,同时支持微信、云闪付、支付宝、信用卡支付。
314 0
一张收款码,同时支持微信、云闪付、支付宝、信用卡支付
|
XML 前端开发 Dubbo
微信支付的两种模式,扫码支付
微信支付的两种模式,扫码支付
846 0
|
XML 缓存 算法
微信二维码支付
微信扫码支付是商户系统按微信支付协议生成支付二维码,用户再用微信扫一扫完成支付的模式。该模式适用于PC网站支付、实体店单品或订单支付、媒体广告支付等场景。
288 0
|
机器学习/深度学习
关于支付宝/微信免签实现个人支付
最近一直在了解关于个人支付的问题。由于之前一直想实现个人支付,但是目前微信和支付宝的支付接口都需要企业或个体户资质,导致没办法实现,无奈只能走向这个道路。 说是免签,实际上就是拿到收款金额来做些事情。
关于支付宝/微信免签实现个人支付