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.
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
Localization
You can configure the Element to display localized text of the payment fields based on the locale set in init(). See supported locales JS.
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.
FAQ
What are the common error scenarios with Embedded Elements integration?
Some common error scenarios include :
| Error | Next steps |
|---|---|
| Airwallex is not defined | Check if you have initialized Airwallex (Step 2) before using Airwallex functions. If you are using CDN, check if you have changed the bundle version from x.x.x to the latest version in the package.json file. For example, https://checkout.airwallex.com/assets/elements.bundle.min.js is invalid |
| Access denied, authentication failed | Check if you have replaced your intent id and client_secret in createElement() and optionally confirm(). |
| The PaymentIntent with ID int_xxxxxxxxx cannot be found | Check if the environment you initialized Airwallex in, for example, demo or prod, matches the environment you retrieved your intent id and client_secret from. In other words, if you ran init in the demo environment, you must also create your PaymentIntent in the demo environment. |