How to return the value of type radio

Instead of using% complex% to do this, just use for to get the item you want, like this:

document.querySelector('input[name="credit-card"]:checked').value;

If it's jQuery, like this:

$('input[name="credit-card"]:checked').val();

Change the querySelector and onblur by onfocus , otherwise the event will be executed before changing the value

function calcularPrimeiro() {
  var input = document.querySelector('input[name="credit-card"]:checked');
  var n1 = parseFloat(input.value, 0);
  document.getElementById('resultado').innerHTML = n1;
}

<div id="resultado"></div>

<form>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input id="visa" type="radio" name="credit-card" value="20" onchange="calcularPrimeiro()" />
        <label class="drinkcard-cc visa" for="visa"></label>
        <input id="mastercard" type="radio" name="credit-card" value="30" onchange="calcularPrimeiro()" />
        <label class="drinkcard-cc mastercard"for="mastercard"></label>
    </div>
</form>

If I understand correctly, you want to bring a pre-selected item, so the checked has been added to the first item and the load page is already called by the method that returns the value selected. I also changed the function to get radios by name and check which one is selected. As for the event that triggers, I have switched to onclick because so, when the user selects the item, the function will be triggered.

(function() {
      calcularPrimeiro()
})();

function calcularPrimeiro() {

	var radios = document.getElementsByName('credit-card');
	for (var i = 0, length = radios.length; i < length; i++)
	{
		if (radios[i].checked)
		{
			var n1 = radios[i].value;
      var itemId = radios[i].id;
			document.getElementById('resultado').innerHTML = itemId + " - " + n1;
			break;
		}
	}  
}

<form>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input id="visa" type="radio" checked name="credit-card" value="20" onclick="calcularPrimeiro()" />
        <label class="drinkcard-cc visa" for="visa">20</label>
        <input id="mastercard" type="radio" name="credit-card" value="30" onclick="calcularPrimeiro()" />
        <label class="drinkcard-cc mastercard"for="mastercard">30</label>
    </div>
</form>

</br>
</br>

<div>Resultado: <div id="resultado"></div></div>
<div id="resultado"></div>

I did a test and it kind of worked the way I want, but I do not think it's the right way and it will work if I have more fields or I would have to fill up with if.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><p>Now,withCSS3:</p><divclass="cc-selector">
        <input id="visa" type="radio" name="credit-card" value="10" onfocus="calcularPrimeiro()" />
        <label class="drinkcard-cc visa" for="visa" ></label>
        <input id="mastercard" type="radio" name="credit-card" value="20" onblur="calcularPrimeiro()" />
        <label class="drinkcard-cc mastercard"for="mastercard"></label>
    </div>
</form>

<div id="resultado"></div>

<script type="text/javascript">
function calcularPrimeiro() {
  var n1 = document.getElementById("visa").value;
  var n2 = document.getElementById("mastercard").value;
  if($(visa).prop("checked")){
  document.getElementById("resultado").innerHTML = n1;
}else{
    document.getElementById("resultado").innerHTML = n2;
}
}
</script>