微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

2017-04-06|HiShop
導(dǎo)讀:微信公眾號(hào)開發(fā),公眾號(hào)支付開發(fā)教程 ,本文主要講解微信支付的開發(fā)流程,相關(guān)業(yè)務(wù)基于MAGICODES.WECHAT.SDK實(shí)現(xiàn)。通過本篇教程,您可以很方便的快速完成微信公眾號(hào)支付的開發(fā)。 微信...

  微信公眾號(hào)開發(fā),公眾號(hào)支付開發(fā)教程,本文主要講解微信支付的開發(fā)流程,相關(guān)業(yè)務(wù)基于MAGICODES.WECHAT.SDK實(shí)現(xiàn)。通過本篇教程,您可以很方便的快速完成微信公眾號(hào)支付的開發(fā)。

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

  微信公眾號(hào)支付

  用戶已有商城網(wǎng)址,用戶通過微信消息、微信掃描二維碼、微信自定義菜單等操作在微信內(nèi)打開網(wǎng)頁時(shí),可以調(diào)用微信支付完成下單購(gòu)買流程。
 

  支付流程

  微信的支付流程圖太復(fù)雜,這里我畫了一個(gè)相對(duì)簡(jiǎn)單的:

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  開發(fā)實(shí)踐

  開發(fā)流程圖

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  配置微信支付授權(quán)目錄

  首先,需要登錄公眾號(hào)后臺(tái),然后進(jìn)入【微信支付】頁面

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  設(shè)置【開發(fā)配置】

  發(fā)起支付的頁面目錄必須與設(shè)置的精確匹配。并將支付鏈接發(fā)到對(duì)應(yīng)的公眾號(hào)會(huì)話窗口中才能正常發(fā)起支付測(cè)試。注意正式目錄一定不能與測(cè)試目錄設(shè)置成一樣,否則支付會(huì)出錯(cuò)。

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  注意:如果是使用測(cè)試目錄的地址,一定要記得把個(gè)人測(cè)試微信號(hào)添加到白名單。另外,請(qǐng)注意紅框內(nèi)說明,否則很容易掉坑里。

  配置OAUTH域名以及JSSDK

  使用微信支付,需要通過OAUTH獲取用戶的OPENID,因?yàn)橐{(diào)用JS API,那么JSSDK授權(quán)也是需要的。

  相關(guān)配置界面如下:

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  引用Magicodes.WeChat.SDK并且注冊(cè)相關(guān)配置

  Magicdoes.WeChat.SDK可以通過Nuget包來引用,引用之后,需要先做一些初始化設(shè)置。

  初始化SDK配置

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  這里初始化了SDK配置,并且注冊(cè)了相關(guān)函數(shù)。比如獲取支付配置函數(shù),這里可以編寫自己的獲取支付配置的邏輯。

  如果是使用Magicodes.WeiChat或者是Magicodes.Shop,那么可以在相關(guān)設(shè)置界面設(shè)置微信支付相關(guān)參數(shù),如下所示:

  設(shè)置微信配置

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  打開Magicodes.WeiChat設(shè)置界面,配置微信支付相關(guān)參數(shù)。支付配置模型如下所示:

  public interface IWeChatPayConfig

  {

  ///

  /// 證書相對(duì)路徑

  ///

  string PayCertPath { get; set; }

  ///

  /// 證書密鑰(與微信商戶平臺(tái)商戶MchID一致)

  ///

  string CertPassword { get; set; }

  ///

  /// 支付密鑰

  ///

  string TenPayKey { get; set; }

  ///

  /// 商戶Mch_ID

  ///

  string MchId { get; set; }

  ///

  /// 支付完成后的回調(diào)處理頁面

  ///

  string Notify { get; set; }

  }

  添加支付頁,設(shè)置支付參數(shù)

  在開始支付之前,我們需要?jiǎng)?chuàng)建一個(gè)支付頁。并且生成支付相關(guān)參數(shù),如下面代碼所示:

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  關(guān)于OPENID的獲取,Magicodes.WeiChat可以通過在Action上添加[WeChatOAuth]來獲取粉絲信息,包括OPENID。

  調(diào)用JS Api進(jìn)行支付

  微信頁面,我們需要編寫業(yè)務(wù)邏輯并調(diào)用JS API進(jìn)行支付,相關(guān)JS代碼如下所示:

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  注意:調(diào)用JS api需要JSSDK權(quán)限。Magicodes.WeiChat用戶只需使用"ViewBag.UseJSSDK=true"即可啟用并注冊(cè)JSSDK權(quán)限。

  然后,我們只需要綁定JS按鈕事件即可,如:

  $('#btnPay').on('click',function(){

  callpay();

  });

  接收微信服務(wù)器事件通知,處理支付業(yè)務(wù)

  微信支付完畢后,微信服務(wù)器會(huì)異步通知我們的Web服務(wù)器,通知地址我們?cè)谏厦娴闹Ц杜渲弥幸呀?jīng)配置過了。

  使用Magicodes.WeChat.SDK的話,處理起來比較簡(jiǎn)單,相關(guān)關(guān)鍵代碼如下所示:

  

微信公眾號(hào)開發(fā) 微信支付開發(fā)教程

 

  在支付成功的函數(shù)中,我們可以編寫成功邏輯,比如訂單狀態(tài)的變更,支付日志的記錄等等。

  至此,整個(gè)微信公眾號(hào)開發(fā)均已完成。

  以上就是公眾號(hào)支付開發(fā)教程,希望這篇文章對(duì)大家有所幫助!如果想繼續(xù)了解相關(guān)微信素材文章,可以繼續(xù)關(guān)注Hi商學(xué)院!

TAGS: