stripe-rails-tachyons-example.html.erb

<div class='mw6 center ph2 pv3 pv4-m pv5-l'>
  <h2><%= @user.stripe_customer_token ? 'Change' : 'Add a' %> credit card</h2>

  <%= form_tag @user, method: :put, id: 'payment-form' do %>
    <span class="payment-errors"></span>

    <div class="mt3">
      <label>
        <span class="b db">Card Number</span>
        <input type="text" size="20" data-stripe="number" class="pa2 input-reset ba bg-transparent">
      </label>
    </div>

    <div class="mt3">
      <label>
        <span class="b db">Expiration (MM/YY)</span>
        <input type="text" size="2" data-stripe="exp_month" class="pa2 input-reset ba bg-transparent">
      </label>
      <span> / </span>
      <input type="text" size="2" data-stripe="exp_year" class="pa2 input-reset ba bg-transparent">
    </div>

    <div class="mt3">
      <label>
        <span class="b db">CVC</span>
        <input type="text" size="4" data-stripe="cvc" class="pa2 input-reset ba bg-transparent">
      </label>
    </div>

    <div class="mt3">
      <input type="submit" class="submit f6 fw4 hover-bg-light-purple hover-white light-purple grow no-underline mid-gray dib pv2 ph3 ba     b--light-purple bg-white pointer" value="<%= @user.stripe_customer_token ? 'Change' : 'Add a' %> credit card">
    </div>
  <% end %>
</div>

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script>
Stripe.setPublishableKey('<%= ENV['STRIPE_PUBLISHABLE_KEY'] || 'pk_test_KEY_HERE' %>')

$(function() {
  var $form = $('#payment-form')

  $form.submit(function(event) {
    // Disable the submit button to prevent repeated click:
    $form.find('.submit').prop('disabled', true)
    // Request a token from Stripe:
    Stripe.card.createToken($form, stripeResponseHandler)

    // Prevent the form from being submitted:
    return false
  })
})

function stripeResponseHandler(status, response) {
  // Grab the form:
  var $form = $('#payment-form')
  if (response.error) { // Problem!
    // Show the errors on the form:
    $form.find('.payment-errors').text(response.error.message)
    $form.find('.submit').prop('disabled', false) // Re-enable submission
  } else { // Token was created!
    // Get the token ID:
    var token = response.id
    // Insert the token ID into the form so it gets submitted to the server:
    $form.append($('<input type="hidden" name="stripe_token">').val(token))
    // Submit the form:
    $form.get(0).submit()
  }
}
</script>