H5在(支付宝和微信环境)使用支付

首先是在支付宝浏览器环境   使用支付宝支付

参考链接 https://myjsapi.alipay.com/jsapi/native/trade-pay.html 

支付宝订单字符串唤起支付  调用支付宝浏览器环境内置Api  window.AlipayJSBridge.call("tradePay"

window.AlipayJSBridge.call("tradePay", {
orderStr: dataList.message.orderStr  //  支付订单信息
}, function(result) {
// 支付成功回调判断   
if(result.resultCode == 9000) {
uni.navigateTo({
url:'/pages/pay_order/succee?price=' + that.orderInfo.total
})
}else {
 console.log('支付失败')
}
});

H5 微信支付  这里使用是的   jsApi    WeixinJSBridge.invoke

不需要通过wx.config配置接口信息,在微信浏览器内,可以直接使用

// 下面是解决WeixinJSBridge is not defined 报错的方法
//wxInfo 是掉后台接口获取的支付配置信息

                             let that = this  if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档 if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(wxInfo), false) } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(wxInfo)) document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(wxInfo)) } } else { // alert("225",JSON.stringify(data)) that.onBridgeReady(wxInfo,that.realPrice) }

  

			// 微信支付
			onBridgeReady (data) {
			  let that = this
			  WeixinJSBridge.invoke(
				'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
				  'appId': data.appId, // 公众号名称,由商户传入
				  'timeStamp': data.timeStamp, // 时间戳
				  'nonceStr': data.nonceStr, // 随机串
				  'package': data.package, // 预支付id
				  'signType': data.signType, // 微信签名方式
				  'paySign': data.paySign // 微信签名
				},
				function (res) {
				// 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
				  if (res.err_msg =="get_brand_wcpay_request:ok") {
					  uni.showToast({
						  title: '支付订单成功',
						  icon: 'none'
					  });
					  uni.navigateTo({
					  	url:'/pages/pay_order/succee?price=' + that.orderInfo.total
					  })
				  } else {
					alert('支付失败')
				  }
				}
			  )
			},

 支付宝支付  这里后台返回form表单  将接口返回的form表单显示到页面

                        document.querySelector('body').innerHTML = dataList.data.aliPaySign.form
                        //调用submit方法
                        document.forms[0].submit()
               支付完成以后,需要后台设置回调地址,跳回我们这边的成功界面

 

posted @ 2022-06-29 11:14  live丶  阅读(2107)  评论(0编辑  收藏  举报