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>