Integration problem with Stripe Button #87

pomartel opened this Issue Oct 12, 2012 · 6 comments


None yet

6 participants


I'm trying to integrate the new Stripe Button as described here :

The button shows up fine on a fresh page load but doesn't show at all when the page is loaded with Turbolink. here is the exact code :

<form action="/charge" method="post">
  <script src="" class="stripe-button" data-key="YOUR_KEY"></script>

The JS file has no initialization method. It just executes when it's loaded. Is that a use case that should work with Turbolinks? I see inline JS should load fine but I'm not sure about external scripts.

reed commented Oct 12, 2012

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.value for attr in script.attributes
      copy.setAttribute 'data-turbolinks-evaluated', ''
      parent = script.parentNode
      parent.removeChild script
      parent.insertBefore copy, parent.childNodes[0]

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 commented Oct 15, 2012

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 commented Oct 26, 2012

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

@dhh dhh closed this Nov 26, 2012


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 ?


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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment