支付宝付款成功后如何返回商家小程序首页或控车页?
结论
支付成功页右上角的“回首页”是支付宝收银台或支付宝客户端提供的系统入口,商家小程序通常无法配置它的跳转地址。这里的“首页”指支付宝 APP 首页,不是商家小程序首页。
小程序应通过 my.tradePay 发起支付,在支付操作结束后接收回调,再使用 my.reLaunch、my.switchTab 或 my.redirectTo 跳转到商家首页或控车页。支付结果必须通过服务端异步通知或主动查询确认,不能只依赖前端回调。
为什么会跳到支付宝首页
一般有以下两种原因:
-
业务流程依赖支付宝收银台成功页右上角的“回首页”。
这个按钮由支付宝客户端控制,商家无法将它改为指定的小程序页面。
-
小程序通过网页、外部支付链接或其他非小程序支付链路进入收银台。
支付完成后,支付宝可能无法恢复原来的小程序页面栈,只能返回支付宝首页。在小程序中,应优先使用支付宝小程序支付 API,不要依赖 H5 支付完成页跳回小程序。
推荐实现流程
完整流程如下:
- 小程序向商家服务端提交租车订单。
- 服务端创建支付宝交易,并将交易号返回给小程序。
- 小程序调用
my.tradePay。 - 支付操作结束后,小程序根据前端回调进入结果处理页。
- 小程序向商家服务端查询订单的最终支付状态。
- 服务端确认支付成功后,小程序跳转到首页或控车页。
- 服务端同时处理支付宝异步通知,保证订单状态最终一致。
后续业务流程不要依赖收银台右上角的“回首页”。支付回调后的页面应提供醒目的“开始用车”或“返回首页”按钮,也可以在服务端确认支付成功后自动跳转。
小程序端发起支付
以下示例假设服务端已经创建交易,并返回了 my.tradePay 所需的 tradeNO。具体字段应以当前接入的支付宝小程序支付产品和开放平台文档为准。
async function payRentalOrder(orderId) {
try {
const createResult = await request({
url: '/api/rental/payment/create',
method: 'POST',
data: {
orderId
}
});
const tradeNO = createResult.tradeNO;
my.tradePay({
tradeNO,
success: function (result) {
if (String(result.resultCode) === '9000') {
verifyPaymentAndContinue(orderId);
return;
}
my.alert({
title: '支付未完成',
content: `支付结果码:${result.resultCode || 'unknown'}`
});
},
fail: function () {
my.alert({
title: '支付未完成',
content: '支付操作未完成,请稍后查询订单状态。'
});
}
});
} catch (error) {
my.alert({
title: '支付失败',
content: '创建支付订单失败,请稍后重试。'
});
}
}
9000 一般表示前端支付流程返回成功,但不能将它作为发车、开锁或交付车辆的唯一依据。网络中断、页面关闭或客户端异常都可能影响前端回调,最终支付状态仍要由商家服务端确认。
支付后跳转到小程序首页
如果首页是普通页面,可以在确认支付成功后调用 my.reLaunch:
function goToHome() {
my.reLaunch({
url: '/pages/index/index'
});
}
my.reLaunch 会关闭当前页面栈,再打开目标页面。它适合在支付完成后结束下单流程,避免用户返回支付确认页并重复发起支付。
如果首页是 tabBar 页面,应使用 my.switchTab:
function goToHomeTab() {
my.switchTab({
url: '/pages/index/index'
});
}
目标路径必须在小程序中真实存在。使用 my.switchTab 时,该页面还必须配置在 tabBar 中。
支付后直接进入控车页
控车页通常需要车辆 ID、订单 ID 或租赁单 ID。只有服务端确认以下条件后,才应跳转:
- 订单已经支付;
- 租赁单已经生效;
- 车辆已经分配;
- 当前用户拥有该车辆的控制权限;
- 开锁或控车所需凭证已经生成。
示例:
async function verifyPaymentAndContinue(orderId) {
try {
const result = await request({
url: `/api/rental/orders/${encodeURIComponent(orderId)}/status`,
method: 'GET'
});
if (result.paymentStatus !== 'PAID') {
showPaymentPending(orderId);
return;
}
if (!result.vehicleId || !result.controlReady) {
showVehiclePreparing(orderId);
return;
}
my.reLaunch({
url:
'/pages/vehicle/control?' +
`orderId=${encodeURIComponent(orderId)}` +
`&vehicleId=${encodeURIComponent(result.vehicleId)}`
});
} catch (error) {
showPaymentPending(orderId);
}
}
打开控车页后,仍需向服务端重新校验权限。不能因为 URL 中带有 vehicleId,就直接允许用户开锁:
Page({
async onLoad(query) {
const orderId = query.orderId;
const vehicleId = query.vehicleId;
try {
const controlInfo = await request({
url: '/api/rental/control/session',
method: 'POST',
data: {
orderId,
vehicleId
}
});
this.setData({
controlReady: true,
controlInfo
});
} catch (error) {
this.setData({
controlReady: false
});
my.alert({
title: '暂时无法控车',
content: '订单或车辆权限校验失败,请返回订单页重试。'
});
}
}
});
处理支付状态暂未同步的情况
前端支付回调到达时,服务端可能还没有处理完支付宝异步通知。遇到这种情况,不要立即判定支付失败,可以短暂轮询订单状态:
function waitForPaid(orderId, maxAttempts = 5) {
let attempts = 0;
function check() {
attempts += 1;
request({
url: `/api/rental/orders/${encodeURIComponent(orderId)}/status`,
method: 'GET'
})
.then((result) => {
if (result.paymentStatus === 'PAID') {
verifyPaymentAndContinue(orderId);
return;
}
if (attempts < maxAttempts) {
setTimeout(check, 1500);
return;
}
showPaymentPending(orderId);
})
.catch(() => {
if (attempts < maxAttempts) {
setTimeout(check, 1500);
return;
}
showPaymentPending(orderId);
});
}
check();
}
达到轮询次数后,页面应显示“支付结果确认中”,并允许用户进入订单页手动刷新。不要持续轮询,也不要让用户重复付款。
建议增加商家自己的支付结果页
为了减少用户误点支付宝系统入口的情况,可以在支付操作结束后进入小程序自己的结果页:
my.redirectTo({
url: `/pages/payment/result?orderId=${encodeURIComponent(orderId)}`
});
该页面可以提供“开始用车”和“返回首页”两个明确入口:
Page({
goToControl() {
const { orderId, vehicleId } = this.data;
my.reLaunch({
url:
'/pages/vehicle/control?' +
`orderId=${encodeURIComponent(orderId)}` +
`&vehicleId=${encodeURIComponent(vehicleId)}`
});
},
goToHome() {
my.reLaunch({
url: '/pages/index/index'
});
}
});
只有服务端确认订单有效且车辆可控后,才能启用页面上的“开始用车”按钮。
服务端必须完成的处理
服务端至少需要完成以下工作:
- 创建支付交易;
- 保存商家订单号与支付宝交易号的对应关系;
- 验证支付宝异步通知;
- 幂等更新订单状态;
- 提供订单支付状态查询接口;
- 进入控车流程前,校验订单、用户和车辆之间的关系。
异步通知处理必须具备幂等性。同一笔支付通知可能重复到达,服务端不能因此重复创建租赁单、发放优惠或生成控车权限。
注意事项
- 不要尝试修改支付宝收银台右上角“回首页”的行为,该区域通常不在商家小程序的控制范围内。
- 不要将 H5 支付的
return_url当作小程序内部页面路由。即使某种支付产品支持返回地址,它也不等同于小程序页面跳转。 - 不要仅凭
my.tradePay的前端成功回调开通控车权限。 - 用户可能在支付后关闭收银台、退出小程序或遇到网络中断,因此订单页必须能够恢复未完成的流程。
my.navigateTo会保留原页面栈。支付完成后需要结束主流程时,通常更适合使用my.reLaunch。- 如果目标是
tabBar页面,应使用my.switchTab,不能使用普通页面的跳转方式。 - 页面路径、支付参数和结果字段可能因接入产品及客户端版本不同而变化。实施时,应以支付宝开放平台中对应支付产品的当前文档为准。
备注:内容仅供参考。
