如何使用Velo代码实现Wix会员套餐购买成功后跳转指定页面

实现逻辑 #

Wix官方会员套餐组件提供了支付完成的事件回调，我们可以通过监听该回调，在确认支付成功后调用前端路由方法覆盖默认的感谢页跳转逻辑。

实现步骤 #

• 进入Wix站点编辑器，在顶部菜单栏开启「开发者模式」启用Velo功能
• 打开放置会员套餐购买组件的页面，调出页面代码编辑面板
• 在页面onReady生命周期中绑定支付完成事件，参考代码如下：

// 引入所需模块
import wixLocation from 'wix-location';

$w.onReady(function () {
    // 请将#paidPlans替换为你页面内会员套餐组件的实际ID
    $w('#paidPlans').onPaymentComplete((event) => {
        // 校验支付状态为成功后执行跳转
        if (event.payment.status === 'Successful') {
            // 此处替换为你的目标页面路径，支持站内路径或外部链接
            wixLocation.to('/custom-success-page');
        }
    });
});

• 若需要全站所有会员套餐支付后都走该跳转规则，可将上述代码写入全局的masterPage.js文件，确保所有页面的会员套餐组件ID保持一致即可
• 完成代码配置后，使用Wix支付沙箱模拟真实支付流程，测试跳转逻辑无误后发布站点

常见问题说明 #

• 如果代码不生效，首先检查会员套餐组件ID是否和代码中填写的一致，其次确认目标页面路径拼写正确
• 若你使用的是自定义开发的支付流程而非官方付费套餐组件，直接在支付成功的回调函数内调用wixLocation.to()方法即可实现跳转
• 该修改仅调整前端跳转逻辑，不会影响Wix系统自带的订单通知、会员权限开通等原有功能

内容的提问来源于stack exchange，提问作者nurma wula