andrewculver/koudoku

<% content_for :koudoku do %>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<% end %>

<%= form_for @subscription, url: url, html: {id: 'payment-form', class: 'form-horizontal'} do |f| %>

  <fieldset>

    <legend><%= title %></legend>
    
    <div class="control-group">
      <label class="control-label"><%= t('koudoku.payment.card_number') %></label>
      <div class="controls">
        <input type="text" size="20" autocomplete="off" class="card-number"/>
      </div>
    </div>

    <div class="control-group">
      <label class="control-label"><%= t('koudoku.payment.expiration') %></label>
      <div class="controls">
        <input type="text" size="2" class="card-expiry-month input-mini"/>
        <span> / </span>
        <input type="text" size="4" class="card-expiry-year input-mini"/>
      </div>
    </div>

    <div class="control-group">
      <label class="control-label"><%= t('koudoku.payment.cvc') %></label>
      <div class="controls">
        <input type="text" size="4" autocomplete="off" class="card-cvc input-small"/>
      </div>
    </div>

    <div class="alert alert-error payment-errors"></div>
    <%= f.hidden_field :plan_id %>
    
  </fieldset>

  <div class="control-group">
    <div class="controls">
      <% if Koudoku.free_trial? %>
        <button type="submit" class="btn btn-primary submit-button"><%= t('koudoku.payment.save_billing_info') %></button>
      <% else %>
        <button type="submit" class="btn btn-primary submit-button"><%= t('koudoku.payment.upgrade_account') %></button>
      <% end %>
      <%= link_to t('koudoku.payment.cancel'), owner_subscriptions_path(@owner), class: 'btn' %>
    </div>
  </div>

<% end %>

<script type="text/javascript">

  // All this code taken from Stripe's own examples at:
  // https://stripe.com/docs/tutorials/forms .
  
  function stripeResponseHandler(status, response) {

      if (response.error) {
          // show the errors on the form
          $(".payment-errors").text(response.error.message).show();
          $(".submit-button").removeAttr("disabled");
      } else {
          var form$ = $("#payment-form");
          // token contains id, last4, and card type
          // insert the token into the form so it gets submitted to the server
          form$.append("<input type='hidden' name='subscription[credit_card_token]' value='" + response['id'] + "'/>");
          form$.append("<input type='hidden' name='subscription[last_four]' value='" + response['last4'] + "'/>");
          form$.append("<input type='hidden' name='subscription[card_type]' value='" + response['card_type'] + "'/>");
          // and submit
          form$.get(0).submit();
      }
  }

  $(document).ready(function() {

    Stripe.setPublishableKey("<%= Koudoku.stripe_publishable_key %>");
    
    // By default, don't show errors.
    $(".payment-errors").hide()
    
    $("#payment-form").submit(function(event) {

      // disable the submit button to prevent repeated clicks
      $('.submit-button').attr("disabled", "disabled");

      Stripe.createToken({
          number: $('.card-number').val(),
          cvc: $('.card-cvc').val(),
          exp_month: $('.card-expiry-month').val(),
          exp_year: $('.card-expiry-year').val()
      }, stripeResponseHandler);

      // prevent the form from submitting with the default action
      return false;
    });
  });
  
</script>