<div class="ftr-container" id="cielo_transparente_container" data-info='{"parcelas":"{{ cielo_transparente_parcela_qtdmax }}","idboleto":"{{ idboleto }}","text_erro_retentativa":"{{ text_erro_retentativa }}","continue":"{{ continue }}"}'>
  <div class="ftr-container-flag-card">
    <label class="ftr-field">
      <input type="text" id="creditcard_ccno" name="creditcard_ccno" class="ftr-field__entry ftr-js-field__entry" value="" required>
      <span class="ftr-field__text">{{ text_card_number }}</span>
    </label>
    <div id="box-bandeiras">
      {% if cielo_transparente_master %}
        <input class="ftr-flag-card ftr-js-flag-card" type="hidden" name="creditcard_cctype" value="mastercard" disabled>
        <img src="image/cielo/mastercard.jpg">
      {% endif %}
      {% if cielo_transparente_visa %}
        <input class="ftr-flag-card ftr-js-flag-card" type="hidden" name="creditcard_cctype" value="visa" disabled>
        <img src="image/cielo/visa.jpg">
      {% endif %}
      {% if cielo_transparente_amex %}
        <input class="ftr-flag-card ftr-js-flag-card" type="hidden" name="creditcard_cctype" value="amex" disabled>
        <img src="image/cielo/american-express.jpg">
      {% endif %}
      {% if cielo_transparente_diners %}
        <input class="ftr-flag-card ftr-js-flag-card" type="hidden" name="creditcard_cctype" value="diners" disabled>
        <img src="image/cielo/dinersclub.jpg">
      {% endif %}
      {% if cielo_transparente_elo %}
        <input class="ftr-flag-card ftr-js-flag-card" type="hidden" name="creditcard_cctype" value="elo" disabled>
        <img src="image/cielo/elo.jpg">
      {% endif %}
      {% if cielo_transparente_discover %}
        <input class="ftr-flag-card ftr-js-flag-card" type="hidden" name="creditcard_cctype" value="discover" disabled>
        <img src="image/cielo/discover.jpg">
      {% endif %}
    </div>
  </div>
  <div id="parcelas"></div>
  <label class="ftr-field">
    <input type="text" id="creditcard_name" name="creditcard_name" class="ftr-field__entry ftr-js-field__entry" value="" required>
    <span class="ftr-field__text">{{ entry_name }}</span>
  </label>
  <img src="image/cielo/security-code.jpg" alt="Código de Segurança">
  <label class="ftr-field">
    <input type="text" id="creditcard_cccvd" name="creditcard_cccvd" class="ftr-field__entry ftr-js-field__entry" value="" required>
    <span class="ftr-field__text">{{ entry_security_code }}</span>
  </label>
  <label class="ftr-field">
    <input type="text" id="expire" name="expire" class="ftr-field__entry ftr-js-field__entry" value="" required>
    <span class="ftr-field__text">{{ entry_maturity }}</span>
  </label>
</div>

<script>
  if (typeof loadSpecificSources != 'undefined') {
    loadSpecificSources({
      scripts: {{ scriptsApp }}
    });
  }
</script>
