微信小程序实现拉卡拉支付

功能需求:拉卡拉支付(通过跳转拉卡拉平台进行支付),他人支付(通过链接进行平台跳转支付)

1.支付操作

//支付
const onCanStartPay = async (obj) => {
		uni.showLoading({
			mask: true
		})
      // 支付接口获取需要传参的数据
		const {
			data,
			code,
			message
		} = await payRequestApi(
			{
                // 单号
				orderNo: obj.oubOrderNo,
			}
		)
		uni.hideLoading()
		if (code === 200) {
            // data为一个跳转链接,他人支付就通过此接口返回链接跳转支付
			let counterUrl = data
            // uni底部弹出框
			uni.showActionSheet({
				itemList: ['立即支付', '他人支付'],
				success: res => {
					if (res.tapIndex === 0) {
                        // 立即支付唤起拉卡拉平台,实现拉卡拉支付
						lklPay(counterUrl,()=>{isOpenPay.value=true})
					} else {
                        // uni剪切板 剪切接口返回的跳转链接 
						uni.setClipboardData({
							data: counterUrl,//需要复制的剪切链接
							success: res => {
								uni.showToast({
									title: '复制成功',
									icon: 'success'
								})
							}
						})
					}
				}
			})
		} 
	}

2.拉卡拉平台支付代码封装

export const lklPay = (counterUrl,callBack) => {
	let appId = 'wx889424d565967811'; // 默认为:拉卡拉聚合收银台小程序的appId
	if (counterUrl.includes('q.huijingcai.top') || counterUrl.includes('q.lakala.com')) {
		appId = 'wxc3e4d1682da3053c' // 拉卡拉收款宝小程序appId
	}
	uni.navigateToMiniProgram({
		appId,
		path: `payment-cashier/pages/checkout/index?source=WECHATMINI&counterUrl=${
	        encodeURIComponent(counterUrl)
	    }`,
		envVersion: 'release',
		// release: 正式版  trial: 体验版
		success: (res) => {
			// 打开成功
			callBack&&callBack()
		},
		fail: res => {
			showModal('打开支付失败,请稍后再试')
		}
	})
}

3.代码结构引用

4.效果:

相关推荐
盛夏绽放9 小时前
微信小程序地图map全方位解析
微信小程序·小程序
初尘屿风12 小时前
基于微信小程序的电影院订票选座系统的设计与实现,SSM+Vue+毕业论文+开题报告+任务书+指导搭建视频
vue.js·微信小程序·小程序
paterWang13 小时前
基于SpringBoot的驾校报名小程序系统设计与实现(源码+文档)
spring boot·后端·小程序
EasyNVR14 小时前
EasyRTC:全平台支持与自研算法驱动的智能音视频通讯解决方案
运维·服务器·小程序·音视频·webrtc·p2p·智能硬件
韩召华20 小时前
微信小程序(uni)+蓝牙连接+Xprint打印机实现打印功能
微信小程序·小程序·notepad++
paterWang1 天前
基于 Spring Boot + 微信小程序的短文写作竞赛管理系统设计与实现(源码+文档)
spring boot·后端·微信小程序
嘻哈∠※1 天前
基于SpringBoot+vue粮油商城小程序系统
vue.js·spring boot·小程序
luckyext1 天前
HBuilderX中,VUE生成随机数字,vue调用随机数函数
前端·javascript·vue.js·微信小程序·小程序
毕业设计-011 天前
0081.基于springboot+uni-app的垃圾分类小程序+论文
spring boot·小程序·uni-app