Google Pay Element

The Google Pay™ Element allows you to offer Google Pay checkout option on your website. Shoppers can click the Google Pay button and pay using facial or fingerprint recognition.

Checkout flow

If you want to offer a one-off or single payment experience where the shopper is present and active on your shop site, see Guest user checkout.

If you want to save shopper's payment details for future payments, see Registered user checkout.

Supported features

You can add the following features to your Embedded Element integration.

Style and appearance customization

You can use style, appearance, buttonType, buttonColor, and buttonSizeMode objects in createElement() to customize the Google Pay Element.

style

Provide base styling for the iframe using CSS properties. You can also customize the width and height of a pop-up overlay, e.g., payment with 3-D Secure authentication.

JavaScript
1createElement('googlePayButton', {
2 base: {
3    background: 'black',
4  },
5  popupWidth: 400,
6  popupHeight: 600,
7})

appearance

Fine tune individual Elements and states by specifying custom CSS properties using rules. The following classes and pseudo-classes can be styled using rules.

• .GooglePayButton: CSSProperties
• .GooglePayButton:hover: CSSProperties

JavaScript
1createElement('googlePayButton', {
2 appearance: {
3  rules: {
4    '.GooglePayButton': {
5      width: '100px',
6      height: '40px',
7    }
8  }
9 }
10})

buttonType

The buttonType object supports the following values: book | buy | check-out | donate | order | pay | plain | subscribe | long | short

JavaScript
1createElement('googlePayButton', {
2 buttonType: 'book'
3})

buttonColor

The buttonColor object supports the following values: default | black | white

JavaScript
1createElement('googlePayButton', {
2 buttonColor: 'white'
3})

buttonSizeMode

The buttonSizeMode object supports the following values: static | fill

JavaScript
1createElement('googlePayButton', {
2 buttonSizeMode: 'static'
3})

Localization

You can configure the Element to display localized text for payment fields based on the locale specified in init(). If no locale is specified, the browser's locale will be used, if it is supported by Airwallex.js. For a list of supported locales, see locales JS.

If the browser's locale is not supported, the Element will default to en.

Device fingerprinting

Device fingerprinting uniquely tracks and identifies devices used for transacting on your shopping site, increasing your protection from fraud. Airwallex.js automatically handles device fingerprinting, so no additional integration is needed.