Subversion Repositories web.creative

<form id="cardconnect-form" action="{{ action }}" method="post" class="form form-horizontal">
  <fieldset id="payment">
    <legend>{{ text_card_details }}</legend>
    {% if echeck %}
    <div class="form-group">
      <label class="col-sm-2 control-label" for="input-method">{{ entry_method }}</label>
      <div class="col-sm-10">
        <select name="method" id="input-method" class="form-control">
          <option value="card">{{ text_card }}</option>
          <option value="echeck">{{ text_echeck }}</option>
        </select>
      </div>
    </div>
    {% endif %}
    <div class="card_container">
      <div class="form-group" {% if not store_cards %} style="display: none;" {% endif %}>
        <label class="col-sm-2 control-label">{{ entry_card_new_or_old }}</label>
        <div class="col-sm-10">
          <label class="radio-inline">
            <input type="radio" name="card_new" value="1" checked="checked"/>
            {{ entry_card_new }}</label>
          <label class="radio-inline">
            <input type="radio" name="card_new" value="0"/>
            {{ entry_card_old }}</label>
        </div>
      </div>
      <div class="card_new_container">
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-card-type">{{ entry_card_type }}</label>
          <div class="col-sm-10">
            <select name="card_type" id="input-card-type" class="form-control">
             {% for card_type in card_types %}
              <option value="{{ card_type.value }}">{{ card_type.text }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="form-group required">
          <label class="col-sm-2 control-label" for="input-card-number">{{ entry_card_number }}</label>
          <div class="col-sm-10">
            <input type="text" name="card_number" value="" placeholder="{{ entry_card_number }}" id="input-card-number" class="form-control" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-card-expiry">{{ entry_card_expiry }}</label>
          <div class="col-sm-3">
            <select name="card_expiry_month" id="input-card-expiry" class="form-control">
             {% for month in months %}
              <option value="{{ month.value }}">{{ month.text }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-sm-3">
            <select name="card_expiry_year" class="form-control">
             {% for year in years %}
              <option value="{{ year.value }}">{{ year.text }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="form-group required">
          <label class="col-sm-2 control-label" for="input-card-cvv2">{{ entry_card_cvv2 }}</label>
          <div class="col-sm-10">
            <input type="text" name="card_cvv2" value="" placeholder="{{ entry_card_cvv2 }}" id="input-card-cvv2" class="form-control" />
          </div>
        </div>
        {% if store_cards %}
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-card-save" style="padding-top:0">{{ entry_card_save }}</label>
          <div class="col-sm-10">
            <input type="checkbox" name="card_save" value="1" id="input-card-save"/>
          </div>
        </div>
        {% endif %} </div>
      <div class="card_old_container" style="display: none">
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-card-choice">{{ entry_card_choice }}</label>
          <div class="col-sm-8">
            <select name="card_choice" id="input-card-choice" class="form-control" {% if not cards %} disabled {% endif %}>
              {% if cards %}
              <option value="">{{ text_select_card }}</option>
               {% for card in cards %}
              <option value="{{ card.token }}">{{ card.type }}, &nbsp; {{ card.account }}, &nbsp; {{ card.expiry }}</option>
                {% endfor %}
              {% else %}
              <option value="">{{ text_no_cards }}</option>
              {% endif %}
            </select>
          </div>
          <div class="col-sm-2">
            <input type="button" value="{{ button_delete }}" id="button-delete" data-loading-text="{{ text_loading }}" class="btn btn-danger" />
          </div>
        </div>
      </div>
    </div>
    <div class="echeck_container" style="display:none">
      <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-account-number">{{ entry_account_number }}</label>
        <div class="col-sm-10">
          <input type="text" name="account_number" value="" placeholder="{{ entry_account_number }}" id="input-account-number" class="form-control" />
        </div>
      </div>
      <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-routing-number">{{ entry_routing_number }}</label>
        <div class="col-sm-10">
          <input type="text" name="routing_number" value="" placeholder="{{ entry_routing_number }}" id="input-routing-number" class="form-control" />
        </div>
      </div>
    </div>
  </fieldset>
</form>
<div class="buttons">
  <div class="pull-right">
    <input type="button" value="{{ button_confirm }}" id="button-confirm" class="btn btn-primary" data-loading-text="{{ text_loading }}">
  </div>
</div>
<script type="text/javascript"><!--
$('select[name="method"]').on('change', function() {
  if ($(this).val() == 'card') {
    $('#payment legend').text('{{ text_card_details }}');
    $('.card_container').show();
    $('.echeck_container').hide();
  } else {
    $('#payment legend').text('{{ text_echeck_details }}');
    $('.card_container').hide();
    $('.echeck_container').show();
  }
});
//--></script> 
<script type="text/javascript"><!--
$('input[name="card_new"]').on('change', function() {
  if ($(this).val() == '1') {
    $('.card_new_container').show();
    $('.card_old_container').hide();
  } else {
    $('.card_new_container').hide();
    $('.card_old_container').show();
  }
});
//--></script> 
<script type="text/javascript"><!--
$('#button-delete').bind('click', function() {
  if (confirm('{{ text_confirm_delete }}')) {
    $.ajax({
      url: 'index.php?route=extension/payment/cardconnect/delete',
      type: 'post',
      data: $('#input-card-choice'),
      dataType: 'json',
      beforeSend: function() {
        $('.cardconnect_message').remove();
        $('#payment').before('<div class="alert alert-info cardconnect_wait"><i class="fa fa-info-circle"></i> {{ text_wait }}</div>');
        $('#button-delete').button('loading');
      },
      complete: function() {
        $('.cardconnect_wait').remove();
        $('#button-delete').button('reset');
      },
      success: function(json) {
        if (json['error']) {
          $('#cardconnect-form').before('<div class="alert alert-danger cardconnect_message" style="display:none"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

          $('.cardconnect_message').fadeIn();
        } else {
          $.ajax({
            url: 'index.php?route=checkout/confirm',
            dataType: 'html',
            success: function (html) {
              $('#collapse-checkout-confirm .panel-body').html(html);
            },
            error: function (xhr, ajaxOptions, thrownError) {
              alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
          });
        }
      }
    });
  }
});
//--></script> 
<script type="text/javascript"><!--
$('#button-confirm').bind('click', function() {
  $.ajax({
    url: 'index.php?route=extension/payment/cardconnect/send',
    type: 'post',
    data: $('#cardconnect-form').serialize(),
    dataType: 'json',
    beforeSend: function() {
      $('.cardconnect_message').remove();
      $('.text-danger').remove();
      $('#payment').find('*').removeClass('has-error');
      $('#payment').before('<div class="alert alert-info cardconnect_wait"><i class="fa fa-info-circle"></i> {{ text_wait }}</div>');
      $('#button-confirm').button('loading');
    },
    complete: function() {
      $('.cardconnect_wait').remove();
      $('#button-confirm').button('reset');
    },
    success: function(json) {
      if (json['error']['warning']) {
        $('#cardconnect-form').before('<div class="alert alert-danger cardconnect_message" style="display:none"><i class="fa fa-exclamation-circle"></i> ' + json['error']['warning'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

        $('.cardconnect_message').fadeIn();
      }

      if (json['error']['card_number']) {
        $('#input-card-number').after('<div class="text-danger">' + json['error']['card_number'] + '</div>');

        $('#input-card-number').closest('.form-group').addClass('has-error');
      }

      if (json['error']['card_cvv2']) {
        $('#input-card-cvv2').after('<div class="text-danger">' + json['error']['card_cvv2'] + '</div>');

        $('#input-card-cvv2').closest('.form-group').addClass('has-error');
      }

      if (json['error']['card_choice']) {
        $('#input-card-choice').after('<div class="text-danger">' + json['error']['card_choice'] + '</div>');

        $('#input-card-choice').closest('.form-group').addClass('has-error');
      }

      if (json['error']['method']) {
        $('#input-method').after('<div class="text-danger">' + json['error']['method'] + '</div>');

        $('#input-method').closest('.form-group').addClass('has-error');
      }

      if (json['error']['account_number']) {
        $('#input-account-number').after('<div class="text-danger">' + json['error']['account_number'] + '</div>');

        $('#input-account-number').closest('.form-group').addClass('has-error');
      }

      if (json['error']['routing_number']) {
        $('#input-routing-number').after('<div class="text-danger">' + json['error']['routing_number'] + '</div>');

        $('#input-routing-number').closest('.form-group').addClass('has-error');
      }

      if (json['success']) {
        location = json['success'];
      }
    }
  });
});
//--></script>