Mollie

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.