微信如何實現JSAPI支付

這篇文章主要介紹了微信如何實現JSAPI支付，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

        最近接到新的需求，需要在公眾號引入微信支付。之前微信支付方式使用過Native當面付以及H5支付。Native支付有兩個弊端所在：

        其一，Navicat支付最終會生成一個微信端鏈接，格式為：weixin://xxx，我們微信直接訪問鏈接沒毛病成功打開支付界面，但是支付的時候就報錯了：當前交易不支持點擊消息鏈接發起。

        其二：將支付鏈接轉化成二維碼掃碼支付。第二個弊端出現了，將圖片保存到本地通過微信掃描本地二維碼又報錯了：不支持從相冊中選擇二維碼。

        那H5支付有何弊端呢？H5支付在外部瀏覽器正常使用，會直接從外部瀏覽器跳轉到微信完成支付。在H5項目中我們一直正常使用H5微信支付，接到公眾號支付的時候第一反應直接使用H5支付，這樣用戶使用瀏覽器打開一樣可以使用微信支付，但是當我們支付接入才發現H5支付的弊端：只能在外部瀏覽器使用H5支付，在微信內無法使用微信支付。所以這時候最合適的支付方式就是JSAPI支付了。

        因為沒有接觸過公眾號開發，第一反應當然是先看看支付文檔：

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1

        直接根據文檔進行開發，首先前往微信商戶平臺設置支付目錄：

公眾號需要設置授權域名：

接下來先看看JSAPI支付業務流程：

服務端其實就是創建訂單，然后調用統一下單接口。這里我們看下統一下單接口文檔：

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

文檔中有個參數openid，對于這個參數文檔的解釋是：trade_type=JSAPI時（即JSAPI支付），此參數必傳，此參數為微信用戶在商戶對應appid下的唯一標識。

所以我們可以整理出整體的邏輯：

1.前端跳轉授權界面，用戶授權成功獲取到code后調接口換取用戶openid。2.服務端保存用戶預支付訂單。3.服務端調用統一下單接口，然后將參數返回給客戶端。4.客戶端調起支付，支付成功執行支付回調。

前端跳往授權界面，跳轉的參數要求我們可以看看：

這里參數需要注意的就是redirect_uri參數，用戶授權成功會跳轉到redirect_uri，后面會拼接code參數。redirect_uri必須是我們剛才設置的公眾號授權域名下的地址，并且需要經過urlEncode。

點擊授權后，調用接口用code換取用戶openid。貼下關鍵代碼：

通過本接口我們可以成功獲取到用戶的openid。我們可以測試下：

可以看到用戶openid成功獲取。然后我們為用戶創建預支付訂單，這邊只貼下關鍵代碼：

商品數據保存成功，調用統一下單接口取得統一下單接口返回的參數信息：

我們可以打印下返回的參數信息：

到這里只剩下最后一步客戶端發起支付，我們看下微信內H5調起支付的文檔：

首先先按照簽名加密規則將參數加密生成簽名paySign。加密算法規則如下：

先實現下簽名生成算法：

在用戶點擊微信支付按鈕的時候調用服務端接口創建預支付訂單并且返回統一下單接口參數給客戶端：

然后客戶端調起支付，WeixinJSBridge內置對象只會在微信瀏覽器內生效，所以在其他瀏覽器打開會報錯。貼下關鍵代碼：

我們可以測試是否能調起支付界面：

當我們完成支付的時候，微信服務器會異步執行我們統一訂單接口設置的回調方法，回調方法需要特別注意的是微信回調給微信端返回格式為xml格式：

當我們支付完成的同時，微信會給客戶端返回get_brand_wcpay_request:ok，客戶端可以直接在支付完成的時候跳轉到指定的界面，到這里成功完成JSAPI支付：

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信如何實現JSAPI支付”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!