Paymill Form

paymill_input

<section>
  <h1>Subscription <span class="explain-head">Orchestor</span></h1>
  <div class="clearfix">
    
    
    <div class="half">
      <img src="/png/glyphicons_267_credit_card.png" style="padding-top: 5px; display: inline-block; opacity: .5; vertical-align: baseline; margin-right: 10px"/>
    <h2 style="top: -4px">Payment</h2>
      <p style="margin-left: 40px;">
    With your subscription you are entitled to a bigger repository for your tests
    and more features to assist you in making better apps.</p>
      <%= form_tag "/subscribe", id:"payment-form", class:"form-horizontal" do %>

      <div class="control-group margin-top">
        <label class="control-label">Card Holder</label>
        <div class="controls">
          <input class="card-holdername medium curved" type="text" value="Herminio Vazquez" placeholder="Your name"/>
        </div>
      </div>

      <div class="control-group margin-top">
        <label class="control-label">Card Number</label>
        <div class="controls">
          <input class="card-number medium curved" type="text" value="4111 1111 1111 1111" placeholder="4111 1111 1111 1111"/>
        </div>    
      </div>      

      <div class="control-group margin-top">
        <label class="control-label">Expire Date (MM/YYYY)</label>
        <div class="controls">
          <input class="card-expiry-month input-tiny curved" type="text" value="10" placeholder="12"/>
          <span> / </span>
          <input class="card-expiry-year input-tiny curved" type="text" value="2015" placeholder="2015"/>
        </div>
      </div>

      <div class="control-group margin-top">
        <label class="control-label">CVC</label>
        <div class="controls">
          <input class="card-cvc curved input-tiny" type="text" value="111" placeholder="111"/>
        </div>
      </div>    

      <div id="form_controls" class="super-margin-top" style="text-align: left;">      
        <button type="submit" class="submit-button cancel" data-no-turbolink >
          <img src="/png/glyphicons_203_lock.png" style="display: inline-block; opacity: .5; vertical-align: middle; margin-right: 10px"/>
          Confirm
        </button>  
      </div>
        
    <% end %>
    <%= javascript_include_tag "paymill", "https://bridge.paymill.com/", "data-turbolinks-track" => true %>
    </div>  <!--  half: 1   -->
    <div class="half separate-div">
      <div id="credential_orchestor">
        <h3>Perforchestor Subscription</h3>
        <p class="margin-top" style="font-size: 11px;">
          The charge will appear as <strong class="intern">Perforchestor Service</strong> and charged in <br/><strong class="intern">Euros (EUR)</strong> on your credit card statement.          
        </p>
        <table class="price">
          <thead>
            <tr>
              <th >Item</th>
              <th>Subtotal</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <td style="text-align: right">Total:</td>
              <td class="form-total"></td>
            </tr>
          </tfoot>
          <tbody>
            <tr>
              <td style="line-height: 16px;">
                Orchestor Plan
                <span class="explain" style="display: block; clear:both">Monthly Fee</span>
              </td>
              <td class="form-total"></td>
            </tr>
          </tbody>
        </table>        
        <div id="currency_panel">
          <p class="margin-top">
            Currency Converter<br/>
            <%= select_tag(:curr_option, options_for_select(@currencies, "EUR"), class:"chzn-select") %> = <span id="currency_result"></span>
          </p>
          <p class="margin-top" style="font-size: 11px;">
          Rates are only estimates and could not be the final charge on your account as they might vary according to the exchange rate in the precise moment you conclude your transaction. Exchange rates are according to the European Central Bank exchange <a href="https://www.ecb.int/stats/exchange/eurofxref/html/index.en.html" target="_blank">rates system</a>
          </p>
        </div>
      </div>      
    </div>  <!--  half: 2   -->
  </div>
</section>
<script>
var rates_dump = '<%= raw @rates %>';
var rates_obj = JSON.parse(rates_dump);
rates_obj.push({"EUR":1});
var price_plan_total = <%= @charge %>;

function change_currency() {
  d3.select("#currency_result").text(function(d) {
    var selected_option = $("#curr_option").val();
    return rates_obj.filter(function(d) { return d[selected_option] != null })[0][selected_option]
  });

  d3.selectAll(".form-total").text(function(d) {
    var selected_option = $("#curr_option").val();
    var operation_result = parseFloat(d3.select("#currency_result").text())*price_plan_total;    
    return d3.round(operation_result, 2) + " " + selected_option;
  });
} // change_currency

$(document).ready(function() {  

  $('.chzn-select').chosen({
      allow_single_deselect: true,
      no_results_text: 'No results matched',
      width: '100px'    
  });

  $("#curr_option").chosen().change(change_currency);
  
  change_currency();

  
});
</script>