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

目標

本文說明如何結合 Place Autocomplete、地址的組合 Validation API1 和 Google 地圖,用於電子商務結帳流程,以便 並擷取高品質地址

先備知識

Google 建議您熟悉下列事項:

  • Place Autocomplete JavaScript 開發人員 說明文件
    • 從技術層面瞭解 Place Autocomplete 的運作方式 及其實作選項
  • 「地點」的結帳導入 指南 Autocomplete
    • Place Autocomplete 導入最佳做法 導入電子商務結帳流程
  • Address Validation API 產品 說明文件、 並將重點放在建立驗證資料 邏輯
    • 從技術角度瞭解 Address Validation API 的方式 並檢查地址品質取決於哪些信號

什麼是地址驗證?

Address Validation API 服務接受地址。 可識別並驗證地址元件。這個函數也會標準化 地址,並找到最佳的已知經緯度座標。 如果地址位於美國和波多黎各,也可以啟用 程式設計準確率支援系統 (CASSTM)

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

在訂購過程中收集正確的地址:
這個關鍵步驟能協助貴機構成功交貨並準時放送 執行要求,以及降低費用修正費用。

引導客戶快速準確地輸入地址:
Place Autocomplete 能夠加快地址輸入速度,並減少輸入錯誤, 讓顧客輕鬆完成結帳地址驗證提供意見回饋 整體地址品質並進行修正,例如標準化和 也強化中繼資料,例如提供住宅或 商業指標 (適用於部分廣告) 區域

導入程序總覽

本節概述電子商務建議採用的地址輸入工作流程 結帳。這項程序包含三個步驟:

  1. 一開始請使用 Place Autocomplete 擷取地址。
  2. 使用 Address Validation API 確認輸入的地址。
  3. 在地圖上顯示輸入地址的位置,以便提供外送服務 對消費者的信任

接下來,我們會個別介紹每個步驟。

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

實作 Place 自動完成 在地址輸入表單的第一行使用 JavaScript API。

Place Autocomplete 在顧客輸入查詢時, 地址詳細資料。使用 JavaScript API 導入時 輸入後,地址輸入表單欄位下方會顯示下拉式選單,並在其中顯示結果 。使用者 就能找到搜尋地址的資訊 。這項操作會在表單欄位中自動填入電子郵件地址 資料。

透過 Place Autocomplete 功能,您可以提供兩種表單輸入樣式: 顯示包含所有地址欄位的顯示畫面,或單一輸入的顯示畫面 ] 欄位。這個單一輸入欄位會提示使用者在輸入內容時開始搜尋。 不必逐一輸入地址元件自動完成建議 當您在地址中填入資料,工作流程就會把地址展開為表單欄位。 方便客戶查看及編輯資料,例如新增 公寓或門牌號碼。

以下為使用單一輸入欄位可能顯示此流程的範例:

圖片

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

使用者輸入地址後,Google 建議您呼叫 驗證 API 請在結帳時確認地址有效且完整。觸發撥號給 Address Validation API 會在使用者點選「Next」或「Continue」按鈕之後 地址表單這個按鈕通常會導向付款頁面。

Google 建議針對每筆交易呼叫 Address Validation API。

以下流程圖說明 結帳中的 Address Validation API:

圖片

本文件稍後會討論如何接受因應情境。

步驟 3:提供視覺化的確認畫面

輸入地址後,向使用者顯示確認送貨畫面的畫面 在地圖上顯示該地點。進而為客戶 確保地址正確無誤,否則會降低送貨或自取 失敗。

可以在結帳程序中顯示地圖,或是在交易中傳送 確認電子郵件。這兩種用途都可以使用 以下 API。

Maps JavaScript API 提供用於顯示使用者位置的互動式地圖。 Maps Static API 允許將圖片嵌入網頁或後續的電子郵件中。

深入解析 - 說明接受情形

Address Validation API 回應可分為三種主要情境:

  • 修正:地址品質不佳。 系統應提示您提供更多資訊。
  • 確認 - 地址品質良好,但 變更內容系統提供提示時 確認。
  • 接受:地址為高品質。你可以 接受所提供的地址。

