Mollie

Google Pay

Provider key: Mollie:GooglePay

Renders: a native Google Pay button using the Google Pay JS SDK and Mollie's payment gateway tokenization.

Google Pay prerequisites

The checkout page must use HTTPS, Google Pay must be enabled for the Mollie website profile, and you must have a Google Merchant ID registered in the Google Pay & Wallet Console.

Options — MollieGooglePayOptions

Required

Field	Type	Description
totalAmount	number	Amount in minor units (e.g. 10000 = €100.00).
currencyCode	string	ISO 4217 currency code.
countryCode	string	ISO 3166-1 alpha-2 merchant country code.
gatewayMerchantId	string	Mollie Profile ID, for example pfl_....
merchantName	string	Merchant name shown in the Google Pay sheet.
googleMerchantId	string	Google Pay merchant ID from the Google Pay & Wallet Console. Distinct from gatewayMerchantId (the Mollie Profile ID). Required by the production build — rendering fails with a clear error if it is missing. The sandbox build accepts and ignores it, so you can set it once for both.

Optional

Field	Type	Description
allowedCardNetworks	string[]	Supported networks. Defaults to ['AMEX', 'MASTERCARD', 'VISA'] — the only networks Mollie's Google Pay integration accepts.
isBillingCustomerDataRequired	boolean	Set when the backend already provides billing data. Default: false.
isShippingCustomerDataRequired	boolean	Set when the backend already provides shipping data. Default: false.
supportedShippingCountries	string[]	Optional ISO country-code allowlist for shipping.
totalPriceLabel	string	Custom total label.
displayItems	GooglePayDisplayItem[]	Optional payment-sheet line items.

Mollie uses the Google Pay gateway identifier mollie automatically. The gatewayMerchantId value must be the Mollie Profile ID, not the Google Merchant ID. After authorization, the SDK posts the encrypted token and collected customer data to the returnUrl from onClick; the backend must pass that token unchanged to Mollie's Payments API as googlePayPaymentToken, with method: 'creditcard' and a required redirectUrl.

Style

The provider uses GooglePayStyle (buttonColor, buttonType, buttonSizeMode, buttonRadius, buttonLocale, and buttonBorderType).

Example

const buttons = CollanaPay.ExpressButtons({
  providers: [{
    providerProtocolType: 'Mollie',
    paymentMethodType: 'GooglePay',
    container: '#mollie-googlepay-container',
    style: { buttonColor: 'black', buttonType: 'buy' },
    options: {
      totalAmount: 10000,
      currencyCode: 'EUR',
      countryCode: 'DE',
      gatewayMerchantId: 'pfl_YOUR_PROFILE_ID',
      merchantName: 'My Shop',
    },
  }],
  onClick: async () => ({
    returnUrl: 'https://example.com/api/create-mollie-payment',
  }),
});

buttons.render();

Production setup

The example above is enough for the sandbox SDK build. Google Pay requires additional configuration before it renders a real payment sheet in production.

Production checklist

1. Your checkout page is served over HTTPS with a valid TLS certificate.
2. Google Pay is enabled on the Mollie website profile — Mollie Dashboard → Organization settings → Website profiles, select your profile, enable Google Pay.
3. You have registered with the Google Pay & Wallet Console and obtained a Google Merchant ID.
4. You load the production SDK build (see Environments).

Google Pay uses two distinct merchant IDs — don't mix them up:

Option	Value	Where to get it
gatewayMerchantId	Mollie Profile ID, e.g. pfl_x8sJf9d3P2	Mollie Dashboard → Website profiles — always required, in sandbox and production alike
googleMerchantId	Google Merchant ID, e.g. BCR2DN6TSXXXZ000	Google Pay & Wallet Console (top-right of the page) — enforced by Google in production

const buttons = CollanaPay.ExpressButtons({
  providers: [{
    providerProtocolType: 'Mollie',
    paymentMethodType: 'GooglePay',
    container: '#mollie-googlepay-container',
    style: { buttonColor: 'black', buttonType: 'buy' },
    options: {
      totalAmount: 10000,
      currencyCode: 'EUR',
      countryCode: 'DE',
      gatewayMerchantId: 'pfl_x8sJf9d3P2',   // Mollie Profile ID
      googleMerchantId: 'BCR2DN6TSXXXZ000',   // Google Pay & Wallet Console ID (production)
      merchantName: 'My Shop',
    },
  }],
  onClick: async () => ({
    returnUrl: 'https://example.com/api/create-mollie-payment',
  }),
});

buttons.render();

Apple Pay

Provider key: Mollie:ApplePay

Renders: an Apple Pay button using the W3C Payment Request API with a Mollie-managed Apple Pay session.

Apple Pay Requires HTTPS

Apple Pay will not render on pages served over plain HTTP. The page must be served over HTTPS with a valid TLS certificate, and your domain must be registered and validated with Apple through Mollie (see PSP Setup below).

