Pular para o conteúdo

Padrões

Checkout com crédito

Contratar crédito dentro de uma compra. A pessoa precisa saber, em toda etapa, quanto vai pagar, o que autorizou e o que ainda falta.

Na prática#

Autorizar, escolher a condição, conferir o total e assinar

Regras#

  1. 01Stepper no topo com o fim conhecido. O título repete a etapa em texto: "Etapa 2 de 4".
  2. 02Consentimento é Notice info com Checkbox dentro, citando a norma. Autorizar consulta de dado pessoal nunca vem pré-marcado.
  3. 03Condição de pagamento é ChoiceCard: parcela e total no mesmo cartão. A opção padrão é a mais barata, não a mais lucrativa.
  4. 04Adicional com preço (seguro, garantia) é ChoiceCard multiple, desmarcado, com o custo mensal explícito.
  5. 05Antes de assinar, SummaryList repete valor solicitado, parcela, primeiro desconto e total. O total é a única linha em ênfase.
  6. 06Assinatura e aprovação são gate: o botão repete o verbo e o valor ("Confirmar e assinar"), e só libera com o aceite marcado.
  7. 07Espera de análise ou de assinatura usa StatusView working com o aviso de não fechar a janela no rodapé.
  8. 08O fim tem documento e caminho de volta: contrato (CCB) e retorno à loja, aprovado ou recusado.
  9. 09Sair da compra é sempre possível: Button link "Cancelar e voltar à loja", em todas as etapas.

Evite#

  • Pré-marcar consentimento de consulta de margem ou adicional pago.
  • Mostrar parcela sem o total, ou total sem o custo efetivo.
  • Barra de progresso falsa para uma análise de duração desconhecida.
  • Tela de espera sem cancelar e sem suporte.
  • Recusa sem motivo nem próximo passo.

Peças usadas#

ChoiceCardGroup

ChoiceCard

Escolha que precisa mostrar o preço da decisão. É o Radio quando a opção não cabe numa linha: ícone, título, explicação e o total no pé. Marca no canto, luz azul quando ativo.

Stepper

Stepper

Onde a pessoa está numa jornada de poucos passos. Concluído vira check e nunca volta a ser número. No horizontal estreito cabe só o número; no vertical a descrição fica.

Notice

Notice

Aviso preso ao conteúdo, nos quatro tons. Tom aparece como preenchimento e tinta — nunca como faixa colorida no topo do cartão.

SummaryList

SummaryList

Resumo de uma decisão: rótulo à esquerda, valor tabular à direita, linha fina entre as duas. O total é a única linha que grita. Papel sozinho; flush dentro de outro cartão.

StatusView

StatusView

Tela inteira que só tem um estado para contar: vazio, esperando, aprovado ou falhou. Um desenho para os quatro; o tom troca o ícone no tile branco. EmptyState é o preset neutro.