原文地址：http://www.jylt.cc/#/detail?id=a7757b04e3ab0758b5f5a02623b970a9

官方开发文档

微信支付H5开发文档

开发步骤

1.添加微信支付SDK依赖

<dependency>
	<groupId>com.github.wxpay</groupId>
	<artifactId>wxpay-sdk</artifactId>
	<version>版本号</version>
</dependency>

2.自定义微信配置常量

public interface WXPayConstant {
    /**
     * 商户号
     */
    String MCH_ID = "微信支付商户号";

    /**
     * 商户证书序列号
     */
    String MCHSERIAL_NO = "微信支付商户证书序列号";

    /**
     * apiV3Key
     */
    String API_KEY = "微信支付apiV3Key";
    String APP_ID = "appid";
}

3.自定义微信配置

import com.dfdz.wechatpay.constant.WXPayConstant;
import com.github.wxpay.sdk.WXPayConfig;

import java.io.InputStream;

public class MyWXPayConfig implements WXPayConfig {
    @Override
    public String getAppID() {
        return WXPayConstant.APP_ID;
    }

    @Override
    public String getMchID() {
        return WXPayConstant.MCH_ID;
    }

    @Override
    public String getKey() {
        return WXPayConstant.API_KEY;
    }

    @Override
    public InputStream getCertStream() {
        return null;
    }

    @Override
    public int getHttpConnectTimeoutMs() {
        return 0;
    }

    @Override
    public int getHttpReadTimeoutMs() {
        return 0;
    }
}

4.调用统一下单接口，获取支付跳转链接

可参考的代码：

    @PostMapping("/unifiedorder")
    public ServerResponse<UnifiedorderVO> unifiedorder(@Valid H5UnifiedorderDTO dto) {
    

        String notify_url = "https://test.notify.com";

        Map<String, String> map = new HashMap<>(16);
        String out_trade_no = (System.currentTimeMillis() + IdUtil.getId()).substring(0, 32);
        map.put("out_trade_no", out_trade_no);
        map.put("notify_url", notify_url);
        map.put("spbill_create_ip", "fe8::216:3eff:fe03:f842");
        map.put("trade_type", "MWEB");
        map.put("body", "测试统一下单-商品名");
        map.put("scene_info", "{\"h5_info\": {\"type\":\"Wap\",\"wap_url\": \"https://dev.notify.cn/wechatpay\",\"wap_name\": \"统一下单\"}}");

        map.put("total_fee", (int) BigDecimalUtil.mul(dto.getTotal_fee(), 100, 0) + "");

        WXPay wxPay = new WXPay(new MyWXPayConfig());
        String signType = WXPayConstants.MD5;
        try {
    
            Map<String, String> stringStringMap = wxPay.fillRequestData(map);
            Map<String, String> wxResponse = wxPay.unifiedOrder(stringStringMap);
            log.info("h5统一下单响应结果：{}", wxResponse.toString());

            String prepay_id = wxResponse.get("prepay_id");

            String timestamp = System.currentTimeMillis() / 1000 + "";
            String nonceStr = WXPayUtil.generateNonceStr();
            Map<String, String> signMap = new HashMap<>(16);
            signMap.put("appId", WXPayConstant.APP_ID);
            signMap.put("nonceStr", nonceStr);
            signMap.put("timeStamp", timestamp);
            signMap.put("package", "prepay_id=" + prepay_id);
            signMap.put("signType", signType);
            String paySign = WXPayUtil.generateSignature(signMap, WXPayConstant.API_KEY, WXPayConstants.SignType.MD5);
            return ServerResponse.createBySuccess(UnifiedorderVO.builder()
                    .appid(WXPayConstant.APP_ID)
                    .paySign(paySign)
                    .nonceStr(nonceStr)
                    .out_trade_no(out_trade_no)
                    .prepay_id(prepay_id)
                    .signType(signType)
                    .timeStamp(timestamp)
                    .mwebUrl(wxResponse.get("mweb_url"))
                    .build());
        } catch (Exception e) {
    
            log.error("统一下单失败！", e);
            throw new ServiceException(500, "统一下单失败！");
        }
    }
    
@Data
public class H5UnifiedorderDTO {
    

    @NotNull(message = "金额不能为空！")
    @Min(value = 0, message = "金额不能为负数！")
    private Double total_fee;
}

获取到参数mweb_url之后，前端可直接使用window.loction={mweb_url}即可。