Sunday, February 9, 2014

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.

3 comments:

21st Century Software Solutions said...
This comment has been removed by a blog administrator.
Unknown said...

Very informative and well written post! Quite interesting and nice topic chosen for the post.
CyberPowerPC Laptops

Unknown said...

Not ready to uninstall Postgres Completely from the MAC OSX? Contact to Postgres SQL Support for Windows

Preceding uninstalling the PostgreSQL first you may need to survey the establishment strategy which you performed and related projects which are recorded in "include or evacuate programs". There is some strategy to uninstall the PostgreSQL which you must be taken after yet in the event that you don't have a clue about those method or steps then without a lot of taking pressure quickly contact to Postgres SQL Support for Linux or PostgreSQL Remote Database Service.
We at Cognegic manage numerous sorts of Postgres related issues which make multifaceted nature for you. With propel support and arrangement you can without much of a stretch dispose of your specialized hiccups.

For More Info: https://cognegicsystems.com/
Contact Number: 1-800-450-8670
Email Address- info@cognegicsystems.com
Company’s Address- 507 Copper Square Drive Bethel Connecticut (USA) 06801