自定義條紋結帳按鈕將無法在移動工作

Question

我目前正在將條紋整合到一個網站，並遇到與自定義結帳集成問題。

我按照Stripe website上的定製集成說明進行操作，它在桌面上效果很好，但不幸在移動設備上沒有任何效果。

我有jQuery的處理程序被點擊我的自定義按鈕時觸發，它運行handler.open({…})，按照這個文檔中，記錄了以下JavaScript錯誤：

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

任何想法？

編輯：經過大量的遊戲後，我發現如果延遲大於1秒左右，iOS7將無法啓動。

例如，下面的工作：

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

而且下面沒有：

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

在上面的例子中，stripe_payment()設置和調用處理程序。正如前面提到的，在AJAX調用之後調用處理程序時（可能需要太長的時間），可能會有相同的影響。還值得注意的是，即使桌面瀏覽器延遲5秒也能正常工作。

Answer 1

這是因爲this.frame未定義而引起的。在條紋的checkout.js，this.frame實際上只是錯誤之前設置：發生

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

的問題，因爲window.open失敗。這是因爲瀏覽器的彈出式窗口攔截器; window.open只能從某些事件處理程序（如按下按鈕）成功調用。如果你從一個足夠長的時間內調用它，它可能會失敗。

您需要直接從按鈕的點擊事件中調用handler.open({…})。如果你從AJAX請求的結果中調用它，你需要重構你的代碼，這樣就不需要了。