Google Pay One-Click Checkout for VTEX

This component wraps the @google-pay/button-react component, providing seamless integration with VTEX's One-Click Checkout experience. It handles VTEX API calls and logs key events, simplifying the integration for external teams.

Installation

npm install @vtex/google-pay-one-click-checkout

Usage

import ButtonGoogle from '@vtex/google-pay-one-click-checkout';

<ButtonGoogle
	orderFormId="your-order-form-id"
	accountName="your-account-name"
	onOrderPlaced={(transactionId, orderId) =>
		console.log('Order placed:', orderId)
	}
	config={{
		logger: yourLoggerInstance, // Optional
		APIConfig: {
			checkoutAPIBasePath: 'https://yourAccountName.myvtex.com',
			gatewayAPIBasePath: 'https://yourAccountName.vtexpayments.com.br',
		},
	}}
	propsButton={{
		buttonSizeMode: 'static',
		buttonRadius: 4,
		buttonType: 'buy',
		className: 'custom-button',
		buttonColor: 'default',
		style: { width: '100%' },
	}}
/>;

Props

orderFormId

• Type: string
• Description: Identifies the current VTEX cart.

accountName

• Type: string
• Description: The VTEX store account name.

onOrderPlaced

• Type: (transactionId: string, orderId: string) => void
• Description: Callback function triggered when an order is successfully placed.

config

• Type: GooglePayConfig
• Description: Configuration object for the component.

config.logger

• Type: VtexLogger (optional)
• Description: An optional instance of VTEX's diagnostics-core logger. If not provided, the component will fall back to using console.log for internal logging.

config.APIConfig

• Type: APIConfig
• Description: Configuration object for VTEX API base paths.

config.APIConfig.checkoutAPIBasePath

• Type: string

• Description: The base URL for the Checkout API. This should be the domain from which the component accesses VTEX's Checkout services.
  For example, to retrieve an orderForm via
  https://{accountName}.{environment}.com.br/api/checkout/pub/orderForm,
  you should set:

  checkoutAPIBasePath: 'https://{accountName}.{environment}.com.br';

  You can either use a static string or dynamically use window.location.origin if the component is served from the same origin as the API.

config.APIConfig.gatewayAPIBasePath

• Type: string

• Description: The base URL for the VTEX Gateway API.
  For example, for requests like:
  https://{accountName}.vtexpayments.com.br/api/pub/transactions/{transactionId}/payments
  You should use:

  gatewayAPIBasePath: 'https://{accountName}.vtexpayments.com.br';

  Replace {accountName} with the current VTEX store account name.

Development Tip: To avoid CORS issues when developing locally, use a local proxy and point both checkoutAPIBasePath and gatewayAPIBasePath to your proxy server. Every request is made with a query param named an which contains the same value as accountName prop.

propsButton

• Type: PropsButton
• Description: Configuration object passed to @google-pay/button-react. Properties:
  • buttonSizeMode: 'static' | 'fill'
  • buttonRadius: number
  • buttonType: 'book' | 'buy' | 'checkout' | 'donate' | 'order' | 'pay' | 'plain' | 'subscribe' | 'long' | 'short'
  • className: string
  • buttonColor: 'default' | 'black' | 'white'
  • style: CSSProperties

canMakePayments Utility

The library also exports a utility function named canMakePayments used to check whether the current browser environment and VTEX cart can make payments using Google Pay. This function should be used before rendering the Google Pay button.

Usage Example

import { canMakePayments } from '@vtex/google-pay-one-click-checkout';

const result = await canMakePayments({
	accountName: 'your-account-name',
	orderFormId: 'your-order-form-id',
	config: {
		checkoutAPIBasePath: 'https://yourAccountName.myvtex.com',
		gatewayAPIBasePath: 'https://yourAccountName.vtexpayments.com.br',
	},
});

if (result) {
	// Render the ButtonGoogle component
}

Parameters

• accountName: Same as accountName in the component props.
• orderFormId: Same as orderFormId in the component props.
• config: Same shape as config.APIConfig, including checkoutAPIBasePath and gatewayAPIBasePath.

Behavior

• Returns a Promise<boolean> indicating if Google Pay is available in the current environment for the given cart.
• Internally, it also ensures the Google Pay SDK is added to the page. The SDK is hosted at:
  https://pay.google.com/gp/p/js/pay.js
• The script is only added if it is not already present in the page, ensuring safe and idempotent behavior.

Dependencies

• @google-pay/button-react
• @vtex/diagnostics-core

License

MIT