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

【问题标题】：2Checkout + Angular > Inline Checkout > redirects to the full checkout page2Checkout + Angular > Inline Checkout > 重定向到完整的结帐页面
【发布时间】：2017-03-14 11:09:52
【问题描述】：

问题

我正在关注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 构建的

我们将不胜感激任何与此相关的帮助、经验、见解等！

2017 年 3 月 14 日更新

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

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

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

【问题讨论】：

标签： angularjs 2checkout

【解决方案1】：

问题总结

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

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

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 脚本。因此，所有内容都以正确的顺序加载。

【讨论】：

【解决方案2】：

每当您使用内联并且它重定向到标准结帐时，您会丢失参数或用户输入的值会导致问题。

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

您需要包含在上述 html sn-p 中的唯一附加参数是 li_0_duration。设置您的值（例如 1 年），您应该一切就绪，只要您包含 javascript 行，iframe 就应该显示，听起来您已经涵盖了。

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

【讨论】：

除了缺少的信用卡数据之外，没有空的必填字段或任何错误消息，设计为空，因为用户应该提供它，对吧？
我用截图更新了我的问题。你能发现我做错了什么吗？
我发现了问题。 2Checkout 脚本在 <form> 位于 DOM 之前加载。我有一个解决方法（接受的答案）。感谢您的帮助。

【解决方案3】：

确保所有强制参数都存在

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

【讨论】：