宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

一、概述

微信JSAPI支付是指通过微信公众号或开放平台的网页授权获取用户openid，再通过JSAPI接口完成支付的一种移动支付方式。它主要适用于微信公众号开发、微信小程序开发等场景。

本文将从准备工作、支付流程和注意事项三个方面详细介绍微信JSAPI支付。

二、准备工作

在进行微信JSAPI支付时，需要完成以下准备工作：

1、开通微信支付功能，并完成商户认证；

2、获取微信支付相关API信息，包括appid、mchid、key等；

3、在微信公众平台或开放平台创建应用，并完成绑定，获取appid和appsecret；

4、在应用中完成OAuth2.0网页授权，获取用户openid。

完成以上准备工作后，即可进入微信JSAPI支付流程。

三、支付流程

微信JSAPI支付的流程主要包括以下步骤：

1、获取用户授权

用户需先授权给商户公众号或开放平台，允许查询用户基本信息，包括openid。

// 获取微信OAuth2.0授权
var wxAuth = "https://open.weixin.qq.com/connect/oauth2/authorize?";
var appId = "appid=YOUR_APPID";
var redirectUri = "&redirect_uri=YOUR_REDIRECT_URI";
var responseType = "&response_type=code";
var scope = "&scope=snsapi_base";
var state = "&state=STATE#wechat_redirect";

var url = wxAuth + appId + redirectUri + responseType + scope + state;
window.location.href = url;

2、生成预支付订单

商户后台调用微信统一下单接口，生成预支付订单，同时返回预支付交易会话标识prepay_id。

// 获取微信统一下单接口
var wxUnifiedOrder = "https://api.mch.weixin.qq.com/pay/unifiedorder";

// 构造预支付订单参数
var data = {
    appid: "YOUR_APPID",  // 公众号appid
    mch_id: "YOUR_MCHID",  // 商户号
    nonce_str: "RANDOM_STRING",  // 随机字符串
    body: "PRODUCT_NAME",  // 商品描述
    out_trade_no: "YOUR_ORDER_NUMBER",  // 商户订单号
    total_fee: "TOTAL_FEE",  // 总金额（单位：分）
    spbill_create_ip: "IP_ADDRESS",  // 终端IP
    notify_url: "YOUR_NOTIFY_URL",  // 通知地址
    trade_type: "JSAPI",  // 交易类型
    openid: "USER_OPENID"  // 用户openid
};
// 对参数进行签名
data.sign = sign(data, "YOUR_KEY");
// 将参数转换为XML格式
var postData = convertToXml(data);
// 发送计算预支付订单请求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 解析支付接口返回的XML数据
        var response = parseXml(xhr.responseText);
        // 获取prepay_id
        var prepayId = response.prepay_id;
    }
}
xhr.open("POST", wxUnifiedOrder, true);
xhr.send(postData);

3、生成支付参数

根据微信支付API规范，生成支付参数。

// 构造支付参数
var params = {
    appId: "YOUR_APPID",
    nonceStr: "RANDOM_STRING",
    package: "prepay_id=" + prepayId,
    signType: "MD5",
    timeStamp: new Date().getTime()/1000|0
};
// 对参数进行签名
params.paySign = sign(params, "YOUR_KEY");

4、调用微信支付接口

调用微信支付JSAPI接口进行支付。

// 调用微信支付JSAPI
WeixinJSBridge.invoke('getBrandWCPayRequest', params, function(res) {
    if (res.err_msg == "get_brand_wcpay_request:ok") {
        // 支付成功后的处理逻辑
    } else {
        // 支付失败后的处理逻辑
    }
});

四、注意事项

在使用微信JSAPI支付时，需要注意以下几点：

1、请确保公众号或开放平台已完成认证，并正确获取相应API信息。

2、预支付订单的费用单位是分，需要注意转化。

3、生成支付参数时，请确保参数的完整性和正确性，并进行签名。

4、调用微信支付接口前需先判断WeixinJSBridge是否存在。

5、在本地测试时需使用HTTPS协议。

总结

本文详细介绍了微信JSAPI支付的流程和注意事项，希望对开发者能有所帮助。如有疑问或错误，欢迎指出。