uni-app 抖音小程序 pay-button 交易按钮报错 The return value should be an object
uni-app 抖音小程序 pay-button 交易按钮报错 The return value should be an object
产品分类
- uniapp/小程序/字节跳动
PC开发环境
- 操作系统:Mac
- 操作系统版本号:MacBook Pro(13英寸,M2,2022年)12.4
- HBuilderX类型:正式
- HBuilderX版本号:4.08
- 第三方开发者工具版本号:3.7.11.20230427
- 基础库版本号:2.0.2-3071120230427001
- 项目创建方式:HBuilderX
示例代码
<pay-button v-if="orderDetail.orderButtonV3Res.viewRefundButton == 1" :order-status="1" :order-id="orderNo"
@refund="dy_pay_onRefund" @applyrefund="dy_pay_applyRefund" @error="dy_pay_error" />
async dy_pay_applyRefund(event) {
console.log('dy_pay_applyRefund event=', event)
const {
orderId
} = event.detail;
const extra = {
orderId
}; // 开发者需要透传的参数,可自定义内容
return new Promise(resolve => {
resolve(extra);
});
}
<pay-button vue-id="4c8f244a-17" order-status="{{1}}" order-id="{{orderNo}}"
data-event-opts="{{[['^refund',[['dy_pay_onRefund']]],['^applyrefund',[['dy_pay_applyRefund']]],['^error',[['dy_pay_error']]]]}}"
bind:refund="__e" bind:applyrefund="__e" bind:error="__e" class="data-v-5dcad4cc"
bind:__l="__l"/>
操作步骤
- 按抖音文档对接支付
预期结果
- 回调不返回以下错误:
The return value of bind:applyrefund should be an object
实际结果
- 回调返回错误:
The return value of bind:applyrefund should be an object
bug描述
对接抖音小程序的支付功能,前端模板使用抖音提供的入口组件pay-button进行支付与退款,在回调里面提示:
- The return value of bind:applyrefund should be an object 抖音对接文档见:
- https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/industry/trading-system/pay-button-sdk#2e204620

