【畅购商城】微信支付之支付回调和支付状态

一时失言乱红尘 2024-03-31 16:27 76阅读 0赞

**目录**

Nuxt.js IP 启动

支付回调

回调接口

后端实现

查看支付状态

后端实现

前端实现

前置技术：RabbitMQ

更新订单状态

## **Nuxt.js IP 启动** ##

![5f49c4ec560344f1b0bb864a53a61a00.png][]

"config": {
        "nuxt": {
          "host": "0.0.0.0",
          "port": "3000"
        }
      },

## **支付回调** ##

### **回调接口** ###

步骤一：修改yml文件，添加notifyUrl配置

步骤二：修改配置文件

步骤三：修改工具类

步骤一：修改yml文件，添加notifyUrl配置

![813a2fa13730410381e35cd51ed43c29.png][]

sc:
      pay:
        notifyUrl: http://40m459492i.wicp.vip/order-service/pay/callback

步骤二：修改配置文件

![bdc5a94d8763492b9b565d75f63e6567.png][]

private String notifyUrl;           //回调路径

步骤三：修改工具类

![80eac568968c4f9199d44362e9be47ff.png][]

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 liangtong@itcast.cn
     */
    @Component
    @EnableConfigurationProperties(PayProperties.class)
    public class PayHelper {
    
        private WXPay wxPay;
        private PayProperties payProperties;
    
        @Bean
        public WXPay wxPay(PayProperties payProperties){
            if(wxPay == null){
                this.payProperties = payProperties;
                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", this.payProperties.getNotifyUrl());
                // 交易类型为扫码支付
                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;
            }
        }
    }

### **后端实现** ###

1.  步骤一：修改PayController，添加callback方法
2.  步骤二：检查网关，放行callback方法
3.  步骤三：修改花生壳，访问10010端口

![7d272d3e7e0142cb9589833762cf903b.png][]

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

步骤一：修改PayController，添加callback方法

@PostMapping("/callback")
    public void callback(HttpServletRequest request, HttpServletResponse response) throws IOException {
        try {
            //1 获得响应内容
            String xml = IOUtils.toString(request.getInputStream(), "UTF-8");
            System.out.println(xml);
            //解析
            Map<String, String> map = WXPayUtil.xmlToMap( xml );
    
            // 查询成功
            if("SUCCESS".equals(map.get( "result_code" )  )){
    
                // 获得订单号
                String sn = map.get("out_trade_no");
    
                //TODO  更新订单状态
                System.out.println(sn);
    
                //如果成功，给微信支付一个成功的响应
                response.setContentType("text/xml");
                String data = "<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>";
                response.getWriter().write(data);
            }
    
        } catch (Exception e) {
            e.printStackTrace();
            response.setContentType("text/xml");
            String data = "<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA["+e.getMessage()+"]]></return_msg></xml>";
            response.getWriter().write(data);
        }
    }

步骤二：检查网关，放行callback方法

![763c7f5cd7fa4436a46133b1a3e8fd7b.png][]

步骤三：修改花生壳，访问10010端口

![242fcd8eaffd47dd85ca82be41170698.png][]

查看控制台结果

<xml><appid><![CDATA[wx8397f8696b538317]]></appid>
    <bank_type><![CDATA[COMM_CREDIT]]></bank_type>
    <cash_fee><![CDATA[1]]></cash_fee>
    <fee_type><![CDATA[CNY]]></fee_type>
    <is_subscribe><![CDATA[N]]></is_subscribe>
    <mch_id><![CDATA[1473426802]]></mch_id>
    <nonce_str><![CDATA[47e529ea929e4c9e847ee9699751a648]]></nonce_str>
    <openid><![CDATA[oNpSGwZaaw_0uBEMwFpkwIwFsttw]]></openid>
    <out_trade_no><![CDATA[1259484402174529500]]></out_trade_no>
    <result_code><![CDATA[SUCCESS]]></result_code>
    <return_code><![CDATA[SUCCESS]]></return_code>
    <sign><![CDATA[2D4BC610795C1DC303B0B26092D6C6E3]]></sign>
    <time_end><![CDATA[20200510220429]]></time_end>
    <total_fee>1</total_fee>
    <trade_type><![CDATA[NATIVE]]></trade_type>
    <transaction_id><![CDATA[4200000568202005108477965385]]></transaction_id>
    </xml>
    1259484402174529500

## **查看支付状态** ##

### **后端实现** ###

1.  步骤一：修改PayService，查询订单支付状态
2.  步骤二：编写PayService实现类
3.  步骤三：修改PayController

![d2fa6ce7c23e4cec8d0c3525236b7a95.png][]

