Adyen Payment开发：如何实现点击PayPal按钮后先校验再弹出支付窗口

核心问题原因 #

你当前使用的onSubmit回调是PayPal弹窗弹出之后才会触发的，所以无法提前拦截弹窗弹出，需要用onClick钩子在校验阶段提前拦截。

正确实现代码 #

const paypalComponent = checkout.create("paypal", {
    // 点击PayPal按钮后、弹窗弹出前触发的钩子
    onClick: (data, actions) => {
        // 执行你的自定义校验逻辑
        const isValidationOk = 这里替换为你自己的校验方法();
        if (isValidationOk) {
            // 校验通过，允许弹出PayPal窗口
            return actions.resolve();
        } else {
            // 校验不通过，终止流程，不会弹出PayPal窗口
            // 此处可添加自定义错误提示，比如告知用户缺失的必填项
            return actions.reject();
        }
    },
    onSubmit: (state, component) => {
        // 保留原有逻辑，处理支付提交后的后续操作
        // do your action...
    }
}).mount("#paypal-container");

注意事项 #

• 该onClick钩子适用于Adyen Checkout组件v4.6.0及以上版本，如果你使用的组件版本低于该要求，需要先升级组件版本
• 如果你的校验逻辑是异步的（比如需要调用后端接口校验订单信息），可以直接在onClick中写异步逻辑，等异步结果返回后再调用actions.resolve()或actions.reject()即可
• 调用actions.reject()后用户可以再次点击PayPal按钮重新触发校验流程，不需要刷新页面

内容的提问来源于stack exchange，提问作者Shahariar Kabir