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

 更新时间:2025年02月25日 10:58:46   作者:韩召华  
本文介绍了微信小程序实现拉卡拉支付的步骤,包括支付操作、拉卡拉平台支付代码封装和代码结构引用,感兴趣的朋友一起看看吧

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

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.效果:

到此这篇关于微信小程序实现拉卡拉支付的文章就介绍到这了,更多相关微信小程序拉卡拉支付内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • webpack实现一个行内样式px转vw的loader示例

    webpack实现一个行内样式px转vw的loader示例

    这篇文章主要介绍了webpack实现一个行内样式px转vw的loader示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • javascript编程开发中取色器及封装$函数用法示例

    javascript编程开发中取色器及封装$函数用法示例

    这篇文章主要介绍了javascript编程开发中取色器及封装$函数,结合实例形式分析了javascript封装$函数及数值运算、页面元素动态操作实现取色器功能相关技巧,需要的朋友可以参考下
    2017-08-08
  • js抽奖实现随机抽奖代码效果

    js抽奖实现随机抽奖代码效果

    这篇文章主要介绍了js随机抽奖代码效果,大家参考使用
    2013-12-12
  • bootstrap fileinput 上传插件的基础使用

    bootstrap fileinput 上传插件的基础使用

    这篇文章主要介绍了bootstrap fileinput 上传插件基础使用,重点是把界面做得更加友好,更好的增加用户体验。对bootstrap fileinput知识感兴趣的朋友通过本文一起学习吧
    2017-02-02
  • ES6中Proxy常用的拦截操作全面讲解

    ES6中Proxy常用的拦截操作全面讲解

    Proxy是es6新增的一个属性,用于修改某些操作的默认行为,可以理解为在目标对象外层设置一层“拦截”,外界如果想要访问目标对象,这篇文章主要介绍了ES6中Proxy常用拦截操作的相关资料,需要的朋友可以参考下
    2025-08-08
  • JavaScript对Json的增删改属性详解

    JavaScript对Json的增删改属性详解

    下面小编就为大家带来一篇JavaScript对Json的增删改属性详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

    JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

    这篇文章主要介绍了JS+CSS实现自动改变切换方向图片幻灯切换效果的方法,实例分析了javascript操作图片切换方向的幻灯片技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 基于javascript处理nginx请求过程详解

    基于javascript处理nginx请求过程详解

    这篇文章主要介绍了基于javascript处理nginx请求过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • URLSearchParams快速解析URL查询参数实现

    URLSearchParams快速解析URL查询参数实现

    这篇文章主要为大家介绍了URLSearchParams快速解析URL查询参数实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • js 动态加载事件的几种方法总结

    js 动态加载事件的几种方法总结

    本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12

最新评论