1<form class="form-horizontal" id="payment_form">
2  <fieldset id="payment">
3    <legend>{{ text_credit_card }}</legend>
4    {% if not accepted_cards %}
5      <div class="form-group">
6        <div class="col-sm-12">
7          <p>
8            <strong>{{ text_card_accepted }}</strong>
9            <ul>
10              {% if accepted_cards.mastercard == 1 %}<li>{{ text_card_type_m }}</li>{% endif %}
11              {% if accepted_cards.visa == 1 %}<li>{{ text_card_type_v }}</li>{% endif %}
12              {% if accepted_cards.diners == 1 %}<li>{{ text_card_type_c }}</li>{% endif %}
13              {% if accepted_cards.amex == 1 %}<li>{{ text_card_type_a }}</li>{% endif %}
14              {% if accepted_cards.maestro == 1 %}<li>{{ text_card_type_ma }}</li>{% endif %}
15            </ul>
16          </p>
17        </div>
18      </div>
19    {% endif %}
20
21    {% if card_storage == 1 and stored_cards|length > 0 %}
22    <div class="form-group">
23      <div class="col-sm-12">
24       {% set i = 0 %}
25       {% for card in stored_cards %}
26          <p><input type="radio" name="cc_choice" value="{{ card.token }}" class="stored_card" {% if i == 0 %} checked="checked"{% endif %} /> {{ card.card_type }} xxxx {{ card.digits }}, {{ entry_cc_expire_date }}  {{ card.expire_month }} / {{ card.expire_year }}</p>
27          {% set i = i + 1 %}
28        {% endfor %}
29
30        <p><input type="radio" name="cc_choice" value="new" class="stored_card" />{{ text_card_new }}</p>
31      </div>
32    </div>
33    {% endif %}
34
35    <div id="card_info" style="display:none;">
36      <div class="form-group required">
37        <label class="col-sm-2 control-label" for="input-cc-name">{{ entry_cc_name }}</label>
38
39        <div class="col-sm-10">
40          <input type="text" name="cc_name" value="" placeholder="{{ entry_cc_name }}" id="input-cc-name" class="form-control"/>
41        </div>
42      </div>
43      <div class="form-group required">
44        <label class="col-sm-2 control-label" for="input-cc-number">{{ entry_cc_number }}</label>
45
46        <div class="col-sm-10">
47          <input type="text" name="cc_number" value="" placeholder="{{ entry_cc_number }}" id="input-cc-number" class="form-control"/>
48        </div>
49      </div>
50      <div class="form-group required">
51        <label class="col-sm-2 control-label" for="input-cc-expire-date">{{ entry_cc_expire_date }}</label>
52
53        <div class="col-sm-3">
54          <select name="cc_expire_date_month" id="input-cc-expire-date" class="form-control">
55           {% for month in months %}
56              <option value="{{ month.value }}">{{ month.text }}</option>
57            {% endfor %}
58          </select>
59        </div>
60        <div class="col-sm-3">
61          <select name="cc_expire_date_year" class="form-control">
62           {% for year in year_expire %}
63            <option value="{{ year.value }}">{{ year.text }}</option>
64            {% endfor %}
65          </select>
66        </div>
67      </div>
68
69      {% if card_storage == 1 %}
70      <div class="form-group">
71        <label class="col-sm-2 control-label" for="input-cc-cvv2">{{ text_store_card }}</label>
72
73        <div class="col-sm-10">
74          <input type="hidden" name="cc_store" value="0"/> <input type="checkbox" name="cc_store" value="1" checked/>
75        </div>
76      </div>
77      {% endif %}
78    </div>
79
80    <div class="form-group required">
81      <label class="col-sm-2 control-label" for="input-cc-cvv2">{{ entry_cc_cvv2 }}</label>
82      <div class="col-sm-10">
83        <input type="text" name="cc_cvv2" value="" placeholder="{{ entry_cc_cvv2 }}" id="input-cc-cvv2" class="form-control"/>
84      </div>
85    </div>
86  </fieldset>
87</form>
88<div class="buttons">
89  <div class="pull-right">
90    <input type="button" value="{{ button_confirm }}" id="button-confirm" data-loading-text="{{ text_loading }}" class="btn btn-primary"/>
91  </div>
92</div>
93<script type="text/javascript"><!--
94$('#button-confirm').bind('click', function () {
95	$.ajax({
96		url: 'index.php?route=extension/payment/firstdata_remote/send',
97		type: 'post',
98		data: $('#payment_form').serialize(),
99		dataType: 'json',
100		beforeSend: function () {
101			$('#firstdata_message_error').remove();
102			$('#button-confirm').attr('disabled', true);
103			$('#payment').before('<div id="firstdata_message_wait" class="alert alert-info"><i class="fa fa-info-circle"></i> {{ text_wait }}</div>');
104		},
105		complete: function () {
106			$('#button-confirm').attr('disabled', false);
107			$('#firstdata_message_wait').remove();
108		},
109		success: function (json) {
110			// if error
111			if (json['error']) {
112				$('#payment').before('<div id="firstdata_message_error" class="alert alert-warning"><i class="fa fa-info-circle"></i> ' + json['error'] + '</div>');
113			}
114
115			// if success
116			if (json['success']) {
117				location = json['success'];
118			}
119		}
120	});
121});
122
123$('.stored_card').bind('change', function () {
124	if ($(this).val() == 'new') {
125		$('#card_info').slideDown();
126	} else {
127		$('#card_info').slideUp();
128	}
129});
130
131$(document).ready(function(){
132	{% if card_storage == 0 %}
133	$('#card_info').show();
134	{% else %}
135	var stored_cards = {{ stored_cards|length }};
136
137	if (stored_cards == 0) {
138		$('#card_info').show();
139	}
140	{% endif %}
141});
142//--></script>