web開發(fā)中的支付寶支付和微信支付

支付寶支付分為支付寶app內(nèi)的網(wǎng)頁支付和app外(即普通瀏覽器)網(wǎng)頁支付绍妨,
同樣微信支付也分為微信app內(nèi)的支付(在這里叫公眾號支付)和app外的支付(微信H5支付)
還有一種微信公眾號的支付寶支付

1.支付寶H5支付

官方文檔 (進入螞蟻金服開放平臺叽赊,文檔中心-開發(fā)文檔-全部內(nèi)容-全部文檔-手機網(wǎng)站支付): https://docs.open.alipay.com/203/105288/
文檔下面還有一個 “手機網(wǎng)站支付轉(zhuǎn)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没佑,通過下面的代碼去調(diào)起支付

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

這種方式在支付寶本地網(wǎng)頁也支持,但有一個問題温赔,調(diào)起支付后蛤奢,用戶中途取消支付,會整個網(wǎng)頁一起關(guān)閉退出陶贼。
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

支付寶本地網(wǎng)頁建議使用支付寶本地開發(fā)文檔中的支付方式啤贩,見下面

2.支付寶瀏覽器支付

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

image.png

image.png

我用的是第二種方式,orderStr由后端接口返回拜秧,前端直接調(diào)用文檔里這段代碼即可

function ready(callback) {
  // 如果jsbridge已經(jīng)注入則直接調(diào)用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果沒有注入則監(jiān)聽注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(){
    AlipayJSBridge.call("tradePay", {
      orderStr:orderStr
    }, function(result) {
      alert(JSON.stringify(result));
    });
});

將上述代碼封裝

//支付寶瀏覽器支付
function ready(callback) {
      // 如果jsbridge已經(jīng)注入則直接調(diào)用
    if (window.AlipayJSBridge) {
          callback && callback();
    } else {
      // 如果沒有注入則監(jiān)聽注入的事件
      document.addEventListener('AlipayJSBridgeReady', callback, false);
    }
}

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

調(diào)用

util.alipayApp(res.data.data,function(result){
  //這里可做一些支付結(jié)果判斷和跳轉(zhuǎn)
})
3.微信公眾號支付

微信瀏覽器內(nèi)調(diào)起微信支付
有兩種方式

3.1 微信內(nèi)置js對象 WeixinJSBridge

官方文檔 https://pay.weixin.qq.com/wiki/doc/api/index.html 點擊公眾號支付-微信內(nèi)H5調(diào)起支付

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公眾號名稱痹屹,由商戶傳入     
         "timeStamp":"1395712654",         //時間戳,自1970年以來的秒數(shù)     
         "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();
}

參數(shù)由后端接口提供
將上述代碼進行封裝:


//微信瀏覽器支付
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)
       }
   ); 
  }

調(diào)用:

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

     } 
})
3.2引入微信jssdk調(diào)用里面的內(nèi)置方法發(fā)起支付

這種比較麻煩,沒試過聊替,有興趣可看一下
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地址進行跳轉(zhuǎn)就可以了佃牛。

//在調(diào)起支付的頁面監(jiān)聽從其他頁面返回的事件淹辞,進行頁面刷新等
document.addEventListener("visibilitychange", function() {
    //
});
5.微信公眾號的支付寶支付

vue實現(xiàn)-微信網(wǎng)頁中喚起支付寶支付
(后面會寫一下銀聯(lián)支付)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市俘侠,隨后出現(xiàn)的幾起案子象缀,更是在濱河造成了極大的恐慌,老刑警劉巖爷速,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件央星,死亡現(xiàn)場離奇詭異,居然都是意外死亡惫东,警方通過查閱死者的電腦和手機莉给,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來廉沮,“玉大人颓遏,你說我怎么就攤上這事≈褪保” “怎么了叁幢?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長坪稽。 經(jīng)常有香客問我曼玩,道長鳞骤,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任黍判,我火速辦了婚禮豫尽,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘顷帖。我一直安慰自己美旧,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布窟她。 她就那樣靜靜地躺著陈症,像睡著了一般蔼水。 火紅的嫁衣襯著肌膚如雪震糖。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天趴腋,我揣著相機與錄音吊说,去河邊找鬼。 笑死优炬,一個胖子當(dāng)著我的面吹牛颁井,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蠢护,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼雅宾,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了葵硕?” 一聲冷哼從身側(cè)響起眉抬,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎懈凹,沒想到半個月后蜀变,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡介评,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年库北,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片们陆。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡寒瓦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出坪仇,到底是詐尸還是另有隱情孵构,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布烟很,位于F島的核電站颈墅,受9級特大地震影響蜡镶,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜恤筛,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一官还、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧毒坛,春花似錦望伦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至豪直,卻和暖如春劣摇,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背弓乙。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工末融, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人暇韧。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓勾习,卻偏偏與公主長得像,于是被迫代替她去往敵國和親懈玻。 傳聞我的和親對象是個殘疾皇子巧婶,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361