JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<input type="radio" id="boleto" name="forma" value="boleto" />
<label for="boleto">Boleto</label>
</div>
<div>
<input type="radio" id="cartao" name="forma" value="cartao" checked="checked" />
<label for="cartao">Cartão de crédito</label>
</div>
<a id="createBillAndOrderForm:createBillAndOrder" href="#" rel="{"category": "ckout", "action": "Click Fechar Pedido", "label": "Boleto", "value": 804.00}" title="Finalizar Compra com Boleto Bancário" onclick="var a=function(){showLoader('bill'); doLoadingPayment();};var b=function(){if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('createBillAndOrderForm'),{'createBillAndOrderForm:createBillAndOrder':'createBillAndOrderForm:createBillAndOrder'},'');}return false};return (a()==false) ? false : b();" class="btnStandard buyNow dataGaEvent btnPagto btnBoleto" style="display: none;">
Finalizar Compra com Boleto Bancário</a>
<a id="paymentGroups:0:creditForm:checkout" href="#" rel="{"category": "ckout", "action": "Click Fechar Pedido", "label": "Cartão de Crédito", "value": 804.00}" onclick="var a=function(){showLoader('credit-card'); doLoadingPayment();};var b=function(){if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('paymentGroups:0:creditForm'),{'paymentGroups:0:creditForm:checkout':'paymentGroups:0:creditForm:checkout'},'');}return false};return (a()==false) ? false : b();" class="btnStandard buyNow dataGaEvent btnPagto btnCartao" style="display: none;">
Finalizar Compra com Cartão de Crédito</a>
JavaScript
$("input[name='forma']").change(function() {
var meio = $("input[name='forma']:checked").val();
displayPaymentButton(meio);
});
function displayPaymentButton(meio) {
$('.btnPagto').hide();
$('.btn' + capitaliseFirstLetter(meio)).show();
};
function capitaliseFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}