上下文结帐中的贝宝 - 防止页面重定向答案

【问题标题】：Paypal in context checkout - prevent page redirection上下文结帐中的贝宝 - 防止页面重定向
【发布时间】：2016-10-10 10:39:56
【问题描述】：

我正在尝试在 AngularJS 应用程序下集成 PayPal in-context checkout。一切都按预期工作：

通过 REST API 我发送所有详细信息并获取结帐令牌
然后，将 TOKEN 传递给客户端应用程序
使用特定 TOKEN 调用上下文结帐

现在我想知道是否有办法防止在成功或取消的情况下重定向页面。

这是客户端应用程序中的一段代码：

<button id="t2" type="submit">Pay</button>

<script>
  window.paypalCheckoutReady = function () {
    paypal.checkout.setup("API_CREDENTIALS", {
      environment: "sandbox",
      button: ["t2"],
      click: function (event) {
        
        event.preventDefault();
        //init lightbox modal
        paypal.checkout.initXO();
        
        //start checkout flow
        paypal.checkout.startFlow(TOKEN);
      }
    });
  };
</script>

<script src="//www.paypalobjects.com/api/checkout.js" async=""></script>

【问题讨论】：

我不知道你的页面的细节。您是否可以将用户重定向回他们所在的同一页面？（我已经为社交登录做了这个）。如果数据在该过程中丢失，您可以将其存储在会话 cookie 中。
@zevnicsca 是的，它现在适用于重定向。我唯一的要求是避免任何类型的重定向——仅仅因为一件事——用户体验。所以我需要知道 paypal 脚本何时完成，以及它是如何完成的（成功或错误），并使用 Angular 完成其余的路由。
你能指定如何控制 Angular 路由的用户体验吗？本质上，Express Checkout 需要重定向，因为您需要在退货页面中执行付款，这意味着上下文弹出体验仅提供用户授权/同意付款..
@pp_pduan 这就是我想要破解的。通过上下文弹出窗口完成付款并关闭窗口后，会发生重定向。我正在尝试阻止页面重定向。通过 webhook，我将知道付款状态，并据此通过 Angular 路由将用户重定向到特定状态。所以，用户应该有这样的体验，他一直在同一个页面上......
这里有一个顺序， 1. 上下文弹出和用户交互 2. 弹出自动关闭并重定向到您指定的退货页面 3. 在您的退货页面调用执行API完成支付4. webhook 被触发。破解步骤 2-3 没有什么意义，此外，您还可以通过一些方法将自定义值路由到具有不同 URL 或附加字符串查询的不同返回页面...需要，但只是想确保您的流程适合 In-Context checkout

标签： javascript angularjs redirect paypal

【解决方案1】：

基于 JS 的 In-Context 弹出窗口只是提供了一种前端体验，并构成了如下所述的支付顺序的一部分，

上下文弹出窗口和用户交互（同意付款）
弹出窗口自动关闭（由checkout.js 控制，即时）和浏览器重定向到您指定的返回页面
在退货页面调用executeAPI完成支付
Webhook 被触发（通知您的网站交易状态）

您试图中断的是 #2 和 #3 之间的行为，它位于支付流程的中间，您可能会查看的自定义是在 @ 的 API 有效负载中定义您的 redirect_urls 对象987654324@ 方法（用于生成支付令牌），使用return_url 与您的路由逻辑（通过 URL 和字符串查询的组合）在订单确认页面上向您的客户显示相应的内容（步骤#3）

当您的客户取消/关闭弹出窗口时，cancel_url 中的相同规则（步骤#2）

"redirect_urls": {
 "return_url": "http://www.return.com/routing/?stringQuery",
 "cancel_url": "http://www.cancel.com/routing/?stringQuery"
}

请务必在之后在返回页面中调用 execute

【讨论】：