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>