電子商務結帳功能的地址驗證

目標

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

必要條件

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。

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

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

以下是使用單一輸入欄位時，這個流程的顯示方式範例：

圖片

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

使用者輸入地址後，Google 建議您在結帳時呼叫 Address Validation API，確認地址有效且完整。使用者在地址表單上按一下「下一步」或「繼續」按鈕時，觸發對 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 傳回哪些特定信號，表示地址品質不佳，請參閱「修正地址」一節，瞭解如何建構驗證邏輯。

如果地址驗證 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®。↩