码迷,mamicode.com
首页 > 微信 > 详细

【zhifu】web开发中的支付宝支付和微信支付

时间:2019-08-19 11:27:52      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:llb   ocs   回调函数   ram   github   通过   就是   支付宝支付   pil   

一、支付类型:

支付宝支付:
    支付宝app内的网页支付;
    app外(即普通浏览器)网页支付; 微信支付:
    微信app内的支付(在这里叫公众号支付)
    app外的支付(微信H5支付);     微信公众号的支付宝支付;

二、微信内支付

微信浏览器内调起微信支付也就是微信公众号支付
有2种实现方式

1.使用微信的内置js对象 WeixinJSBridge(本人使用的此方法)交易类型:jsapi

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)
       }
   ); 
  }

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

2-1.在入口引入jssdk文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>

2-2.引入jssdk文件后权限验证

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: ‘‘, // 必填,企业号的唯一标识,此处填写企业号corpid
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: ‘‘, // 必填,生成签名的随机串
    signature: ‘‘,// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

2-3.通过相应的api验证权限是否注入成功

wx.ready(function(){
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,
所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});

 2-4.验证成功后jssdk里面的API接口就能够调用了,里面有支付相关的接口

wx.chooseWXPay({  
    appId: ‘wx23841cce7185b550‘,  
    timestamp: ‘1461300911‘, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符  
    nonceStr: ‘5719aeafb587f‘, // 支付签名随机串,不长于 32 位  
    package: ‘prepay_id=wx20160422125512b7d2205c9c0913643939‘, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)  
    signType: ‘MD5‘, // 签名方式,默认为‘SHA1‘,使用新版支付需传入‘MD5‘  
    paySign: ‘5DAB1DDABE1AD34E8FF3386AE971B727‘, // 支付签名  
    success: function(res) {  
        // 支付成功后的回调函数  
        if (res.errMsg == "chooseWXPay:ok") {  
            //支付成功  
            alert(‘支付成功‘);  
        } else {  
            alert(res.errMsg);  
        }  
     },  
    cancel: function(res) {  
        //支付取消  
        alert(‘支付取消‘);  
        }  
    });  

                    

3.判断微信环境

3-1 是否为微信浏览器

原理:判断 ua 中是否有字段 “micromessenger"

代码

var userAgent = navigator.userAgent.toLowerCase();
var isWechat = userAgent.match(/micromessenger/i) == "micromessenger";

或者

function isWechat () {
  var ua = window.navigator.userAgent.toLowerCase()
  if (ua.indexOf(‘micromessenger‘) > -1) {
    return true
  }
  return false
}

3-2 判断是否是微信的PC端

var userAgent = navigator.userAgent.toLowerCase();
var isWechat = userAgent.match(/micromessenger/i) == "micromessenger";
var isWindowsWechat = isWechat && userAgent.match(/windows/i) == "windows";

三 、微信h5支付(交易类型mweb)

前端只需拿到后台返回的mweb_url后进行跳转

效果图:

https://www.cnblogs.com/websmile/p/11165144.html

 四、PC端微信支付(交易类型native)

1、前端只需展示后台返回的支付二维码
2、定时的去查询订单接口 支付成功后页面跳转或者其他操作

 案例1:唯品会

技术图片

 

 技术图片

 案例2:京东支付

技术图片

 

 技术图片

 

五、pc端支付宝支付

后台会返回一个form表单  前端在窗口打开就行(使用的document.write(‘form表单’))                                                

 效果:

技术图片

 

六、支付宝内支付

http://myjsapi.alipay.com/jsapi/index.html

 七、微信公众号的支付宝支付

https://www.jianshu.com/p/9e8dba48b628

 

 

 相关资料:

【zhifu】web开发中的支付宝支付和微信支付

标签:llb   ocs   回调函数   ram   github   通过   就是   支付宝支付   pil   

原文地址:https://www.cnblogs.com/websmile/p/11052632.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!