Modos de Exibição do SmartForm

O SmartForm pode ser apresentado embutido, em uma área mais ampla da página ou em uma janela pop-in. A Cyclopay usa os scripts e URLs originais PayZen, mantendo a compatibilidade dos recursos de apresentação HTML/CSS.

Formulário embutido

Use o contêiner kr-smart-form com os campos PayZen. É o formato explicado em Exibir o Formulário.

<div class="kr-smart-form" kr-form-token="FORM_TOKEN_RECEBIDO">
  <div class="kr-pan"></div>
  <div class="kr-expiry"></div>
  <div class="kr-security-code"></div>
  <button class="kr-payment-button"></button>
  <div class="kr-form-error"></div>
</div>

Formulário em área expandida

Para dar mais espaço ao formulário embutido, aumente a largura do contêiner que você controla. Não é necessário criar um novo tipo de cobrança no Gateway.

<section class="checkout-largo">
  <h2>Finalize o pagamento</h2>
  <!-- Insira aqui o mesmo contêiner kr-smart-form do exemplo anterior. -->
</section>

.checkout-largo { width: min(100%, 760px); margin-inline: auto; padding: 24px; }
@media (max-width: 640px) {
  .checkout-largo { padding: 12px; }
}

Apresentação em pop-in

Na variante pop-in do cliente Krypton V4.0, a biblioteca PayZen pode receber um contêiner com kr-popin:

<div class="kr-embedded"
     kr-popin
     kr-form-token="FORM_TOKEN_RECEBIDO"></div>

Inclua no <head> o SDK e o tema PayZen, da mesma forma que no modo embutido. A apresentação e os controles da janela variam conforme o tema e a versão carregada; valide o comportamento visual com um token de sandbox antes de colocá-la no checkout de produção.

🚧

Sem alteração na API

Os modos acima mudam somente a apresentação. A criação da Venda continua sendo feita por POST /v1/charges, no servidor, e a confirmação financeira continua dependendo de webhook/consulta.

Qual modo escolher?

Para customizar o tema e conferir o layout móvel, consulte Personalização Visual e Responsividade.