前端工程師在實在支付功能的時候能做些什麼(V客學院技術分享)?
現在最流行的兩種支付微信支付和支付寶支付,在日常開發的過程中肯定離不開支付功能的開發,有很多人第一次接觸時會有些措手不及。
一.業務邏輯 (電商平臺為例子)
支付大部分用在電商平臺,各種打賞,遊戲充值等等,只要涉及到支付,就一定會有訂單邏輯:
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客學院版權所有,轉載請註明出路,謝謝!!!)