微信如何實現JSAPI支付

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

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

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

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

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

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

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

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

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

接下來先看看JSAPI支付業(yè)務流程：

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

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

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

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

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

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

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

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

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

可以看到用戶openid成功獲取。然后我們?yōu)橛脩魟?chuàng)建預支付訂單，這邊只貼下關鍵代碼：

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

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

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

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

先實現下簽名生成算法：

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

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

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

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

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

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