Como desenhar formulários de pagamento de loja online que reduzem o abandono do carrinho

Aprende o que os formulários de pagamento de uma loja online precisam para ter sucesso. Descobre porque 70% dos carrinhos são abandonados e como corrigir.

Rascunho

Sete em cada dez pessoas que põem artigos no carrinho nunca voltam para comprar. Para a maioria das lojas, são 260 mil milhões de dólares em vendas perdidas que podiam ser recuperadas com um melhor design do pagamento.

O que é um formulário de pagamento de loja online?

Um formulário de pagamento de loja online é o passo final entre a decisão de compra do cliente ("quero isto") e uma transação concluída ("Encomenda confirmada"). Recolhe a morada de envio, os dados de faturação e os dados de pagamento, apenas o suficiente para concluir a venda sem esmagar o comprador.

Ao contrário dos formulários noutras fases do percurso do cliente, os formulários de pagamento têm uma só função: converter a intenção em pagamento. O cliente já decidiu que quer o produto. O formulário deve abrir o caminho para a compra, não criar atrito novo.

Um formulário de pagamento está num momento crítico: o cliente já decidiu, mas qualquer atrito, como custos inesperados, campos confusos ou criação de conta forçada, pode fazê-lo abandonar a meio da transação. Os melhores formulários de pagamento são invisíveis: o cliente mal repara que o preencheu, só vê a encomenda confirmada.

O problema: porque 70% dos carrinhos são abandonados antes da compra

O problema raramente é a intenção do cliente. A maioria das pessoas que abandona o carrinho estava genuinamente interessada no produto. Só encontraram atrito no formulário de pagamento e decidiram que não valia o esforço. Custos de envio inesperados aparecem no passo três. O site exige que criem uma conta para avançar. O formulário tem 24 campos quando a maioria das lojas só precisa de 12. A essa altura, fecham o separador.

As lojas que convertem visitantes de carrinho em clientes reduzem o atrito do pagamento em 35 a 50%. Simplificam os formulários, mostram os custos logo à partida, oferecem pagamento como convidado e fazem o caminho de "quero isto" até "Obrigado pela tua encomenda" demorar menos de 2 minutos.

Este artigo explica porque os formulários de pagamento falham, o que as lojas com maior conversão fazem de diferente e como corrigir as causas específicas do abandono.

Porque os formulários de pagamento causam 70% de abandono de carrinhos (e o que realmente trava os compradores)

A loja online média tem uma taxa de abandono de carrinho de 70,22%. Isto não inclui visitantes que nunca acrescentaram nada: são pessoas que escolheram artigos, os puseram no carrinho e saíram. Eram compradores. O formulário perdeu-as.

A investigação sobre o porquê revela que o problema não é uma só coisa. São cinco pontos de atrito específicos que, juntos, criam resistência suficiente para matar a venda:

Atrito 1: custos inesperados no fim. 39% de quem abandona o carrinho aponta os custos extra como motivo. Veem o preço do produto (49 dólares), acrescentam-no ao carrinho, avançam para o pagamento e, no passo três, descobrem que o envio custa 15 dólares e o imposto mais 8. Agora são 72, não 49. O cliente não orçamentou isso e fecha o separador. Este é o maior motivo isolado para os formulários de pagamento falharem. O problema não é o custo, é a surpresa.

Atrito 2: ser obrigado a criar uma conta. 19% dos clientes abandona quando é obrigado a registar-se. Não têm tempo para se lembrar de uma palavra-passe, confirmar o email ou criar uma conta só para comprar uma coisa. Querem introduzir um cartão de crédito e seguir em frente. Forçar o registo antes do pagamento parece atrito desnecessário.

Atrito 3: o formulário pede informação a mais. 18% abandona por causa de um processo de pagamento complexo. A loja média pede 23,48 elementos de formulário no pagamento. As lojas com maior conversão pedem 12 a 14. É quase o dobro dos campos. Cada campo extra é um motivo para sair, e a maior parte da informação extra nunca é usada depois da encomenda.

Atrito 4: problemas de segurança e confiança. 19% aponta preocupações de segurança. Não confiam no site com os dados do cartão de crédito. Isto aparece de duas formas: o site não mostra com clareza a certificação SSL (o ícone do cadeado), ou não há indicador de confiança (sem selos de segurança, sem mensagem de "pagamento seguro", sem mostrar processadores de pagamento de terceiros que o cliente reconheça).

