現在最流行的兩種支付微信支付和支付寶支付，在日常開發的過程中肯定離不開支付功能的開發，有很多人第一次接觸時會有些措手不及。

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

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

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

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

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

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

二.前端開發部分

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

注意，因為安全性的原因，前端算出來的總支付金額，只是給使用者確認的，最後支付金額肯定是由後端算出來的，然後前後兩端金額對比無誤後，進入也邏輯第2階段，支付階段。

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

三.微信支付

    準備階段：

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

   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客學院版權所有，轉載請註明出路，謝謝！！！）