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

相关推荐
gys98959 小时前
android studio开发aar插件,并用uniapp开发APP使用这个aar
android·uni-app·android studio
自然 醒14 小时前
荣耀手机,系统MagicOS 9.0 USB配置没有音频来源后无法被adb检测到,无法真机调试的解决办法
adb·uni-app
*拯19 小时前
Uniapp Android/IOS 获取手机通讯录
android·ios·uni-app
gaojianqiao123420 小时前
uniapp引入七鱼客服微信小程序SDK
微信小程序·uni-app
zhangzuying10261 天前
在uni-app中实现类似文心一言的流式对话功能:从fetch到websocket的实践
websocket·uni-app·文心一言
假客套1 天前
2025 后端自学UNIAPP【项目实战:旅游项目】3、API接口请求封装,封装后的简单测试以及实际使用
uni-app·旅游项目实战
JAVA叶知秋1 天前
uniapp自定义底部导航栏h5有效果小程序无效的解决方案
小程序·uni-app
moxiaoran57532 天前
uni-app学习笔记(二)--vue页面代码的构成和新建页面
笔记·学习·uni-app
一只程序熊2 天前
【uniapp】errMsg: “navigateTo:fail timeout“
服务器·前端·uni-app
沙尘暴炒饭2 天前
用uniapp在微信小程序实现画板(电子签名)功能,使用canvas实现功能
微信小程序·小程序·uni-app