web开发中的支付宝支付和微信支付

支付宝支付分为支付宝app内的网页支付和app外(即普通浏览器)网页支付，
同样微信支付也分为微信app内的支付(在这里叫公众号支付)和app外的支付(微信H5支付)
还有一种微信公众号的支付宝支付

1.支付宝H5支付

官方文档（进入蚂蚁金服开放平台，文档中心-开发文档-全部内容-全部文档-手机网站支付）： https://docs.open.alipay.com/203/105288/
文档下面还有一个 “手机网站支付转Native支付”，有兴趣可以研究一下。

后端会返回一段表单代码，如下这样：

<form id='alipaysubmit' name='alipaysubmit' action='https://openapi.alipay.com/gateway.do?charset=UTF-8' method='POST'><input type='hidden' name='biz_content' value='{"productCode":"QUICK_WAP_PAY","subject":"橙园24°","out_trade_no":"201807201006587430","total_amount":0.01,"timeout_express":"1m"}'/><input type='hidden' name='app_id' value='2018070760510577'/><input type='hidden' name='version' value='1.0'/><input type='hidden' name='format' value='json'/><input type='hidden' name='sign_type' value='RSA2'/><input type='hidden' name='method' value='alipay.trade.wap.pay'/><input type='hidden' name='timestamp' value='2018-07-20 10:06:59'/><input type='hidden' name='alipay_sdk' value='alipay-sdk-php-20161101'/><input type='hidden' name='notify_url' value='http://orange24.msqsoft.net/index.php/api/Order/orderAliPayNotify'/><input type='hidden' name='return_url' value='http://orange24.msqsoft.net/index.html#/app/orders?index=0'/><input type='hidden' name='charset' value='UTF-8'/><input type='hidden' name='sign' value='ioGI8wwaP6L81+RpW6mdd9aprN5HtpB/JWaaXCx6wtGF0tZKinMFqt79z21wkdgu/ZiY4bYPe73Q6joS/vMe3i+n5AaCYB/6KgKQzy++En8nJZVi6OaNhnrFUH8LUNEfVHZXS25Agzu7zZ/QqP1mUizNsRnCT65G2lrhsK1wv7sfq1/FIggjiGYiqCE2KzQwaXp3McMTNS7mH2HcIkmAELx1U9EeU0RDM7veJjZObXndxim/zXojQ2e8nye8k9bwfgZAfnFR7zSGyw7kxyVTtsw/nT5p51bUxYRPpO7fjTWULQkZwS+kJ1jKDPKKBVxzxaNxF52i2NTORL/AdB1iWA=='/><input type='submit' value='ok' style='display:none;''></form><script>document.forms['alipaysubmit'].submit();</script>

前端用的是vue，通过下面的代码去调起支付

const div = document.createElement('div');
div.innerHTML = (res.data);  //res.data是返回的表单
document.body.appendChild(div);
document.forms.alipaysubmit.submit();

这种方式在支付宝本地网页也支持，但有一个问题，调起支付后，用户中途取消支付，会整个网页一起关闭退出。
https://openclub.alipay.com/read.php?tid=3981&fid=61&ant_source=zsearch
https://openclub.alipay.com/read.php?tid=423&fid=59&ant_source=zsearch

支付宝本地网页建议使用支付宝本地开发文档中的支付方式，见下面

2.支付宝浏览器支付

官方文档http://myjsapi.alipay.com/jsapi/index.html
找到快捷支付:http://myjsapi.alipay.com/jsapi/native/trade-pay.html

image.png

我用的是第二种方式，orderStr由后端接口返回，前端直接调用文档里这段代码即可

function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(){
    AlipayJSBridge.call("tradePay", {
      orderStr:orderStr
    }, function(result) {
      alert(JSON.stringify(result));
    });
});

将上述代码封装

//支付宝浏览器支付
function ready(callback) {
      // 如果jsbridge已经注入则直接调用
    if (window.AlipayJSBridge) {
          callback && callback();
    } else {
      // 如果没有注入则监听注入的事件
      document.addEventListener('AlipayJSBridgeReady', callback, false);
    }
}

function alipayApp(orderStr,callback){
  ready(function(){
      AlipayJSBridge.call("tradePay", {
        orderStr: orderStr
      }, function(result) {
         callback(result)
      });  
  });
}

调用

util.alipayApp(res.data.data,function(result){
  //这里可做一些支付结果判断和跳转
})

3.微信公众号支付

微信浏览器内调起微信支付
有两种方式

3.1 微信内置js对象 WeixinJSBridge

官方文档 https://pay.weixin.qq.com/wiki/doc/api/index.html 点击公众号支付-微信内H5调起支付

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
         "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信签名方式：     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
      },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      } 
   }); 
}
if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
}else{
   onBridgeReady();
}

参数由后端接口提供
将上述代码进行封装：


//微信浏览器支付
function wxpay(params,callback){
  if (typeof WeixinJSBridge == "undefined"){
     if( document.addEventListener ){
         document.addEventListener('WeixinJSBridgeReady', onBridgeReady(params,callback), false);
     }else if (document.attachEvent){
         document.attachEvent('WeixinJSBridgeReady', onBridgeReady(params,callback)); 
         document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(params,callback));
     }
  }else{
     onBridgeReady(params,callback);
  } 
}

function onBridgeReady(params,callback){
    var that = this
   WeixinJSBridge.invoke(
       'getBrandWCPayRequest', {
           "appId":params.appId,          
           "timeStamp":params.timeStamp,         
           "nonceStr":params.nonceStr, 
           "package":params.package,     
           "signType":params.signType, 
           "paySign":params.paySign 
       },
       function(res){  
          callback(res)
       }
   ); 
  }

调用：

util.wxpay(res.data.data,function(payResult){
 if(payResult.err_msg == "get_brand_wcpay_request:ok" ){

     } 
})

3.2引入微信jssdk调用里面的内置方法发起支付

这种比较麻烦，没试过，有兴趣可看一下
https://blog.csdn.net/huchangjiang0/article/details/79737491

4.H5微信支付

https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4官方文档也写的很清楚，后端返回一个url地址，前端的工作就是拿到这个url地址进行跳转就可以了。

//在调起支付的页面监听从其他页面返回的事件，进行页面刷新等
document.addEventListener("visibilitychange", function() {
    //
});

5.微信公众号的支付宝支付

vue实现-微信网页中唤起支付宝支付
(后面会写一下银联支付)