Atrito 5: opções de pagamento limitadas. 10% dos clientes não consegue pagar porque a loja só aceita cartões de crédito. Querem pagar com a carteira digital do telemóvel, Google Pay, um cartão de débito, uma carteira digital online ou outro método. Se a loja não o suporta, abandonam.

Em conjunto, estes cinco atritos explicam 85% do abandono de carrinhos. A boa notícia: os cinco são problemas de design, não problemas dos clientes. Um melhor design do formulário de pagamento corrige-os a todos.

Como as lojas com maior conversão estruturam os formulários de pagamento

Princípio de design 1: mostra o preço total antes de se comprometerem com o pagamento.

As lojas com maior conversão revelam o envio e o imposto antes de o cliente introduzir os dados de pagamento. Métodos:

Uma pré-visualização do total do carrinho: Antes de clicarem em "Avançar para o pagamento", mostra-lhes o total estimado, incluindo o envio (se conhecido) e o imposto. Exemplo: "Subtotal: $49 | Envio estimado: $15 | Imposto estimado: $8 | Total: ~$72"

Um estimador de envio na página do carrinho: Deixa-os introduzir o código postal e ver as opções de envio antes de avançar. "Introduz o teu código postal para ver as opções de envio: $8 (3 a 5 dias), $15 (1 a 2 dias) ou Grátis (5 a 7 dias)." Agora controlam o custo e escolhem o que querem pagar.

Mensagem clara dos custos no pagamento: Se avançarem sem estimar, mostra o total no topo de cada passo do pagamento. Não o escondas. À medida que mudam quantidades ou escolhem o envio, o total atualiza em tempo real.

Uma conclusão das lojas com maior conversão: a transparência sobre o custo aumenta a conversão mais do que baixar o preço. Os clientes não se importam de pagar 72 dólares se souberem desde o início que são 72 dólares. Abandonam quando a surpresa acontece no passo três.

Princípio de design 2: oferece o pagamento como convidado por defeito.

As lojas com maior conversão fazem do pagamento como convidado o caminho principal. O registo vem depois, como opcional. O fluxo é assim:

Passo 1: endereço de email (para a confirmação da encomenda)
Passo 2: morada de envio
Passo 3: método de envio
Passo 4: dados de pagamento
Passo 5 (opcional): "Criar uma conta para um pagamento mais rápido da próxima vez?"

Ao pôr o passo de criação de conta no fim, as lojas resolvem o problema do "registo forçado". O cliente compra primeiro. Se quiser uma conta para a próxima vez, pode criá-la. Se não quiser, está despachado.

Princípio de design 3: reduz os campos do formulário ao absolutamente necessário.

O formulário de pagamento ideal pede 12 a 14 dados no total. A maioria das lojas pede 23 a 25. Isto é o que é realmente necessário:

Morada de envio (5 campos): nome, rua, cidade, estado/província, código postal
Método de envio (1 opção): deixa-os escolher entre 2 a 3 opções
Morada de faturação (5 campos): nome, rua, cidade, estado, código postal. MAS podes escondê-la se usarem um cartão (a maioria dos processadores de cartões liga a faturação ao cartão)
Pagamento (4 campos): número do cartão, validade, CVV, nome do titular
Email (1 campo): para a confirmação da encomenda

São 12 a 14 campos. Tudo o resto (número de telefone, nome da empresa, instruções de entrega) deve ser opcional ou recolhido depois da compra.

Princípio de design 4: usa uma disposição de coluna única no telemóvel.

O telemóvel tem a taxa de abandono mais alta (85,65%, contra 59% no computador). A razão: as disposições de duas colunas que funcionam no computador falham no telemóvel. Uma disposição de coluna única é crítica:

Um campo por linha. Campos de largura total (não dois lado a lado). Botões fáceis de tocar (mínimo de 48px de altura). Indicador de progresso claro ("Passo 2 de 4"). Tamanho de letra grande e legível.

Princípio de design 5: mostra selos de segurança e sinais de confiança em destaque.

Coloca-os no fundo do pagamento ou perto do botão de pagamento:

Selo de segurança SSL/TLS (o ícone do cadeado)
Logótipos de processadores de pagamento de terceiros (os mais conhecidos)
Selos de confiança (de empresas de segurança conhecidas, se aplicável)
Garantia de devolução do dinheiro ("garantia de satisfação de 30 dias")
Ligação para a política de devoluções

Ocupam pouco espaço mas sinalizam que os dados de pagamento são tratados em segurança e apoiados por uma empresa que reconhecem.

