品牌規範

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

下列規範將說明如何在應用程式中加入 Google Pay 品牌。

Google Pay 付款按鈕

Google Pay 付款按鈕可用來呼叫 Google Pay API,這個 API 會顯示可讓使用者選取付款方式的付款畫面。

網站中顯示的所有 Google Pay 付款按鈕均須符合我們的品牌規範,包括但不限於下列規定:

  • 依據其他類似的按鈕或頁面元素設定按鈕尺寸
  • 周圍留空

素材資源

所有 Google Pay 付款按鈕皆包含可調整大小的點陣圖 (Nine-Patch 檔案),可立即用於版面配置。

如要設定這些素材資源,以便使用者自動本地化您的 Google Pay 按鈕,請按照本地化指南進行資源切換作業。可用的按鈕資源會依照本文規定提供相應的資源路徑,並支援下列語言:

南非荷蘭文、阿爾巴尼亞文、阿姆哈拉文、阿拉伯文、亞美尼亞文、阿薩姆語、亞塞拜然文、巴斯克文、白俄羅斯文、孟加拉文、波士尼亞文、保加利亞文、加泰隆尼亞文、中文、克羅埃西亞文、捷克文、丹麥文、荷蘭文、英文、愛沙尼亞文、菲律賓文、芬蘭文、法文、加利西亞文、喬治亞文、德文、希臘文、古吉拉特文、希伯來文、匈牙利文、冰島文、印尼文、愛爾蘭文、義大利文、日文、卡納達文、哈薩克文、高棉文、吉爾吉斯文、韓文、寮文、拉脫維亞文、立陶宛文、馬其頓文、馬拉雅拉姆文、馬拉地文、蒙古文、尼泊爾文、挪威文、波斯文、波蘭文、葡萄牙文、羅馬尼亞文、俄文、塞爾維亞文、斯洛伐克文、斯洛維尼亞文、西班牙文、史瓦希利文、瑞典文、泰米爾文、泰盧固文、泰文、土耳其文、烏克蘭文、烏都文、烏茲別克文、越南文、威爾斯文、祖魯文。

按鈕類型
透過 Google Pay 購買 下載素材資源
透過 Google Pay 結帳 下載素材資源
透過 Google Pay 捐款 下載素材資源
透過 Google Pay 訂購 下載素材資源
透過 Google Pay 付款 下載素材資源
透過 Google Pay 訂閱 下載素材資源

樣式

Google Pay 付款按鈕只有一種顏色,付款按鈕中的「透過…付款」文字已有官方翻譯,Google Pay 品牌則一律不翻譯。請勿以自行翻譯的文字建立按鈕。

Google Pay 付款按鈕

周圍留空

付款按鈕周圍一律至少須留空 8 dp。不得有圖像或文字出現在周圍留空的區域當中。

Android 版 Google Pay 付款按鈕周圍留空範例

寬度下限

Google Pay 按鈕寬度一律不得小於 168 dp。

Google Pay 付款按鈕寬度下限圖例

建議做法

正確做法錯誤做法
  • 一律使用 Google 提供的 Google Pay 按鈕。
  • 使用 Google Pay 按鈕來啟動付款流程。
  • 在網站中一律使用相同的按鈕樣式。
  • 確認 Google Pay 按鈕的尺寸大於或等於其他按鈕。
  • 自行建立 Google Pay 按鈕,或以任何方式調整按鈕內的字型、顏色或邊框間距。
  • 透過 Google Pay 付款按鈕啟動付款流程以外的動作。
  • 調整 Google Pay 按鈕的尺寸,使其小於其他按鈕。

Google Pay 標誌

在付款流程中如要顯示「Google Pay」這個付款選項,請一律使用下列 Google Pay 標誌。

素材資源

下載 SVG 檔案格式的 Google Pay 標誌:

下載素材資源

標誌

如要顯示「Google Pay」這個付款選項,請使用下列 Google Pay 標誌:

Google Pay 標誌

如果您是以圖文並列的方式顯示其他品牌,請按照同樣的方式呈現「Google Pay」。請勿變更標誌外框的色彩和粗細,也不要對標誌進行任何變更。請一律使用 Google 提供的標誌。

周圍留空

Google Pay 接受標誌的四周一律須留空,距離為 Super G 高度的一半 (0.5 倍) 以上。此外,請確保畫面中顯示的其他品牌識別標誌也保持相同的留空距離。

Google Pay 標誌周圍留空範例

大小

請將高度調整為與付款流程中的其他品牌識別標誌相同。Google Pay 標誌不得小於其他品牌識別標誌。

使用 Google Pay 標誌來表示提供 Google Pay 這個付款選項,並在購買流程中持續使用 Google Pay 標誌。

建議做法

