Stripe

Google Pay

Provider key: Stripe:GooglePay

Renders: a Google Pay button using the Stripe Express Checkout Element.

Options — StripeGooglePayOptions

Required

Field	Type	Description
publishableKey	string	Your Stripe publishable API key (pk_test_... / pk_live_...). Required for direct integration. Mutually exclusive with stripeAccount.
stripeAccount	string	Stripe connected account ID (acct_...). Required for CollanaPay onboarding. Mutually exclusive with publishableKey.
totalAmount	number	Amount in minor units (e.g. 19300 = €193.00).
currencyCode	string	ISO 4217 currency code in lowercase (e.g. 'eur', 'usd').

Either/or

publishableKey and stripeAccount are listed under Required because exactly one is always required. Setting both is an error.

Optional

Field	Type	Description
pspAutoCaptureEnabled	boolean	true → automatic capture; false → manual (authorize only). Maps to Stripe captureMethod: 'automatic' or 'manual'. Default: true.
isShippingCustomerDataRequired	boolean	See Checkout Flow Flags. Default: false.
isBillingCustomerDataRequired	boolean	See Checkout Flow Flags. Default: false.
supportedShippingCountries	string[]	ISO 3166-1 alpha-2 list of countries you ship to. Forwarded to Stripe's native allowedShippingCountries ECE option — Stripe restricts the address picker to these countries, no manual validation required.
shippingOptionLabel	string	Label shown for the shipping option in the Google Pay widget. Defaults to the name of the ShippingCost cart item.
locale	string	Checkout UI locale. Accepts collana pay format (de-DE) or Stripe format (de).

Style — GooglePayStyle

Controls the appearance of the Google Pay button via the Stripe Express Checkout Element.

Field	Type	Description
buttonColor	'default' | 'black' | 'white'	Button color. Maps to Stripe's buttonTheme.googlePay. 'default' defers to Stripe's own default (black).
buttonType	'book' | 'buy' | 'checkout' | 'donate' | 'order' | 'pay' | 'plain' | 'subscribe'	Label variant. Maps to Stripe's buttonType.googlePay. Default: 'buy'.

TIP

buttonSizeMode, buttonRadius, buttonLocale, and buttonBorderType from GooglePayStyle are ignored by Stripe:GooglePay — they are native Google Pay JS SDK options.

Checkout Flow Flags

These flags control whether Stripe's Express Checkout Element collects shipping and billing address data during the payment flow.

isShippingCustomerDataRequired	isBillingCustomerDataRequired	Behaviour
false	false	Express flow (default) — Stripe collects shipping address, billing address, e-mail, and phone number natively in the payment sheet.
true	true	Stripe skips address collection. The merchant's backend must provide shipping and billing address. E-mail and phone are always collected by Stripe.

The two flags are independent and can be combined freely.

Shipping options

Stripe:GooglePay invokes onClick before the shipping address change event fires. The backend call returns the available shipping rates as shippingOption[] in the result (part of checkoutData); CollanaPay forwards them directly to the Stripe Express Checkout Element.

To localise or rename the display name without changing your backend, use the shippingOptionLabel option — a single string that replaces the rate's displayName:

options: {
  // ...
  shippingOptionLabel: 'Standardlieferung',
}

The backend returns exactly one shipping rate. Its displayName defaults to the name of the ShippingCost cart item from the backend — or "No shipping cost" when no ShippingCost item exists. shippingOptionLabel overrides this on the client side.

Authentication

Stripe supports two authentication modes. Exactly one of publishableKey or stripeAccount must be provided — they are mutually exclusive.

Mode	publishableKey	stripeAccount	Description
Direct	✅ required	—	Use your own Stripe publishable key.
Onboarding mode	—	✅ required	Integrator supplies only the Stripe connected account ID.

Onboarding mode — collana pay-managed credentials (recommended)

This is the preferred integration. collana pay acts as the onboarding partner and manages the publishable key on your behalf — you only need to provide your Stripe connected account ID.

options: {
  stripeAccount: 'acct_YOUR_STRIPE_ACCOUNT_ID',
  currencyCode: 'eur',
  totalAmount: 19300,
}

Do not set options.publishableKey in this mode.

Don't know your stripeAccount? You can look it up in the 'Onboarding' section in COPAL once you have completed the onboarding setup for Stripe.

Direct mode — your own Stripe publishable key

Use this when you want to use your own Stripe publishable key directly. Set options.publishableKey and omit options.stripeAccount:

options: {
  publishableKey: 'pk_test_YOUR_PUBLISHABLE_KEY',
  currencyCode: 'eur',
  totalAmount: 19300,
}

Example

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

const buttons = CollanaPay.ExpressButtons({
  providers: [
    {
      providerProtocolType: 'Stripe',
      paymentMethodType: 'GooglePay',
      container: '#stripe-googlepay-container',
      options: {
        publishableKey: 'pk_test_YOUR_PUBLISHABLE_KEY',
        totalAmount: 19300,       // €193.00
        currencyCode: 'eur',      // lowercase for Stripe
        // pspAutoCaptureEnabled: false  // uncomment for authorize-only
        // supportedShippingCountries: ['DE', 'AT', 'CH']
        // shippingOptionLabel: 'Versandkostenfrei'
      },
      style: {
        buttonColor: 'black',
        buttonType: 'buy',
      },
    },
  ],
  onClick: async (identity, options) => {
    const res = await fetch('/api/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ provider: identity, options }),
    });
    return (await res.json()).checkoutData;
  },
  onCancel: (identity) => console.log('Cancelled', identity),
  onError: (identity, error) => console.error('Error', error),
});
buttons.render();