NextJS 14中如何在stripe.confirmPayment成功后先执行代码再跳转

你可以通过修改stripe.confirmPayment的配置，阻止自动跳转，先执行完自定义逻辑后再手动跳转到目标页面，具体实现如下：

• 给confirmPayment添加redirect: 'if_required'参数，这个配置会让Stripe仅在需要额外验证（比如3DS）时自动跳转，正常支付成功后会直接返回结果，不会触发跳转。
• 确认支付无错误后，执行你的额外业务逻辑。
• 逻辑执行完成后，手动跳转到原本的return_url地址。

修改后的代码示例：

// 若使用Next.js App Router，导入路由工具
import { useRouter } from 'next/navigation';

// 在组件内初始化路由实例
const router = useRouter();

// 支付处理函数
const handlePayment = async () => {
  const { error, paymentIntent } = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: {
      return_url: `http://www.localhost:3000/thank-you/${response.orderNumber}`,
    },
    // 关键配置：阻止默认自动跳转
    redirect: 'if_required',
  });

  if (!error) {
    // 这里执行你的额外逻辑，比如更新订单状态、发送通知等
    await yourCustomBusinessLogic(paymentIntent.id);

    // 逻辑执行完毕后手动跳转
    // App Router用router.push
    router.push(`/thank-you/${response.orderNumber}`);
    // 若用Pages Router或纯客户端环境，可改用
    // window.location.href = `http://www.localhost:3000/thank-you/${response.orderNumber}`;
  } else {
    // 处理支付错误场景
    console.error('支付失败:', error.message);
  }
};

注意事项：

• redirect: 'if_required'是核心配置，它会覆盖Stripe默认的always跳转行为。
• 如果你的额外逻辑是异步操作，记得添加await，避免逻辑未执行完成就跳转。
• 若支付需要3DS等额外验证，Stripe仍会自动跳转完成验证，验证结束后会回到return_url，这种场景的后续逻辑可在感谢页补充处理，但已满足你「正常支付成功先执行逻辑再跳转」的核心需求。

内容的提问来源于stack exchange，提问作者Netanel Vaknin