gistfile1.txt

:css
  .amt, .exp{
    border: 1px solid #e8e8e8;
    padding: 5px;}

- @order = Order.new
= form_for @order, :remote => true, html: { class: 'form-horizontal well' } do |f|
  - if @order.errors.any?
    .error_messages
      %h2
        = pluralize(@order.errors.count, "error")
        prohibited this order from being saved:
      %ul
        - @order.errors.full_messages.each do |msg|
          %li= msg
  = f.hidden_field :stripe_card_token
  - unless current_user.nil?
    = f.hidden_field :user_id, :value => current_user.id
  = label_tag :card_number, "Card Number"
  = text_field_tag :card_number, nil, name: nil , class: :card , :style => "border: 1px solid #e8e8e8; height: 25px; width: 200px;"
  = label_tag :card_code, "CVV"
  = text_field_tag :card_code, nil, name: nil , class: :cvv , :style => "border: 1px solid #e8e8e8; height: 25px;"
  = label_tag :card_month, "Expiration Date"
  = select_month nil, { add_month_numbers_true: true }, { name: nil, id: "card_month" , class: :exp}
  = select_year nil, { start_year: Date.today.year, end_year: Date.today.year+15 }, { name: nil, id: "card_year"  , class: :exp}
  = label_tag :card_number, "Credits"
  = f.select :amount, options_for_select((100..1000).step(100).to_a.map{|s| ["#{s} for $#{s/10}", s/10]}, class: :amt)
  .other_method{ :style => "float: right; padding: 7px;" }
    %p{:style => "float: left;"}= "- or"
    = image_submit_tag "ppal.png" , :style => "float: right; height: 25px; margin-top: -3px; margin-left: 5px; "
  = f.submit "Purchase" , class: :purchase , :style => "color: white; background:cccccc; padding: 5px;"
  = image_tag "credit-cards.png" , :width => 203 , :style => "margin-left: 94px; margin-right: 36px;"
  = image_tag "cvc-icon.jpg" , :height => 23 , :style => "margin-top: 2px;"
  #stripe_error.alert{:style => "display: none; color: #ff0000; margin-top: 10px; float: left; margin-left: 90px;"}
    %noscript JavaScript is not enabled and is required for this form. First enable it in your web browser settings.
.clear

    
:javascript
  var order;

  jQuery(document).ready(function() {
    Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'));
    return order.setupForm();
  });

  order = {
    setupForm: function() {
      return $('#new_order').submit(function() {
        $('input[type=submit]').attr('disabled', true);
        order.processCard();
        return false;
      });
    },
    processCard: function() {
      var card;
      card = {
        number: $('#card_number').val(),
        cvc: $('#card_code').val(),
        expMonth: $('#card_month').val(),
        expYear: $('#card_year').val()
      };
      return Stripe.createToken(card, order.handleStripeResponse);
    },
    handleStripeResponse: function(status, response) {
      if (status === 200) {
        $('#order_stripe_card_token').val(response.id);
        return $('#new_order')[0].submit();
      } else {
        $('#stripe_error').text(response.error.message);
        $('#stripe_error').show();
        return $('input[type=submit]').attr('disabled', false);
      }
    }
  };