品牌推广指南

以下指南介绍了如何在您的网站中添加 Google Pay。

Google Pay 付款按钮

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

素材资源

createButton() JavaScript 方法可动态插入 CSS 规则以及来自 Google CDN 并用于 HTML <button> 元素的 SVG 文件。

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

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

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

银行卡信息

银行卡信息选项会显示银行卡所属的品牌和卡的后四位数字。如需了解详情,请参阅 ButtonOptions

“通过 Google Pay 购买”

“通过 Google Pay 购买”选项会根据访问者的浏览器中设置的支持语言,显示已翻译的按钮。如需了解详情,请参阅 ButtonOptions

变体按钮

“捐款”、“付款”、“订阅”、“预订”、“结帐”、“订购”和“查看”按钮会根据查看者的浏览器设置自动以相应的支持语言显示。 如需了解详情,请参阅 ButtonOptions

样式

所有 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 标识

素材资源

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

下载资源

标识

当您将 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 是一种付款选项。
  • 不要创建自己的标识或以任何方式更改标识。
  • 请勿翻译“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 个工作日内获得批准或反馈。