Button guidelines

Google enforces button compliance through its merchant registration review. Using an unofficial button style, adding custom labels, or modifying the Google Pay logo are grounds for registration rejection. VINR's createButton API and GooglePayElement produce compliant buttons by default — this guide applies to custom implementations and explains what Google's review checks for.

For the full visual specification, see the Google Pay Web Brand Guidelines.

Button colorsAskCopy

Two official colors are available. Choose based on the background the button sits on.

// createButton API
const button = googlePayClient.createButton({
  buttonColor: 'black',  // 'black' | 'white' | 'default'
  buttonType: 'buy',
  onClick: handleClick,
});

// GooglePayElement
const googlePayElement = elements.create('googlePay', {
  style: {
    theme: 'black',  // 'black' | 'white'
  },
});

The white button must have a visible border when displayed on a white or near-white background. Do not render it without a border — insufficient contrast is a brand guideline violation.

Call-to-action typesAskCopy

Use the CTA that best matches the context of the purchase. Mismatched verbs (for example, "Buy" on a donation page) violate Google's brand guidelines.

// createButton API
const button = googlePayClient.createButton({
  buttonType: 'checkout',
  onClick: handleClick,
});

// GooglePayElement
const googlePayElement = elements.create('googlePay', {
  style: {
    type: 'checkout',
  },
});

LocalizationAskCopy

Set buttonLocale to match the language of your checkout. If omitted, the button uses the browser's language. Always set it explicitly in multi-language storefronts to avoid mismatched UX.

const button = googlePayClient.createButton({
  buttonLocale: 'de',  // BCP 47 language tag
  onClick: handleClick,
});

Selected locales relevant to VINR's markets:

For the full list see Google's ButtonOptions reference.

Sizing and layoutAskCopy

The button must receive equal visual prominence with other third-party payment methods — not smaller, not hidden below the fold, not styled to appear secondary to other wallet buttons.

Do not add external borders, drop shadows, or decorative containers around the button beyond what createButton renders by default.

What you must not doAskCopy

• Do not recreate the button with a custom image, HTML element, or non-Google assets.
• Do not modify the Google Pay logo, wordmark, or lockup proportions.
• Do not display the button when isReadyToPay() returns false — hide it, do not disable it.
• Do not render the white button without a visible border on a light background.
• Do not display Google Pay at a smaller size or lower prominence than other wallet buttons on the same page.
• Do not use the Google Pay mark as a standalone logo button — always use the full button component.

See alsoAskCopy