Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Integration problem with Stripe Button #87

Closed
pomartel opened this Issue · 6 comments

6 participants

@pomartel

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.

@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)
@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
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.

@maccman

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

@dhh dhh closed this
@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"

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.