CIELO

gistfile1.txt

<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>