vue实现H5支付（微信，支付宝）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue实现H5支付（微信，支付宝）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.判断浏览器是微信还是支付宝或其他浏览器
2.微信浏览器调用微信支付的方法（调用后台接口创建订单，需要微信用户唯一标识openid；接口返回微信支付所需的支付参数）
3.支付宝浏览器支付方法文章来源地址https://www.toymoban.com/news/detail-595779.html

//支付
payBtn() {
	var ua = navigator.userAgent.toLowerCase();
	var isWeixin = ua.indexOf('micromessenger') != -1;
	var isAlipay = ua.indexOf('alipayclient')  != -1;
	if (isWeixin) { //判断当前环境是否是微信浏览器
		//是微信浏览器   调用公众号支付 
		let data = {
			其他参数与后台协商
			openid: 唯一标识,
		}
		createOrder(data).then((res) => {
			if (res.status == 200) {
				// console.log(res.data) 接口返回微信所需支付参数
				let data = {}
				if(res.message == "您还有待支付的订单"){
					data = res.data.pay_info;
				}else{
					data = res.data;
				}
				this.wxpayOrder(data);
			} else {
				Toast.fail(res.message);
			}
		}).catch((res) => {
			Toast.fail("请稍后重试");
		});
	} else if(isAlipay){
		// 其他浏览器  ，直接调用支付接口
		this.alipay()
		// Toast.fail("支付宝");
	}else {
		Toast.fail("请使用微信或支付宝浏览器");
	}

},
// 支付宝支付  请求接口，返回支付宝支付链接，跳转
alipay(){
	let data = {
		与后台约定支付参数
	}
	createOrder(data).then((res) => {
		if (res.status == 200) {
			var url = res.data.qrcode_url;
			window.location.href = url;
		} else {
			Toast.fail(res.message);
		}
	}).catch((res) => {
		Toast.fail("请稍后重试");
	});
},


// 微信支付
wxpayOrder(data) {
	console.log(111)
	let payParam = {
		appId: data.appId,
		nonceStr: data.nonceStr,
		package: data.package,
		timeStamp: data.timeStamp,
		signType: data.paySign,
		paySign: data.paySign,
	}
	if (typeof WeixinJSBridge === 'undefined') {
		if (document.addEventListener) {
			document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(payParam), false)
		} else if (document.attachEvent) {
			document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(payParam))
			document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(payParam))
		}
	} else {
		this.onBridgeReady(payParam)
	}
},
onBridgeReady(e) {
	let that = this
	console.log(e)
	let etr = {
		'appId': e.appId, // 公众号名称，由商户传入
		'timeStamp': e.timeStamp, // 时间戳，自1970年以来的秒数
		'nonceStr': e.nonceStr, // 随机串
		'package': e.package,
		'signType': e.paySign, // 微信签名方式：
		'paySign': e.paySign // 微信签名
	}
	WeixinJSBridge.invoke( //这个对象只有微信浏览器支持
		'getBrandWCPayRequest', etr,
		function(res) {
			if (res.err_msg == 'get_brand_wcpay_request:ok') {
				Toast('支付成功')
				setTimeout(function() {  //支付成功后的展示页面
					that.$router.push({
						path: "/homeIndex",
					});
				}, 1500)
			} else {
				Toast('支付失败：' + res.err_msg)
			}
		})
},

到了这里，关于vue实现H5支付（微信，支付宝）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！