当前位置：首页 > article >正文

微信小程序+JAVA实现微信支付

article 2024/11/14 2:22:47

说明

使用weixin-java-pay实现微信小程序支付功能，后台采用JAVA。

前期准备

1、微信商户号

通过扫描登录申请，往下会说明；

2、小程序

这里就不更多描述了，甚至你可以搞一个订单支付页面都可以。而且微信官方也有提供很多模板；

3、商户号申请

我这里对小程序的申请不做更多的描述了。
如果没有微信商户号的同学，点击该链接微信支付 - 中国领先的第三方支付平台｜微信支付提供安全快捷的支付方式

扫码之后点击"成为商家"，这里主要有个体工商户和企业，按照事实填写，然后按照步骤填写就行了。
主要需要营业执照，法人信息，公账信息等。

按照下属步骤进行商户号申请：

接着添加AppID(小程序ID)

点击关联AppID进行绑定，这样你的商户号就与小程序进行绑定了。

代码编写

1、Java后端代码

pom.xml文件导入微信支付包

            <dependency>
                <groupId>com.github.binarywang</groupId>
                <artifactId>weixin-java-pay</artifactId>
                <version>4.4.9.B</version>
            </dependency>

Java程序配置文件application.yml

wx:
  #微信支付配置
  pay:
    #微信开放平台申请的移动应用ID
    app-id: ttttt
    mch-id: 1111111
    mch-key: wewrwrewr
    #支付回调通知地址。必填项 这里真是域名地址即可
    notify-url: http://localhost:8086

java微信支付配置类：

import com.github.binarywang.wxpay.config.WxPayConfig;
import com.github.binarywang.wxpay.service.WxPayService;
import com.github.binarywang.wxpay.service.impl.WxPayServiceImpl;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * @Author angelasp
 * @Date 2024/10/19 22:31
 * @Version 1.0
 */
@Configuration
public class WxPayConfigration {

    @Value("${wx.pay.app-id}")
    private String appId;

    @Value("${wx.pay.mch-id}")
    private String mchId;

    @Value("${wx.pay.mch-key}")
    private String mchKey;

    @Value("${wx.pay.notify-url}")
    private String notifyUrl;

    @Bean
    public WxPayConfig wxPayConfig() {
        WxPayConfig payConfig = new WxPayConfig();
        payConfig.setAppId(appId);
        payConfig.setMchId(mchId);
        payConfig.setMchKey(mchKey);
        payConfig.setNotifyUrl(notifyUrl);
        return payConfig;
    }

    @Bean
    public WxPayService wxPayService(WxPayConfig wxPayConfig) {
        WxPayService wxPayService = new WxPayServiceImpl();
        wxPayService.setConfig(wxPayConfig);
        return wxPayService;
    }

    @Bean
    public WxPayService wxService() {
        WxPayService wxPayService = new WxPayServiceImpl();
        return wxPayService;
    }
    
}

上述的WxPayConfigration中的参数去商户号后台获取即可

微信订单支付主要代码：

        WxPayMpOrderResult data = null;
        //调用统一下单接口，并组装生成支付所需参数对象
        WxPayUnifiedOrderRequest request = new WxPayUnifiedOrderRequest();
        request.setBody(payInfoDto.getBody());
        request.setOutTradeNo(payInfoDto.getPayNo());
        //支付金额
        request.setTotalFee(BaseWxPayRequest.yuanToFen(payInfoDto.getPayAmount().toString()));
        request.setSpbillCreateIp(IpHelper.getLocalHostAdress());
        // 回调地址
        request.setNotifyUrl(notifyUrl + "/wx/notify");
        // 交易类型APP
        request.setTradeType("JSAPI");
        String openId = payParam.getOpenId();
        request.setOpenid(openId);
        data = wxPayService.createOrder(request);
        // 返回支付参数给前端
        return data;

微信支付接口WxPayController类

@RestController
@RequestMapping("/wx")
@Tag(name = "订单接口")
@AllArgsConstructor
@Slf4j
public class WxPayController {

    @Autowired
    PayService payService;


    /**
     * 支付接口
     */
    @PostMapping("/pay")
    @Operation(summary = "根据订单号进行支付", description = "根据订单号进行支付")
    public ServerResponseEntity<Object> pay(@RequestBody PayParam payParam) {
        return ServerResponseEntity.success(payService.pay(userId, payParam));
    }


    /**
     * 商品统一下单请求回调接口
     *
     * @param xmlData xmlData
     * @return String
     */
    @PostMapping(value = "/notify", produces = "text/html;charset=UTF-8")
    @Transactional(rollbackFor = Exception.class)
    public String notify(@RequestBody String xmlData) {
        return payService.notify(xmlData);
    }

}

其中拉起微信支付的主要几个参数如下：

2、微信小程序

小程序这块主要是调用一下后台接口获取参数，然后通过参数唤起微信支付。

代码如下：

  /**
   * 唤起微信支付
   */
   calWeixinPay: function(orderNumbers) {
    wx.showLoading({
      mask: true
    });
    var openId = wx.getStorageSync('openId');
    var params = {
      url: "/wx/pay",
      method: "POST",
      data: {
        payType: 1,
        orderNumbers: orderNumbers,
        openId: openId
      },
      callBack: function(res) {
        wx.hideLoading();
        wx.requestPayment({
          timeStamp: res.timeStamp,
          nonceStr: res.nonceStr,
          package: res.packageValue,
          signType: res.signType,
          paySign: res.paySign,
          success: e => {
             console.log("支付成功");
            wx.navigateTo({
              url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + orderNumbers + "&orderType=" + this.data.orderType,
            })
          },
          fail: err => {
            wx.navigateTo({
              url: '/pages/pay-result/pay-result?sts=0&orderNumbers=' + orderNumbers + "&orderType=" + this.data.orderType,
            })
          }
        })

      }
    };
    http.request(params);
  }

这里的res就是从后台接口获取的支付参数，通过wx.requestPayment就可以唤起微信支付了。