Adyen Web Drop-in 支付完成后默认不自动跳转，onPaymentCompleted 仅触发前端回调；真正的重定向仅在3D Secure 2验证等需外部鉴权场景下，由后端 /sessions 接口配置的 returnUrl 控制。
adyen web drop-in 支付完成后默认不自动跳转，`onpaymentcompleted` 仅触发前端回调；真正的重定向仅在3d secure 2验证等需外部鉴权场景下，由后端 `/sessions` 接口配置的 `returnurl` 控制。
在 Adyen Web Drop-in 集成中，一个常见误解是：只要支付状态返回 "Authorised"，页面就会自动跳转到指定 URL。实际上，Drop-in 组件本身不会主动执行页面重定向——它仅负责渲染支付结果（如显示“Payment successful”提示），并触发 onPaymentCompleted 回调供开发者自行处理后续逻辑。
✅ 正确的行为流程如下：
- 用户完成支付（如输入卡号、通过3DS验证）后，Adyen 后端返回 resultCode: "Authorised"；
- Drop-in 自动展示成功状态，并调用 onPaymentCompleted(result, component)；
- 此时浏览器停留在当前页面，不会自动跳转；
- 开发者需在 onPaymentCompleted 中显式实现跳转逻辑（例如 window.location.href = '/success'）或提交订单确认请求。
const configuration = {
environment: 'test',
clientKey: 'test_...',
locale: 'en-CA',
session: {
id: 'adyenSession-id',
sessionData: 'adyenSession-sessionData'
},
onPaymentCompleted: (result, component) => {
console.info('Payment completed:', result);
// ✅ 手动跳转至成功页（推荐方式）
window.location.href = '/order/success?pspReference=' + result.pspReference;
// 或：调用后端确认接口后再跳转（更安全）
// fetch('/api/confirm-payment', {
// method: 'POST',
// headers: { 'Content-Type': 'application/json' },
// body: JSON.stringify({ pspReference: result.pspReference })
// }).then(() => window.location.href = '/order/success');
},
onError: (error, component) => {
console.error('Payment error:', error);
alert('Payment failed. Please try again.');
},
paymentMethodsConfiguration: {
card: {
hasHolderName: true,
holderNameRequired: true,
billingAddressRequired: true
}
}
};
(async () => {
const checkout = await AdyenCheckout(configuration);
checkout.create('dropin').mount('#dropin-container');
})();⚠️ 关键注意事项：
- returnUrl 不是用于支付完成后的跳转，而是专用于 3D Secure 2 流程中——当持卡人需跳转至银行页面完成二次验证时，Adyen 会将用户重定向至该 URL（必须是 HTTPS，且需在后端调用 /sessions 创建会话时传入）；
- 前端无法控制 3DS 重定向后的回跳逻辑，该流程由 Adyen SDK 自动管理，并最终仍会回到 onPaymentCompleted；
- 生产环境务必使用 environment: 'live' 和对应 clientKey，并确保后端已正确配置 API key、证书及 Webhook 监听支付结果；
- 建议始终在 onPaymentCompleted 中校验 result.resultCode（如 "Authorised"、"Pending"、"Refused"），避免仅依赖前端状态。
总结：Adyen Drop-in 的设计原则是“状态驱动，而非路由驱动”。支付完成后的业务跳转应由开发者在 onPaymentCompleted 中主动实现，而非依赖 Adyen 自动重定向。这既保障了流程可控性，也符合 PCI 合规要求——敏感支付结果确认应经后端验证后再呈现最终页面。
