Skip to content
This repository

Integration problem with Stripe Button #87

Closed
pomartel opened this Issue October 12, 2012 · 4 comments

4 participants

Pierre Olivier Martel David Heinemeier Hansson Nick Reed Alex MacCaw
Pierre Olivier Martel

I'm trying to integrate the new Stripe Button as described here : https://stripe.com/docs/button

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="https://button.stripe.com/v1/button.js" class="stripe-button" data-key="YOUR_KEY"></script>
</form>

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.

Nick Reed
Collaborator

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)
Pierre Olivier Martel

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?

Nick Reed
Collaborator

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.

Alex MacCaw

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

David Heinemeier Hansson dhh closed this November 26, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.