var card = new Card({
    form: '#cardData',
    container: '.card-wrapper',
    formSelectors: {
        numberInput: 'input[name="cardNumber"]',
        expiryInput: 'input[name="expiration"]',
        cvcInput: 'input[name="cvvField"]',
        nameInput: 'input[name="cardName"]'
    },
    width: 350,
    formatting: true,
    messages: {
        validDate: 'valid\ndate',
        monthYear: 'mm/yy'
    },
    placeholders: {
        number: '0000 0000 0000 0000',
        name: 'Nombre completo',
        expiry: '00/00',
        cvc: '000'
    },
    debug: false
});

$(document).ready(function () {
    $("input[name$='payment']").click(function () {
        var radio_value = $(this).val();
        if (radio_value == 'cardRadio') {
            $("#cardRow").fadeIn(500);
            $("#speiRow").hide();
            $("#storeRow").hide();
            $("#oxxoRow").hide();
            $("#swiperRow").hide();
            $("#cashRow").hide();
        } else if (radio_value == 'speiRadio') {
            $("#speiRow").fadeIn(500);
            $("#cardRow").hide();
            $("#storeRow").hide();
            $("#oxxoRow").hide();
            $("#swiperRow").hide();
            $("#cashRow").hide();
        } else if (radio_value == 'storeRadio') {
            $("#storeRow").fadeIn(500);
            $("#cardRow").hide();
            $("#speiRow").hide();
            $("#oxxoRow").hide();
            $("#swiperRow").hide();
            $("#cashRow").hide();
        } else if (radio_value == 'oxxoRadio') {
            $("#oxxoRow").fadeIn(500);
            $("#cardRow").hide();
            $("#speiRow").hide();
            $("#storeRow").hide();
            $("#swiperRow").hide();
            $("#cashRow").hide();
        } else if (radio_value == 'swiperRadio') {
            $("#swiperRow").fadeIn(500);
            $("#cardRow").hide();
            $("#speiRow").hide();
            $("#storeRow").hide();
            $("#oxxoRow").hide();
            $("#cashRow").hide();
        } else if (radio_value == 'cashRadio') {
            $("#cashRow").fadeIn(500);
            $("#cardRow").hide();
            $("#speiRow").hide();
            $("#storeRow").hide();
            $("#swiperRow").hide();
            $("#oxxoRow").hide();
        }
    });
    $('[name="payment"]:checked').trigger('click');
});