Responsividade e Acessibilidade do SmartForm

O SmartForm utiliza a camada HTML/CSS da PayZen e pode ser integrado a layouts responsivos. As orientações abaixo ajudam a ajustar a página em torno do formulário em celulares, tablets e computadores.

Estrutura responsiva

Inclua a viewport e mantenha o formulário em um contêiner de largura flexível:

<meta name="viewport" content="width=device-width, initial-scale=1">

<main class="checkout" aria-labelledby="titulo-pagamento">
  <h1 id="titulo-pagamento">Pagamento</h1>
  <p>Preencha os dados para finalizar a compra.</p>
  <div class="checkout__conteudo">
    <!-- Insira o kr-smart-form com o token recebido do Gateway. -->
  </div>
</main>

.checkout {
  box-sizing: border-box;
  width: min(100% - 2rem, 620px);
  margin: 1.5rem auto;
}
.checkout__conteudo { min-width: 0; width: 100%; }
@media (max-width: 480px) {
  .checkout { width: 100%; margin: 0; padding: 1rem; }
}

Boas práticas

• Mantenha texto legível e contraste adequado na parte do checkout sob seu controle.
• Garanta que os botões e mensagens tenham espaço suficiente em telas menores.
• Apresente orientações claras antes do formulário; evite esconder kr-form-error.
• Use um título de página, estrutura semântica e região de mensagem de erro acessível.
• Teste a navegação por teclado e o comportamento de zoom na integração final.
• Deixe o SDK PayZen tratar os campos sensíveis. Não tente substituir os campos por <input> próprios.

🚧

Compatibilidade não equivale a certificação

O uso de HTML/CSS compatível com o SmartForm não garante, por si só, conformidade com um padrão específico de acessibilidade. A página final deve ser testada em navegadores e dispositivos representativos.

Personalização Visual · Modos de Exibição.