1.用戶同意授權,獲取code。用戶授權有兩種scope,以下采用snsapi_base靜默授權並自動跳轉到回調頁。另外一種scope有興趣可以根據API自行設置
訪問地址:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=(公衆號的appid)&redirect_uri=(回調的網址)&response_type=code&scope=snsapi_base&state=(隨意設置)#wechat_redirect
參數說明:
appid 公衆號的appid
(登錄公衆平臺 → 開發 → 基本配置 → appid)
redirect_uri 爲回調的網址,則當用戶同意授權後會自動跳轉到的目標網址。
response_type 默認code不需要修改
scope 授權方式,此處使用snsapi_base
state 隨意設置
回調的網址需要在公衆平臺上設置授權回調頁面域名,否則會出現redirect_uri 參數錯誤。
公衆平臺上設置授權回調頁面域名步驟如下:
1)登錄公衆平臺 https://mp.weixin.qq.com/
2)開發 → 接口權限 → 網頁服務 → 網頁賬號 → 網頁授權獲取用戶基本信息 → 修改
成功訪問上述鏈接後,頁面將會跳轉到redirect_uri指定的鏈接,並傳遞一個code參數,於是我們在回調後的邏輯裏需要接收code參數的值。
2.獲取openid
訪問地址:
https://api.weixin.qq.com/sns/oauth2/access_token?appid=(公衆號的appid)&secret=(公衆號的appid下方的密鑰)&code=(回調後獲得的code)&grant_type=authorization_code
參數說明:
appid 公衆號的appid
secret 公衆號的appid下發的密鑰
code 步驟1成功回調後獲得的code
grant_type 默認authorization_code
成功執行步驟2後將會獲得一個json數組,openid包含其中,需要我們自行解析獲取openid。
3.統一下單獲取prepay_id
URL地址:
https://api.mch.weixin.qq.com/pay/unifiedorder
參數說明:
appid 公衆號的appid
body 彈出支付窗口時的提示內容
mch_id 微信支付分配的商戶號
(登錄公衆平臺 → 微信支付 → 基本信息 → 商戶號 )
nonce_str 隨機字符串
notify_url 接收微信支付異步通知回調地址,通知url必須爲直接可訪問的url,
不能攜帶參數。
openid 步驟2獲取的openid
out_trade_no 商戶系統內部的訂單號,可自定義
spbill_create_ip 用戶端實際ip
total_fee 訂單總金額,單位爲分
trade_type 支付類型,此處爲JSAPI
key 微信商戶平臺(pay.weixin.qq.com) → 賬戶設置 → API安全
→ 密鑰設置
sign MD5加密上述參數
如:
String sintrt = "appid=yourappid"+
"&body=yourbody"+
"&mch_id=yourmch_id"+
"&nonce_str=yournonceStr"+
"¬ify_url=yournotify_url"+
"&openid=youropenid"+
"&out_trade_no=yourout_trade_no"+
"&spbill_create_ip=yourip"+
"&total_fee=yourtotal_fee"+
"&trade_type=JSAPI"+
"&key=yourkey";
String sign = MD5.getMD5(sintrt).toUpperCase();
以XML的方式封裝以上參數,格式如下
<xml>
<appid>appid</appid>
<body>body</body>
<mch_id>mch_id</mch_id>
<nonce_str>nonceStr</nonce_str>
<notify_url>notify_url</notify_url>
<openid>openid</openid>"+
<out_trade_no>out_trade_no</out_trade_no>"+
<spbill_create_ip>spbill_create_ip</spbill_create_ip>"+
<total_fee>total_fee</total_fee>
<trade_type>JSAPI</trade_type>
<sign>sign</sign>
</xml>
以XML的方式訪問統一下單的URL地址獲取解析返回的數據,獲取prepay_id
4.網頁端調用js完成支付
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
"appId":"appId",
"timeStamp":timestamp, //時間戳,自1970年以來的秒數
"nonceStr":nonceStr, //隨機串
"package":prepay_id //步驟3獲取的prepay_id,
"signType":"MD5", //微信簽名方式:
"paySign":sign //微信簽名
},
function(res){
if(res.err_msg.indexOf("ok") > 0){
alert("支付完成!");
}else{
alert(res.err_msg);
}
}
);
參數說明:
appid 公衆號的appid
timeStamp 時間戳
nonceStr 隨機字符串
prepay_id 步驟3獲取的prepay_id
signType 默認MD5
paySign 參數簽名
簽名參考如下
var stringSignTemp="appId=wxd0030975ff3fb970"+
"&nonceStr="+nonceStr+
"&package=prepay_id="+prepay_id+
"&signType=MD5"+
"&timeStamp="+timestamp+
"&key=3d3d43eff711172a774101a26ae1b16b";
//key微信商戶平臺(pay.weixin.qq.com) → 賬戶設置 → API安全→ 密鑰設置
var sign =hex_md5(stringSignTemp).toUpperCase();