bparanj/new.html.erb

## new.html.erb
<form action="create" method="POST" id="payment-form">
  <span class="payment-errors">
  	<noscript>JavaScript is not enabled and is required for this form. First enable it in your web browser settings.</noscript>
	</div>
  </span>
  <% if @error_message %>
	<%= @error_message %>
  <% end %>

  <%= hidden_field_tag :authenticity_token, form_authenticity_token -%>

  <div class="form-row">
    <label>
      <span>Card Number</span>
      <input type="text" size="20" data-stripe="number"/>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Expiration</span>
<%= select_month nil, {add_month_numbers: true}, {name: nil, id: "card_month", data: {stripe: "exp-month"}} %>

    </label>
    <span>/</span>
	<%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, id: "card_year", data: {stripe: "exp-year"}} %>

  </div>

  <button type="submit">Submit Payment</button>

</form>

## stripe.html.erb
<!DOCTYPE html>
<html>
<head>

  <title>Striped</title>

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application' %>

  <%= javascript_include_tag 'https://js.stripe.com/v2/' %>
  <%= tag :meta, :name => "stripe-key", :content => STRIPE_PUBLIC_KEY %>

  <script type="text/javascript">
    // This identifies your website in the createToken call below
    Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'));

    var stripeResponseHandler = function(status, response) {
      var $form = $('#payment-form');

      if (response.error) {
        // Show the errors on the form
        $form.find('.payment-errors').text(response.error.message);
        $form.find('button').prop('disabled', false);
      } else {
        // token contains id, last4, and card type
        var token = response.id;
        // Insert the token into the form so it gets submitted to the server
        $form.append($('<input type="hidden" name="stripeToken" />').val(token));
        // and re-submit
        $form.get(0).submit();
      }
    };

    jQuery(function($) {
      $('#payment-form').submit(function(event) {
        var $form = $(this);

        // Disable the submit button to prevent repeated clicks
        $form.find('button').prop('disabled', true);

        Stripe.card.createToken($form, stripeResponseHandler);

        // Prevent the form from submitting with the default action
        return false;
      });
    });

  </script>

  <%= csrf_meta_tags %>

</head>
<body data-no-turbolink>

	<p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>

	<%= yield %>


</body>
</html>
	<form action="create" method="POST" id="payment-form">
	<span class="payment-errors">
	<noscript>JavaScript is not enabled and is required for this form. First enable it in your web browser settings.</noscript>
	</div>
	</span>
	<% if @error_message %>
	<%= @error_message %>
	<% end %>

	<%= hidden_field_tag :authenticity_token, form_authenticity_token -%>

	<div class="form-row">
	<label>
	<span>Card Number</span>
	<input type="text" size="20" data-stripe="number"/>
	</label>
	</div>

	<div class="form-row">
	<label>
	<span>Expiration</span>
	<%= select_month nil, {add_month_numbers: true}, {name: nil, id: "card_month", data: {stripe: "exp-month"}} %>

	</label>
	<span>/</span>
	<%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, id: "card_year", data: {stripe: "exp-year"}} %>

	</div>

	<button type="submit">Submit Payment</button>

	</form>
	<!DOCTYPE html>
	<html>
	<head>

	<title>Striped</title>

	<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
	<%= javascript_include_tag 'application' %>

	<%= javascript_include_tag 'https://js.stripe.com/v2/' %>
	<%= tag :meta, :name => "stripe-key", :content => STRIPE_PUBLIC_KEY %>

	<script type="text/javascript">
	// This identifies your website in the createToken call below
	Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'));

	var stripeResponseHandler = function(status, response) {
	var $form = $('#payment-form');

	if (response.error) {
	// Show the errors on the form
	$form.find('.payment-errors').text(response.error.message);
	$form.find('button').prop('disabled', false);
	} else {
	// token contains id, last4, and card type
	var token = response.id;
	// Insert the token into the form so it gets submitted to the server
	$form.append($('<input type="hidden" name="stripeToken" />').val(token));
	// and re-submit
	$form.get(0).submit();
	}
	};

	jQuery(function($) {
	$('#payment-form').submit(function(event) {
	var $form = $(this);

	// Disable the submit button to prevent repeated clicks
	$form.find('button').prop('disabled', true);

	Stripe.card.createToken($form, stripeResponseHandler);

	// Prevent the form from submitting with the default action
	return false;
	});
	});

	</script>

	<%= csrf_meta_tags %>

	</head>
	<body data-no-turbolink>

	<p class="notice"><%= notice %></p>
	<p class="alert"><%= alert %></p>

	<%= yield %>


	</body>
	</html>