Validación de dirección para Checkout de comercio electrónico

Objetivo

En este documento, se describen los métodos para combinar Place Autocomplete, la API de Address Validation1 y Maps en una confirmación de la compra de comercio electrónico con el objetivo de capturar direcciones de alta calidad.

Requisitos previos

Google recomienda que te familiarices con lo siguiente:

¿Qué es la validación de direcciones?

La API de Address Validation es un servicio que acepta una dirección. Identifica los componentes de la dirección y los valida. También estandariza la dirección para los envíos por correo y encuentra las coordenadas de latitud y longitud más conocidas para ella. De manera opcional, para las direcciones de Estados Unidos y Puerto Rico, puedes habilitar el Coding Accuracy Support System (CASS™).

¿Por qué necesitas la validación de direcciones en la confirmación de la compra?

Recopila direcciones precisas durante el proceso de pedido:
Este es un paso importante para promover entregas exitosas, aumentar el cumplimiento a tiempo y reducir los costosos cargos por corrección de direcciones.

Guía a los clientes para que ingresen la dirección de forma rápida y precisa:
Place Autocomplete acelera el ingreso de direcciones y reduce los errores de entrada, lo que permite que los clientes avancen fácilmente por la confirmación de la compra. Address Validation proporciona comentarios sobre la calidad general de la dirección, realiza correcciones, como la estandarización y los errores ortográficos, y mejora los metadatos, como proporcionar un indicador residencial o comercial (disponible en regiones seleccionadas).

Descripción general de la implementación

En esta sección, se describe el flujo de trabajo recomendado para el ingreso de direcciones en las confirmaciones de la compra de comercio electrónico. El proceso consta de tres pasos:

  1. Usa Place Autocomplete para capturar inicialmente la dirección.
  2. Usa la API de Address Validation para confirmar la dirección ingresada.
  3. Muestra la ubicación de la dirección ingresada en un mapa para brindarles confianza a los clientes en la entrega.

A continuación, analizaremos cada paso de forma individual.

Paso 1: Flujo de ingreso de direcciones con el servicio Place Autocomplete

Implementa Place Autocomplete con la API de JavaScript en la primera línea del formulario de ingreso de direcciones.

Place Autocomplete proporciona sugerencias al cliente a medida que ingresa los detalles de su dirección. Cuando se implementa con la API de JavaScript, a medida que los usuarios comienzan a escribir, aparece un menú desplegable debajo del campo del formulario de ingreso de direcciones, que muestra los resultados del servicio Autocomplete que se actualizan con cada pulsación. Una vez que el usuario ingresa suficiente información para encontrar la dirección, la selecciona del menú desplegable. Esta acción propaga automáticamente los campos del formulario con los datos de la dirección.

Puedes proporcionar al usuario dos estilos de entrada de formulario con Place Autocomplete: una pantalla con todos los campos de dirección o una pantalla con un solo campo de entrada. Este campo de entrada único le solicita al usuario que comience a buscar mientras escribe, en lugar de ingresar los componentes de la dirección de forma individual. Una vez que la función de autocompletado propaga la dirección, el flujo de trabajo expande los campos del formulario con los datos de la dirección, lo que permite que el cliente revise y realice ediciones, por ejemplo, agregar un número de apartamento o unidad.

Este es un ejemplo de cómo podría aparecer este flujo con un solo campo de entrada:

imagen

Paso 2: Usa la API de Address Validation para validar direcciones

Después de que el usuario ingresa la dirección, Google recomienda que llames a la API de Address Validation en la confirmación de la compra para confirmar que la dirección sea válida y esté completa. Activa una llamada a la API de Address Validation cuando el usuario haga clic en el botón Siguiente o Continuar en el formulario de dirección. Este botón suele llevar a la página de pago.

Google recomienda llamar a la API de Address Validation para cada transacción.

En el siguiente diagrama de flujo, se muestra un ejemplo de integración de extremo a extremo de la API de Address Validation en una confirmación de la compra:

imagen

En este documento, se analizan las situaciones de aceptación de direcciones más adelante.

Paso 3: Proporciona confirmación visual

Una vez ingresada la dirección, proporciona al usuario una confirmación visual de la ubicación de entrega mostrándola en un mapa. Esto le ofrece al cliente una mayor certeza de que la dirección es correcta y disminuye los inconvenientes de entrega o retiro.

El mapa se puede mostrar durante el proceso de confirmación de la compra o enviarse en el correo electrónico de confirmación de la transacción. Ambos casos de uso se pueden lograr con las siguientes APIs.

La API de Maps JavaScript proporciona un mapa interactivo para mostrar la ubicación del usuario. La API de Maps Static permite incorporar imágenes en la página web o en una etapa posterior en un correo electrónico.

Análisis detallado: Situaciones de aceptación de direcciones

Las respuestas de la API de Address Validation se pueden clasificar en tres situaciones principales:

  • Corregir: La dirección es de baja calidad. Debes solicitar más información.
  • Confirmar : La dirección es de alta calidad, pero tiene cambios con respecto a la dirección de entrada. Es posible que solicites una confirmación.
  • Aceptar: La dirección es de alta calidad. Puedes aceptar la dirección proporcionada.

Este concepto se aborda en la sección Cómo compilar tu lógica de validación de los documentos de la API de Address Validation, y analizaremos cada situación en esta sección.

Corregir

imagen

