品牌指南

以下指南详细介绍了如何在您自己的网站中引用 Google Pay 品牌。

Google Pay 付款按钮

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

资源

createButton() JavaScript 方法可动态插入 CSS 规则以及从 Google CDN 加载的用于 HTML <button> 元素的 SVG 文件。“使用 Google Pay 付款”变体会自动以支持的语言显示已翻译的按钮,该按钮与查看者的浏览器设置相符。

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

  • 大小与页面上其他类似按钮或元素相匹配。
  • 按钮颜色必须与周围区域的背景颜色形成鲜明对比。
  • 该按钮的四周都必须始终留出最小留白空间。

如果这种便捷方法或支持的语言不符合您的需求,请联系我们

样式

Google Pay 付款按钮有两种变体:黑色和白色。每个变体都有带“购买方式”文本和不带“购买方式”文本两种。资源中提供了带有“购买方式”文本本地化版本的付款按钮。Google Pay 品牌名称始终未翻译。请勿以自行本地化的文字创建按钮。

黑色 白色
黑色 Google Pay 付款按钮 白色 Google Pay 付款按钮

白色或浅色背景可使用黑色按钮,以形成对比。

深色或彩色背景可使用白色按钮。

留白

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

适用于 Android 的 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 标识

资源

点击以下按钮即可以 SVG 文件格式下载 Google Pay 标识:

下载资源

标识

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

Google Pay 标识

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

留白

在 Google Pay 标识四周始终留出最小留白空间。最小留白空间等于 Google Pay 标识中“G”的高度。

大小

调整高度以与付款流程中显示的其他品牌标识相一致。请勿将 Google Pay 标识设置为小于其他品牌标识。

请使用 Google Pay 标识来表明 Google Pay 为一种付款选项,并在整个购买流程中一直使用该标识。

注意事项

正确做法错误做法
  • 仅使用 Google 提供的 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 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 购买流程。

获得批准

集成 Google Pay API 之后,您需要获得在您的网站内显示或引用 Google Pay 的所有地方的批准,以便获得正式版访问权限。

如何送审

完成我们的集成核对清单,提交您的网页集成请求以供审核。您应该会在 1 个工作日内获得批准或反馈。