公眾號支付開發(fā)教程

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

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

  微信公眾號支付

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

  支付流程

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

  

公眾號支付開發(fā)教程

 

  開發(fā)實踐

  開發(fā)流程圖

  

公眾號支付開發(fā)教程

 

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

  首先,需要登錄公眾號后臺,然后進入【微信支付】頁面

  

公眾號支付開發(fā)教程

 

  

公眾號支付開發(fā)教程

 

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

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

  

公眾號支付開發(fā)教程

 

  

公眾號支付開發(fā)教程

 

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

  配置OAUTH域名以及JSSDK

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

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

  

公眾號支付開發(fā)教程

 

  

公眾號支付開發(fā)教程

 

  

公眾號支付開發(fā)教程

 

  

公眾號支付開發(fā)教程

 

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

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

  初始化SDK配置

  

公眾號支付開發(fā)教程

 

  

公眾號支付開發(fā)教程

 

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

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

  設(shè)置微信配置

  

公眾號支付開發(fā)教程

 

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

  public interface IWeChatPayConfig

  {

  ///

  /// 證書相對路徑

  ///

  string PayCertPath { get; set; }

  ///

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

  ///

  string CertPassword { get; set; }

  ///

  /// 支付密鑰

  ///

  string TenPayKey { get; set; }

  ///

  /// 商戶Mch_ID

  ///

  string MchId { get; set; }

  ///

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

  ///

  string Notify { get; set; }

  }

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

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

  

公眾號支付開發(fā)教程

 

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

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

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

  

公眾號支付開發(fā)教程

 

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

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

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

  callpay();

  });

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

  微信支付完畢后,微信服務(wù)器會異步通知我們的Web服務(wù)器,通知地址我們在上面的支付配置中已經(jīng)配置過了。

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

  

公眾號支付開發(fā)教程

 

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

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

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

TAGS: