【融職培訓】Web前端學習 第11章 微信開發5 微信支付

1、概述

若是須要實現微信支付功能，須要有一個已認證的微信服務號，而且開通微信支付，開通後微信會提供一個商戶ID。有了這個ID才能成功調用微信支付接口。

開通微信支付後，須要在微信支付後臺【產品中心】=>【開發配置】中配置【JSAPI支付受權目錄】和【Native支付回調連接】，以下圖所示：

微信支付能夠分爲兩種狀況，微信瀏覽器以外的掃碼支付（須要配置Native支付回調連接，支付完成後，微信服務器會調用這個連接，並傳入參數。）和微信瀏覽器以內直接支付（須要配置JSAPI支付受權目錄，只有這個域名下的連接才能調用支付接口）。兩種支付都須要調用【統一下單接口】。因此本節針對統一下單接口來分別講解如何實現這兩種支付方法。

1、統一下單接口

經過調用下面的統一下單接口，就能夠實現微信支付功能。

https://api.mch.weixin.qq.com/pay/unifiedorder

統一下單接口須要傳入的參數包括以下內容（如下爲必填項），而且參數要爲xml格式：

1. appid：公衆號id
2. body：商品描述
3. mch_id：商戶號id
4. nonce_str：隨機字符串
5. notify_url：異步接收微信支付結果通知的回調地址，通知url必須爲外網可訪問的url，不能攜帶參數。
6. openid：用戶標識
7. out_trade_no：商戶訂單號
8. spbill_create_ip：終端IP
9. total_fee：訂單總金額，單位爲分
10. trade_type：交易類型JSAPI 、NATIVE、APP
11. sign：簽名

獲取簽名的規則與以前JS-SDK的簽名規則相同，字段除了上述1-10十個字段外，還須要添加一個微信商戶後臺獲取的key（【帳戶中心】=》【API安全】獲取）

2、統一下單接口的返回值

交易類型爲【JSAPI】

返回的xml格式會包含一個prepay_id。而後將這個值傳遞給前端，再由前端調用jsapi完成支付，示例代碼以下所示：

 1 document.querySelector(".pay").onclick = function(){
 2     function onBridgeReady() {
 3         WeixinJSBridge.invoke(
 4             'getBrandWCPayRequest', {
 5                 "appId": `{{appId}}`, //公衆號名稱，由商戶傳入
 6                 "timeStamp": `{{timeStamp}}`, //時間戳，自1970年以來的秒數
 7                 "nonceStr": `{{nonceStr}}`, //隨機串
 8                 "package": `{{package}}`,
 9                 "signType": `{{signType}}`, //微信簽名方式：
10                 "paySign": `{{paySign}}` //微信簽名
11             },
12             function (res) {
13                 if (res.err_msg == "get_brand_wcpay_request:ok") {
14                     // 使用以上方式判斷前端返回,微信團隊鄭重提示：
15                     //res.err_msg將在用戶支付成功後返回ok，但並不保證它絕對可靠。
16                     location.href="/success"
17                 }
18             });
19     }
20     if (typeof WeixinJSBridge == "undefined") {
21         if (document.addEventListener) {
22             document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
23         } else if (document.attachEvent) {
24             document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
25             document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
26         }
27     } else {
28         onBridgeReady();
29     }
30 }

交易類型爲【NATIVE】

返回的結果包括一個code_url字段，將這個字段的值傳遞給前端，而後轉換成二維碼，用戶掃碼即刻完成支付。

3、完成支付

完成支付後，微信服務器會向notify_url的參數地址發送一個支付結果的消息。網站或公衆號程序能夠根據返回結果，自行處理支付完成後的業務邏輯。

 

【融職教育】在工做中學習，在學習中工做