自定義條紋結帳按鈕不適用於移動設備

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只能從某些事件處理程序（如按下按鈕）成功調用。 如果您從（足夠長的）超時調用它，它可能會失敗。

您需要直接從按鈕的click事件中調用handler.open({…}) 。 如果您從AJAX請求的結果中調用它，則需要重構代碼，以便不需要這樣做。