正確做法錯誤做法
  • 一律使用 Google 提供的 Google Pay 標誌。
  • 在付款流程中使用 Google Pay 標誌來表示提供 Google Pay 這個付款選項。
  • 自行建立標誌或以任何方式更動 Google Pay 標誌。
  • 翻譯「Pay」字樣。
  • 顯示的 Google Pay 標誌尺寸小於或不同於其他付款選項。

在文字中使用「Google Pay」

您可以用文字說明 Google Pay 是付款選項,以及在行銷文宣中宣傳 Google Pay。

「G」與「P」字首大寫

字首的「G」與「P」一律大寫,其他字母小寫。除非必須配合使用者介面字體樣式,否則請勿使用全部大寫的「GOOGLE PAY」。行銷文宣中一概不得使用全部大寫的「GOOGLE PAY」。

不得縮寫 Google Pay

「Google」與「Pay」字樣應完整拼寫。

配合 UI 字體樣式

設定「Google Pay」字型與字體樣式時,應配合使用者介面中的其餘文字,而非模仿 Google 的字體樣式。

請勿翻譯 Google Pay

「Google Pay」應一律保持英文拼寫,請勿翻譯成其他語言。

「Google Pay」首次出現於行銷文宣時應加上商標符號。

在行銷文宣中使用「Google Pay」字樣時,請於首次出現時或最顯眼處加上商標符號 ™。在使用者介面中顯示「Google Pay」這個付款選項時,請勿使用商標符號。

如未顯示其他付款選項的標誌,請以文字表示「Google Pay」。

設定「Google Pay」字型與字體樣式時,應配合使用者介面中的其餘文字。

在確認頁面和電子郵件收據中顯示付款資訊時,請務必指出消費者是透過 Google Pay 付款。

Google Pay 最佳做法

透過 Google Pay 的結帳流程和付款畫面,讓消費者輕鬆迅速查看付款資訊、確認購買,進一步提升轉換率。

以下是最佳做法:

將 Google Pay 設為主要付款選項

盡可能以醒目的方式顯示 Google Pay 按鈕,您也可以考慮將其設為預設或唯一的付款選項。

讓消費者不必建立帳戶也能購物

建立帳戶會使結帳流程變慢,還可能使消費者放棄購物。Google Pay 可以加快訪客的結帳過程。如果希望消費者建立帳戶,建議讓他們在完成交易後再建立帳戶。

在購物車的結帳過程中透過 Google Pay 啟動付款流程

點選 Google Pay 按鈕之後,使用者就會看見付款畫面。在付款畫面中,消費者只能選取一種付款方式,並加以確認。請務必先取得您需要的所有其他資訊,再為消費者提供選取 Google Pay 按鈕的選項。這類資訊可能包括:

  • 商品尺寸、顏色和數量
  • 新增的禮物訊息 (如有)
  • 促銷代碼 (如有)
  • 偏好的運送速度
  • 各項商品的運送目的地

如果消費者未提供所需資訊,請在顯示付款畫面之前,先透過即時回應告知消費者您需要哪些資訊。

除了購物車結帳之外,也可以將 Google Pay 按鈕加到產品詳細資料頁面

如想加快單一商品的結帳作業,您可以在產品詳細資料頁面中為消費者提供直接購買單一商品的選項。消費者選取這個選項時,請記得排除購物車中的其他商品,因為付款畫面只能讓消費者確認付款與運送資訊。

在確認頁面和收據中顯示 Google Pay

在確認頁面和電子郵件收據中顯示付款資訊時,請務必向消費者說明他們是透過 Google Pay 付款,並確保 Google Pay 的顯示方式與其他付款方式一致。請勿向使用者顯示完整帳號、信用卡到期日或其他付款方式詳細資料。另外,請一律使用 Google Pay API 傳回的敘述性文字來指出付款方式。

以下是幾個範例:

  • 「機構名稱 •••• 1234,透過 Google Pay 付款」
  • 「機構名稱 •••• 1234 (Google Pay)」
  • 「Google Pay (機構名稱 •••• 1234)」
  • 「PayPal abc...d@gmail.com,透過 Google Pay 付款」
  • 「付款方式:Google Pay」
  • 「透過 Google Pay 付款」

完整的實作範例

整合完成的服務螢幕截圖如下所示。整合項目中也包含商品選擇/購物前步驟、交易步驟、Google Pay 選取器步驟和購物後步驟。

這些畫面是我們建議您針對購物車體驗提供的 Google Pay 購買流程。

取得核准

Google Pay API 整合完畢之後,顯示或提及 Google Pay 的各個使用者介面區塊均須獲得核准,您才能取得正式版服務的存取權。

完成整合作業檢查清單中的所有項目,然後將您的應用程式整合項目送交審核。您應該會在一個工作天內收到核准通知或意見回饋。