cardconnect.twig (10265B)
1 <form id="cardconnect-form" action="{{ action }}" method="post" class="form form-horizontal"> 2 <fieldset id="payment"> 3 <legend>{{ text_card_details }}</legend> 4 {% if echeck %} 5 <div class="form-group"> 6 <label class="col-sm-2 control-label" for="input-method">{{ entry_method }}</label> 7 <div class="col-sm-10"> 8 <select name="method" id="input-method" class="form-control"> 9 <option value="card">{{ text_card }}</option> 10 <option value="echeck">{{ text_echeck }}</option> 11 </select> 12 </div> 13 </div> 14 {% endif %} 15 <div class="card_container"> 16 <div class="form-group" {% if not store_cards %} style="display: none;" {% endif %}> 17 <label class="col-sm-2 control-label">{{ entry_card_new_or_old }}</label> 18 <div class="col-sm-10"> 19 <label class="radio-inline"> 20 <input type="radio" name="card_new" value="1" checked="checked"/> 21 {{ entry_card_new }}</label> 22 <label class="radio-inline"> 23 <input type="radio" name="card_new" value="0"/> 24 {{ entry_card_old }}</label> 25 </div> 26 </div> 27 <div class="card_new_container"> 28 <div class="form-group"> 29 <label class="col-sm-2 control-label" for="input-card-type">{{ entry_card_type }}</label> 30 <div class="col-sm-10"> 31 <select name="card_type" id="input-card-type" class="form-control"> 32 {% for card_type in card_types %} 33 <option value="{{ card_type.value }}">{{ card_type.text }}</option> 34 {% endfor %} 35 </select> 36 </div> 37 </div> 38 <div class="form-group required"> 39 <label class="col-sm-2 control-label" for="input-card-number">{{ entry_card_number }}</label> 40 <div class="col-sm-10"> 41 <input type="text" name="card_number" value="" placeholder="{{ entry_card_number }}" id="input-card-number" class="form-control" /> 42 </div> 43 </div> 44 <div class="form-group"> 45 <label class="col-sm-2 control-label" for="input-card-expiry">{{ entry_card_expiry }}</label> 46 <div class="col-sm-3"> 47 <select name="card_expiry_month" id="input-card-expiry" class="form-control"> 48 {% for month in months %} 49 <option value="{{ month.value }}">{{ month.text }}</option> 50 {% endfor %} 51 </select> 52 </div> 53 <div class="col-sm-3"> 54 <select name="card_expiry_year" class="form-control"> 55 {% for year in years %} 56 <option value="{{ year.value }}">{{ year.text }}</option> 57 {% endfor %} 58 </select> 59 </div> 60 </div> 61 <div class="form-group required"> 62 <label class="col-sm-2 control-label" for="input-card-cvv2">{{ entry_card_cvv2 }}</label> 63 <div class="col-sm-10"> 64 <input type="text" name="card_cvv2" value="" placeholder="{{ entry_card_cvv2 }}" id="input-card-cvv2" class="form-control" /> 65 </div> 66 </div> 67 {% if store_cards %} 68 <div class="form-group"> 69 <label class="col-sm-2 control-label" for="input-card-save" style="padding-top:0">{{ entry_card_save }}</label> 70 <div class="col-sm-10"> 71 <input type="checkbox" name="card_save" value="1" id="input-card-save"/> 72 </div> 73 </div> 74 {% endif %} </div> 75 <div class="card_old_container" style="display: none"> 76 <div class="form-group"> 77 <label class="col-sm-2 control-label" for="input-card-choice">{{ entry_card_choice }}</label> 78 <div class="col-sm-8"> 79 <select name="card_choice" id="input-card-choice" class="form-control" {% if not cards %} disabled {% endif %}> 80 {% if cards %} 81 <option value="">{{ text_select_card }}</option> 82 {% for card in cards %} 83 <option value="{{ card.token }}">{{ card.type }}, {{ card.account }}, {{ card.expiry }}</option> 84 {% endfor %} 85 {% else %} 86 <option value="">{{ text_no_cards }}</option> 87 {% endif %} 88 </select> 89 </div> 90 <div class="col-sm-2"> 91 <input type="button" value="{{ button_delete }}" id="button-delete" data-loading-text="{{ text_loading }}" class="btn btn-danger" /> 92 </div> 93 </div> 94 </div> 95 </div> 96 <div class="echeck_container" style="display:none"> 97 <div class="form-group required"> 98 <label class="col-sm-2 control-label" for="input-account-number">{{ entry_account_number }}</label> 99 <div class="col-sm-10"> 100 <input type="text" name="account_number" value="" placeholder="{{ entry_account_number }}" id="input-account-number" class="form-control" /> 101 </div> 102 </div> 103 <div class="form-group required"> 104 <label class="col-sm-2 control-label" for="input-routing-number">{{ entry_routing_number }}</label> 105 <div class="col-sm-10"> 106 <input type="text" name="routing_number" value="" placeholder="{{ entry_routing_number }}" id="input-routing-number" class="form-control" /> 107 </div> 108 </div> 109 </div> 110 </fieldset> 111 </form> 112 <div class="buttons"> 113 <div class="pull-right"> 114 <input type="button" value="{{ button_confirm }}" id="button-confirm" class="btn btn-primary" data-loading-text="{{ text_loading }}"> 115 </div> 116 </div> 117 <script type="text/javascript"><!-- 118 $('select[name="method"]').on('change', function() { 119 if ($(this).val() == 'card') { 120 $('#payment legend').text('{{ text_card_details }}'); 121 $('.card_container').show(); 122 $('.echeck_container').hide(); 123 } else { 124 $('#payment legend').text('{{ text_echeck_details }}'); 125 $('.card_container').hide(); 126 $('.echeck_container').show(); 127 } 128 }); 129 //--></script> 130 <script type="text/javascript"><!-- 131 $('input[name="card_new"]').on('change', function() { 132 if ($(this).val() == '1') { 133 $('.card_new_container').show(); 134 $('.card_old_container').hide(); 135 } else { 136 $('.card_new_container').hide(); 137 $('.card_old_container').show(); 138 } 139 }); 140 //--></script> 141 <script type="text/javascript"><!-- 142 $('#button-delete').bind('click', function() { 143 if (confirm('{{ text_confirm_delete }}')) { 144 $.ajax({ 145 url: 'index.php?route=extension/payment/cardconnect/delete', 146 type: 'post', 147 data: $('#input-card-choice'), 148 dataType: 'json', 149 beforeSend: function() { 150 $('.cardconnect_message').remove(); 151 $('#payment').before('<div class="alert alert-info cardconnect_wait"><i class="fa fa-info-circle"></i> {{ text_wait }}</div>'); 152 $('#button-delete').button('loading'); 153 }, 154 complete: function() { 155 $('.cardconnect_wait').remove(); 156 $('#button-delete').button('reset'); 157 }, 158 success: function(json) { 159 if (json['error']) { 160 $('#cardconnect-form').before('<div class="alert alert-danger cardconnect_message" style="display:none"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>'); 161 162 $('.cardconnect_message').fadeIn(); 163 } else { 164 $.ajax({ 165 url: 'index.php?route=checkout/confirm', 166 dataType: 'html', 167 success: function (html) { 168 $('#collapse-checkout-confirm .panel-body').html(html); 169 }, 170 error: function (xhr, ajaxOptions, thrownError) { 171 alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 172 } 173 }); 174 } 175 } 176 }); 177 } 178 }); 179 //--></script> 180 <script type="text/javascript"><!-- 181 $('#button-confirm').bind('click', function() { 182 $.ajax({ 183 url: 'index.php?route=extension/payment/cardconnect/send', 184 type: 'post', 185 data: $('#cardconnect-form').serialize(), 186 dataType: 'json', 187 beforeSend: function() { 188 $('.cardconnect_message').remove(); 189 $('.text-danger').remove(); 190 $('#payment').find('*').removeClass('has-error'); 191 $('#payment').before('<div class="alert alert-info cardconnect_wait"><i class="fa fa-info-circle"></i> {{ text_wait }}</div>'); 192 $('#button-confirm').button('loading'); 193 }, 194 complete: function() { 195 $('.cardconnect_wait').remove(); 196 $('#button-confirm').button('reset'); 197 }, 198 success: function(json) { 199 if (json['error']['warning']) { 200 $('#cardconnect-form').before('<div class="alert alert-danger cardconnect_message" style="display:none"><i class="fa fa-exclamation-circle"></i> ' + json['error']['warning'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>'); 201 202 $('.cardconnect_message').fadeIn(); 203 } 204 205 if (json['error']['card_number']) { 206 $('#input-card-number').after('<div class="text-danger">' + json['error']['card_number'] + '</div>'); 207 208 $('#input-card-number').closest('.form-group').addClass('has-error'); 209 } 210 211 if (json['error']['card_cvv2']) { 212 $('#input-card-cvv2').after('<div class="text-danger">' + json['error']['card_cvv2'] + '</div>'); 213 214 $('#input-card-cvv2').closest('.form-group').addClass('has-error'); 215 } 216 217 if (json['error']['card_choice']) { 218 $('#input-card-choice').after('<div class="text-danger">' + json['error']['card_choice'] + '</div>'); 219 220 $('#input-card-choice').closest('.form-group').addClass('has-error'); 221 } 222 223 if (json['error']['method']) { 224 $('#input-method').after('<div class="text-danger">' + json['error']['method'] + '</div>'); 225 226 $('#input-method').closest('.form-group').addClass('has-error'); 227 } 228 229 if (json['error']['account_number']) { 230 $('#input-account-number').after('<div class="text-danger">' + json['error']['account_number'] + '</div>'); 231 232 $('#input-account-number').closest('.form-group').addClass('has-error'); 233 } 234 235 if (json['error']['routing_number']) { 236 $('#input-routing-number').after('<div class="text-danger">' + json['error']['routing_number'] + '</div>'); 237 238 $('#input-routing-number').closest('.form-group').addClass('has-error'); 239 } 240 241 if (json['success']) { 242 location = json['success']; 243 } 244 } 245 }); 246 }); 247 //--></script>