自定义条纹结帐按钮不适用于移动设备

Question

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

我已经遵循了Stripe网站上的自定义集成说明,它在桌面上运行良好,但遗憾的是在移动设备上没有任何功能.

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

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

有任何想法吗？

编辑:经过大量的游戏后,我发现它无法在iOS 7中启动,如果延迟大于1秒钟的话.

例如,以下工作:

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请求的结果中调用它,则需要重构代码,以便不需要这样做.