前端工程师在实现支付功能的时候能做些什么(V客学院技术分享)?

时间:2024-04-16 16:12:38

    现在最流行的两种支付微信支付支付宝支付,在日常开发的过程中肯定离不开支付功能的开发,有很多人第一次接触时会有些措手不及。

一.业务逻辑 (电商平台为例子)   

    支付大部分用在电商平台,各种打赏,游戏充值等等,只要涉及到支付,就一定会有订单逻辑:

    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客学院版权所有,转载请注明出路,谢谢!!!)