Google Pay

The Google:GooglePay provider renders a native Google Pay button using the Google Pay JS API directly (no PSP intermediary).

Options — GooglePayOptions

Field	Type	Required	Default	Description
totalAmount	number	Yes	—	Amount in minor units (e.g. 19300 = €193.00)
currencyCode	string	Yes	—	ISO 4217 uppercase currency code (e.g. 'EUR')
gateway	string	Yes	—	PSP gateway identifier (e.g. 'stripe', 'adyen')
gatewayMerchantId	string	Yes	—	Merchant ID at the PSP/gateway
countryCode	string	No	—	ISO 3166-1 alpha-2 merchant country code
merchantId	string	No	—	Google Pay merchant ID (required in PRODUCTION environment)
merchantName	string	No	—	Merchant name shown in the payment sheet
allowedCardNetworks	string[]	No	['AMEX','DISCOVER','INTERAC','JCB','MASTERCARD','VISA']	Accepted card networks
allowedCardAuthMethods	string[]	No	['PAN_ONLY','CRYPTOGRAM_3DS']	Accepted auth methods
emailRequired	boolean	No	false	Request buyer's email address
shippingAddressRequired	boolean	No	false	Request shipping address
billingAddressRequired	boolean	No	false	Request billing address
billingAddressParameters	object	No	—	{ format?: 'FULL' | 'MIN'; phoneNumberRequired?: boolean }
callbackIntents	string[]	No	['PAYMENT_AUTHORIZATION']	Google Pay callback intents

Environment note: Google Pay uses its own environment field inside the options object — it does not read the SDK-level environment. Pass environment: 'TEST' (via the provider SDK defaults) for sandbox or 'PRODUCTION' for live. For the native Google Pay provider, switch to TEST by omitting merchantId and using 'TEST' when initializing the PaymentsClient (handled internally by the SDK). Obtain a production merchantId from the Google Pay Business Console.

Style — GooglePayStyle

Field	Type	Description
buttonColor	'default' | 'black' | 'white'	Button color theme. 'default' follows user preference
buttonType	'buy' | 'plain' | 'checkout'	Label variant
buttonSizeMode	'fill' | 'static'	'fill' stretches to container width

Example

<div id="googlepay-container"></div>

import { ExpressButtons } from 'collana-pay-js';

const buttons = ExpressButtons({
  providers: [
    {
      providerProtocolType: 'Google',
      paymentMethodType: 'GooglePay',
      container: '#googlepay-container',
      style: {
        buttonColor: 'black',
        buttonType: 'buy',
        buttonSizeMode: 'fill',
      },
      options: {
        totalAmount: 19300,       // €193.00
        currencyCode: 'EUR',
        countryCode: 'DE',
        gateway: 'example',
        gatewayMerchantId: 'exampleMerchantId',
        merchantName: 'My Shop',
        emailRequired: true,
        billingAddressRequired: true,
        billingAddressParameters: { format: 'FULL' },
      },
    },
  ],

  onClick: async (identity, paymentMethodData) => {
    const res = await fetch('/api/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ provider: identity, paymentMethodData }),
    });
    const order = await res.json();
    return { orderId: order.id };
  },

  onApprove: (data) => {
    window.location.href = `/order/success?id=${data.orderId}`;
  },

  onCancel: (identity) => {
    console.log('Google Pay cancelled', identity);
  },

  onError: (error) => {
    console.error('Google Pay error', error);
  },
});

buttons.render();