<div {{ tipo_checkout ? 'class="ftr-container"' : '' }} id="cielo_api_creditcard_container" data-info='{"parcelas":"{{ cielo_api_parcela_qtdmax }}", "idorder":"{{ idorder }}", "continue":"{{ continue }}", "text_erro_retentativa":"{{ text_erro_retentativa }}", "tipo_checkout":"{{ tipo_checkout }}", "tipo_posterior":"{{ tipo_posterior }}"}'>
  {% if tipo_checkout %}
    <div class="ftr-container-flag-card">
    {{ payment_address }}
      <label class="ftr-field">
        <input type="text" inputmode="numeric" id="cielo_api_creditcard_ccno" name="creditcard_ccno" class="ftr-field__entry ftr-js-field__entry" value="" required>
        <span class="ftr-field__text">{{ text_num_cartao }}</span>
      </label>
      <div id="cielo_api_box-bandeiras">
        {% for key, credit_card in credit_cards %}
          <input class="ftr-flag-card ftr-js-flag-card" type="hidden" name="creditcard_cctype" value="{{ credit_card.descricao|lower }}" disabled>
          <img src="image/cielo/{{ credit_card.descricao|lower|replace({' ' : '-'}) }}.jpg">
        {% endfor %}   
      </div>
    </div>
    <div id="cielo_api_parcelas"></div>
    <label class="ftr-field">
      <input type="text" id="cielo_api_creditcard_name" name="creditcard_name" class="ftr-field__entry ftr-js-field__entry" value="" required>
      <span class="ftr-field__text">{{ text_nome }}</span>
    </label>
    <img src="image/cielo/security-code.jpg" alt="Código de Segurança" class="ftr-block">
    <label class="ftr-field">
      <input type="text" inputmode="numeric" id="cielo_api_creditcard_cccvd" name="creditcard_cccvd" class="ftr-field__entry ftr-js-field__entry" value="" required>
      <span class="ftr-field__text">{{ text_cod_seguranca }}</span>
    </label>
    <label class="ftr-field">
      <input type="text" inputmode="numeric" id="cielo_api_expire" name="expire" class="ftr-field__entry ftr-js-field__entry" value="" required>
      <span class="ftr-field__text">{{ text_vencimento }}</span>
    </label>
    {% if captcha_tpl %}
    <div class="flex nowrap-xs top-margin-large">
        {{captcha_tpl}}
    </div>
    {% endif %}

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