更多关于uni-app 抖音小程序 pay-button 交易按钮报错 The return value should be an object的实战教程也可以访问 https://www.itying.com/category-93-b0.html
感谢反馈,现在汇总提供解决方案
pay-button 组件设计的比较特殊,事件要求不允许返回函数,要求返回一个值,按照下面的方案,
临时解决方案
利用 bind:xxx 不参与编译的特性,使用 bind:xxx 设置为属性,之后使用 this.$scope 进行设置。
即可完成。
如下图所示
编写脚本在编译后 copy package.json 文件,
package.json 支持条件编译,对 mp-toutiao 进行特殊编译处理 ext://xxx 特殊路由
问题原因
pay-button 设计比较特殊,需要后续额外处理
新增的 package.json 其他小程序不涉及,属于新增内容,需要进行适配
后续解决
后续进行开发升级,默认支持上述功能,避免开发者手动修改,再发布之前,请使用上述方案绕过
更多关于uni-app 抖音小程序 pay-button 交易按钮报错 The return value should be an object的实战教程也可以访问 https://www.itying.com/category-93-b0.html
使用 this.$scope 设置首次加载pay-button 的时候提示找不到 getGoodsInfo,第1次点击无法正常跳转到提单页,第二次点才能正常跳转。(红米k70Pro 上正常,其他安卓手机都报这个错) does not have a method “getGoodsInfo” to handle event “getgoodsinfo”
回复 逍遥风1: 请问现在解决了吗?
请问这个问题解决了吗?现在引入pay-button还是报同样的错误
回复 9***@qq.com: 提供个复现工程,我看看
回复 4***@qq.com: 私聊我提供个复现工程,我看看
回复 DCloud_UNI_OttoJi: <pay-button class=“btn” @error=“handleError” @placeorder=“userLogin” :mode=“2” :goods-type=“2” @getgoodsinfo=“getGoodsInfo” @pay=“handleUnrealPay” :goods-id=“ticketId”> </pay-button> getGoodsInfo(event) { console.log(‘getGoodsInfo-event方法’, event) const { goodsId } = event.detail; return new Promise(resolve => { resolve({ currentPrice: 9900, goodsName: ‘循礼门M+丨【释集烤肉】99元 原价206.4元超值套餐’, goodsPhoto: ‘https://p11.douyinpic.com/img/aweme-poi/product/spu/c050f399ac447daf2715e11e6976c2e2~noop.jpeg?from=3303174740’, goodsLabels: [{ type: ‘EXPIRED_RETURNS’ }, // 过期退 { type: ‘REFUND_ANYTIME’ }, // 随时退 { type: ‘BOOK_IN_ADVANCE’, value: 2 } // 提前2日预约 ], minLimits: 1, maxLimits: 2, dateRule: ‘周一至周日可用’, relationType: 1, validation: { phoneNumber: { required: true // 手机号是否必填, 为 true则必填,false选填,默认选填 }, reservationType: 1, reservationCount: 2, }, extra: {}, tradeOption: { life_trade_flag: 0, // 0:非融合链路(默认值) 1:走融合链路(标准融合/完全融合) is_use_tag: false // 泛知识是否接入交易规则,true:接入 false:不接入(默认值) }, // 在 bind:getgoodsinfo 返回的 promise 的 resolve 函数中新增 marketingVersion 字段 marketingVersion: 2, });
//uni-app打包抖音小程序后的自动处理脚本 copyDist.js 可以参考如下: /**
- 抖音小程序-交易组件-自动处理
- https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/industry/trading-system/guide
“build:mp-toutiao-test”: “cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --mode
test && node copyDist.js”,
*/
const fs = require(‘fs-extra’);
const path = require(‘path’);
// 1、将package.json移动到dist/build/mp-toutiao下
// 源文件路径
const srcFilePath = path.resolve(__dirname, ‘src’, ‘package.json’);
console.log(‘源文件路径 srcFilePath=’, srcFilePath);
// 目标文件夹路径
const distDirPath = path.resolve(__dirname, ‘dist’, ‘build/mp-toutiao’);
// 目标文件路径
const distFilePath = path.resolve(distDirPath, ‘package.json’);
console.log(‘标文件路径 distFilePath=’, distFilePath);
// 如果目标文件夹不存在,先创建目标文件夹
if (!fs.existsSync(distDirPath)) {
fs.mkdirSync(distDirPath, {
recursive: true
});
}
// 移动文件
fs.copyFile(srcFilePath, distFilePath, (err) => {
if (err) {
console.error(‘Error copying file package.json:’, err);
} else {
console.log(‘文件package.json复制到dist/build/mp-toutiao目录-成功’);
}
});
// 2、将打包好的dist/build/mp-toutiao/app.json 插入抖音插件组件页面
// 指定的页面路径
// 提单页
const orderConfirmPage = ‘ext://microapp-trade-plugin/order-confirm’;
// 退款申请页配置
const refundApplyPage = ‘ext://microapp-trade-plugin/refund-apply’;
// 退款详情页
const refundDetailPage = ‘ext://microapp-trade-plugin/refund-detail’;
// 目标 app.json 文件路径
const appJsonPath = path.resolve(__dirname, ‘dist’, ‘build’, ‘mp-toutiao’, ‘app.json’);
// 读取 app.json 文件内容
const appJsonContent = fs.readFileSync(appJsonPath, ‘utf-8’);
// 将内容解析为 JSON 对象
const appJson = JSON.parse(appJsonContent);
// 插入页面路径到 pages 数组中
appJson.pages.push(orderConfirmPage);
appJson.pages.push(refundApplyPage);
appJson.pages.push(refundDetailPage);
// 将修改后的内容写回 app.json 文件
fs.writeFileSync(appJsonPath, JSON.stringify(appJson, null, 2));
console.log(‘dist/build/mp-toutiao/app.json插入抖音插件组件页面-成功’);
在使用 Uni-App 开发抖音小程序时,如果使用 pay-button 组件时遇到错误提示 The return value should be an object,通常是因为 pay-button 组件的 createPayment 方法返回的值不符合预期。
pay-button 组件的 createPayment 方法需要返回一个包含支付信息(如 orderInfo)的对象,而不是其他类型的数据。以下是可能导致错误的原因和解决方法:
1. createPayment 方法返回的值不是对象
确保 createPayment 方法返回的是一个对象,而不是字符串、数组或其他类型的数据。例如:
methods: {
createPayment() {
// 模拟获取支付信息
return {
orderInfo: 'your_order_info_here', // 这里需要替换为实际的支付信息
// 其他可能的字段
};
}
}
2. orderInfo 字段缺失或格式不正确
orderInfo 是必需的字段,且其值应该是一个有效的支付信息字符串。确保你返回的对象中包含 orderInfo 字段,并且其值是有效的。
3. 异步操作未正确处理
如果 createPayment 方法中涉及到异步操作(如网络请求),需要确保返回的是一个 Promise,并且 Promise 最终解析为一个包含 orderInfo 的对象。例如:
methods: {
async createPayment() {
const orderInfo = await this.fetchOrderInfo(); // 假设这是一个异步获取支付信息的方法
return {
orderInfo: orderInfo,
};
},
async fetchOrderInfo() {
// 模拟异步获取支付信息
return new Promise((resolve) => {
setTimeout(() => {
resolve('your_order_info_here');
}, 1000);
});
}
}
4. 检查抖音小程序的文档
抖音小程序的 pay-button 组件可能有特定的要求或限制,建议查阅抖音小程序的官方文档,确保你的实现符合其规范。
5. 调试和日志
在 createPayment 方法中添加调试日志,检查返回的值是否正确。例如:
methods: {
createPayment() {
const paymentInfo = {
orderInfo: 'your_order_info_here',
};
console.log('Payment Info:', paymentInfo); // 添加日志
return paymentInfo;
}
}

