Estilização e responsividade

A exibição do checkout dentro do iframe pode ser ajustada para diferentes tamanhos de tela. O objetivo é garantir que o conteúdo seja exibido de forma clara tanto em ambientes desktop quanto em dispositivos móveis.

Recomendações de design

• O iframe deve ocupar toda a largura disponível no container;
• Em telas maiores, uma altura fixa ajuda a manter uma área de visualização confortável;
• Em dispositivos móveis, o iframe pode ocupar toda a altura visível da tela;
• Ajustes no espaçamento do container contribuem para um layout mais organizado.

Exemplo de CSS

O exemplo a seguir mostra as regras de estilo aplicadas ao componente.

/* Para desktop */
iframe {
  width: 100%;
  height: 600px;
  border: none;
  border-radius: 8px;
}

/* Para mobile */
@media (max-width: 768px) {
  iframe {
    height: 100vh;  /* Ocupa toda a tela */
  }
  
  .checkout-poc {
    padding: 16px;
    margin: 0;
  }
}

Esse código define:

• Largura total para o iframe;
• Altura fixa para desktops;
• Altura em tela cheia para dispositivos móveis;
• Ajustes de espaçamento no container .checkout-poc em telas pequenas.

Acessibilidade no iframe

O iframe do checkout deve incluir atributos que aprimorem a navegação assistida e reforcem a segurança do conteúdo exibido. Recomenda-se:

• Usar title para indicar a finalidade do iframe;
• Definir aria-label quando o elemento representar uma área funcional da interface;
• Aplicar restrições com sandbox="allow-scripts allow-same-origin allow-forms";
• Utilizar referrerpolicy="no-referrer" para evitar o envio de informações desnecessárias a domínios externos.

Essas práticas contribuem para uma experiência mais segura, acessível e consistente em diferentes dispositivos.