Validação de endereço para a finalização de compra de e-commerce

Objetivo

Este documento descreve métodos para combinar Place Autocomplete, Address Validation¹ e o Maps em uma finalização de compra de e-commerce com o objetivo de capturar endereços de alta qualidade.

Pré-requisitos

O Google recomenda ter familiaridade com os seguintes itens:

• Desenvolvedor do Place Autocomplete JavaScript na documentação do Google.
  • Do ponto de vista técnico, entender como o Place Autocomplete funciona e as opções de implementação.
• Guia de implementação de finalização de compra para o Place preenchimento automático.
  • Exemplos de práticas recomendadas de implementação do Place Autocomplete em uma finalização de compra de e-commerce.
• Produto API Address Validation documentação, com foco em Criar uma validação lógica.
  • Do ponto de vista técnico, entender como a API Address Validation funciona e analise os sinais que determinam a qualidade do endereço.

.

Faça um teste:acesse o console do Google Cloud e ative a API Address Validation.

O que é a validação de endereço?

A API Address Validation é um serviço que aceita um endereço. Ele identifica e valida componentes de endereço. Ele também padroniza para envio e localiza as melhores coordenadas de latitude/longitude. Opcionalmente, para endereços nos Estados Unidos e em Porto Rico, é possível ativar o Sistema de suporte de precisão de programação (CASSTM, na sigla em inglês).

Por que você precisa de validação de endereço na finalização da compra?

Coletar endereços precisos durante o processo de pedido:
Esta é uma etapa importante para promover entregas bem-sucedidas, aumenta o prazo processamento do pedido e reduz as cobranças caras de correção de endereço.

