微信支付 JSAPI

准备工作

申请微信商户号流程

PC端微信支付登录页
在这里插入图片描述

微信支付JSAPI开发文档

需要获取的信息

商户号 mch_id
公众号 appId
服务器地址 notify_url
api证书
密钥
通知地址

开发指引

在这里插入图片描述

微信支付

统一下单Demo下载

  • 依赖

在这里插入图片描述

  • 代码阅读(避免踩坑
    在这里插入图片描述

WXPayConfig

import com.github.wxpay.sdk.WXPayConfig;
import java.io.*;

public class MyConfig implements WXPayConfig{

    private byte[] certData;

    public MyConfig() throws Exception {
    	// 证书文件
        String certPath = "/path/to/apiclient_cert.p12"; 
        File file = new File(certPath);
        InputStream certStream = new FileInputStream(file);
        this.certData = new byte[(int) file.length()];
        certStream.read(this.certData);
        certStream.close();
    }

    public String getAppID() { // 公众号appId
        return "wx8888888888888888";
    }

    public String getMchID() { // 商户号id
        return "12888888";
    }

    public String getKey() { // 密钥
        return "88888888888888888888888888888888";
    }

    public InputStream getCertStream() {
        ByteArrayInputStream certBis = new ByteArrayInputStream(this.certData);
        return certBis;
    }

    public int getHttpConnectTimeoutMs() {
        return 8000;
    }

    public int getHttpReadTimeoutMs() {
        return 10000;
    }
 
}

在微信支付官网下载的文档demo中 自己继承 WXPayConfig()类,.md文件中明显有漏洞。缺少一个需要从写的抽象方法

	/**
	*@description 获取WXPayDomain, 用于多域名容灾自动切换
	*/
	@Override
    IWXPayDomain getWXPayDomain() {
        // 这个方法需要这样实现, 否则无法正常初始化WXPay
        IWXPayDomain iwxPayDomain = new IWXPayDomain() {

            @Override
            public void report(String domain, long elapsedTimeMillis, Exception ex) {

            }

            @Override
            public DomainInfo getDomain(WXPayConfig config) {
                return new IWXPayDomain.DomainInfo(WXPayConstants.DOMAIN_API, true);
            }
        };
        return iwxPayDomain;
    }

WXPay
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
JSAPI文档中说默认的加密方式为MD5,实则是HMAC-SHA256
在这里插入图片描述

统一下单
Demo这里也存在一个问题,他这里和前端JSAPI需要的参数就不统一,前端要求对统一下单之后的参数再次进行签名计算,按照demo走下去会验证签名失败
在这里插入图片描述
在这里插入图片描述
二次签名计算,参考如下:(通知地址一定要设置,异步通知微信支付结果通知,成功、失败需要更新订单信息)

public static Map<String, String> createPrepayment(Map<String, String> data, WXPayConfiguration wxPayConfiguration) throws Exception {
        MyConfig config= new MyConfig(wxPayConfiguration);
        WXPay wxpay = new WXPay(config);

        // 商品简单描述
        data.put("body", "changsha pengyuyuan");
        // 商户系统内部订单号,要求32个字符内(最少6个字符),只能是数字、大小写字母_-|*且在同一个商户号下唯一。
        /*String out_trade_no = UUIDUtil.generateUUID();
        data.put("out_trade_no", out_trade_no);*/
        data.put("device_info", "WEB");
        // 默认人民币:CNY
        data.put("fee_type", "CNY");
        // 金额 单位为分establishListInfo
        data.put("total_fee", new BigDecimal(String.valueOf(data.get("total_fee"))).multiply(new BigDecimal("100")) + "");
        // data.put("total_fee", "1");
        // 终端IP
        data.put("spbill_create_ip", wxPayConfiguration.getDomain());
        // 通知地址
        data.put("notify_url", wxPayConfiguration.getNotifyDomain());
        // 此处指定为扫码支付
        data.put("trade_type", "JSAPI");

        try {
            Map<String, String> resp = wxpay.unifiedOrder(data);
            log.info("第一次验签:{}",resp);

            // 参数需要重新进行签名计算
            if ("SUCCESS".equals(resp.get("return_code"))) {
                // 返回给前端的参数,前端再调起支付接口
                Map<String,String> repData = new HashMap<>();
                // 注意参数要区分大小写
                repData.put("appId", wxPayConfiguration.getAppid());
                // 这个参数巨恶心 务必这样写 返回给前端 否则前端一直报错
                String pkg = "prepay_id="+ resp.get("prepay_id");
                repData.put("package",pkg);
                // 要添加签名方式
                repData.put("signType","HMAC-SHA256");
                repData.put("nonceStr", WXPayUtil.generateNonceStr());
                repData.put("timeStamp",String.valueOf(System.currentTimeMillis()/1000));
                //签名
                String sign = WXPayUtil.generateSignature(repData, wxPayConfiguration.getApiV3Key(), WXPayConstants.SignType.HMACSHA256);
                repData.put("prepayId",resp.get("prepay_id"));
                repData.put("mchId", wxPayConfiguration.getMchId());
                repData.put("paySign",sign);
                log.info("第二次验签:{}",repData);
                return repData;
            }
            return resp;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

JSAPI调起支付
在这里插入图片描述
JSAPI文档中说默认的加密方式为MD5,实则是HMAC-SHA256,前端copy过来记得改一下
在这里插入图片描述
最佳实践

前端出现的其他问题参考这位大佬的博客,总结的很到位:
https://blog.csdn.net/qq_38371367/article/details/87195489

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Uniapp是一种跨平台的开发框架,可以用于同时开发iOS、Android和H5应用。而H5是指在网页上运行的应用程序。微信支付JSAPI是微信提供的一种支付接口,通过调用JSAPI接口,可以在H5应用中实现微信支付功能。 在Uniapp中使用微信支付JSAPI,可以通过以下步骤进行操作: 1. 首先,在Uniapp项目中引入微信支付的相关配置文件和SDK库文件。 2. 在需要使用微信支付的页面中,引入微信支付的JS文件,并初始化微信支付参数。支付参数包括商户号、appid、签名等信息。 3. 创建统一下单接口的后端处理程序,用于生成预支付订单并返回支付预处理参数给前端。 4. 在支付页面中,调用微信支付JSAPI的方法,传入预支付处理参数和支付回调方法。 5. 当用户点击支付按钮后,会弹出微信支付界面,用户可以选择支付方式进行支付操作。 6. 支付成功后,微信会将支付结果返回给前端,并通过支付回调方法进行处理,可以展示支付成功的提示信息和更新订单状态等操作。 需要注意的是,使用微信支付JSAPI需要在微信开放平台上注册并申请相关的权限。同时,在使用过程中,还需要确保支付参数的正确性、支付安全性和业务逻辑的完善性。 总之,Uniapp可以很好地支持H5应用中的微信支付JSAPI,通过合理的配置和调用,可以方便地在H5应用中实现微信支付功能,为用户提供更加便捷的支付体验。 ### 回答2: Uniapp是一款跨平台的应用开发框架,可以让开发者使用Vue.js语法来开发同时兼容多个平台的应用程序。Uniapp支持在H5平台中使用微信支付JSAPI。 微信支付JSAPI是微信提供的一组用于在网页中实现微信支付功能的JavaScriptAPI接口。通过调用微信支付JSAPI,开发者可以在H5页面中调起微信支付功能,用户可以使用微信支付完成支付操作。 在Uniapp中使用微信支付JSAPI,首先需要引入微信支付的JS文件。可以在页面的头部引入:<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>。 然后,在需要使用微信支付的地方,可以通过uni.request方法向服务器请求获取支付参数。获取到支付参数后,可以使用wx.requestPayment方法调起微信支付界面,并传入支付参数。支付成功后,微信会返回支付结果给开发者的回调函数,开发者可以在回调函数中处理支付结果。 需要注意的是,在使用微信支付JSAPI的过程中需要保证支付参数的安全性,避免支付参数被恶意篡改。通常可以在服务器端生成支付参数,并通过服务器端返回给前端,以确保支付参数的安全性。 总结起来,Uniapp可以在H5平台中使用微信支付JSAPI来实现微信支付功能,开发者需要引入微信支付的JS文件,通过uni.request方法获取支付参数,调用wx.requestPayment方法调起支付,处理支付结果的回调函数,并确保支付参数的安全性。 ### 回答3: Uniapp 是一款跨平台开发框架,可以同时开发小程序、H5 和APP。Uniapp 提供了对微信支付的支持,可以使用微信支付的 JSAPI(JavaScript API)来进行支付功能的开发。 Uniapp H5 微信支付 JSAPI 的实现过程如下: 1. 首先,需要在微信支付商户平台上注册并获取到自己的商户号(mch_id),同时生成随机字符串(nonce_str)和当前时间戳(timestamp)。 2. 接下来,在前端页面中引入微信支付的 JS 文件,可以通过在页面头部添加以下代码进行引入: ``` <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> ``` 3. 在页面中设置要支付的订单信息,包括订单号(out_trade_no)、订单总金额(total_fee)等,并将这些信息以及商户号、随机字符串和时间戳等传递给后端服务器。 4. 后端服务器在接收到前端传递的支付信息后,根据微信支付 API 的要求,生成签名(sign)并返回给前端。 5. 前端页面收到后端返回的签名后,调用微信支付的 JSAPI 方法,传入订单信息和签名等参数,即可发起支付请求。 6. 微信客户端会弹出支付窗口,用户输入密码或进行指纹验证后,支付完成。 注意事项: - 在使用 Uniapp 进行微信支付开发时,需要确保页面已经获得了微信公众号的授权,因为微信支付是需要通过公众号的权限进行的。 - 需要合理处理支付结果的回调,根据支付结果进行相应的处理,如跳转到支付成功页面或给予支付失败的提示等。 通过使用 Uniapp H5 微信支付 JSAPI,我们可以方便地在 Uniapp 框架下进行微信支付的开发,实现支付功能的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值