字节抖音小程序,使用 uniapp 调起内置支付

字节抖音小程序,使用 uniapp 调起内置支付

第一步:提交订单

后端通过抖音预下单接口,提交支付订单信息。

预下单接口_小程序_抖音开放平台预下单接口 提交支付订单信息。 ## 使用限制 无 ## 接口说明 预下单接口需要保证同一app_id下每笔订单的out_order_no是唯一的。同一订单(app_id,out_order_no相同)重复请求需要保持请求参数一致,否则接口会报错拦截。沙盒环境使用说明详见担保支付https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/server/ecpay/pay-list/pay后端拿到抖音返回的数据格式是 string ,如果后端转换了数据格式为对象,前端拿到数据还需要拼接成抖音支付需要的 string 格式,其实可以直接返回字符串给前端,前端直接拿来调用支付即可

第二步:调用支付

javascript 复制代码
orderString: "{\"order_token\":\"CgwIARDPKBjKMCABKAESTgpMjyesuDMrdbGEYMdZMJa6lipo/NLLDfJufCDrwNnXUfbIoLoaX/1NKKCzuapPa4p0qj8ogKTO8tRnNoEnxbfVddD6zII4CuekMexkgxoA.W\",\"order_id\":\"7259313669782358306\"}"

调用抖音支付,抖音小程序所需要的 orderInfo 字段必须是 string 类型的数据格式,如上所示。

javascript 复制代码
onShow() {
	uni.getProvider({
		service: 'payment',
		success: function(res) {
			uni.setStorageSync('providerpayment', res.provider[0]);
		}
	});
},
javascript 复制代码
onLoad(option) {
	// #ifdef MP-TOUTIAO
	if (option.orderString) {
		this.opratePay(JSON.parse(option.orderString));
	}
	// #endif
},

methods: {
    opratePay(orderString, orderNo) {
		let _this = this;
		//支付
		uni.requestPayment({
			provider: uni.getStorageSync('providerpayment'),
			// #ifdef MP-TOUTIAO
			orderInfo: orderString,
			service: 5,
			// #endif

			success: function(value) {
				console.log('==== uni.requestPayment success', value);
				// #ifdef MP-TOUTIAO
				let code = value.code
				switch (code) {
					case 0:
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						});
						uni.redirectTo({
							url: `/pages/webview/webview?url=${getApp().globalData.urlPrefix}/orderdetail&id=${orderNo}`
						});
						break;
					case 1:
						uni.navigateBack({
							delta: 1
						});
						uni.showToast({
							title: '支付超时',
							icon: 'none'
						})
						break;
					case 2:
						uni.navigateBack({
							delta: 1
						});
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
						break;
					case 3:
						uni.navigateBack({
							delta: 1
						});
						uni.showToast({
							title: '支付关闭',
							icon: 'none'
						})
						break;
					case 4:
						uni.navigateBack({
							delta: 1
						});
						uni.showToast({
							title: '支付取消',
							icon: 'none'
						})
						break;
					default:
						console.log('==== uni.requestPayment success code!=0');
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
				}
				// #endif
			},
			fail: function(err) {
				console.log('==== uni.requestPayment err', err);
				uni.showToast({
					title: '支付失败',
					icon: 'none'
				})
				uni.navigateBack({
					delta: 1
				});
			}
		})
	},

},

注意点:

1、抖音沙盒小测试支付调用,必须用沙盒版抖音调试才能正常调起,抖音极速版,抖音商店版都无法正常调起

2、uniapp 如何实现抖音交易支付

相关推荐
每天都想着怎么摸鱼的前端菜鸟6 小时前
uniapp开发app 实现简易的路由拦截器
vue.js·uni-app
随笔记6 小时前
uniapp中获取设备wifi列表,已连接wifi信息
前端·javascript·uni-app
lqj_本人6 小时前
鸿蒙OS&UniApp微服务架构实践:从设计到鸿蒙部署#三方框架 #Uniapp
架构·uni-app·harmonyos
胡斌附体6 小时前
uniapp中view标签使用范围
uni-app·跨平台·标签·view·范围
ZouNiMei7 小时前
使用uniapp的nvue开发地图map功能踩坑记录
前端·uni-app
发现你走远了13 小时前
『uniapp』添加桌面长按快捷操作 shortcuts(详细图文注释)
uni-app
lqj_本人13 小时前
鸿蒙OS&在UniApp中集成Three.js:打造跨平台3D可视化应用#三方框架 #Uniapp
uni-app·区块链·harmonyos
lqj_本人16 小时前
鸿蒙OS&基于UniApp的区块链钱包开发实践:打造支持鸿蒙生态的Web3应用#三方框架 #Uniapp
uni-app·区块链·harmonyos
lqj_本人16 小时前
鸿蒙OS&UniApp集成WebGL:打造跨平台3D视觉盛宴#三方框架 #Uniapp
uni-app·harmonyos·webgl
moxiaoran57531 天前
uni-app学习笔记十八--uni-app static目录简介
笔记·学习·uni-app