步骤一：修改PayService，查询订单支付状态

package com.czxy.changgou4.service;
    
    import com.czxy.changgou4.utils.PayState;
    import com.czxy.changgou4.vo.PayRequest;
    
    /**
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    public interface PayService {
        /**
         * 查看支付状态
         * @param sn
         * @return
         */
        public PayState query(Long sn);
    }

步骤二：编写PayService实现类

@Override
    public PayState query(Long sn) {
        //查询微信支付状态
        PayState payState = payHelper.queryOrder(sn);
        return payState;
    
    }

步骤三：修改PayController

@GetMapping("/{sn}")
    public BaseResult query(@PathVariable("sn") Long sn){
        //查询
        PayState payState = payService.query(sn);
        //返回
        if(payState.getCode() == 1) {
            return BaseResult.ok(payState.getDesc());
        }
        return BaseResult.error(payState.getDesc());
    }

### **前端实现** ###

如果订单已经支付，跳转到支付成功页面。

![917ea05189624a54b5113b2c41b1fa91.png][]

1.  步骤一：修改api.js，查询订单支付状态
2.  步骤二：修改flow3，“查询订单状态”绑定事件
3.  步骤三：修改flow3，编写事件，如果是成功，调到到flow4
4.  步骤四：编写flow4，与flow3基本内容一致，提示信息为“支付成功，货物即将送出！”

步骤一：修改api.js，查询订单支付状态

findPayStatus : ( sn ) => {
        return axios.get("/order-service/pay/"+sn )
      }

步骤二：修改flow3，“查询订单状态”绑定事件

![a28c30e33c95464c9c49ea47f13735ea.png][]

步骤三：修改flow3，编写事件，如果是成功，调到到flow4

methods: {
        async findPayStatusFn() {
          let { data } = await this.$request.findPayStatus( this.sn );
          if( data.code == 20000) {
            location.href = 'flow4'
          } else {
            alert( data.message );
          }
        }
      },

步骤四：编写flow4，与flow3基本内容一致，提示信息为“支付成功，货物即将送出！”

<template>
      <div>
        
        <div class="topnav">
          <div class="topnav_bd w990 bc">
            <div class="topnav_left">
    
            </div>
            <div class="topnav_right fr">
              <ul>
                <li>您好，欢迎来到畅购！[<a href="login.html">登录</a>] [<a href="register.html">免费注册</a>] </li>
                <li class="line">|</li>
                <li>我的订单</li>
                <li class="line">|</li>
                <li>客户服务</li>
    
              </ul>
            </div>
          </div>
        </div>
        
    
        <div style="clear:both;"></div>
    
        
        <div class="header w990 bc mt15">
          <div class="logo w990">
            <h2 class="fl"><a href="index.html"><img src="images/logo.png" alt="畅购商城"></a></h2>
            <div class="flow fr flow3">
              <ul>
                <li>1.我的购物车</li>
                <li>2.填写核对订单信息</li>
                <li class="cur">3.成功提交订单</li>
              </ul>
            </div>
          </div>
        </div>
        
    
        <div style="clear:both;"></div>
    
        
        <div class="success w990 bc mt15">
          <div class="success_hd">
            <h2>订单支付成功</h2>
          </div>
          <div class="success_bd">
            <p><span></span>支付成功，货物即将送出！</p>
          </div>
        </div>
        
    
        <div style="clear:both;"></div>
        
        <Footer></Footer>
        
      </div>
    </template>
    
    <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>
    
    <style>
    
    </style>

## **前置技术：RabbitMQ** ##

## **更新订单状态** ##

步骤一：配置环境，

rabbitmq中添加order\_pay队列

添加依赖

添加yml配置

步骤二：修改回调函数，将sn存放到rabbit中

步骤三：编写监听器（消费者），更新订单状态

步骤四：修改OrderService，完成修改功能

步骤五：修改OrderMapper，完成修改功能

步骤一：配置环境，

rabbitmq中添加order\_pay队列，添加rabbit配置类