Construir passo a passo o formulário de pagamento

Passo 1: decide o tamanho do pagamento (uma página vs. vários passos).

Pagamento numa página: todos os campos visíveis numa página comprida. Vantagens: parece rápido, sem "esperar que a página seguinte carregue". Desvantagens: parece esmagador se houver muitos campos, mais difícil mostrar o progresso.

Pagamento em vários passos (3 a 4 passos): informação dividida em grupos lógicos (envio, depois faturação, depois pagamento). Vantagens: parece organizado, a barra de progresso motiva a conclusão, é mais fácil esconder campos irrelevantes. Desvantagens: cada passo parece uma nova barreira.

Melhor prática: usa vários passos se tens 15 ou mais campos, uma página se tens 12 a 14.

Passo 2: mostra o preço total em cada passo.

No topo ou ao lado do formulário de pagamento, mostra sempre um "Resumo da encomenda" que atualiza em tempo real:

Subtotal: $49
Envio: $15 (entrega em 1 a 2 dias)
Imposto: $8,28
________
Total: $72,28

Se mudarem as quantidades, o método de envio ou o código de cupão, atualiza isto logo. Nunca os faças adivinhar o que estão a pagar.

Passo 3: usa preenchimento automático e pesquisa de moradas.

A maioria dos navegadores modernos guarda automaticamente a informação de moradas. Ativa o preenchimento automático para os clientes que voltam não escreverem outra vez a morada. Para clientes novos, usa a pesquisa de moradas: no momento em que começam a escrever a rua, mostra opções de conclusão automática a partir dos dados dos correios. Isto reduz erros de escrita e acelera o formulário.

Passo 4: oferece vários métodos de pagamento.

No mínimo, aceita:

Cartões de crédito/débito (das principais redes de cartões)
Carteiras digitais do telemóvel / Google Pay
Uma carteira digital online

Se vendes produtos digitais ou subscrições, considera também:
Pagamento diferido (compra agora, paga depois)
Pagamento em prestações

Passo 5: faz o botão de envio impossível de ignorar.

O botão que conclui a compra deve ser:

Grande (mínimo de 48px de altura)
De cor com alto contraste (destaca-se do fundo)
Com texto claro e orientado para a ação ("Concluir compra", "Fazer encomenda" ou "Pagar [total]"), NÃO texto genérico como "Enviar"
Posicionado no fundo do formulário com espaço em branco claro à volta

Passo 6: mostra a confirmação de imediato e envia a confirmação por email em poucos minutos.

Depois de clicarem em "Concluir compra":

Mostra uma página de sucesso com o número da encomenda, o total e a data de entrega prevista
Deixa-os imprimir ou guardar o recibo
Envia logo um email de confirmação (em 5 minutos) com a mesma informação
Inclui os próximos passos ("Enviamos a informação de rastreio quando a tua encomenda for expedida")

Erros nos formulários de pagamento que matam a conversão

Erro 1: pedir o número de telefone no pagamento. A maioria das lojas pede o telefone porque acha que vai precisar dele para a entrega. Na realidade, 95% das entregas não exige ligar ao cliente. O telefone é um campo de desistência: remove-o. Se precisares dele, pede-o depois da compra.

Erro 2: mostrar o formulário completo da morada de faturação quando não é preciso. Se aceitas cartões de crédito, a morada de faturação já está ligada ao cartão (verificada pelo processador do cartão). Não a peças outra vez. Se a morada de faturação do cliente for diferente do envio, podes pedi-la nessa altura, mas não a faças o padrão.

Erro 3: não mostrar os custos de envio até ao passo final. É o maior assassino de conversões. Os clientes não passam por 4 passos só para ver um custo de envio que não querem pagar. Mostra os custos de envio até ao passo 2.

Erro 4: tornar obrigatório introduzir um código de cupão para avançar. Se tens um campo de cupão, torna-o opcional (ou põe-no depois da compra). Nunca bloqueies o pagamento porque alguém não tem um código de cupão.

Erro 5: sem otimização para telemóvel. Mais de 50% do tráfego de pagamento vem de telemóveis. Se o teu formulário falha no telemóvel, perdes metade das conversões. Testa em telemóveis reais antes de lançar.

Métricas a acompanhar para o desempenho do formulário de pagamento

Taxa de abandono de carrinho. Que percentagem das pessoas que põem artigos no carrinho nunca volta? (Objetivo: abaixo de 50%. Média do setor: 70%). Se a tua está acima de 70%, tens um problema sério de atrito no pagamento. Usa mapas de calor e gravação de sessões para ver onde as pessoas desistem.

