前端工程師在實現支付功能的時候能作些什麼（V客學院技術分享）？

    如今最流行的兩種支付微信支付和支付寶支付，在平常開發的過程當中確定離不開支付功能的開發，有不少人第一次接觸時會有些措手不及。

一.業務邏輯 (電商平臺爲例子)   

    支付大部分用在電商平臺，各類打賞，遊戲充值等等，只要涉及到支付，就必定會有訂單邏輯：

    1.用戶選擇產品後進入提交訂單流程 ----> 生成訂單 （待付款）

    2.生成訂單後進入支付流程 --->選擇支付方式（支付或者微信）

    3.喚起對應的支付應用程序，用戶確認金額並支付，支付成功後 ----->完成訂單 (已付款)；

    在這個過程當中，前端工程師能幹什麼？

二.前端開發部分

    業務邏輯第1階段，前端部分可能根據用戶的選擇的產品，生成對應的訂單信息（商品信息，收穫地址等）並選擇優惠，最終確認最後應該支付的總金額，

注意，由於安全性的緣由，前端算出來的總支付金額，只是給用戶確認的，最後支付金額確定是由後端算出來的，而後先後兩端金額對比無誤後，進入也邏輯第2階段，支付階段。

    這個時候須要前端去選擇並喚起支付程序（微信或支付寶），而後經過微信或者支付的提供的對應API，喚起支付

三.微信支付

    準備階段：無論是網頁支付，小程序支付，仍是APP支付，必需要先確認一個收錢的人，微信商戶平臺，商戶平臺是和微信公衆號（審覈已經過）綁定使用，有已審覈的公衆號才能開通商戶平臺，申請過程按微信提供的順序走就能夠了，申請好後，對應的配置由後端完成，畢竟前端部分代碼用戶很容易看到，不安全。

   公衆號網頁端喚起支付的方式:

   1.引入js-sdk 文件 (進入下載)

  2. 監聽微信js-sdk 初始化成功事件

     

  3.在適當場合喚起支付

     

     詳細參數說明參考微信官方文檔 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

     小程序支付: （參數說明：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.html）

     微信小程序由於是微信本身的生態系統，不須要單獨引入JS-SDK，直接調用wx提供的api方法

wx.requestPayment({
  timeStamp: '',
  nonceStr: '',
  package: '',
  signType: 'MD5',
  paySign: '',
  success (res) { },
  fail (res) { }
})

     HTML5+ 微信支付

     1.在manifest.json中配置對應的微信開放平臺APP ID

     

 

    2. 檢查支付是否已配置或是否配置正確，正確則返回對應支付通道，"alipay" - 表示支付寶； "wxpay" - 表示微信支付

plus.payment.getChannels( function(s){
        channels = s;
}, function(e){
        alert( "獲取支付通道列表失敗："+e.message );
});

   3.喚起支付

// 必須從業務服務器獲取支付信息
var statement = "...";
plus.payment.request(c, statement, function(){
        alert("支付操做成功！");
}, function(e){
        alert("支付失敗："+e.message);
} );

    c爲支付通道，由第二步得到，statement由服務端提供的支付信息，一般是一個包含訂單信息和支付成功回調的連接地址

    H5+支付API文檔地址 http://www.html5plus.org/doc/zh_cn/payment.html#plus.payment.request

四:支付寶支付

    準備階段：須要申請支付寶交易號，和微信商戶號同理

    支付寶H5支付：

    1.引入支付寶js-sdk  <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>

    2.執行喚起支付寶代碼：支付寶API地址 http://myjsapi.alipay.com/jsapi/native/trade-pay.html

<h1>點擊如下按鈕喚起收銀臺支付</h1>
<a href="javascript:void(0)" class="btn tradenoPay">支付寶交易號喚起支付</a>
<script>
function ready(callback) {
  // 若是jsbridge已經注入則直接調用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 若是沒有注入則監聽注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(){
  document.querySelector('.tradeno').addEventListener('click', function() {
    AlipayJSBridge.call("tradePay", {
      tradeNO: "201802282100100427058809844"
    }, function(result) {
      alert(JSON.stringify(result));
    });
  });
});
</script>

    支付寶H5+支付 同微信支付相似，而且默認不須要配置，鉤上便可，調用方式同微信同樣

 

（php開發,web前端，ui設計，vr開發專業培訓機構，v客學院版權全部，轉載請註明出路，謝謝！！！）