custom stripe erb

<% unless current_user.stripe_charge_id_opencall_2017.blank? %>
<div class="ui green message"> The provided card has been charged. </div>
<% else %>

<div class="ui grid">
	<div class="twelve wide column">
	<h4>You will only be charged once.</h4>
	<p>Payment processing occurs offsite via Stripe payments. Your credit information is not stored on this site.</p>
	</div>
	<div class="four wide column">
	<image src="/assets/stripelogo2.png" class="ui small image"/>
	</div>
</div><br><br>

<%= form_tag "/payment", :id => "payment-form", :class => 'ui form', :method => :post do %>
<div style="float:right; font-size:smaller; color:#aaa"><strong>&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; Expiration &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;Security Code &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;Zipcode</strong></div>
<label style="font-weight:bold; font-size:0.9rem" >Credit Card <span style="font-size:smaller">- Full number</span></label>
	<div id="card-element" class="field"></div>


  <div id="card-errors" style="color:red;"></div>
  <br>
  <button class="ui button" type="submit">
	  <i class="icon lock"></i>Submit
  </button>
<% end %>

<style>
#card-element {
  border: 1px solid rgba(34, 36, 38, 0.15);
  border-radius: 0.3rem;
  padding:0.8rem;
  }
</style>

<script>

// Create an instance of the card Element
var card = elements.create('card');

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');


var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();


function stripeTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the user if there was an error
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server
      stripeTokenHandler(result.token);
    }
  });
});
</script>
<% end %>