Mollie

The Mollie:ApplePay provider renders an Apple Pay button using the W3C Payment Request API with a Mollie-managed Apple Pay session.

Requirement: HTTPS and Apple Pay domain validation are required. See Known Constraints — Apple Pay Requires HTTPS.

Your onClick callback must return checkoutData containing:

• data — Base64-encoded Apple Pay session from the Mollie /wallets/applepay/sessions endpoint.
• returnUrl — your backend endpoint that receives the serialised PaymentResponse and completes the Mollie payment.
• merchantIdentifier — the human-readable Apple Pay merchant identifier (e.g. 'merchant.com.example').

Options — MollieApplePayOptions

Field	Type	Required	Default	Description
totalAmount	number	Yes	—	Amount in minor units (e.g. 1000 = €10.00)
currencyCode	string	Yes	—	ISO 4217 currency code
countryCode	string	No	'DE'	ISO 3166-1 alpha-2 merchant country code
supportedNetworks	string[]	No	['amex','discover','masterCard','visa']	Accepted card networks
requiredShippingContactFields	string[]	No	—	Apple Pay contact fields for shipping (e.g. ['postalAddress', 'email'])
requiredBillingContactFields	string[]	No	—	Apple Pay contact fields for billing
supportedCountries	string[]	No	—	ISO 3166-1 alpha-2 codes valid for shipping

Style

The Mollie:ApplePay provider uses the ApplePayStyle options:

Field	Type	Description
buttonstyle	'black' | 'white' | 'white-outline'	Button color theme
type	'buy' | 'plain' | 'checkout'	Label variant
locale	string	BCP 47 locale tag

Example

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

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

const buttons = 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'],
        requiredBillingContactFields: ['postalAddress'],
      },
    },
  ],

  onClick: async (identity, paymentMethodData) => {
    // Your backend must call Mollie's /wallets/applepay/sessions and return
    // the session data, plus provide a returnUrl for payment completion.
    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,
      checkoutData: {
        id: order.id,
        data: order.applePaySessionData,       // base64-encoded Mollie session
        returnUrl: order.returnUrl,
        merchantIdentifier: order.merchantIdentifier,
      },
    };
  },

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

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

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

buttons.render();