以下指南詳細說明如何設定網站中的 Google Pay 品牌。
Google Pay 付款按鈕
Google Pay 付款按鈕只能用來呼叫 Google Pay API，這個 API 會顯示可讓使用者選取付款方式的付款畫面。
素材資源
createButton() JavaScript 方法可以為 HTML <button> 元素動態插入 CSS 規則和從 Google CDN 載入的 SVG 檔案。
網站中顯示的所有 Google Pay 付款按鈕都必須符合品牌規範，包括但不限於下列規定：
- 必須依據其他類似的按鈕或頁面元素設定按鈕大小。您可以透過
createButtonAPI 的buttonSizeMode選項調整按鈕大小。 - 按鈕顏色必須與周圍區塊的背景顏色形成對比。
- 按鈕四周的空白空間大小不得低於下限。
如果這項便利方法或支援的語言不符合您的需求，請聯絡我們。
「透過 Google Pay 付款」
「透過 Google Pay 付款」變化形式會自動依據與檢視者瀏覽器設定相符的支援語言顯示經過翻譯的按鈕。詳情請參閱 ButtonOptions。
「透過 Google Pay 捐款」
「透過 Google Pay 捐款」變化形式會自動依據與檢視者瀏覽器設定相符的支援語言顯示經過翻譯的按鈕。詳情請參閱 ButtonOptions。
樣式
Google Pay 付款按鈕共有兩種樣式：黑色與白色。每種樣式均提供包含與不含「透過…付款」文字的版本。付款按鈕中的「透過…付款」文字已有官方翻譯，您可以在素材資源一節中找到。Google Pay 品牌一律不翻譯，請勿以自行翻譯的文字另行建立按鈕。
| 黑色 | 白色 |
 |
 |
白色或淺色背景應使用黑色按鈕，藉此形成對比。 |
黑色或彩色背景應使用白色按鈕。 |
周圍留空
付款按鈕周圍一律應至少留空 8 dp。不得有圖像或文字出現在周圍留空的區域當中。
範例
| 如將 Google Pay 按鈕放置在其他按鈕旁邊，請確認 Google Pay 按鈕與其他按鈕的大小相同。 | 一律使用與所在位置的背景顏色形成對比的 Google Pay 按鈕。 |
| 調整 Google Pay 按鈕的大小時，請一律遵守高度、寬度和邊框間距規則。 |
建議做法
| 正確做法 | 錯誤做法 |
|---|---|
|
|
Google Pay 標誌
如要在付款流程中顯示「Google Pay」這個付款選項，請一律使用這些規範中提供的 Google Pay 標誌。
素材資源
點選下方按鈕，即可下載 SVG 檔案格式的 Google Pay 標誌：
下載素材資源標誌
如要顯示「Google Pay」這個付款選項，請使用下列 Google Pay 標誌：
如果您是以圖文並列的方式顯示其他品牌，請按照同樣的方式呈現「Google Pay」。請勿變更標誌外框的色彩和粗細，也不要對標誌進行任何變更。請一律使用 Google 提供的標誌。
周圍留空
Google Pay 標誌的四周一律需保留最低限度的空白空間，這個空間至少應等於 Google Pay 標誌中「G」字的高度。
大小
請配合您付款流程中顯示的其他品牌識別標誌調整高度。Google Pay 標誌不得小於其他品牌識別標誌。
建議做法
| 正確做法 | 錯誤做法 |
|---|---|
|
|
在文字中使用「Google Pay」
您可以使用文字來表示您提供 Google Pay 這個付款選項，以及在行銷文宣中宣傳 Google Pay。
字首的「G」與「P」大寫字首的「G」與「P」一律大寫，其他字母小寫。除非是必須配合網站的字體樣式，否則不要使用全部大寫的「GOOGLE PAY」。行銷文宣中一概不得使用全部大寫的「GOOGLE PAY」。
不得縮寫 Google Pay「Google」與「Pay」字樣應完整拼寫。
配合網站的字體樣式設定「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 API 整合完畢之後，顯示或提及 Google Pay 的各個網站區塊都必須獲得核准，才能取得正式版服務的存取權限。
逐一確認整合檢查清單中的所有項目，然後把您的網路整合內容提交送審。您應該會在一個工作天內收到核准通知或意見回饋。