阅读 302

Vue项目H5微信支付(js-sdk)和支付宝支付功能

这是我参与8月更文挑战的第4天,活动详情查看:8月更文挑战

博主相关个人技术博客、微信公众号、视频号、设计作品集

1、获取内置浏览器标识

微信:
export function isWeixin() {
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }
    return false;
}
复制代码
支付宝:
export function isAlipay() {
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/Alipay/i) == "alipay"){
        return true;
    }
    return false;
}
复制代码

2、methods(数据处理)

couponOrder接口返回  (调用支付前 接口返回所需的支付参数信息)

微信支付(两种方法):

1、JSAPI支付:在微信支付菜单栏中,有一个使用教程。里面有一个使用JS API发起支付请求的小菜单

WeixinJSBridge.invoke()

  • WeixinJSBridge 内置对象在其他浏览器中无效。
  • getBrandWCPayRequest 参数以及返回值定义
WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
        'appId': response.appId,   // 公众号id
        'timeStamp': response.timeStamp,  // 当前的时间戳
        'nonceStr': response.nonceStr, // 支付签名随机字符串
        'package': response.package,  // 订单详情扩展字符串,prepay_id=****
        'signType': response.signType,  // 签名类型,默认为MD5
        'paySign': response.paySign  // 支付签名
    },
    (res2)=>{
        if (res2.err_msg === 'get_brand_wcpay_request:ok') {
            this.toSuccess(code, payMoney, payTool);                     
        } else if (res2.err_msg === 'get_brand_wcpay_request:fail') {
            MessageBox('错误提示', "支付失败");
        }else if (res2.err_msg === 'get_brand_wcpay_request:cancel') {
            MessageBox('错误提示', "支付失败");
        }
    }
);
复制代码

参考文档:pay.weixin.qq.com/wiki/doc/ap…

2、 微信JS-SDK说明文档发起微信支付的请求API

wx.chooseWXPay()  需签名后调用

wx.chooseWXPay({
    timestamp: 0,  // 支付签名时间戳,
    nonceStr: '',  // 支付签名随机字符串,不长于 32 位
    package: '',   // 订单详情扩展字符串
    signType: '',  // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
    paySign: '',  // 支付签名
    success: function (res) {
        // 支付成功后的回调函数
    }
});
复制代码

支付宝支付 AlipayJSBridge.call

AlipayJSBridge.call("tradePay", {
    orderStr: response.ali  
}, (result)=>{
    let resultCode = result.resultCode;
    // alert(JSON.stringify(result))
    if(resultCode == "9000") {
           this.toSuccess(code, payMoney, payTool);        
     }else if(resultCode == "4000"){ 
            MessageBox('错误提示', "支付失败");
     }else if(resultCode == "6001"){
       MessageBox('错误提示', "支付取消");
   }
})
复制代码

参考文档: myjsapi.alipay.com/jsapi/nativ…


文章分类
前端
文章标签