自定义条纹结帐按钮无法在移动设备上运行

Question

我目前正在将Stripe整合到一个网站中，并遇到了自定义结帐集成的问题。

我已经按照Stripe website上的自定义集成说明操作了，它在桌面上运行良好，但遗憾的是在移动设备上无效。

我在jQuery中有一个处理程序，当我点击我的自定义按钮时它会触发，并且根据文档运行handler.open({…})，但会记录以下JavaScript错误：

TypeError: 'undefined' is not an object (evaluating '(s=this.frame).focus') - checkout.js:2:21656

有什么想法吗？

编辑经过大量的游戏后，我发现如果延迟时间超过1秒左右，它就无法在iOS 7中启动。

例如，以下作品：

setTimeout(function(){stripe_payment();}, 1000);

以下不是：

setTimeout(function(){stripe_payment();}, 2000);

在上面的示例中，stripe_payment()设置并调用处理程序。如前所述，在AJAX调用（可能需要太长时间）之后调用处理程序时可能会产生相同的影响。值得注意的是，即使桌面浏览器上的5秒延迟也能正常工作。

Answer 1

这是因为this.frame未定义。在Stripe的checkout.js中，this.frame实际上是在错误之前设置的：

this.frame = window.open(this.fullPath(), "stripe_checkout_tabview")

出现此问题是因为window.open失败。这是因为浏览器的弹出窗口拦截器;只能从某些事件处理程序（如按下按钮）成功调用window.open。如果你从一个（足够长的）超时调用它，它可能会失败。

您需要直接从按钮的点击事件中调用handler.open({…})。如果您是从AJAX请求的结果中调用它，则需要重构代码，以便不需要这样做。