이 페이지는 Cloud Translation API를 통해 번역되었습니다.

전자상거래 결제용 주소 확인

목표

이 문서에서는 고품질 주소를 캡처하기 위해 전자상거래 결제에서 Place Autocomplete, Address Validation API¹, 지도를 결합하는 방법을 설명합니다.

기본 요건

Google에서는 다음 항목을 숙지할 것을 권장합니다.

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를 사용하여 구현하는 경우 사용자가 입력을 시작하면 주소 입력 양식 필드 아래에 드롭다운이 표시되어 키를 입력할 때마다 자동 완성 서비스의 결과가 업데이트됩니다. 사용자가 주소를 찾기에 충분한 정보를 입력했으면 드롭다운에서 주소를 선택합니다. 이렇게 하면 양식 필드에 주소 데이터가 자동으로 채워집니다.

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의 수정사항을 무시하고 원래 입력한 주소를 선택합니다. 결제 프로세스는 정상적으로 계속될 수 있으며 프로세스에서 허용하는 경우 배송 전에 다운스트림 검토를 위해 주문을 신고할 수 있습니다.
고객이 모달을 취소하거나 취소하고 결제 프로세스의 주소 입력 단계로 돌아가면 프로세스를 처음부터 처음부터 다시 입력할 수 있습니다.

오른쪽의 스크린샷에서 예시를 확인할 수 있습니다.

동의

이 섹션에서는 주소를 수락하는 방법을 설명합니다. 주소 유효성 검사 API가 주소의 품질이 우수하고 허용되어야 함을 나타내는 특정 신호에 관한 자세한 내용은 유효성 검사 로직 빌드 문서의 주소 수락을 참고하세요.

이 시나리오에서는 결제 프로세스가 다음 단계인 결제 캡처로 이동해야 하며, 품질에 관해 고객에게 메시지를 표시하지 않습니다. API에서 고객이 입력한 주소의 품질이 우수하며 배송 가능한 것으로 확인되었습니다.

다음과 같은 사소한 수정사항 및 추가사항이 포함될 수 있으므로 Address Validation API에서 반환된 주소 데이터를 주문에 사용하는 것이 좋습니다.

대문자 사용(영문)
형식 수정. 예:
- 스트리트-가
- 주소 구성요소의 올바른 순서
미국의 경우 ZIP+4로 인증됩니다.

구현 관련 고려사항

주소 수락 로직을 작성할 때는 잘못된 주소를 입력하여 고객의 결제를 차단하지 않도록 구현하세요. API에서 항목이 유효하지 않다고 반복적으로 표시할 경우 무한 루프가 발생할 가능성을 방지하는 방식으로 로직을 구성합니다.

고객에게 주소를 입력할 수 있는 기회를 최대 2회 제공하고, 두 번째 시도에서 검증되지 않더라도 입장을 수락하는 것이 좋습니다. 두 번째 시도의 목표는 검증과 관계없이 계속 진행하는 것입니다.

두 번째 시도를 수락하기 위해 권장되는 두 가지 방법은 다음과 같습니다.

강제 진행: 고객에게 주소가 확인되지 않는 이유를 설명하는 모달을 표시하되, 입력한 주소로 계속 진행할 수 있도록 옵션을 허용합니다.
자동 수락: 주소가 완전히 검증되지 않더라도 확인 단계 없이 두 번째 시도를 자동으로 수락합니다.

가능하면 주문 상품이 발송되기 전에 고객 서비스 담당자가 주소를 검토할 수 있도록 검증되지 않는 주소를 신고하도록 시스템을 설계합니다. 이 추가 조치를 통해 실수를 포착할 수 있습니다.

신규 건물 건설은 이 검사가 권장되는 이유를 잘 보여줍니다. 새 건물 공사가 완료되는 시점과 우편 주소 데이터베이스에 건물의 주소가 입력되는 시점 사이에 차이가 있을 수 있습니다. 주소가 확인되지 않은 경우에도 고객은 입력한 주소로 결제 페이지에서 강제로 계속 진행할 수 있어야 합니다.

결제 세션이 완료되면 선택적으로 provideValidationFeedback 메서드를 사용하여 특정 주소 유효성 검사 시도에 관한 의견을 Google에 보냅니다.

결론

이 문서에서는 Google 지도에서 자동 완성, 주소 확인, 시각적 확인을 구현하는 결제 절차를 개략적으로 설명합니다. 이 문서를 참고하여 권장되는 주소 입력 흐름에 따라 구현을 설계하세요.

다음 단계

신뢰할 수 있는 주소로 결제, 배송, 운영 개선 백서를 다운로드하고 주소 검증으로 결제, 배송, 운영 개선 웹 세미나를 확인하세요.

추가 추천 자료:

기여자

Henrik Valve | 솔루션 엔지니어
Thomas Anglaret | 솔루션 엔지니어
Sarthak Ganguly | 솔루션 엔지니어

미국 우편 서비스의 비독점 라이선스 수혜자. 다음 상표는 United States Postal Service®에서 소유하며 허가 하에 사용되었습니다. CASSTM, USPS®, DPV® ↩