Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CIELO
<div id="cielo_container">
<script>
$(document).ready(function(){
$('.cielo_options input').change(function(){
$('.cielo_show_options .form_wrap').hide();
var option = $('.cielo_options input:checked').data('show');
var debit = $('.cielo_options input:checked').data('debit');
$('#'+option).show();
if (debit == 'no') {
$('input[name=cielo_option]').val('creditcard');
}else{
$('input[name=cielo_option]').val('debit');
}
});
$('input[name=cielo_card_num]').mask('999999999999999?9');
$('input[name=cielo_card_code]').mask('999?9');
});
var cieloParcelUpdate = function(cart){
$('select[name=cielo_parcel]').html('<option value="1">À vista R$ '+cart.total.toFixed(2).replace('.', ',')+'</option>');
for (var i = 2; i < cart.installments; i++) {
if ((cart.total / i) >= 5) {
$('select[name=cielo_parcel]').append('<option value="'+i+'">'+i+' vezes R$ '+(cart.total / i).toFixed(2).replace('.', ',')+' (sem juros)</option>');
}
}
}
</script>
<div class="row">
<div class="col-md-3">
<input type="hidden" name="cielo_option" value="creditcard">
<div class="cielo_options">
<label class="radio">
<input type="radio" name="cielo_institution" value="visa" data-show="cielo_option_cc" data-debit="no" checked="">
<img src="/assets/img/flag_visa.gif">&nbsp;&nbsp;Visa
</label>
<label class="radio">
<input type="radio" name="cielo_institution" value="mastercard" data-show="cielo_option_cc" data-debit="no">
<img src="/assets/img/flag_master.gif">&nbsp;&nbsp;Mastercard
</label>
<label class="radio">
<input type="radio" name="cielo_institution" value="elo" data-show="cielo_option_cc" data-debit="no">
<img src="/assets/img/flag_elo.gif">&nbsp;&nbsp;Elo
</label>
<label class="radio">
<input type="radio" name="cielo_institution" value="amex" data-show="cielo_option_cc" data-debit="no">
<img src="/assets/img/flag_amex.gif">&nbsp;&nbsp;Amex
</label>
<label class="radio">
<input type="radio" name="cielo_institution" value="diners" data-show="cielo_option_cc" data-debit="no">
<img src="/assets/img/flag_diners.gif">&nbsp;&nbsp;Diners
</label>
<label class="radio">
<input type="radio" name="cielo_institution" value="discover" data-show="cielo_option_cc" data-debit="no">
<img src="/assets/img/flag_discover.gif">&nbsp;&nbsp;Discover
</label>
</div>
</div>
<div class="col-md-8 cielo_show_options">
<div id="cielo_option_cc" class="form_wrap">
<div class="row">
<div class="col-md-12">
<label>Número de parcelas</label>
<select name="cielo_parcel" data-calc="cieloParcelUpdate" data-update="cart" class="form-control"><option value="1">À vista R$ 22,80</option><option value="2">2 vezes R$ 11,40 (sem juros)</option><option value="3">3 vezes R$ 7,60 (sem juros)</option><option value="4">4 vezes R$ 5,70 (sem juros)</option></select>
</div>
</div>
<div class="row cielo_cc_seperator">
<div class="col-md-5">
<label>Número do cartão</label>
<input autocomplete="off" class="form-control" id="card_num" name="cielo_card_num" type="text">
</div>
<div class="col-md-4">
<label>Expira em</label>
<div class="form-inline">
<select name="cielo_exp_date_mm" class="form-control cielo_exp_date_mm">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08" selected="selected">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> <select name="cielo_exp_date_yy" class="form-control cielo_exp_date_yy">
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
</select> </div>
</div>
<div class="col-md-3">
<label>Código CVV</label>
<input autocomplete="off" class="form-control" name="cielo_card_code" type="text" id="cielo_card_code" maxlength="4">
</div>
</div>
<div class="row cielo_cc_seperator">
<div class="col-md-12">
<label>Nome do portador (exatamente como escrito no cartão)</label>
<input type="text" name="cielo_fullname" value="" class="form-control" data-get="fullname"> </div>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment