結帳時的地址驗證

目標

本文說明如何在電子商務結帳流程中，結合 Place Autocomplete、Address Validation API1 和地圖，擷取高品質地址。

必要條件

Google 建議您熟悉下列項目：

  • Place Autocomplete JavaScript 開發人員說明文件。
    • 從技術角度瞭解 Place Autocomplete 的運作方式和導入選項。
  • Place Autocomplete 結帳導入 指南。
    • 在電子商務結帳頁面導入 Place Autocomplete 的最佳做法範例。
  • Address Validation API 產品說明文件，重點是建構驗證邏輯。
    • 從技術角度瞭解 Address Validation API 的運作方式，並查看決定地址品質的信號。

什麼是地址驗證？

Address Validation API 是一項可接受地址的服務。這項服務會識別地址元件並加以驗證。此外，這項服務也會將地址標準化以利郵寄，並找出最合適的經緯度座標。(選用) 如果地址位於美國和波多黎各，可以啟用編碼準確度支援系統 (CASS™)。

為什麼需要在結帳時驗證地址？

在訂購程序中收集正確地址：
這是促進順利送達、提高準時出貨率，以及減少昂貴的地址修正費用的重要步驟。

引導顧客快速準確地輸入地址：
Place Autocomplete 可加快地址輸入速度並減少輸入錯誤，讓顧客輕鬆完成結帳。地址驗證服務會提供整體地址品質的意見回饋、修正錯誤 (例如標準化和拼字錯誤)，以及強化中繼資料，例如提供住宅或商業指標 (適用於特定區域)。

導入程序總覽

本節將說明電子商務結帳時建議的地址輸入工作流程。這個程序包含三個步驟：

  1. 使用 Place Autocomplete 擷取地址。
  2. 使用 Address Validation API 確認輸入的地址。
  3. 在地圖上顯示輸入地址的位置，讓顧客放心。

接下來，我們將逐一深入探討每個步驟。

步驟 1：地址輸入流程 - 使用 Place Autocomplete 服務

在地址輸入表單的第一行，使用 JavaScript API 實作 Place Autocomplete。

Place Autocomplete 會在顧客輸入地址詳細資料時提供建議。使用 JavaScript API 導入時，使用者開始輸入內容後，地址輸入表單欄位下方會顯示下拉式選單，列出自動完成服務的結果，並隨著每次按鍵輸入更新。使用者輸入足夠的資訊來尋找地址後，即可從下拉式選單中選取地址。系統會自動填入表單欄位的地址資料。

您可以使用 Place Autocomplete，為使用者提供兩種表單輸入樣式：顯示所有地址欄位，或顯示單一輸入欄位。這個單一輸入欄位會提示使用者在輸入時開始搜尋，而不是個別輸入地址元件。自動完成功能填入地址後，工作流程會展開表單欄位，並填入地址資料，讓顧客查看及編輯，例如新增公寓或單位號碼。

以下是使用單一輸入欄位時，這項流程可能呈現的方式：

圖片

步驟 2：使用 Address Validation API 驗證地址

使用者輸入地址後，Google 建議您在結帳時呼叫 Address Validation API，確認地址有效且完整。當使用者點選地址表單上的「Next」(下一步) 或「Continue」(繼續) 按鈕時，觸發對 Address Validation API 的呼叫。這個按鈕通常會將使用者帶往付款頁面。

Google 建議您為每筆交易呼叫 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 傳回哪些特定信號，表示地址應經過確認，請參閱「確認地址」一節的「建構驗證邏輯」說明文件。

系統通常會提示使用者確認地址。舉例來說，如果顧客拼錯城市名稱，地址驗證 API 就會修正。請向顧客確認這項修正。這是因為 API 所做的變更可能會大幅改變原本輸入的內容。

使用插頁式模式向顧客顯示資訊，並提供三種後續操作選項：

  1. 確認 API 傳回的地址，結帳程序就會繼續，並使用修正後的地址。
  2. 選取原本輸入的地址，忽略 Address Validation API 的修正建議。結帳程序可以正常繼續，如果程序允許，訂單可以在出貨前標記為待後續審查。
  3. 顧客取消或退出模式，返回結帳程序的地址輸入階段，重新輸入地址，從頭開始程序。

右側螢幕截圖就是一個例子。

接受

本節說明如何接受地址。如要瞭解 Address Validation API 傳回的特定信號，指出地址品質良好且應接受，請參閱「建構驗證邏輯」說明文件中的「接受地址」。

在此情境中，結帳程序應會進入下一個階段 (可能是擷取付款資訊)，且不會向顧客顯示地址品質相關提示。API 已確認顧客輸入的地址品質良好， 可供運送。

建議您使用 Address Validation API 傳回的地址資料，與訂單資料進行比對，因為這類資料可能包含細微修正和新增內容，例如：

  • 大寫
  • 格式修正，例如
    • Street 到 St
    • 地址元件的正確排序
  • 美國的 ZIP+4 郵遞區號。

作品注意事項

建構地址接受邏輯時，請務必確保實作方式不會因顧客輸入無效地址，而阻止他們結帳。建構邏輯時，請避免 API 重複指出項目無效，以免發生無限迴圈。

Google 建議您最多讓顧客輸入兩次地址，並在第二次嘗試時接受輸入內容，即使未通過驗證也一樣。第二次嘗試時，目標是讓他們繼續操作，無論驗證結果為何。

建議採用下列兩種方法接受第二次作答：

  • 強制繼續：向顧客顯示互動視窗，說明地址無法驗證，但允許他們選擇繼續使用輸入的地址。
  • 自動接受：自動接受第二次嘗試，不需確認步驟，即使地址未完全驗證也一樣。

如果可以，請設計系統，標記未通過驗證的地址，以便客服代表在出貨前檢查。這項額外措施可確保您能找出任何錯誤。

以新建建築為例，可以清楚說明為何建議進行這項檢查。新建築物完工後，可能需要一段時間，地址才會登錄在郵政地址資料庫中。即使輸入的地址未通過驗證，消費者仍應能選擇強制繼續前往結帳頁面。

結帳工作階段完成後，您可以視需要使用 provideValidationFeedback 方法，向 Google 提供特定地址驗證嘗試的意見回饋。

結論

本文概略說明結帳程序，其中實作了自動完成、地址驗證和 Google 地圖上的目視確認功能。請以這份文件為起點設計實作項目，並遵循建議的地址輸入流程。

後續步驟

建議閱讀：

貢獻者

Henrik Valve | 解決方案工程師
Thomas Anglaret | 解決方案工程師
Sarthak Ganguly | 解決方案工程師

  1. 美國郵政署的非專屬被授權人。下列商標為美國郵政署®所有，並已獲授權使用：CASS™、USPS®、DPV®。↩