2Checkout + Angular＆gt;内联结帐＆gt;重定向到完整的结帐页面

Question

问题

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

排除故障

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

  

清除浏览器的缓存和Cookie，关闭浏览器的所有打开实例，然后重新开始测试。

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

  

查看您的页面，确保已正确实施强制性JavaScript代码。

我可以通过Chrome浏览器的开发工具Network标签看到，文档中的JS（如下所示）在页面上加载时没有问题。此外，当我直接导航到它时，我确实看到了缩小的JS。

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

  

确保您使用Hosted Checkout参数集传递促销详细信息。

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

（指向文档的沙箱）

<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构建的

任何帮助，经验，见解等都将非常感谢！

更新3/14/2017

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

非意外重定向后标准购物车的屏幕截图：

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

Answer 1

问题摘要

我下载了JS的未经编辑的版本... https://www.2checkout.com/static/checkout/javascript/direct.js

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

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

角度解决方案

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

$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 2

只要您使用内联并重定向到标准结帐，您就会错过参数或用户输入的值导致问题。

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

您需要在上面的html代码段中包含的其他参数是li_0_duration。设置您的价值（例如1年），您应该全部设置，iframe应该显示，只要您包含javascript行，这听起来就像您已经涵盖的那样。

https://www.2checkout.com/documentation/checkout/parameters有关参数集的进一步文档。

Answer 3

确保您拥有必需所有参数

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