1<form class="form-horizontal">
2  <fieldset id="payment">
3    <legend>{{ text_card_details }}</legend>
4    <div class="form-group required">
5      <label class="col-sm-2 control-label" for="input-type">{{ entry_type }}</label>
6      <div class="col-sm-10">
7        <select name="type" id="input-type" class="form-control">
8
9          {% for key, title in cards %}
10
11          <option value="{{ key }}">{{ title }}</option>
12
13          {% endfor %}
14
15        </select>
16      </div>
17    </div>
18    <div class="form-group required">
19      <label class="col-sm-2 control-label" for="input-number">{{ entry_number }}</label>
20      <div class="col-sm-10">
21        <input type="text" name="number" value="" placeholder="{{ entry_number }}" id="input-number" class="form-control" />
22      </div>
23    </div>
24    <div class="form-group required">
25      <label class="col-sm-2 control-label" for="input-expire-date">{{ entry_expire_date }}</label>
26      <div class="col-sm-3">
27        <select name="expire_month" id="expire-date" class="form-control">
28
29          {% for month in months %}
30
31          <option value="{{ month.value }}">{{ month.text }}</option>
32
33          {% endfor %}
34
35        </select>
36      </div>
37      <div class="col-sm-3">
38        <select name="expire_year" class="form-control">
39
40          {% for year in year_expire %}
41
42          <option value="{{ year.value }}">{{ year.text }}</option>
43
44          {% endfor %}
45
46        </select>
47      </div>
48    </div>
49    <div class="form-group required">
50      <label class="col-sm-2 control-label" for="input-cvv2">{{ entry_cvv2 }}</label>
51      <div class="col-sm-10">
52        <input type="text" name="cvv2" value="" placeholder="{{ entry_cvv2 }}" id="input-cvv2" class="form-control" />
53      </div>
54    </div>
55  </fieldset>
56</form>
57<div class="buttons">
58  <div class="pull-right">
59    <input id="button-confirm" type="submit" value="{{ button_confirm }}" class="btn btn-primary" />
60  </div>
61</div>
62<script type="text/javascript">
63$('#button-confirm').bind('click', function() {
64	$.ajax({
65		url: 'index.php?route=extension/payment/securetrading_ws/process',
66		type: 'post',
67		data: $('#payment :input'),
68		dataType: 'json',
69		beforeSend: function() {
70			$('#button-confirm').attr('disabled', true);
71			$('form.form-horizontal .alert').remove();
72			$('#payment').before('<div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ text_wait }}</div>');
73		},
74
75		complete: function() {
76			$('#button-confirm').attr('disabled', false);
77		},
78		success: function(json) {
79			$('form.form-horizontal .alert').remove();
80
81			if (json['status']) {
82				if (json['redirect']) {
83					location = json['redirect'];
84				} else {
85					$('#payment').before('<form id="threed-form" action="' + json['acs_url'] + '" method="POST"><input type="hidden" name="PaReq" value="' + json['pareq'] + '" /><input type="hidden" name="MD" value="' + json['md'] + '" /><input type="hidden" name="TermUrl" value="' + json['term_url'] + '" /></form>');
86					$('#threed-form').submit();
87				}
88			} else {
89				$('#payment').before('<div class="alert alert-danger alert-dismissible"><i class="fa fa-info-circle"></i> ' + json['message'] + '</div>');
90			}
91		}
92	});
93});
94</script>