2Checkout + Angular > Inline Checkout > 重定向到完整的结帐页面

Question

问题

我正在关注 2Checkout docs for setting up the Inline Checkout。我无法让 iframe 弹出窗口出现。无论我尝试什么，它都会重定向到完整的结帐体验。

故障排除失败

我无法通过 Google 或 Whosebug 找到任何可以直接解决我的问题的内容。唯一提到它的似乎是文档本身。如果您遇到此问题，建议在文档底部尝试以下操作：

Clear your browser’s cache and cookies, close all open instances of your browser, then recommence testing.

在每次尝试之间清除缓存和 cookie。
以上+每次都关闭浏览器
以上+Chrome的隐身

Review your page to ensure that the mandatory JavaScript code has been properly implemented.

我可以通过 Chrome 的开发工具 Network 选项卡看到文档中的 JS（如下所示）已毫无问题地加载到页面上。此外，当我直接导航到它时，我确实看到了缩小的 JS。

<script src="https://www.2checkout.com/static/checkout/javascript/direct.min.js"></script>

Ensure that you are using the Hosted Checkout parameter set to pass in sale details.

我尝试使用文档中示例中的确切代码，它说它满足所有要求。
以上+我的沙盒账号为唯一改动。
以上+一些其他值变化和新字段，更接近我真正想要的...

（根据文档指向沙箱）

<form action="https://sandbox.2checkout.com/checkout/purchase" method="post">
  <input name="sid" value="901341903" />
  <input name="mode" value="2CO" />
  <input name="li_0_tangible" value="N" />
  <input name="li_0_type" value="product" />
  <input name="li_0_name" value="Website" />
  <input name="li_0_price" value="5" />
  <input name="li_0_recurrence" value="1 Month" />
  <input name="card_holder_name" value="Joe Flagster" />
  <input name="street_address" value="123 Main Street" />
  <input name="street_address2" value="" />
  <input name="city" value="Townsville" />
  <input name="state" value="OH" />
  <input name="zip" value="43206" />
  <input name="country" value="USA" />
  <input name="email" value="example@2co.com" />
  <input name="phone" value="614-921-2450" />
  <input name="submit" type="submit" value="Checkout" />
</form>

潜在相关信息

根据我的沙盒帐户，我是 Approved to Sell，但是 Not Eligible for Payments
我正在本地托管的虚拟专用服务器上进行开发。我有它设置为将我的域显示为 https://www.example.com:3000 localhost:3000.
我的项目是用 Angular 1.6.x

任何帮助、经验、见解等都将不胜感激！

2017 年 3 月 14 日更新

我的代码截图（我加了li_0_duration）：

不受欢迎的重定向后标准购物车的屏幕截图：

唯一的空必填字段在 Payment Methods 部分，但这是用户应该在 iframe 弹出窗口中提交的数据，对吧？

Answer 1

任何时候您使用内联并且它重定向到标准结账，都是因为您缺少参数或用户输入的值导致了问题。

点击标准结帐页面后，检查每个下拉滑块上的表单字段，必填字段之一应显示为空，并显示 required 消息。该参数是您的有问题的参数，因为我们将买家发送到标准结帐例程以再次重新收集信息。

您需要在上述 html 代码段中包含的唯一额外参数是 li_0_duration。设置您的值（例如 1 年），您应该全部设置好，只要您包含 javascript 行，iframe 就应该显示，听起来您已经涵盖了。

https://www.2checkout.com/documentation/checkout/parameters 有关参数集的更多文档。

Answer 2

问题总结

我下载了未压缩版的JS... https://www.2checkout.com/static/checkout/javascript/direct.js

...并将其托管在本地，以便我进行故障排除。我发现 onready 在 DOM 完全准备好之前就被触发了。这导致了错误。

2Checkout 脚本似乎被 Angular 框架加载和管理视图的方式欺骗了。 2Checkout 脚本没有找到并正确分析表单元素，因为加载 2Checkout 脚本时表单元素不在 DOM 中。除其他外，2Checkout 脚本应该将一个名为 tco_use_inline 的隐藏输入注入到表单中（由表单的 action 属性的值决定），但它并没有为我这样做。

Angular 解决方案

我创建了一个临时补丁。将其添加到表单所在模板的控制器中...

$scope.$watch("ready", function() {
  var s = document.createElement("script");
  s.src = 'https://www.2checkout.com/static/checkout/javascript/direct.min.js';
  document.body.append(s);
});

...然后在表格中添加 ng-init="ready"。

<form ng-init="ready" action="..." method="...">
  ...
</form>

一旦表单在 DOM 中加载，它将声明 ready，这会触发控制器中的 $watch，这将动态注入 2Checkout 脚本。因此，一切都以正确的顺序加载。

Answer 3

确保您拥有所有强制性参数

检查参数的name属性，确保拼写正确

2Checkout + Angular > Inline Checkout > 重定向到完整的结帐页面

2Checkout + Angular > Inline Checkout > redirects to the full checkout page

2checkout

angularjs

2017 年 3 月 14 日更新