如何实现点击PayPal按钮时在当前窗口打开PayPal登录页

问题原因 #

• 外层div添加的target="_self"属性无效，PayPal按钮由SDK内部动态渲染生成，不会继承外层容器的自定义属性
• 默认情况下PayPal JS SDK未检测到订单配置中的跳转地址时，会自动采用新窗口弹出的支付体验

修复代码 #

你需要在createOrder方法的订单创建参数中补充application_context配置项，指定支付完成/取消后的跳转地址，就会自动切换为当前窗口跳转的支付模式：

<div id="paypal-button-container"></div>
<script>
 paypal.Buttons({
  createOrder: function(data, actions) {
    return actions.order.create({
      purchase_units: [{
        amount: {
          value: '4'
        }
      }],
      // 新增配置开始
      application_context: {
        return_url: "http://localhost/pay_success.php", // 替换为你的支付成功跳转地址
        cancel_url: "http://localhost/pay_cancel.php", // 替换为你的取消支付跳转地址
        user_action: "PAY_NOW"
      }
      // 新增配置结束
    });
  }
}).render('#paypal-button-container');
</script>

注意事项 #

• 跳转模式下用户完成支付或取消支付后会直接跳转至你配置的对应地址，原页面的onApprove回调不会执行
• 你原代码中onApprove里的授权、接口请求逻辑，需要迁移到return_url对应的页面实现，可通过PayPal跳转带回的订单参数完成对应操作
• 如果必须保留原页面不跳转，可自行将PayPal支付流程嵌入自定义iframe实现，该方案兼容性较差，非必要不推荐使用

内容的提问来源于stack exchange，提问作者Nikul Panchal