Personalização Visual do SmartForm

O SmartForm utiliza a biblioteca original da PayZen. Você pode combinar temas oficiais com HTML/CSS do seu checkout, mantendo os campos de cartão no componente seguro fornecido pelo SDK.

Aplicar um tema

Carregue o script principal Krypton V4.0 e, na sequência, os recursos do tema Neon:

<script src="https://static.payzen.eu/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
        kr-public-key="CHAVE_PUBLICA_RECEBIDA"></script>

<link rel="stylesheet"
      href="https://static.payzen.eu/static/js/krypton-client/V4.0/ext/neon-reset.css">
<script src="https://static.payzen.eu/static/js/krypton-client/V4.0/ext/neon.js"></script>

Os recursos do tema são carregados diretamente da PayZen; neste exemplo, o JavaScript do tema é neon.js.

Organizar o formulário na página

Seu CSS pode personalizar o contêiner, espaçamento, bordas e identidade visual da página que envolve o SmartForm:

<section class="checkout">
  <header class="checkout__header">
    <h1>Pagamento seguro</h1>
    <p>Confira os dados e conclua a compra.</p>
  </header>

  <div class="checkout__form">
    <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" role="alert" aria-live="polite"></div>
    </div>
  </div>
</section>

.checkout {
  max-width: 560px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.checkout__header { margin-bottom: 1.25rem; }
.checkout__form { width: 100%; min-width: 0; }
@media (max-width: 640px) {
  .checkout { margin: 0; padding: 1rem; border: 0; }
}

📘
Limite da personalização
CSS da sua página controla os elementos sob seu domínio. Alguns campos sensíveis são desenhados em contextos isolados pelo SDK: não suponha que seletores CSS externos alterem o conteúdo interno desses campos. Para isso, use apenas opções de estilo documentadas pela PayZen na versão carregada.

Cuidados

Mantenha os recursos do SDK hospedados na origem PayZen e preserve o contêiner com kr-form-token. Não crie campos HTML próprios para coletar número do cartão ou código de segurança.

Próximos passos

Exibir o Formulário · Modos de Exibição · Responsividade e Acessibilidade.