Subversion Repositories web.creative

{% if existing_cards %}
  <legend>{{ text_credit_card }}</legend>
  <div class="form-horizontal">
    <div id="choose-card" 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="existing-card" value="1" checked="checked"/>
      {{ entry_card_existing }}
      </label>
      <label class="radio-inline">
      <input type="radio" name="existing-card" value="0"/>
      {{ entry_card_new }}
      </label>
    </div>
    </div>
  </div>
  <form id="payment-existing-form" action="{{ form_submit }}" method="post" class="form-horizontal">
    <fieldset>
    <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-10">
        <select name="token" data-worldpay="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>
      <div class="buttons clearfix">
      <div class="pull-right">
        <input type="button" value="{{ button_delete_card }}" id="button-delete" data-loading-text="{{ text_loading }}" class="btn btn-primary" />
      </div>
      </div>
      <div class="form-group required">
      <label class="col-sm-2 control-label" for="input-cc-cvc">{{ entry_cc_cvc }}</label>
      <div class="col-sm-10">
        <input type="text" data-worldpay="cvc" value="" size="4" placeholder="{{ entry_cc_cvc }}" id="input-cc-cvc" class="form-control" />
      </div>
      </div>
    </div>
    </fieldset>
    <div class="buttons">
    <div class="pull-right">
      <input type="submit" value="{{ button_confirm }}" id="button-confirm" data-loading-text="{{ text_loading }}" class="btn btn-primary" />
    </div>
    </div>
  </form>
  <form style="display: none" id="payment-new-form" action="{{ form_submit }}" method="post" class="form-horizontal">
  {% else %}
    <form id="payment-new-form" action="{{ form_submit }}" method="post" class="form-horizontal">
  {% endif %}
  <fieldset>
    <div class="form-group">
    <div class="col-sm-11" id='paymentDetailsHere' style="margin-left: 3%"></div>
    </div>
    {% if worldpay_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="save-card" value=true id="input-cc-save"/>
      </div>
      </div>
    {% endif %}
    </div>
  </fieldset>
  <div class="buttons">
    <div class="pull-right">
    <input type="submit" value="{{ button_confirm }}" id="button-confirm" data-loading-text="{{ text_loading }}" class="btn btn-primary" />
    </div>
  </div>
  </form>
  <div id="payment-errors">
  </div>
  <script type="text/javascript"><!--

      //Load Worldpay.js and run script functions
      $.getScript("{{ worldpay_script }}", function (data, textStatus, jqxhr) {
        Worldpay.setClientKey("{{ worldpay_client_key }}");

        // disable new card form if existing cards
{% if not existing_cards %}
          $('#payment-new-form :input').prop('disabled', true);
{% endif %}

        // Set if token is reusable, remove first value when Worldpay update
        Worldpay.reusable = true;
{% if recurring_products %}
          Worldpay.reusable = true;
{% else %}
          $('input[name=\'save-card\']').on('change', function () {
            if ($(this).is(':checked')) {
              Worldpay.reusable = true;
            } else {
              Worldpay.reusable = false;
            }
          });
{% endif %}

        Worldpay.templateSaveButton = false;
        Worldpay.useTemplate('payment-new-form', 'paymentDetailsHere', 'inline', function (obj) {
          var _el = document.createElement('input');
          _el.value = obj.token;
          _el.type = 'hidden';
          _el.name = 'token';
          document.getElementById('payment-new-form').appendChild(_el);
      document.getElementById('payment-new-form').submit();
        });

        //Submit form
        $('input[type=\'submit\']').on('click', function () {
          var existing = $('input[name=\'existing-card\']:checked').val();
          if (existing === '1') {
            var form = document.getElementById('payment-existing-form');
            Worldpay.useForm(form, function (status, response) {
              if (response.error || status != 200) {
                Worldpay.handleError(form, document.getElementById('payment-errors'), response.error);
              } else {
                form.submit();
              }
            }, true);
          } else {
            Worldpay.submitTemplateForm();
          }
        });
      });

      //Delete a card
      $('#button-delete').on('click', function () {
        var token = $('select[name=\'token\'] option:selected');

        if (confirm('{{ text_confirm_delete }}\n' + token.text())) {
          $.ajax({
            url: 'index.php?route=extension/payment/worldpay/deleteCard',
            type: 'post',
            data: {token: token.val()},
            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']) {
                alert(json['success']);
                if (json['existing_cards']) {
                  token.remove();
                } else {
                  $('input[name=\'existing-card\'][value=0]').click();
                  $('#choose-card').remove();
                  $('#payment-existing-form').remove();
                }
              }
            }
          });
        }
      });

      // enable or disable forms based on exiting or new card option
      $('input[name=\'existing-card\']').on('change', function () {
        if (this.value === '1') {
          $('#payment-existing-form').show();
          $('#payment-new-form').hide();
          $('#payment-new-form :input').prop('disabled', true);
          $('#payment-existing-form :input').prop('disabled', false);
        } else {
          $('#payment-existing-form').hide();
          $('#payment-new-form').show();
          $('#payment-new-form :input').prop('disabled', false);
          $('#payment-existing-form :input').prop('disabled', true);
        }
      });
      //--></script>