關於此概念,請參閱建立您的驗證 邏輯 一節,我們將探討 本節

修正

圖片

本節說明如何修正輸入的地址。如需深入瞭解 表示 Address Validation API 傳回的品質偏低 地址,請參閱「修正 地址 請參閱「建構驗證邏輯」說明文件

如果 Address Validation API 的回應指出地址無效, 將客戶重新導向至地址輸入表單,檢查輸入的資料。 修正地址後,你的服務應會重新傳送到該地址 Validation API,確保做出的更正內容有效。

你也可以利用信號凸顯地址的部分錯誤 是在 addressComponents 層級傳回。相關範例位於 擷取圖片。


確認

圖片

本節說明如何確認地址。如需深入瞭解 指示 Address Validation API 傳回,指出 請參閱確認 地址 請參閱「建構驗證邏輯」說明文件

系統通常會想提示使用者確認地址。例如: 客戶拼錯城市名稱,但系統接著會更正地址 Validation API。請向客戶確認這個問題。這是因為 API 所做的變更可能會徹底改變原先 已輸入。

使用插頁互動模式向顧客顯示資訊,讓 三個變更選項:

  1. 確認 API 傳回的地址,以及結帳程序 繼續回答。
  2. 選取原本輸入的地址,並略過正確的修正內容 Address Validation API。結帳程序仍會照常進行,且 如果程序未完成,可在出貨前標記訂單並進行下游審查 允許或允許
  3. 客戶取消或退出互動視窗,將他們帶回 地址輸入階段,使用者可在此再次進入 從頭開始處理更多地址

右側螢幕截圖可找到相關示例。


接受

本節說明如何接受地址。如需深入瞭解 Address Validation API 傳回,表示地址良好 並應接受條款,請參閱接受 地址 請參閱「建構驗證邏輯」說明文件

在這種情況下,結帳程序應會進入下一階段, 付款,且不會向客戶提示有關品質的問題。 API 已確認客戶輸入的地址品質良好 和交付項目

建議使用 Address Validation API 傳回的地址資料 內容可能包含小幅修正和附加內容 例如:

  • 大寫
  • 格式設定修正,例如
    • 往街的街道
    • 地址元件的正確順序
  • 美國的 ZIP+4。

作品注意事項

建立地址接受邏輯時,請確定導入方式並未 因為輸入的地址無效,導致客戶無法結帳。建造 避免在 API 發生無限迴圈的情況下 重複表示其項目無效。

Google 建議您為客戶提供最多 2 次入場的機會 並在第二次嘗試時接受其輸入,即使 validate.第二次嘗試時,我們的目標是讓他們在不離開的情況下繼續前進 驗證。

接受第二次嘗試的兩種建議方法:

  • 強制處理:透過互動視窗,向客戶說明地址並非 ,但允許選項繼續使用輸入的地址。
  • 靜音接受:自動接受第二次嘗試,且 確認步驟。

如果可以,請將系統設計為標記未經驗證的地址,以便 客服代表可在訂單出貨前檢查訂單內容。這個 這項額外措施可確保您找出任何錯誤

以新建築模型為例,說明這項檢查的原因 建議從現在開始建造新建築之間的距離,可能會有落差 完成,且該建築物的地址填入郵寄地址時 或 Microsoft SQL Server 資料庫客戶應可選擇強制透過 輸入地址並顯示在結帳頁面上,即使網址尚未驗證也沒關係。

完成結帳工作階段後,可選擇使用 provideValidationFeedback 方法,將有關特定地址驗證嘗試的意見回饋傳送給 Google。

結論

本文件將概略說明結帳流程的實作方式 Google 地圖的自動完成、地址驗證和視覺化確認功能。使用 開始設計實作。 建議位址輸入流程

後續步驟

下載透過可靠的地址提升結帳、交付和營運成效 白皮書 並檢視運用地址改善結帳、交付和營運方式 驗證 網路研討會。

建議延伸閱讀:

貢獻者

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


  1. 美國郵政署的非專屬被授權人。下列商標的擁有者為 United States Postal Service®,且已獲授權使用:CASSTM、USPS®、DPV®。