En esta sección, se muestra cómo corregir una entrada de dirección. Si deseas obtener información sobre los indicadores específicos que muestra la API de Address Validation para indicar una dirección de baja calidad, consulta Cómo corregir una dirección en la documentación Cómo compilar tu lógica de validación.

Si la respuesta de la API de Address Validation indica una dirección no válida, redirecciona al cliente al formulario de ingreso de direcciones para que verifique los datos ingresados. Una vez que se haya corregido la dirección, tu servicio debe volver a enviarla a la API de Address Validation para garantizar que las correcciones realizadas sean válidas.

También puedes destacar errores específicos en la línea de dirección con los indicadores que se muestran en el nivel addressComponents. Puedes ver un ejemplo de esto en la captura de pantalla de la derecha.

Confirmar

imagen

En esta sección, se muestra cómo confirmar una dirección. Si deseas obtener información sobre los indicadores específicos que muestra la API de Address Validation para indicar que se debe confirmar una dirección, consulta Cómo confirmar una dirección en la documentación Cómo compilar tu lógica de validación.

A menudo, tu sistema querrá solicitarle a un usuario que confirme una dirección. Por ejemplo, un cliente escribe mal el nombre de la ciudad, que luego corregirá la API de Address Validation. Debes confirmar esta corrección con el cliente. Esto se debe a que los cambios realizados por la API podrían alterar fundamentalmente lo que se ingresó originalmente.

Usa un modal intersticial para mostrar la información al cliente, lo que permite tres opciones para continuar:

  1. Confirma la dirección que muestra la API y el proceso de confirmación de la compra continúa con la dirección corregida.
  2. Selecciona la dirección tal como se ingresó originalmente y omite la corrección de la API de Address Validation. El proceso de confirmación de la compra puede continuar con normalidad, y el pedido se puede marcar para su revisión posterior antes del envío, si tu proceso lo permite.
  3. El cliente cancela o se retira del modal, lo que lo devuelve a la etapa de ingreso de direcciones del proceso de confirmación de la compra, donde puede volver a ingresar la dirección desde cero y reiniciar el proceso.

Puedes ver un ejemplo de esto en la captura de pantalla de la derecha.

Aceptar

En esta sección, se muestra cómo aceptar una dirección. Si deseas obtener información sobre los indicadores específicos que muestra la API de Address Validation para indicar que una dirección es de buena calidad y se debe aceptar, consulta Cómo aceptar una dirección en la documentación Cómo compilar tu lógica de validación.

En este caso, el proceso de confirmación de la compra debe pasar a la siguiente etapa, probablemente la captura de pagos, sin solicitarle al cliente información sobre la calidad de la dirección. La API confirmó que la dirección ingresada por el cliente es de buena calidad y se puede entregar.

Te recomendamos que uses los datos de dirección que muestra la API de Address Validation en el pedido, ya que podrían contener correcciones y adiciones menores, como las siguientes:

  • Uso de mayúsculas
  • Correcciones de formato, por ejemplo,
    • Calle a St.
    • Orden correcto de los componentes de la dirección
  • ZIP+4 en EE.UU.

Consideraciones sobre la implementación

Cuando compiles tu lógica de aceptación de direcciones, asegúrate de que tu implementación no impida que los clientes confirmen la compra debido a que ingresaron una dirección no válida. Crea la lógica de manera que impida la posibilidad de un bucle infinito si la API indica repetidamente que su entrada no es válida.

Google recomienda que les proporciones a los clientes hasta dos oportunidades para ingresar su dirección y, en el segundo intento, aceptar su entrada, incluso si no se valida. En el segundo intento, el objetivo es permitirles continuar independientemente de la validación.

Dos métodos sugeridos para aceptar el segundo intento:

  • Forzar continuación: Muestra al cliente un modal en el que se explica que la dirección no se valida, pero permite la opción de continuar con la dirección que ingresó.
  • Aceptación silenciosa: Acepta automáticamente el segundo intento sin un paso de confirmación, incluso si la dirección no se valida por completo.

Si es posible, diseña tu sistema para marcar las direcciones que no se validan, de modo que un representante de atención al cliente pueda revisarlas antes de que se envíe el pedido. Esta medida adicional garantiza que detectes cualquier error.

La construcción de edificios nuevos ofrece una buena ilustración de por qué se recomienda esta verificación. Es posible que haya una brecha entre el momento en que finaliza la construcción de un edificio nuevo y el momento en que se propaga la dirección de ese edificio en las bases de datos de direcciones postales. Los clientes deben tener la opción de forzar la continuación en la página de confirmación de la compra con la dirección que ingresaron, incluso si no se valida.

Una vez que se complete una sesión de confirmación de la compra, usa el provideValidationFeedback método de manera opcional para enviar comentarios a Google sobre un intento de validación de dirección específico.

Conclusión

En este documento, se proporcionó una descripción general de un flujo de confirmación de la compra que implementa Autocomplete, Address Validation y confirmación visual en un mapa de Google. Usa este documento como punto de partida para diseñar tu implementación, siguiendo los flujos de ingreso de direcciones recomendados.

Próximos pasos

Lectura adicional sugerida:

Colaboradores

Henrik Valve | Ingeniero de soluciones
Thomas Anglaret | Ingeniero de soluciones
Sarthak Ganguly | Ingeniero de soluciones

  1. Licenciatario no exclusivo del United States Postal Service. Las siguientes marcas son propiedad del United States Postal Service® y se utilizan con los permisos correspondientes: CASS™, USPS®, DPV®. ↩