목표
이 문서에서는 고품질 주소를 캡처할 수 있도록 Place Autocomplete, Address Validation API1, 지도를 전자상거래 결제 시 결합하는 방법을 설명합니다.
기본 요건
다음 사항을 숙지하는 것이 좋습니다.
- Place Autocomplete JavaScript 개발자 문서입니다.
- Place Autocomplete의 작동 방식과 구현 옵션을 기술적 관점에서 이해합니다.
- 결제 구현 Place Autocomplete
가이드
- 전자상거래 결제에 대한 Place Autocomplete 구현 권장사항의 예
- 유효성 검사 로직 빌드에 중점을 둔 Address Validation API 제품 문서
- Address Validation API의 작동 방식을 기술적 관점에서 이해하고 주소 품질을 결정하는 신호를 검토합니다.
주소 확인이란 무엇인가요?
Address Validation API는 주소를 수신하는 서비스입니다. 주소 구성 요소를 식별하고 확인합니다. 또한 우편을 위해 주소를 표준화하고 가장 잘 알려진 위도/경도 좌표를 찾습니다. 원하는 경우 미국과 푸에르토리코 내 주소의 경우 코딩 정확도 지원 시스템 (CASSTM)을 사용 설정할 수 있습니다.결제 시 주소 확인이 필요한 이유는 무엇인가요?
주문 프로세스 중 정확한 주소 수집:
이 단계는 성공적인 배송을 촉진하고, 정시 처리를 늘리고, 비용이 많이 드는 주소 수정 비용을 절감하는 데 중요한 단계입니다.
고객이 빠르고 정확하게 주소를 입력할 수 있도록 안내:
Place Autocomplete를 사용하면 주소 입력 속도가 빨라지고 입력 오류가 줄어들어
고객이 결제 과정을 쉽게 진행할 수 있습니다. Address Validation은 전반적인 주소 품질에 관한 의견을 제공하고, 표준화 및 맞춤법 실수를 수정하며, 주거용 또는 상업용 지표 (일부 지역에서 사용 가능)와 같은 메타데이터를 개선합니다.
구현 개요
이 섹션에서는 전자상거래 결제에 권장되는 주소 입력 워크플로를 간략히 설명합니다. 이 프로세스는 세 단계로 구성됩니다.
- Place Autocomplete을 사용하여 처음에 주소를 캡처합니다.
- Address Validation API를 사용하여 입력된 주소를 확인하세요.
- 입력한 주소의 위치를 지도에 표시하여 고객에게 배송을 확신할 수 있도록 합니다.
다음으로 각 단계를 개별적으로 자세히 살펴보겠습니다.
1단계: 주소 입력 흐름 - Place Autocomplete 서비스 사용
주소 입력 양식의 첫 번째 줄에 JavaScript API를 사용하여 Place Autocomplete를 구현합니다.
Place Autocomplete는 고객이 주소 세부정보를 입력할 때 고객에게 추천 검색어를 제공합니다. JavaScript API를 사용하여 구현하면 사용자가 입력을 시작하면 주소 입력 양식 입력란 아래에 드롭다운이 표시되어 키 입력 시마다 업데이트되는 Autocomplete 서비스의 결과를 표시합니다. 사용자가 주소를 찾기에 충분한 정보를 입력하면 드롭다운에서 주소를 선택합니다. 이 작업을 수행하면 양식 필드가 주소 데이터로 자동 채워집니다.
Place Autocomplete를 사용하는 사용자에게 두 가지 양식 항목 스타일(모든 주소 필드가 있는 디스플레이 또는 단일 입력란이 있는 디스플레이)을 제공할 수 있습니다. 이 단일 입력란은 사용자에게 주소 구성요소를 개별적으로 입력하는 대신 입력과 동시에 검색을 시작하도록 안내합니다. 자동 완성 기능이 주소를 채우면 워크플로는 주소 데이터로 양식 필드를 확장하여 고객이 이를 검토하고 수정할 수 있습니다(예: 아파트 동/호수 추가).
다음은 단일 입력란을 사용하여 이 흐름이 표시되는 방법을 보여주는 예입니다.
2단계: Address Validation API를 사용하여 주소 확인
사용자가 주소를 입력한 후에는 결제 시 Address Validation API를 호출하여 주소가 유효하고 완전한지 확인하는 것이 좋습니다. 사용자가 주소 양식에서 '다음' 또는 '계속' 버튼을 클릭하면 Address Validation API 호출을 트리거합니다. 이 버튼을 클릭하면 결제 페이지로 연결되는 경우가 많습니다.
모든 거래에 Address Validation API를 호출하는 것이 좋습니다.
다음 흐름 다이어그램은 결제 시 Address Validation API의 엔드 투 엔드 통합 예를 보여줍니다.
이 문서에서는 주소 수락 시나리오에 대해 나중에 설명합니다.
3단계: 시각적 확인 제공하기
주소 입력 후 지도에 배송 위치를 표시하여 사용자에게 배송 위치를 시각적으로 확인할 수 있도록 합니다. 이를 통해 고객은 주소가 정확함을 추가로 보장하고 배송 또는 수령 실패를 줄일 수 있습니다.
지도는 결제 프로세스 중에 표시되거나 거래 확인 이메일 내에서 전송될 수 있습니다. 이 두 사용 사례는 다음 API를 통해 실행할 수 있습니다.
| Maps JavaScript API는 사용자 위치를 표시하기 위한 대화형 지도를 제공합니다. | Maps Static API를 사용하면 웹페이지 내에 또는 이메일의 후반 단계에 이미지를 삽입할 수 있습니다. |
|---|---|
 |
 |
