微信JSAPI支付詳解

一、概述

微信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支付的流程和注意事項，希望對開發者能有所幫助。如有疑問或錯誤，歡迎指出。