字节抖音小程序,使用 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 如何实现抖音交易支付

相关推荐
普马萨特17 小时前
uni-app x 定位踩坑实录:H5/小程序/App 统一经纬度与逆地理编码
uni-app
Geek_Vison1 天前
保险APP已经用了Flutter,还能接入小程序吗?
flutter·小程序·uni-app·mpaas·小程序容器
郑州光合科技余经理2 天前
本地生活平台搭建:跨业态用户标识怎么贯通
java·开发语言·前端·后端·uni-app·php·ai编程
2501_915909063 天前
iOS应用从开发到上架App Store的完整发布流程与步骤指南
android·ios·小程序·https·uni-app·webview
不爱说话郭德纲3 天前
从“点点点”到一键出包:我把 uni-app x Android 离线打包做成了脚本
android·前端·uni-app
snotJam3 天前
关于Uniapp的Android自定义基座使用
android·uni-app
今年下半年4 天前
【微信小程序】uni-app + Vue3 + Vite 的小程序项目实现「进入指定范围才能打卡」的考勤功能
微信小程序·uni-app·定位·考勤
郑州光合科技余经理7 天前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
遗憾随她而去.9 天前
uniApp跨端开发: 解决不同平台显示差异问题
uni-app
程序鉴定师12 天前
2026年深圳小程序/App开发公司技术选型指南:从架构设计到交付标准全维度评估
java·小程序·uni-app·php·objective-c