Ruby on Rails, Stripe Checkout Payments, and Internet Explorer 9, IE 9 Not Working

Alright, this was a long battle, but I finally figured out what was happening. I'm not sure why this fails, but at least I know what's causing the error and how to fix it.

Problem

So the setup is the following:

• Ruby on Rails Application
• Using Stripe Checkout (JS) for Payments (version 3 I believe)
• Payments working in almost every browser except for Internet Explorer 9

The way the error manifested itself is that a IE 9 user would try to make a payment - the Stripe form would pop up properly, the user is able to enter their information, and the Green Check even happens and the Stripe form disappears but

• The following post action of the form doesn't happen
• And when I checked the Stripe dashboard - it looks like the payment didn't actually go through

So what's the culprit? It has to do with the form_tag and what it interjects into the form. I basically had the following code:

<%= form_tag "/some_action", class: "stripe-form" do %>
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="<%= Rails.configuration.stripe[:publishable_key] %>"
    data-amount="<%= amount %>"
    data-name="app"
    data-description="<%= description %>"
    data-email="<%= current_user.email %>">
  </script>
<% end %>

So you know how the form_tag helper throws in the authenticity_token for security (if you don't, visit your webpage and look at the HTML source and you'll see that rails injects 2 hidden input fields for security checks). Now what's the issue? IE 9 does not like the DIV tags that surround the authenticity_token inputs fields. That's what causes the issue.

Solution

So how to solve this? Well, I couldn't find an easy way to get rails to do this itself through the form_tag (and I would welcome if anybody knows how to do this using the form_tag), but basically you have to manually reconstruct the HTML that form_tag produces, and just don't include the DIV tags that surround the authenticity_token inputs. I also added some "display:none" styles to make sure formatting look good. So the code looks like this (the important thing is to remember to still include the authenticity_token inputs, just NOT inside DIV tags):

<form accept-charset="UTF-8" action="<%= "/some_action" %>" method="POST" class="stripe-form">
  <input name="utf8" type="hidden" value="✓" style="display:none">
  <input name="authenticity_token" type="hidden" value="<%= form_authenticity_token %>" style="display:none">

  <script>
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="<%= Rails.configuration.stripe[:publishable_key] %>"
    data-amount="<%= amount %>"
    data-name="app"
    data-description="<%= description %>"
    data-email="<%= current_user.email %>">
  </script>
</form>

Hope this helps out some peeps.