<form class="ftr-container" id="form-pagseguro_api">
  <div class="ftr-container-flag-card">

    {{ payment_address }}

    <label class="ftr-field">
      <input type="text" inputmode="numeric" id="creditcard_ccno" name="creditcard_ccno" class="ftr-field__entry ftr-js-field__entry" value="" required>
      <span class="ftr-field__text">{{ text_num_cartao }}</span>
      <div id="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>
    </label>
  </div>
  <div id="parcelas"></div>
  <input type="hidden" name="creditcard_public_key" id="creditcard_public_key" value={{ pagseguroPublicKey }}>
  <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">{{ 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="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="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 %}
</form>

<script src="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js"></script>

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