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

相关推荐
耶啵奶膘3 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
我开心就好o10 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index10 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情18 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑00720 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字20 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔21 小时前
uniapp rpx兼容平板
uni-app
荔枝吖21 小时前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗21 小时前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo14161 天前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app