ackage com.czxy.changgou4.config;
    
    import org.springframework.amqp.core.Queue;
    import org.springframework.context.annotation.Bean;
    import org.springframework.stereotype.Component;
    
    /**
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    @Component
    public class OrderPayQueue {
    
        private static final String ORDER_PAY_QUEUE = "order_pay";
    
        @Bean
        public Queue queue() {
            return new Queue(ORDER_PAY_QUEUE);
        }
    }

![2d8b6730647b450e87b750e1ae68668e.png][]

添加依赖

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-amqp</artifactId>
    </dependency>

![27c42547ca0e4758ab1301eac3d80354.png][]

添加yml配置

spring:
      rabbitmq:
        host: 127.0.0.1
        username: guest
        password: guest

步骤二：修改回调函数，将sn存放到rabbit中

![97569d36d52343b5a21561be8d6e2048.png][]

> rabbitTemplate.convertAndSend("", "order\_pay", sn);

步骤三：编写监听器（消费者），更新订单状态

package com.czxy.changgou4.listener;
    
    import com.czxy.changgou4.service.OrderService;
    import org.springframework.amqp.rabbit.annotation.RabbitHandler;
    import org.springframework.amqp.rabbit.annotation.RabbitListener;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Component;
    
    /**
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    @Component
    @RabbitListener(queues = "order_pay")
    public class OrderPayListener {
    
        @Autowired
        private OrderService orderService;
    
        /**
         * 更新支付状态
         * @param message
         */
        @RabbitHandler
        public void updatePayStatus(String message){
            orderService.updatePayStatus( message , "1" );
        }
    }

步骤四：修改OrderService，完成修改功能

package com.czxy.changgou4.service;
    
    import com.baomidou.mybatisplus.extension.service.IService;
    import com.czxy.changgou4.pojo.Order;
    import com.czxy.changgou4.pojo.User;
    import com.czxy.changgou4.vo.CartVo;
    import com.czxy.changgou4.vo.OrderVo;
    
    import java.util.List;
    
    public interface OrderService extends IService<Order> {
    
        void updatePayStatus(String sn, String status);
    }

package com.czxy.changgou4.service.impl;
    
    import com.alibaba.fastjson.JSON;
    import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    import com.czxy.changgou4.pojo.Order;
    import com.czxy.changgou4.pojo.OrderGoods;
    import org.springframework.stereotype.Service;
    import org.springframework.transaction.annotation.Transactional;
    
    import javax.annotation.Resource;
    import java.util.*;
    
    @Service
    @Transactional
    public class OrderServiceImpl extends ServiceImpl<OrderMapper, Order> implements OrderService {
        @Override
        public void updatePayStatus(String sn, String status) {
            //更新状态
            baseMapper.updateStatus(sn,status);
        }
    }

步骤五：修改OrderMapper，完成修改功能

package com.czxy.changgou4.mapper;
    
    import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    import com.czxy.changgou4.pojo.Order;
    import org.apache.ibatis.annotations.Mapper;
    import org.apache.ibatis.annotations.Param;
    import org.apache.ibatis.annotations.Update;
    
    @Mapper
    public interface OrderMapper extends BaseMapper<Order> {
        /**
         * 更加sn修改状态
         * @param sn
         * @param status
         */
        @Update("UPDATE tb_order SET STATUS = #{status} WHERE sn = #{sn}")
        void updateStatus(@Param("sn") String sn, @Param("status") String status);
    }

测试：在rabbitMQ web控制台，可以手动发布消息

![a7c5e89705864d0fa12ceacb9b20929c.png][]

[5f49c4ec560344f1b0bb864a53a61a00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/f78e7377234e4f5a82e97eeffe03423a.png
[813a2fa13730410381e35cd51ed43c29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/a7d3119c3184458a9ce3f1b6175ea9d6.png
[bdc5a94d8763492b9b565d75f63e6567.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8449978304454ad9aaf8f9872a9713e4.png
[80eac568968c4f9199d44362e9be47ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/592041d2343c4c7999a2bc2f430a68d3.png
[7d272d3e7e0142cb9589833762cf903b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b7d3b39707a0490491b083cf10cd4f0d.png
[763c7f5cd7fa4436a46133b1a3e8fd7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/6047acdc0c23435eb30b85f20b661991.png
[242fcd8eaffd47dd85ca82be41170698.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c561bcf55bb0481ea9ea0ca10e97cf8d.png
[d2fa6ce7c23e4cec8d0c3525236b7a95.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/7e3c17a3cdaa4382a5ea764b0c14f5ca.png
[917ea05189624a54b5113b2c41b1fa91.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1fe27586ad684aa4a8b58c9a38a5caba.png
[a28c30e33c95464c9c49ea47f13735ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/ba13c9f157e7400d9326a22017834de3.png
[2d8b6730647b450e87b750e1ae68668e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/4d8d843e485845309389b432d3af5d9a.png
[27c42547ca0e4758ab1301eac3d80354.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d36dee6c3cfb4b8c9ff408b60f1d38c8.png
[97569d36d52343b5a21561be8d6e2048.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/cfacf909bcb44c43931e4120a116eb6d.png
[a7c5e89705864d0fa12ceacb9b20929c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/79e5d6839d624e27a147ee49fd62a20a.png