PayPal Smart Button如何修改支付成功后的跳转URL

修改逻辑说明 #

PayPal智能按钮的支付成功回调统一在onApprove方法内，当actions.order.capture()执行完成，代表资金已成功捕获，此时插入跳转逻辑即可。

具体修改步骤 #

1. 定位代码中onApprove回调内的actions.order.capture().then(function(orderData) { ... })代码块
2. 删除或注释掉原有显示页面内成功提示的代码，也可以选择保留提示后延迟跳转
3. 插入跳转代码即可

可直接使用的修改后完整代码 #

function initPayPalButton() { 
  paypal.Buttons({ 
    style: { 
      shape: 'rect', 
      color: 'gold', 
      layout: 'vertical', 
      label: 'paypal',
    },

    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{"description":"Digital Service","amount":{"currency_code":"USD","value":1}}]
      });
    },

    onApprove: function(data, actions) {
      return actions.order.capture().then(function(orderData) {
        // 可以保留控制台日志方便排查问题
        console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
        
        // ========== 跳转逻辑开始 ==========
        // 方案1：直接跳转，无等待提示
        // 方式a：使用PayPal封装的redirect方法
        // actions.redirect('https://www.example.com/request/');
        // 方式b：使用浏览器原生跳转，兼容性更好
        window.location.href = 'https://www.example.com/request/';
        
        // 方案2：先显示成功提示，3秒后跳转（用户体验更好，推荐）
        // const element = document.getElementById('paypal-button-container');
        // element.innerHTML = '';
        // element.innerHTML = '<h3>感谢您的支付，即将跳转到指定页面...</h3>';
        // setTimeout(() => {
        //   window.location.href = 'https://www.example.com/request/';
        // }, 3000);
        // ========== 跳转逻辑结束 ==========
      });
    },

    onError: function(err) {
      console.log(err);
    }
  }).render('#paypal-button-container');
}
initPayPalButton();

注意事项 #

• 请将代码中的https://www.example.com/request/替换为你实际需要跳转的目标地址
• 延迟跳转的等待时长可通过修改setTimeout的第二个参数调整，单位为毫秒，3000即代表3秒
• 生产环境建议保留捕获成功的日志记录，方便后续排查支付异常问题

内容的提问来源于stack exchange，提问作者IzraelHarry Harry