심층 분석 - 주소 수락 시나리오
Address Validation API 응답은 다음과 같은 세 가지 주요 시나리오로 분류할 수 있습니다.
- 해결: 주소 품질이 낮습니다. 추가 정보를 요청하는 메시지가 표시됩니다.
- 확인: 주소가 고품질이지만 입력 주소와는 다른 내용이 있습니다. 확인 메시지가 표시될 수 있습니다.
- 수락: 고품질의 주소입니다. 제공된 주소를 수락할 수 있습니다.
이 개념은 Address Validation API 문서의 유효성 검사 로직 빌드 섹션에서 다루며 이 섹션에서는 각 시나리오를 설명합니다.
수정
이 섹션에서는 주소 입력을 수정하는 방법을 보여줍니다. Address Validation API가 낮은 품질의 주소를 나타내기 위해 반환하는 특정 신호에 대한 자세한 내용은 유효성 검사 로직 빌드 문서의 주소 수정을 참고하세요.
Address Validation API의 응답에 잘못된 주소가 표시되면 고객을 주소 입력 양식으로 리디렉션하여 입력된 데이터를 확인합니다. 주소가 수정되면 수정된 내용이 유효한지 확인하기 위해 서비스가 Address Validation API로 다시 전송됩니다.
addressComponents 수준에서 반환된 신호를 사용하여 특정 주소 입력란 오류를 강조표시할 수도 있습니다. 오른쪽 스크린샷에서 이에 관한 예를 확인할 수 있습니다.
확인
이 섹션에서는 주소를 확인하는 방법을 설명합니다. Address Validation API가 주소를 확인해야 함을 나타내기 위해 반환하는 특정 신호에 관한 자세한 내용은 유효성 검사 로직 빌드 문서의 주소 확인을 참고하세요.
시스템에서 사용자에게 주소를 확인하라는 메시지를 표시하는 경우가 많습니다. 예를 들어 고객이 도시 이름을 잘못 입력하면 Address Validation API를 통해 수정됩니다. 고객에게 이 문제 해결 방법을 확인해야 합니다. API를 통해 변경하면 원래 입력된 내용이 근본적으로 변경될 수 있기 때문입니다.
전면 광고 모달을 사용하여 고객에게 정보를 표시하고 다음 세 가지 옵션을 통해 계속 진행할 수 있습니다.
- API에서 반환한 주소를 확인하면 수정된 주소를 사용하여 결제 프로세스가 계속 진행됩니다.
- Address Validation API의 수정사항을 무시하고 원래 입력한 주소를 선택합니다. 결제 프로세스는 정상적으로 계속될 수 있으며, 프로세스가 허용하는 경우 배송 전에 다운스트림 검토를 위해 주문을 신고할 수 있습니다.
- 고객이 모달을 취소하거나 모달에서 나와 결제 프로세스의 주소 입력 단계로 돌아갑니다. 여기에서 주소를 처음부터 다시 입력하여 프로세스를 다시 시작할 수 있습니다.
오른쪽 스크린샷에서 이에 대한 예를 볼 수 있습니다.
동의
이 섹션에서는 주소를 수락하는 방법을 설명합니다. Address Validation API가 주소 품질이 좋고 수락되어야 함을 나타내는 특정 신호에 관한 자세한 내용은 유효성 검사 로직 빌드 문서의 주소 수락을 참고하세요.
이 시나리오에서 결제 프로세스는 고객에게 주소 품질에 관한 메시지를 보내지 않고 다음 단계인 결제 캡처로 이동해야 합니다. API에서 고객이 입력한 주소가 품질이 좋고 배송 가능함을 확인했습니다.
다음과 같은 사소한 수정 및 추가 사항이 포함될 수 있으므로 Address Validation API에서 반환된 주소 데이터를 주문에 사용하는 것이 좋습니다.
- 대문자 사용(영문)
- 서식 수정. 예:
- 거리에서 스트리트까지
- 주소 구성요소의 올바른 순서
- ZIP+4(미국)
구현 관련 고려사항
주소 수락 로직을 빌드할 때는 잘못된 주소를 입력하여 고객의 체크아웃이 차단되지 않도록 구현 시 확인해야 합니다. API에서 입력 항목이 유효하지 않음을 반복적으로 나타내는 경우 무한 루프의 가능성을 방지하는 방식으로 로직을 구성합니다.
고객에게 주소를 입력할 수 있는 기회를 최대 두 번 제공하고, 두 번째 시도에는 검증되지 않더라도 주소를 입력할 것을 권장합니다. 두 번째 시도에서는 유효성 검사와 관계없이 계속 진행하도록 하는 것이 목표입니다.
두 번째 시도를 수락하기 위해 권장되는 두 가지 방법은 다음과 같습니다.
- Force-proceed: 고객에게 주소가 유효하지 않음을 설명하는 모달을 표시하되, 고객이 입력한 주소를 계속 사용해도 되는 옵션을 허용합니다.
- Silent Acceptance(자동 수락): 주소가 완전히 확인되지 않은 경우에도 확인 단계 없이 두 번째 시도를 자동으로 수락합니다.
가능하면 주문 상품이 발송되기 전에 고객 서비스 담당자가 검토할 수 있도록 검증되지 않는 주소에 플래그를 지정하도록 시스템을 설계합니다. 이 추가 측정을 통해 실수를 포착할 수 있습니다.
신축 건물에서 이 검토가 권장되는 이유를 잘 보여줍니다. 새 건물 건축이 완공된 시점과 주소 데이터베이스에 건물의 주소가 입력되는 시점 사이에는 차이가 있을 수 있습니다. 고객은 유효성 검사가 되지 않은 경우에도 입력한 주소로 결제 페이지를 강제로 진행할 수 있어야 합니다.
결제 세션이 완료되면 필요에 따라 provideValidationFeedback 메서드를 사용하여 특정 주소 유효성 검사 시도에 대한 의견을 Google에 보낼 수 있습니다.
결론
이 문서에서는 Google 지도에서 자동 완성, 주소 확인, 시각적 확인을 구현하는 결제 흐름을 간략하게 설명합니다. 이 문서를 시작점으로 사용하여 권장되는 주소 입력 흐름에 따라 구현을 설계합니다.
다음 단계
신뢰할 수 있는 주소로 결제, 배송, 운영 개선 백서를 다운로드하고 주소 확인으로 결제, 전송, 작업 개선 웹 세미나를 확인하세요.
권장 추가 자료:
기여자
헨릭 밸브 | 솔루션 엔지니어
토마스 앙글라렛 | 솔루션 엔지니어
사르탁 강굴리 | 솔루션 엔지니어
-
미국 우편 서비스의 비배타적 라이선스 수혜자. 다음 상표는 United States Postal Service®의 소유이며 CASSTM, USPS®, DPV®의 허가를 받아 사용됩니다. ↩