Integration problem with Stripe Button

[turbolinks]

Integration problem with Stripe Button

[reed]

Would this work?

$(document).bind 'page:load', ->
  $.getScript $('.stripe-button').attr 'src'

I can't answer your question about whether or not Turbolinks should handle external scripts, but if so, this could possibly be a way to handle it:

executeScriptTags = ->
  for script in document.body.getElementsByTagName 'script' when script.type in ['', 'text/javascript']
    if script.src? and not script.getAttribute('data-turbolinks-evaluated')?
      copy = document.createElement 'script'
      copy.setAttribute attr.name, attr.value for attr in script.attributes
      copy.setAttribute 'data-turbolinks-evaluated', ''
      parent = script.parentNode
      parent.removeChild script
      parent.insertBefore copy, parent.childNodes[0]
    else
      eval(script.innerHTML)

[pomartel]

Thanks for your help Nick! I forked Turbolinks and tried your second solution and it almost worked. I display three buttons on the page, one for each plan. That's what it looks like on a fresh page load and that's what it looks like with Turbolinks when I apply your patch.

I read the JS source code of the Stripe Button and what the script does basically is take all the script elements with the class "stripe-button" and insert the button after the last one. This works on a fresh load since the script is not delayed and everything after the script tag has not yet been loaded. This won't work with Turbolinks though since the page has been fully loaded when the scripts are executed.

I guess there is not much we can do about that. For now, I just disabled Turbolinks for that specific page but I will contact Stripe support (they have great support!) to see if they could think of another way of doing this.

I still think your patch would be helpful. Maybe you could suggest a pull request?

[reed]

I didn't think to test multiple buttons on the same page, but now that I have, I see what you're seeing. It is certainly a bit unorthodox the way the Stripe button JS works, and I completely agree with your assessment on how to proceed from here. Since Stripe's Button feature is still in beta (according to their documentation), this is something I would think their support team would be willing to consider fixing.

Thanks for your opinion on my patch. I'm going to submit a pull request for it in a few minutes.

[maccman]

I've fixed this on Stripe's side. Should be deployed soonish.

[CoincoinNico]

Hello,

I'm getting the error with turbolinks (Uncaught error: StripeCheckout is not defined). Removing turbolinks fixes the issue.

Is there something I'm missing ? Can't I get turbolinks & stripe ?

[bogdanovich]

Getting the same error with turbolinks and checkout.js "Uncaught ReferenceError: StripeCheckout is not defined"