Moip

view_cart.html

<div id="moip_container">
<style type="text/css">

.moip_exp_date_mm{
    width: 40%;
}
.moip_exp_date_yy{
    width: 50%;
}
.moip_cc_seperator{
    margin-top: 10px;
}
.moip_show_options .form_wrap{
    padding: 10px;
}
.moip_options .radio{
    margin-bottom: 15px;
}
.moip_options .glyphicon{
    font-size: 35px;
}
.moip_option .well{
    text-align: center;
    padding-top: 40px;
    padding-bottom: 10px;
    margin-bottom: 0;
}
</style>
<div class="row moip_options">
    <div class="col-md-4 moip_option">
        <div class="well">
            <label>
              <span class="glyphicon glyphicon-credit-card"></span>
              <p><input type="radio" name="moip_option" value="CartaoCredito" data-show="moip_option_cc" checked> Cartão de Credito</p>
            </label>
        </div>
    </div>

    <div class="col-md-4 moip_option">
        <div class="well">
            <label>
              <span class="glyphicon glyphicon-barcode"></span>
              <p><input type="radio" name="moip_option" value="BoletoBancario" data-show="moip_option_bol"> Boleto</p>
            </label>
        </div>
    </div>

    <div class="col-md-4 moip_option">
        <div class="well">
            <label>
              <span class="glyphicon glyphicon-credit-card"></span>
              <p><input type="radio" name="moip_option" value="DebitoBancario" data-show="moip_option_deb"> Cartão de Debito</p>              
            </label>
            <p class="moip_show_options moip_option_deb" style="display:none;">
                <label>Selecione uma instituição</label>
                <select name="moip_institution_deb" class="form-control">
                    <option value="">Selectionar Cartão de Debito</option>
                    <option value="BancoDoBrasil">BancoDoBrasil</option>
                    <option value="Bradesco">Bradesco</option>
                    <option value="Banrisul">Banrisul</option>
                    <option value="Itau">Itau</option>
                </select>
            </p>
        </div>
    </div>
</div>
</div>
<script type="text/javascript">

$(document).ready(function(){
    $('.moip_options input').change(function(){
        $('.moip_show_options').hide();
        $('.'+$(this).data('show')).show();
    });
});

</script>