Brand guidelines

These guidelines will help you reference the Google Pay brand within your websites.

Google Pay payment buttons

The Google pay payment button should always call the Google Pay API. The Google Pay API surfaces the payment sheet where users can select their payment method.

Assets

The createButton() JavaScript convenience method provides dynamically inserted CSS rules and an SVG file loaded from the Google CDN for an HTML <button> element. The "Buy with Google Pay" variation automatically displays a translated button in a supported language that matches the viewer's browser settings.

All Google Pay payment buttons displayed on your site must adhere to our brand guidelines, including, but not limited to, the following:

  • Sizing relative to other similar buttons or elements of the page.
  • Contrast with the background color of the surrounding area.
  • Clear space.

If this convenience method or the supported languages don't suit your needs, contact us.

Style

Google Pay payment buttons are available in two variations: black and white. Each variation comes with and without the "Buy with" text. Payment buttons with localized versions of the "Buy with" text are provided. The Google Pay brand is always untranslated. Don't create buttons with your own localized text.

Black White
Black Google Pay payment buttons White Google Pay payment buttons

Use black buttons on white or light backgrounds to provide contrast.

Use white buttons on dark or colorful backgrounds.

   
Correct button spacing
If you place a Google Pay button next to another button, make sure the Google Pay button is of equal size. Always use a Google Pay button that contrasts with the background on which it appears.
Button size adjustment
When you adjust the size of the Google Pay button, always maintain height, width, and padding rules.  

Dos and Don'ts

Do Don't
  • Use only the Google Pay buttons provided by Google.
  • Use the Google Pay buttons to initiate the payment flow.
  • Use the same style of button throughout your site.
  • Ensure that the size of the Google Pay buttons remains equal to or larger than other buttons.
  • Ensure that you choose a button color that contrasts with your background.
  • Don't create your own Google Pay buttons or alter the font, color, button radius, or padding within the button in any way.
  • Don't use Google Pay payment buttons to initiate any action other than the payment flow.
  • Don't switch between color variations or versions with or without text.
  • Don't make the Google Pay button smaller than other buttons.
  • Don't use a button color that's similar to the background. For example, don't use the white button on a white background.

Google Pay logo and mark

Use either the Google Pay logo or the Google Pay mark when showing Google Pay as a payment option during your payment flows. Choose the option that best matches the way in which other payment options are displayed.

Assets

Download the Google Pay logo and the Google Pay mark in SVG file formats.

Logo Mark

Google Pay logo
Google Pay mark
Use the Google Pay logo with other brand logos Use the Google Pay mark with other brand identities in credit card format
If you're using the full logos of other brands to indicate different payment options in your payment flow, favor the Google Pay logo over the Google Pay mark. Display "Google Pay" in text next to the logo if you're doing so for other brands. Don't add an outline to the Google Pay logo or alter it in any way. Use only the logo provided by Google. If you're using brand identities displayed in credit card format to indicate different payment options in your payment flow, favor the Google Pay mark over the Google Pay logo. Display "Google Pay" in text next to the mark if you're doing so for other brands. Don't change the color or weight of the mark's outline or alter the mark in any way. Use only the mark provided by Google.

Clear space

Always maintain the minimum amount of clear space on all sides of the Google Pay logo and mark. The minimum amount of clear space is equal to the height of the 'G' in the Google Pay logo.

Size

Adjust the height to match the other brand identities displayed in your payment flow. Don't make the Google Pay mark smaller than other brand identities.

If you use logos to represent payment options, use the Google Pay logo and continue to use it throughout your buy flow.

If you use the credit card format to represent payment options, continue to use the Google Pay mark throughout your buy flow.

Dos and Don'ts

Do Don't
  • Use only the Google Pay logo and mark provided by Google.
  • Use the Google Pay logo or mark to indicate Google Pay as a payment option during payment flows.
  • Choose the logo or mark that best matches the way in which other brand identities are displayed.
  • Don't create your own logo or mark or alter them in any way.
  • Don't translate the word "Pay."
  • Don't display the Google Pay logo or mark in a different or smaller size than the other payment options.

Using Google Pay in text

You may use text to indicate Google Pay as a payment option and to promote Google Pay in your marketing communication.

Capitalize the letters "G" and "P"

Always use an uppercase "G" and an uppercase "P" followed by lowercase letters. Don't capitalize the full name "GOOGLE PAY" unless matching the typographic style on your website. Never use an uppercase "GOOGLE PAY" in your marketing communication.

Don't abbreviate Google Pay

Always write out the words "Google" and "Pay."

Match the style on your website

"Google Pay" should be set in the same font and typographic style as the rest of the text on your website. Don't try to mimic Google's typographic style.

Don't translate Google Pay

"Google Pay" should always be written in English. Don't translate it to another language.

Use the trademark symbol the first time "Google Pay" appears in marketing communication

When using "Google Pay" in your marketing communication, you'll need to show the trademark symbol, ™, the first or most prominent time it appears. Don't use the trademark symbol when indicating Google Pay as a payment option on your website.

If you don't display logos for other payment options, "Google Pay" should be represented by text. "Google Pay" should be set in the same font and typographic style as the rest of the text on your site.

Google Pay best practices

Maximize your conversions with checkout flows and payment sheets that let customers quickly and easily review their payment information and confirm their purchase. For more examples, see our Best practices guide.

The following are best practices:

Make Google Pay the primary payment option

People like using Google Pay for faster checkout. Where possible, display the Google Pay button prominently, and consider making it the default or only payment option.

Let your customers make purchases without an account

Account creation slows down the checkout process and can lead to abandoned carts. Use Google Pay to enable faster guest checkout. If you'd like your customers to create an account, allow them to do so after they complete their purchase.

Use Google Pay to initiate payment during cart checkout

The Google Pay button brings up the payment sheet. On the payment sheet, customers can only select and confirm a single payment method and shipping address. Be sure to get all of the other information you need – such as an item's size, color, or quantity, the option to add a gift message or apply a promo code, or the ability to choose different shipping speeds and destinations for individual items – before you give customers the option to select the Google Pay button. If a customer doesn't provide any necessary information, offer real-time feedback to let them know what's missing before bringing up the payment sheet.

Add the Google Pay button to product detail pages in addition to cart checkout

Speed up single-item checkout by letting customers make individual purchases right from your product detail pages. If a customer chooses this option, be sure to exclude any other items they have in their shopping cart, since the payment sheet only lets them confirm their payment and shipping information.

Include Google Pay on confirmation pages and receipts

When displaying payment information on confirmation pages and email receipts, make sure you indicate the customer has paid with Google Pay and ensure that Google Pay is displayed consistently with how other payment methods are displayed. Never display full account numbers, expiration dates or other payment method details to the user. Always use the descriptive text returned by the Google Pay API to identify the payment method.

The following are a few examples:

  • "Network •••• 1234 with Google Pay"; "Network •••• 1234 (Google Pay)";
  • "Google Pay (Network •••• 1234)"; "Paypal abc...d@gmail.com with Google Pay";
  • "Payment method: Google Pay" or "Paid with Google Pay."

The above screens represent a recommended Google Pay buy flow for a shopping cart experience.

When you display payment information on confirmation pages and email receipts, make sure you indicate that the customer has paid with Google Pay.

Getting approval

Once you've integrated the Google Pay API, you'll need to get approval for all of the places where you display or reference Google Pay within your website in order to gain production access.

How to submit for approval

Complete our Integration checklist to submit your web integration for review. You should receive approval or feedback within one business day.

Оставить отзыв о...

Текущей странице
Google Pay API