关于实现uniapp项目支付宝支付功能

本文介绍了如何在uni-app中开启支付功能,特别是在manifest.json中配置Payment模块,并展示了使用uni.getProvider获取支付宝支付服务,结合后台接口发起支付请求,以及处理支付成功和失败的回调。请注意,真机环境是运行和调试的必要条件。
摘要由CSDN通过智能技术生成

首先在对项目开启支付功能,在项目的manifest.json文件中勾选APP模块配置中的Payment支付模块,并将需要的信息填写完整,如下图
在这里插入图片描述

然后直接上代码,先来看一张效果图:
在这里插入图片描述

定义一个按钮并绑定点击事件

<view class="btn">
	<button class="submit" @tap="deposit">立即支付</button>
</view>

下面是逻辑代码:

//支付宝支付
deposit() {
	const that = this;
	// 调用uniapp API uni.getProvider 获取服务供应商
	uni.getProvider({
		/* 获取服务类型,可选值如下:
		* @param share: 分享
		* @param oauth: 授权登录
		* @param push: 推送
		* @param payment: 支付类型
		*/
		service: 'payment',
		success: (res) => {
			/*
			* @ res.service 获取服务供应商 ==> 'payment'
			* @ res.provider 这里选择的是支付类型,所以包含["alipay","wxpay"]
			* ‘alipay’: 表示支付宝
			* ‘wxpay’: 表示微信
			*/
			// 检查res.provider中是否有 alipay
			if (res.provider.indexOf('alipay') != -1) {
				// 后台支付接口需要的一些参数
				let data = {
					id: that.id, // 订单id
					pay_type: that.pay_type // 用户选择的支付类型
				};
				//发起后台支付接口请求
				that.$api.payMonry(data).then(res => {
					// console.log('支付宝订单数据', res);
					//调用uniapp API uni.requestPayment 支付接口
					uni.requestPayment({
						//服务提供商 通过uni.getProvider获取
						provider: 'alipay',
						//后台返回的订单数据
						orderInfo: res.data.pay_result,
						//调用成功的回调
						success(res) {
							// console.log('success:' + res);
							setTimeout(() => {
								uni.reLaunch({
									url: `/pages/user/order/orderList?status=${that.status}&type=${that.type}`
								})
							}, 500)
						},
						//调用失败的回调
						fail(err) {
							console.log('fail:' + err);
						}
					})
				}
			}
		}
	})
}

注意:运行调试的话需要在真机环境下进行

评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值