Subversion Repositories web.creative

 {% if success %}
 <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}</div>
 {% endif %}
<form class="form-horizontal">
  <fieldset id="payment">
  <legend>{{ text_credit_card }}</legend>
  {% if existing_cards %}
    <div class="form-group">
      <label class="col-sm-2 control-label">{{ entry_card }}</label>
      <div class="col-sm-10">
      <label class="radio-inline">
        <input type="radio" name="CreateToken" value="0" checked="checked"/>
        {{ entry_card_existing }}
      </label>
      <label class="radio-inline">
        <input type="radio" name="CreateToken" value=""/>
        {{ entry_card_new }}
      </label>
      </div>
    </div>
    <div id="card-existing">
      <div class="form-group required">
      <label class="col-sm-2 control-label" for="Token">{{ entry_cc_choice }}</label>
      <div class="col-sm-8">
        <select name="Token" class="form-control">
        {% for existing_card in existing_cards %}
          <option value="{{ existing_card.token }}">{{ text_card_type }} {{ existing_card.type }}, {{ text_card_digits }} {{ existing_card.digits }}, {{ text_card_expiry }} {{ existing_card.expiry }}</option>
        {% endfor %}
        </select>
      </div>
      <div class="col-sm-2">
        <input type="button" value="{{ button_delete_card }}" id="button-delete" data-loading-text="{{ text_loading }}" class="btn btn-danger" />
      </div>
      </div>
      <div class="form-group required">
      <label class="col-sm-2 control-label" for="input-cc-cvv2">{{ entry_cc_cvv2 }}</label>
      <div class="col-sm-10">
        <input type="text" name="cc_cvv2" value="" placeholder="{{ entry_cc_cvv2 }}" id="input-cc-cvv2" class="form-control" />
      </div>
      </div>
    </div>
    <div  style="display: none" id="card-new">
    {% else %}
      <div id="card-new">
    {% endif %}
    <div class="form-group required">
      <label class="col-sm-2 control-label" for="input-cc-owner">{{ entry_cc_owner }}</label>
      <div class="col-sm-10">
      <input type="text" name="cc_owner" value="" placeholder="{{ entry_cc_owner }}" id="input-cc-owner" class="form-control" />
      </div>
    </div>
    <div class="form-group required">
      <label class="col-sm-2 control-label" for="input-cc-type">{{ entry_cc_type }}</label>
      <div class="col-sm-10">
      <select name="cc_type" id="input-cc-type" class="form-control">
        {% for card in cards %}
          <option value="{{ card.value }}">{{ card.text }}</option>
        {% endfor %}
      </select>
      </div>
    </div>
    <div class="form-group required">
      <label class="col-sm-2 control-label" for="input-cc-number">{{ entry_cc_number }}</label>
      <div class="col-sm-10">
      <input type="text" name="cc_number" value="" placeholder="{{ entry_cc_number }}" id="input-cc-number" class="form-control" />
      </div>
    </div>
    <div class="form-group required">
      <label class="col-sm-2 control-label" for="input-cc-expire-date">{{ entry_cc_expire_date }}</label>
      <div class="col-sm-3">
      <select name="cc_expire_date_month" id="input-cc-expire-date" class="form-control">
        {% for month in months %}
          <option value="{{ month.value }}">{{ month.text }}</option>
        {% endfor %}
      </select>
      </div>
      <div class="col-sm-3">
      <select name="cc_expire_date_year" class="form-control">
        {% for year in year_expire %}
          <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-cc-cvv2">{{ entry_cc_cvv2 }}</label>
      <div class="col-sm-10">
      <input type="text" name="cc_cvv2" value="" placeholder="{{ entry_cc_cvv2 }}" id="input-cc-cvv2" class="form-control" />
      </div>
    </div>
    {% if sagepay_direct_card %}
      <div class="form-group">
        <label class="col-sm-2 control-label" for="input-cc-save">{{ entry_card_save }}</label>
        <div class="col-sm-2">
        <input type="checkbox" name="CreateToken" value="1" id="input-cc-save"/>
        </div>
      </div>
    {% endif %}
    </div>
  </fieldset>
</form>
<div class="buttons">
  <div class="pull-right">
  <input type="button" value="{{ button_confirm }}" id="button-confirm" data-loading-text="{{ text_loading }}" class="btn btn-primary" />
  </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
{% if existing_cards is not empty %}
  $('#card-new input').prop('disabled', true);
  $('#card-new input').prop('disabled', true);
  $('#card-new select').prop('disabled', true);
{% endif %}
});
//</script>
<script type="text/javascript">
  $('input[name=\'CreateToken\']').on('change', function() {
      if (this.value === '0') {
        $('#card-existing').show();
        $('#card-new').hide();
        $('#card-new input').prop('disabled', true);
        $('#card-new select').prop('disabled', true);
        $('#card-existing select').prop('disabled', false);
        $('#card-existing input').prop('disabled', false);
      } else {
        $('#card-existing').hide();
        $('#card-new').show();
        $('#card-new input').prop('disabled', false);
        $('#card-new select').prop('disabled', false);
        $('#card-existing select').prop('disabled', true);
        $('#card-existing input').prop('disabled', true);
      }
    });
//</script>
<script type="text/javascript"><!--
$('#button-confirm').bind('click', function() {
      $.ajax({
        url: 'index.php?route=extension/payment/sagepay_direct/send',
        type: 'post',
        data: $('#card-new :input[type=\'text\']:enabled, #card-new select:enabled, #card-new :input[type=\'checkbox\']:checked:enabled, #payment select:enabled, #card-existing :input:enabled'),
        dataType: 'json',
        cache: false,
      beforeSend: function() {
          $('#button-confirm').button('loading');
        },
    complete: function() {
          $('#button-confirm').button('reset');
        },
      success: function(json) {
          if (json['ACSURL']) {
            $('#3dauth').remove();

            html = '<form action="' + json['ACSURL'] + '" method="post" id="3dauth">';
            html += '  <input type="hidden" name="MD" value="' + json['MD'] + '" />';
            html += '  <input type="hidden" name="PaReq" value="' + json['PaReq'] + '" />';
            html += '  <input type="hidden" name="TermUrl" value="' + json['TermUrl'] + '" />';
            html += '</form>';

            $('#payment').after(html);

            $('#3dauth').submit();
          }

          if (json['error']) {
            alert(json['error']);
          }

          if (json['redirect']) {
            location = json['redirect'];
          }
        }
      });
    });
//--></script>
<script type="text/javascript"><!--
$('#button-delete').bind('click', function () {
  if (confirm('{{ text_confirm_delete }}')) {
    $.ajax({
      url: 'index.php?route=extension/payment/sagepay_direct/delete',
      type: 'post',
      data: $('#card-existing :input[name=\'Token\']'),
      dataType: 'json',
      beforeSend: function () {
        $('#button-delete').button('loading');
      },
      complete: function () {
        $('#button-delete').button('reset');
      },
      success: function (json) {
        if (json['error']) {
          alert(json['error']);
        }
      
        if (json['success']) {
          $.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>