Taxa de conclusão do pagamento. Das pessoas que começam o processo de pagamento, que percentagem o conclui? (Objetivo: 70% ou mais. Média do setor: 60%). Se está abaixo de 50%, o formulário tem campos a mais, custos pouco claros ou falta de sinais de confiança.

Passos até à conclusão por dispositivo. Acompanha em que passo as pessoas desistem no telemóvel vs. no computador. Se a desistência no telemóvel é muito maior no passo 2 ou 3, tens um problema de disposição no telemóvel.

Valor médio da encomenda (AOV). O formulário de pagamento influencia o valor que os clientes gastam? Algumas lojas descobrem que mostrar o envio cedo aumenta o AOV (as pessoas acrescentam artigos para atingir o limite de "envio grátis"). Testa isto.

Tempo até concluir o pagamento. Quanto tempo demora o cliente médio a concluir o pagamento? (Objetivo: menos de 3 minutos). Se está acima de 5 minutos, o formulário é demasiado complexo ou o processo é confuso.

Resumo do módulo: o que torna os formulários de pagamento diferentes

Os formulários de pagamento não são para recolher dados. São para remover o atrito entre um comprador e a compra. Cada campo é uma oportunidade de perder a venda. Cada passo é um motivo para hesitar. Os formulários de pagamento com maior conversão levam o cliente de "quero isto" a "obrigado" em menos de 2 minutos, sem surpresas.

O aumento de conversão de 35% disponível para a maioria das lojas não vem de funcionalidades nem de descontos, mas de remover o atrito que nunca foi necessário.

Perguntas frequentes

Devo exigir uma conta para concluir o pagamento?
Não. O pagamento como convidado deve ser o caminho por defeito. A criação de conta (opcional) deve vir depois da compra, se vier. Forçar o registo antes do pagamento é o segundo maior motivo para os clientes abandonarem carrinhos. Deixa-os comprar primeiro, oferece a conta depois. Com o criador de websites da WEMASY, podes configurar isto diretamente no teu website.
Qual é o número ideal de campos num formulário de pagamento?
12 a 14 campos no total. Inclui a morada de envio (5), o método de envio (1), os dados de pagamento (4), o email (1) e a morada de faturação opcional (5, se for preciso). A loja média usa mais de 23 campos. Cada campo além dos 14 reduz a conclusão em 3 a 5%. Pergunta-te: preciso mesmo desta informação para cumprir a encomenda? Se a resposta é não, remove-o.
Quando devo mostrar os custos de envio e imposto?
O mais cedo possível, de preferência antes de o pagamento começar. Usa uma pré-visualização do total do carrinho ou um estimador de envio na página do carrinho. Se não, mostra os custos o mais tardar no passo 2 do pagamento. Nunca escondas o envio e o imposto até ao passo final. Os custos inesperados são o motivo número um do abandono.
Quantos métodos de pagamento devo aceitar?
Mínimo: cartão de crédito/débito, a carteira digital do telemóvel, Google Pay e uma carteira digital online. Cada método adicional aumenta a conclusão em 2 a 3%. A maior parte do abandono por causa do método de pagamento acontece quando só se aceitam cartões de crédito. Testa acrescentar pagamento diferido ou em prestações se vendes artigos de valor mais alto.
Como otimizo o pagamento para telemóvel?
Disposição de coluna única (nunca duas colunas lado a lado). Campos de largura total. Um campo por linha. Botões fáceis de tocar com altura mínima de 48px. Indicador de progresso claro no topo do formulário. Usa campos nativos do telemóvel (seletor de data, tipo de teclado) para reduzir a escrita. O telemóvel tem uma taxa de abandono acima de 85%, e é crítico corrigir isto.
Como ajuda a WEMASY com os formulários de pagamento de loja online?
O criador de formulários da WEMASY deixa-te desenhar formulários de pagamento com integração de pagamentos, preenchimento automático, pesquisa de moradas, indicadores de progresso e otimização para telemóvel. Liga os formulários diretamente ao stock da tua loja online, cria lógica condicional para mostrar ou esconder campos consoante o método de envio ou a localização, e faz testes A/B de variantes do pagamento para descobrir o que converte melhor. Vê como os formulários se encaixam no sistema de loja online da WEMASY em /pricing.

Põe isto em prática
no teu próprio site.

Começa grátis com a WEMASY e cria o teu site em poucos minutos.