品牌規範

下列規範可協助您在應用程式中導入 Google Pay。

Google Pay 付款按鈕

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

素材資源

Google Pay 付款按鈕可做為可調整大小的點陣圖 (Nine-Patch 檔案) 使用,適合包含在版面配置中。

下載素材資源

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

  • 依據其他類似的按鈕或頁面元素設定按鈕尺寸
  • 與周圍區塊的背景顏色形成對比
  • 周圍留空

「透過 Google Pay 付款」資源提供下列語言版本:阿拉伯文、保加利亞文、加泰隆尼亞文、中文、克羅埃西亞文、捷克文、丹麥文、荷蘭文、英文、愛沙尼亞文、芬蘭文、法文、德文、希臘文、印尼文、義大利文、日文、韓文、馬來文、挪威文、波蘭文、葡萄牙文、俄文、塞爾維亞文、斯洛伐克文、斯洛維尼亞文、西班牙文、瑞典文、泰文、土耳其文和烏克蘭文。

樣式

Google Pay 付款按鈕共有三種樣式:黑色、白色及白色帶框。每種樣式均提供包含與不含「透過…付款」文字的版本。付款按鈕中的「透過…付款」文字已有官方翻譯,Google Pay 品牌則一律不翻譯。請勿以自行翻譯的文字另外建立按鈕。

黑色 白色 白色帶框
黑色 Google Pay 付款按鈕 白色 Google Pay 付款按鈕 白色帶框 Google Pay 付款按鈕

白色或淺色背景應使用黑色按鈕,以形成對比。

黑色或彩色背景應使用白色按鈕。

白色帶框按鈕可以替代黑色按鈕使用於白色或淺色背景上。

周圍留空

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

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

寬度下限

Google Pay 按鈕寬度一律不得小於 90 dp。所有 [Buy with Google Pay] (使用 Google Pay 購物) 付款按鈕寬度一律不得小於 152 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 標誌周圍一律應至少留空 8 dp。

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」一律大寫,其他字母小寫。除非必須配合 UI 字體樣式,否則不要使用全部大寫的「GOOGLE PAY」。行銷文宣中一概不得使用全部大寫的「GOOGLE PAY」。

不得縮寫 Google Pay

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

配合 UI 字體樣式

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

請勿翻譯 Google Pay

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

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

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

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

設定「Google Pay」字型與字體樣式時,應配合 UI 中的其餘文字。

在確認頁面和電子郵件收據中顯示付款資訊時,別忘了提醒客戶他們採用的付款方式為 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 的各個 UI 區塊都必須獲得核准,您才能取得正式版服務的存取權限。

送審方式

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