<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
  var myCustomPriceActions = function() {
    var price               = parseInt( document.querySelector("ul.order-details .order-details-total em[data-currency]").innerHTML.replace( "$", "" ) );
    var credit_card_element = document.querySelector("#form-order > .credit-cards" );

    if( price === 0 ) {
      credit_card_element.style.display = "none";
    } else {
      credit_card_element.style.display = "block";
    }
  };
  /** Mutation Observers didn't seem to do the trick, we're cheating with timeouts **/
  myCustomPriceActions();

  setTimeout( function() {
    myCustomPriceActions();
  }, 200 );

  setTimeout( function() {
    myCustomPriceActions();
  }, 500 );
});
</script>