支付分为前端发起支付,和后端发起支付两种方式

1.在前端发起支付,uniapp给我们提供好了,可以使用的api接口。

uni.requestPayment({
    provider: 'alipay',
    orderInfo: 'orderInfo', //微信、支付宝订单数据
    success: function (res) {
        console.log('success:' + JSON.stringify(res));
    },
    fail: function (err) {
        console.log('fail:' + JSON.stringify(err));
    }
});

具体使用方式请查看官方文档

2.后端发起支付
我们调用后端的接口,后端负责对接支付宝,或者微信的支付接口。基本支付宝和微信返回都是一个form表单,在h5端可以直接使用v-html表单form表单,但是这种方式不能在app中使用。我们要借助web-view实现。

web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。

//点击支付的时候,后端返回一个嵌套支付宝或者微信返回的form表单的一个html,把这个url赋值到web-view中
<web-view v-if="url.length > 0" :src="url"></web-view> 

我们如何判断用户的支付结果呢,因为是后端对接的支付宝或者微信的支付接口,返回接口只有后端能监控到。

//1.这里我们可以轮询查询后台接口,进而判断用户的支付结果(这种比较消耗服务器的性能)
//2.借助用web-view,后端监控到支付结果,返回一个html网页。(我们需要从web-view里面返回到自己的app,序需要用到web-vie和uniapp通讯)
//在返回的html中引入uniapp的js文件
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
//监听到uniapp的js文件引入成功了,引导用户返回app
document.addEventListener('UniAppJSBridgeReady', function() {
		let data = GetRequest()
	    document.querySelector('.btn-list').addEventListener('click', function(evt) { 
	    //跳转到支付成功或者失败的结果页面。
	        uni.navigateTo({
				  url: '/pages/orderDetail/orderDetail?orderId=' +  data.out_trade_no
			  })
	    });  
	});

最后说明:这只是本人自己的一些见解,有不足的地方,欢迎大家前来指正。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