品牌指南

这些指南可帮助您在自己的应用中实现 Google Pay。

Google Pay 付款按钮

Google Pay 付款按钮会调用 Google Pay API。Google Pay API 会显示付款表格,用户可以在其中选择付款方式。

所有显示在您的网站上的 Google Pay 付款按钮都必须遵守我们的品牌推广指南,包括但不限于以下要求:

  • 大小与页面上其他类似按钮或元素相关
  • 与周围区域的背景颜色形成鲜明对比
  • 留白

自定义按钮

可自定义的付款按钮

新版 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 付款按钮 浅色带框 Google Pay 付款按钮

在浅色背景上使用深色按钮,以形成对比效果。

在深色或彩色背景上使用浅色按钮。

在浅色背景上使用带有边框的浅色按钮来替代深色按钮。

留白

请务必在付款按钮的四周留出至少 8 dp 的留白空间。确保留白空间永远不会被图形或文本破坏。

适用于 Android 的 Google Pay 付款按钮留白空间示例

最小宽度

Google Pay 按钮的最小宽度应为 90 dp。所有“通过 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 标识。

资源

将 Google Pay 标识下载为 SVG 文件:

下载资源

标识

当您将 Google Pay 显示为付款方式时,请使用以下 Google Pay 标识:

Google Pay 标识

如果您以图文并列的方式显示其他品牌,请也在该标识旁边以文本形式注明“Google Pay”。请勿更改标识边框的颜色或粗细或以任何方式更改该标识。请仅使用 Google 提供的标识。

留白

在 Google Pay 受理标识四周,始终留出不少于字母 G 徽标高度一半(0.5 倍)的留白空间。请确保您展示的任何其他品牌标识也采用等同的留白空间。

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”字样。

匹配界面的样式

设置“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 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 的地方获取批准,然后才能取得正式版访问权。

请完成我们的集成核对清单,然后再提交您的应用集成送审。您应该会在 1 个工作日内获得批准或反馈。