Options — MollieApplePayOptions

Required

Field	Type	Description
totalAmount	number	Amount in minor units (e.g. 1000 = €10.00).
currencyCode	string	ISO 4217 currency code.

Optional

Field	Type	Description
merchantDisplayName	string	Merchant name shown as the payment line item label in the Apple Pay sheet. If omitted, the displayName returned by the Mollie Wallets API session is used as fallback.
countryCode	string	ISO 3166-1 alpha-2 merchant country code. Use 'Unknown' to omit the country code from the provider request. Default: 'DE'.
supportedNetworks	string[]	Accepted card networks. Default: ['amex','discover','maestro','masterCard','visa','vPay'].
isBillingCustomerDataRequired	boolean	See Checkout Flow Flags. Default: false.
isShippingCustomerDataRequired	boolean	See Checkout Flow Flags. Default: false.
supportedShippingCountries	string[]	Whitelist of ISO 3166-1 alpha-2 country codes the merchant ships to (e.g. ['DE','AT','CH']). When set and non-empty, Apple Pay shows an error if the selected shipping country is not in the list. Omit or set to [] to allow all countries. Default: all countries.
nativeOnly	boolean	Only render the button when the browser supports Apple Pay natively (Safari). On other browsers skip the Apple Pay JS polyfill and reject rendering with APPLE_PAY_UNAVAILABLE (surfaced via global onError). Disables the cross-device "Scan with iPhone" QR handoff. Default: false.

Checkout Flow Flags

isShippingCustomerDataRequired and isBillingCustomerDataRequired control which address fields Apple Pay requests from the payer. All four combinations are supported:

isShippingCustomerDataRequired	isBillingCustomerDataRequired	Behaviour
false	false	Express flow (default) — Apple Pay collects both shipping address and billing address from the payer.
true	false	Backend already provides the shipping address; Apple Pay still collects billing address.
false	true	Apple Pay collects the shipping address; backend already provides the billing address.
true	true	Data-required flow — Backend provides both addresses; Apple Pay skips all address collection.

Style

The Mollie:ApplePay provider uses the ApplePayStyle options:

Field	Type	Description
buttonstyle	'black' | 'white' | 'white-outline'	Button color theme
type	'buy' | 'plain' | 'check-out' | 'book' | 'subscribe' | 'donate' | 'set-up' | 'continue' | 'add-money' | 'contribute' | 'order' | 'reload' | 'rent' | 'support' | 'tip' | 'top-up'	Label variant. See Apple's docs for availability per Apple Pay version.
locale	string	BCP 47 locale tag. Accepts collana pay format (de-DE) or Mollie/Apple Pay format (en-US)

Sizing and layout

Apple's <apple-pay-button> web component does not expose width or height as attributes. Size and layout are controlled entirely via CSS on the integrator side — target the element from your own stylesheet:

apple-pay-button {
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 48px;
  width: 100%;
  height: 48px;
  min-height: 30px;   /* Apple recommendation */
  max-height: 64px;   /* Apple recommendation */
  border-radius: 8px;
}

Background color, the Apple Pay logo, and the button text are drawn by Safari and must not be overridden (Apple HIG). Use buttonstyle (black / white / white-outline) for color theming.

Example

<div id="mollie-applepay-container"></div>

const buttons = CollanaPay.ExpressButtons({
  providers: [
    {
      providerProtocolType: 'Mollie',
      paymentMethodType: 'ApplePay',
      container: '#mollie-applepay-container',
      style: {
        buttonstyle: 'black',
        type: 'buy',
        locale: 'en-US',
      },
      options: {
        totalAmount: 1000,      // €10.00
        currencyCode: 'EUR',
        countryCode: 'DE',
        supportedNetworks: ['masterCard', 'visa'],
      },
    },
  ],

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

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

  onError: (identity, error) => {
    console.error('Mollie Apple Pay error', error);
  },
});

buttons.render();

PSP Setup

Before Apple Pay can be used on your domain, two prerequisites must be met: place a domain validation file on your server and and configure your domain in your collana pay provider account.

Full setup instructions are documented by Mollie: Direct integration of Apple Pay — Prepare your server

1. Host the domain association file

Download the verification file that is referenced in the Mollie documentation and host it at the following fixed path:

https://your-domain.com/.well-known/apple-developer-merchantid-domain-association

The verification file has no file extension

The filename is apple-developer-merchantid-domain-association — no .txt, no .json, no suffix of any kind. Many upload tools and CMS systems append .txt automatically

Check reachability first

The file must be publicly accessible without authentication. Confirm with:

curl -I https://your-domain.com/.well-known/apple-developer-merchantid-domain-association

2. Register the domain in your collana pay provider account

In your collana pay provider account (Mollie ApplePay), open the Apple Pay checkout settings and set the CustomerCheckoutBaseUrl to the domain where the payment page is hosted.