Learn about PXP's Google Pay component for Web.
Google Pay is one of the most widely used digital wallet payment methods globally, adopted across e-commerce, retail, gaming, and countless other industries. Google Pay leverages advanced tokenisation and device-specific security features to provide customers with a fast, secure, and frictionless checkout experience that increases conversion rates and reduces cart abandonment.
With the Google Pay component, you can benefit from:
- Secure checkout: Use Google's industry-leading security with tokenised payments, biometric authentication, and device-specific encryption that never exposes actual card details.
- Seamless experience: Provide customers with pre-populated payment information from their Google account, eliminating manual form filling and reducing checkout abandonment.
- Native integration: Leverage Google's official payment sheet that customers recognise and trust, maintaining consistency across devices and platforms.
- Dynamic price updates: Support real-time updates to transaction amounts, shipping costs, and line items based on customer selections without requiring page reloads.
- Flexible customisation: Configure button styles, colours, and types to match your brand while maintaining Google Pay compliance.
- Multi-network support: Accept payments from major card networks including Visa, Mastercard, American Express, Discover, JCB, and Interac through a single integration.
- 3D Secure support: Seamlessly integrate 3DS authentication for enhanced security and reduced fraud risk.
The Google Pay component will automatically determine availability based on the customer's device, browser, saved payment methods, and region. Google Pay is available on Chrome and Safari browsers across Android, iOS, macOS, and Windows devices.
The Google Pay component offers extensive button customisation to match your brand and checkout flow:
| Button name | Description |
|---|---|
buy | Standard purchase button. |
book | Booking and reservation flows. |
checkout | Checkout page button. |
donate | Charitable donation flows. |
order | Order placement button. |
pay | General payment button. |
subscribe | Subscription sign-up button. |
plain | Plain button without text. |
| Button style | Description |
|---|---|
default | Google's default theme (adapts to user's system settings). |
black | Black background with white text. |
white | White background with black text. |
You can also configure button dimensions, border radius, and size mode to seamlessly integrate with your checkout design.
You can configure the component to drive your desired flow:
- Immediate payment flow: A synchronous, single-step payment process where the customer completes the payment immediately during checkout and you receive the payment confirmation right away.
- Authorisation flow: An asynchronous, two-step payment process where the customer authorises the payment and you choose whether to capture the funds later. This provides flexibility for order validation and inventory management.
| Aspect | Immediate payment | Authorisation flow |
|---|---|---|
| Intent | Purchase | Authorisation followed by Capture. |
| Process | Captures payment immediately in one step. | Stores authorisation, later captures funds after order validation. |
| Confirmation | No additional confirmation needed. | Requires confirmation step with capture logic. |
| Flexibility | Immediate payment completion. | Can adjust order, validate inventory, and calculate final costs. |
| Use cases | Digital products and simple orders. | Complex orders, inventory validation, and shipping calculation. |
| Time limit | Immediate settlement. | Authorisation valid for up to 7 days before expiration. |
When you initiate a transaction, you provide key information about the transaction method, amount, and currency.
The transaction method consists of:
- The entry type, which describes the origin of the transaction. For Google Pay for Web, this is always
Ecom(e-commerce). - The funding type, which describes the payment method used (Google Pay wallet).
- The intent, which describes the purpose and flow of the transaction.
Google Pay supports the following intents:
| Intent | Description |
|---|---|
Authorisation | Authorise a payment and hold funds for later capture. |
Purchase | Capture a payment immediately and complete the transaction. |
Verification | Verify payment method without charging (zero-amount). |
EstimatedAuthorisation | Authorise with estimated amount for final adjustment. |
The Google Pay component supports advanced payment sheet interactions for a dynamic checkout experience:
Request shipping addresses from customers and validate them in real-time:
- Collect full postal addresses with phone numbers.
- Restrict shipping to specific countries.
- Validate addresses and show errors for unserviceable locations.
Provide dynamic shipping options based on the customer's selected address:
- Define multiple shipping methods with pricing and delivery times.
- Update available options based on address selection.
- Set default shipping options.
Request billing addresses for payment verification:
- Collect full billing addresses.
- Choose between full or minimal address formats.
- Optionally require phone numbers.
Request the customer's email address for order confirmations and receipts.
Update transaction amounts in real-time based on customer selections:
- Adjust totals when shipping addresses change.
- Modify prices when shipping options are selected.
- Add or remove line items dynamically.
- Show real-time tax calculations.
The Google Pay component fully supports 3DS authentication for enhanced transaction security:
- Pre-initiate authentication: Configure authentication settings before starting the 3DS flow.
- Post-initiate authentication: Receive the result of the pre-initiation call.
- Pre-authentication: Begin the 3DS process with challenge indicators and merchant information.
- Post-authentication: Receive authentication results including authentication IDs and status.
- Requestor authentication indicator: Specify the type of authentication requested.
- Challenge indicator: Control whether to request challenge flows.
- Merchant information: Provide merchant country code and legal name.
- Challenge window size: Configure the size of the 3DS challenge window.
- Timeout settings: Set authentication timeout values.
Enable one-click repeat purchases by storing payment tokens with customer consent:
- Consent checkbox: Display a customisable consent checkbox alongside the Google Pay button.
- Token storage: Securely store payment tokens for future transactions.
- Shopper association: Link tokens to specific shopper IDs for merchant-initiated transactions.
- Token management: Access stored tokens for recurring payments.
- Subscription services with recurring billing.
- One-click reordering for returning customers.
- Quick checkout for logged-in users.
- Merchant-initiated transactions.
Google Pay is available in numerous countries and regions worldwide:
- Americas: United States, Canada, Mexico, Brazil, and more.
- Europe: United Kingdom, France, Germany, Italy, Spain, Netherlands, and 40+ other countries.
- Asia-Pacific: Australia, China, Hong Kong, Japan, Singapore, India, and more.
For a full list of supported countries and regions, see Google's official website.
The component automatically detects regional availability and only displays the Google Pay button when the service is available in the customer's location and when the customer has a supported payment method configured.
The Google Pay component supports the following card networks:
- Visa: Global acceptance
- Mastercard: Worldwide coverage
- American Express: Premium card support
- Discover: US and international acceptance
- JCB: Asian and international markets
- Interac: Canadian debit card support
You can configure which card networks to accept based on your business requirements and regional preferences. Specify the networks in the allowedCardNetworks parameter of your payment configuration.