web 支付

（一）目前支付有兩種主流方式

1. 支付寶支付    2. 微信支付

（二）微信支付

1. 微信支付

微信支付分為多種情況 

（1）付款碼支付

付款碼支付是指使用者展示微信錢包內的“付款碼”給商戶系統掃描後直接完成支付

（2）小程式支付

小程式支付是指商戶通過呼叫微信支付小程式支付介面，在微信小程式平臺內實現支付功能；使用者開啟商家助手小程式下單，輸入支付密碼並完成支付後，返回商家小程式

（3）APP支付

APP支付是指商戶通過在移動端應用APP中整合開放SDK調起微信支付模組來完成支付。適用於在移動端APP中整合微信支付功能的場景。

（4）H5支付

H5支付是指商戶在微信客戶端外的移動端網頁展示商品或服務，使用者在前述頁面確認使用微信支付時，商戶發起本服務呼起微信客戶端進行支付。主要用於觸屏版的手機瀏覽器請求微信支付的場景。可以方便的從外部瀏覽器喚起微信支付。

（5）刷臉支付

刷臉支付是指使用者在刷臉裝置前通過攝像頭刷臉、識別身份後進行的一種支付方式，安全便捷。

 

微信支付接入入文件：https://pay.weixin.qq.com/wiki/doc/api/index.html，選擇接入的型別，主要看 API列表 和 支付實踐

呼叫微信介面支付的時候，需要前置條件，比如 註冊微信公眾平臺、商戶號等等

（三）呼叫支付介面

url 介面連結是 微信已經給出的，現在要做的就是 將相應的引數整理好傳過去 引數值用XML轉義即可

const reqData =  `
<xml>
  <appid>${公眾賬號ID}</appid>
  <mch_id>${商戶號}</mch_id>
  <nonce_str>${隨機字串}</nonce_str>
  <notify_url>${通知地址}</notify_url>
  <openid>${使用者標識}</openid>
  <out_trade_no>${商戶訂單號}</out_trade_no>
  <spbill_create_ip>${終端IP}</spbill_create_ip>
  <total_fee>${標價金額}</total_fee>
  <trade_type>${交易型別}</trade_type>
  <sign>${簽名}</sign>
</xml>`

// 訂單總金額，單位為分

以上就是模擬的傳引數資料，其中比較複雜的是簽名演算法，通過簽名演算法生成簽名

簽名演算法規則：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=4_3

使用 axios 發起請求的時候，需要指定

Content-type: 'application/xml'

然後就傳送請求 獲取結果就行了,返回的結果是xml 格式的 比如這種

<xml>
   <return_code><![CDATA[SUCCESS]]></return_code>
   <return_msg><![CDATA[OK]]></return_msg>
   <appid><![CDATA[wx2421b1c4370ec43b]]></appid>
   <mch_id><![CDATA[10000100]]></mch_id>
   <nonce_str><![CDATA[IITRi8Iabbblz1Jc]]></nonce_str>
   <openid><![CDATA[oUpF8uMuAJO_M2pxb1Q9zNjWeS6o]]></openid>
   <sign><![CDATA[7921E432F65EB8ED0CE9755F0E86D72F]]></sign>
   <result_code><![CDATA[SUCCESS]]></result_code>
   <prepay_id><![CDATA[wx201411101639507cbf6ffd8b0779950874]]></prepay_id>
   <trade_type><![CDATA[JSAPI]]></trade_type>
</xml>

我們需要把 xml 轉化成 js 格式的，來獲取欄位

xml 轉化成 js 需要藉助外掛: xml2js

（四）生成支付二維碼

如果 以支付介面返回欄位 return_code 和 result_code 不都是 success，就提示使用者 支付失敗資訊

如果 return_code 和 result_code 都為SUCCESS的時候，會返回一個 code_url，二維碼連結

二維碼生成外掛：qrcode.js （引入生成二維碼）

（五）支付成功通知

https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_7&index=8

商戶系統對於支付結果通知的內容一定要做簽名驗證，介面返回的簽名和傳入的簽名呢是否一致！！

並校驗返回的訂單金額是否與商戶側的訂單金額一致，防止資料洩漏導致出現“假通知”，造成資金損失。

如果 全都校驗通過，則改變訂單狀態~