Oriente os clientes a inserir o endereço com rapidez e precisão:
O Place Autocomplete acelera a inserção de endereços e reduz os erros de entrada, permitindo a facilitar a finalização da compra. A Address Validation dá feedback na qualidade geral do endereço, faz correções como padronização e erros de ortografia e aprimora os metadados, como fornecer um endereço indicador comercial (disponível em selecionar ou várias regiões.

Visão geral da implementação

Esta seção descreve o fluxo de trabalho recomendado para inserção de endereço para e-commerce finalizações de compras. O processo é composto por três etapas:

1. Usar o Place Autocomplete para capturar inicialmente o endereço.
2. Use a API Address Validation para confirmar o endereço inserido.
3. Exibir o local do endereço inserido em um mapa para oferecer entrega aos clientes.

A seguir, vamos nos aprofundar em cada etapa individualmente.

Etapa 1: fluxo de entrada de endereço usando o serviço Place Autocomplete

Implementar o Place Preenchimento automático usando a API JavaScript na primeira linha do formulário de inserção de endereço.

O Place Autocomplete oferece sugestões para o cliente enquanto ele digita detalhes do endereço. Quando implementados usando a API JavaScript, à medida que os usuários começam digitando, um menu suspenso aparece abaixo do campo do formulário de inserção de endereço, mostrando os resultados do serviço Autocomplete, que é atualizado a cada pressionamento de tecla. Quando o usuário inserir informações suficientes para encontrar o endereço, ele o selecionará na no menu suspenso. Esta ação preenche automaticamente os campos do formulário com o endereço dados.

É possível fornecer dois estilos de entrada de formulário ao usuário com o Place Autocomplete: uma tela com todos os campos de endereço ou uma tela com uma única entrada . Esse campo de entrada único solicita que o usuário comece a pesquisar enquanto digita, em vez de inserir componentes de endereço individualmente. Depois do preenchimento automático preenche o endereço, o fluxo de trabalho expande os campos do formulário com o endereço dados, permitindo que o cliente revise e faça edições, por exemplo, adicionar uma número do apartamento ou unidade.

Veja um exemplo de como esse fluxo pode aparecer, usando um único campo de entrada:

Dica :se você estiver usando o preenchimento automático (novo), usar tokens de sessão em suas chamadas de API de preenchimento automático e de validação de endereço para receber aproveitar o preenchimento automático para finalização de compra entrega preços.

Etapa 2: usar a API Address Validation em endereços

Depois que o usuário inserir o endereço, o Google recomenda que você chame o campo Address Validação API na finalização da compra para confirmar se o endereço é válido e completo. Faça uma chamada para a API Address Validation quando o usuário clica no botão "Próxima" ou "Continuar" o formulário de endereço. Esse botão geralmente leva à página de pagamento.

O Google recomenda chamar a API Address Validation em cada transação.

O fluxograma a seguir ilustra um exemplo de integração completa do API Address Validation em uma finalização de compra:

Este documento discute os cenários de aceitação de endereço posteriormente.

Etapa 3: fornecer confirmação visual

Após a inserção do endereço, forneça ao usuário uma confirmação visual da entrega local exibindo-o em um mapa. Isso oferece ao cliente a garantia de que o endereço está correto e reduzir a entrega ou retirada de segurança.

O mapa pode ser exibido durante o processo de finalização da compra ou enviado na transação e-mail de confirmação. Esses dois casos de uso podem ser realizados as seguintes APIs.

A API Maps JavaScript oferece um mapa interativo para exibir o local do usuário.	A API Maps Static permite a incorporação de imagens na página da Web ou posteriormente em um e-mail.

Observação: use o geocódigo retornados pela API Address Validation para mostrar a localização de um endereço IP.

Análise detalhada: abordar cenários de aceitação

As respostas da API Address Validation podem ser categorizadas em três cenários principais:

• Corrigir: o endereço está de baixa qualidade. Você vai precisar pedir mais informações.
• Confirme: o endereço é de alta qualidade, mas mudanças do endereço de entrada. Você pode solicitar confirmação.
• Aceitar: o endereço é de alta qualidade. Você pode aceitar o endereço fornecido.

Esse conceito é abordado no curso Criar uma lógica da documentação da API Address Validation. Vamos discutir cada cenário em nesta seção.

Dica :a lógica também está disponível como um componente da Web de código aberto, na Componente estendido biblioteca.

Corrigir

Nesta seção, mostramos como corrigir uma entrada de endereço. Para informações sobre recursos sinaliza que a API Address Validation retorna para indicar uma baixa qualidade da conta, consulte Corrigir um endereço na documentação Criar sua lógica de validação.

Se a resposta da API Address Validation indicar um endereço inválido, redirecionar o cliente ao formulário de inserção de endereço para verificar os dados inseridos. Depois que o endereço for corrigido, o serviço deve ser reenviado ao endereço Validation para garantir que as correções feitas sejam válidas.

Você também pode destacar erros específicos na linha de endereço usando os sinais. retornados no nível de addressComponents. Confira um exemplo disso captura de tela à direita.

---

Confirmar

Nesta seção, mostramos como confirmar um endereço. Para informações sobre recursos indica que a API Address Validation retorna para indicar que um endereço precisa ser confirmada, consulte Confirmar uma endereço na documentação Criar sua lógica de validação.

Muitas vezes, o sistema solicitará que o usuário confirme um endereço. Por exemplo: um cliente digita incorretamente o nome da cidade, que seria então corrigido pelo campo API Validation. Confirme essa correção com o cliente. Isso ocorre porque as alterações feitas pela API podem alterar fundamentalmente o que foi originalmente inserido.

Use um modal intersticial para exibir as informações ao cliente, permitindo três opções para continuar:

1. Confirme o endereço retornado pela API e o processo de finalização da compra continua, usando o endereço corrigido.
2. Selecione o endereço como foi inserido, ignorando a correção do API Address Validation. O processo de finalização da compra pode continuar normalmente, e a pedido pode ser sinalizado para análise downstream antes do envio, se o processo permite.
3. O cliente cancela ou desiste do modal, retornando-o ao etapa de inserção do endereço do processo de finalização da compra, na qual é possível inserir novamente do zero, iniciando o processo de novo.

Confira um exemplo na captura de tela à direita.

---

Aceitar

Nesta seção, mostramos como aceitar um endereço. Para informações sobre recursos sinaliza que a API Address Validation retorna para indicar que um endereço é válido de qualidade e deve ser aceito, consulte Aceitar um endereço na documentação Criar sua lógica de validação.

Nesse cenário, o processo de checkout deve avançar para a próxima etapa, provavelmente captura de pagamentos, sem avisos ao cliente em relação à qualidade do pagamento. a API confirmou que o endereço informado pelo cliente é de boa qualidade; e entrega.

Recomendamos usar os dados de endereço retornados da API Address Validation em relação ao pedido, pois ele pode conter pequenas correções e adições, como o seguinte:

• Letras maiúsculas
• Correções de formatação, por exemplo
  • Rua a St
  • Ordenação correta dos componentes de endereço
• ZIP+4 nos EUA.

.

Dica: exiba o endereço ao cliente na página de captura de pagamento mesmo que ninguém chame a atenção para ele.

---

Considerações sobre a implementação

Ao criar sua lógica de aceitação de endereço, certifique-se de que sua implementação não impedir que os clientes finalizem a compra porque digitaram um endereço inválido. Construção de modo a impedir a possibilidade de um loop infinito se a API indica repetidamente que a entrada é inválida.

O Google recomenda que você ofereça aos clientes até duas chances para e, na segunda tentativa, aceitar a inscrição, mesmo que não validar. Na segunda tentativa, o objetivo é deixar o cliente continuar, independentemente validação.

Dois métodos sugeridos para aceitar a segunda tentativa:

• Avançar:mostre ao cliente uma janela modal explicando que o endereço não é. validando, mas permitir que a opção de continuar com o endereço digitado.
• Aceitação silenciosa:aceita automaticamente a segunda tentativa sem um etapa de confirmação, mesmo se o endereço não for totalmente validado.

Se possível, projete seu sistema para sinalizar endereços não validados, de modo que um um representante de atendimento ao cliente poderá analisá-los antes que o pedido seja enviado. Isso medida extra garante que você detecte erros.

A construção de um novo edifício mostra uma boa ilustração do motivo pelo qual essa verificação é recomendado. Pode haver uma lacuna entre o momento em que a construção do novo edifício é concluído e quando o endereço desse edifício é preenchido no campo postal bancos de dados. Os clientes devem ter a opção de forçar o processamento página de finalização da compra com o endereço digitado, mesmo que não seja validado.

Assim que uma sessão de finalização de compra for concluída, como opção, use o provideValidationFeedback para enviar feedback ao Google sobre uma tentativa de validação de endereço específica.

Conclusão

Este documento apresentou uma visão geral de um fluxo de checkout com implementação Preenchimento automático, validação de endereço e confirmação visual em um mapa do Google. Usar este documento como ponto de partida para projetar sua implementação, seguindo os fluxos de entrada de endereços recomendados.

Próximas etapas

Faça o download de Melhore a finalização da compra, o envio e as operações com endereços confiáveis Artigo e consulte Como melhorar a finalização da compra, a entrega e as operações com o Address Validação Webinar.

Leitura adicional sugerida:

• Documentação do Place Autocomplete
• Documentação da API Address Validation
• Geração de relatórios da Plataforma Google Maps

Colaboradores

Válvula Henrik | Engenheiro de soluções
Thomas Anglaret | Engenheiro de soluções
Sarthak Ganguly | Engenheiro de soluções

---

1. Licenciado não exclusivo do Serviço Postal dos Estados Unidos. As marcas registradas a seguir são do United States Postal Service® e usadas com permissão: CASSTM, USPS®, DPV®. ↩