Adyen

Adyen provides three Express Button providers via Adyen's Drop-in and API-only integrations. All three require an Adyen clientKey obtained from the Adyen Customer Area under Developers → API credentials.

Adyen + Native PayPal Mutual Exclusion

Adyen:PayPalExpress and any native PayPal provider (PayPal:PayPalExpress, PayPal:PayLater) cannot be used on the same page. Both load the PayPal JS SDK with conflicting configurations, causing an unresolvable singleton conflict.

Use either Adyen-managed PayPal or native PayPal — never both on the same page.

PayPalExpress

Provider key: Adyen:PayPalExpress

Renders: the standard PayPal Express button, managed by the Adyen Drop-in component.

Options — `AdyenPayPalExpressOptions`

Required

Field	Type	Description
`clientKey`	`string`	Adyen client key (e.g. `'test_...'` or `'live_...'`).
`totalAmount`	`number`	Amount in minor units (e.g. `2500` = €25.00).
`currencyCode`	`string`	ISO 4217 currency code.
`pspAutoCaptureEnabled`	`boolean`	`true` → immediate capture; `false` → authorize only (maps to Adyen `intent: 'capture'` or `'authorize'`). Must match the CollanaPay ProviderAccount configuration to avoid a PayPal intent mismatch at runtime.

Optional

Field	Type	Description
`countryCode`	`string`	ISO 3166-1 alpha-2 country code. Use `'Unknown'` to omit the country code from the provider request.
`locale`	`string`	IETF locale tag. Accepts collana pay format (`de-DE`) or Adyen format (`en-US`).
`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, PayPal rejects shipping addresses from countries not in the list. Omit or set to `[]` to allow all countries.

Example

html

<div id="adyen-paypal-container"></div>

{
  providerProtocolType: 'Adyen',
  paymentMethodType: 'PayPalExpress',
  container: '#adyen-paypal-container',
  options: {
    clientKey: 'test_YOUR_CLIENT_KEY',
    totalAmount: 2500,
    currencyCode: 'EUR',
    countryCode: 'DE',
    pspAutoCaptureEnabled: false,   // authorize only; set to true for immediate capture
  },
}

GooglePay

Provider key: Adyen:GooglePay

Renders: a Google Pay button using the native Google Pay JS API with Adyen as the payment gateway (same integration as Computop:GooglePay, but with gateway fixed to 'adyen').

Options — `AdyenGooglePayOptions`

Required

Field	Type	Description
`totalAmount`	`number`	Amount in minor units.
`currencyCode`	`string`	ISO 4217 currency code.
`gatewayMerchantId`	`string`	Adyen merchant account name used as Google Pay gateway merchant ID.
`countryCode`	`string`	ISO 3166-1 alpha-2 country code. Use `'Unknown'` to omit the country code from the provider request.
`merchantName`	`string`	Merchant name in payment sheet.

Optional

Field	Type	Description
`allowedCardNetworks`	`string[]`	Accepted card networks. Default: `['AMEX','DISCOVER','INTERAC','JCB','MASTERCARD','VISA']`.
`totalPriceLabel`	`string`	Custom label for the total price row in the payment sheet (e.g. `'Total'`).
`displayItems`	`GooglePayDisplayItem[]`	Line items shown below the total (subtotal, tax, fees, etc.).
`isShippingCustomerDataRequired`	`boolean`	When `true`, your backend already supplies the shopper's shipping address — Google Pay will not collect it (also disables `email` / `phone`). Default `false`.
`isBillingCustomerDataRequired`	`boolean`	When `true`, your backend already supplies the shopper's billing address — Google Pay will not collect it. Default `false`.
`supportedShippingCountries`	`string[]`	ISO 3166-1 alpha-2 list of countries you ship to. When set, the Google Pay sheet validates the selected address country and surfaces `SHIPPING_ADDRESS_UNSERVICEABLE` for any other country.

CheckoutFlowFlags

The two is…CustomerDataRequired flags are inverted into Google Pay's shippingAddressRequired / billingAddressRequired request fields. Setting them to true means the merchant already has the data — Google Pay will not collect it. The same default (collect everything) applies across Adyen:GooglePay, Computop:GooglePay, and Stripe:GooglePay.

Style — `GooglePayStyle`

Controls the appearance of the Google Pay button. See the Google Pay ButtonOptions reference for full details.

Field	Type	Description
`buttonColor`	`'default' \| 'black' \| 'white'`	Button color theme. Default: `'default'`.
`buttonType`	`'book' \| 'buy' \| 'checkout' \| 'donate' \| 'order' \| 'pay' \| 'plain' \| 'subscribe'`	Label variant. Default: `'buy'`.
`buttonSizeMode`	`'fill' \| 'static'`	`'fill'` stretches to container width. Default: `'static'`.
`buttonRadius`	`number`	Corner radius in px (0–20 for the default 40 px height).
`buttonLocale`	`string`	BCP-47 (`'de-DE'`) or ISO 639-1 (`'de'`) — region is stripped automatically. Default: browser locale.
`buttonBorderType`	`'no_border' \| 'default_border'`	Button border style. Default: `'default_border'`.

Example

html

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

{
  providerProtocolType: 'Adyen',
  paymentMethodType: 'GooglePay',
  container: '#adyen-googlepay-container',
  options: {
    totalAmount: 1000,
    currencyCode: 'EUR',
    countryCode: 'DE',
    gatewayMerchantId: 'YOUR_ADYEN_MERCHANT_ACCOUNT',
    merchantName: 'My Shop',
  },
}

ApplePay

Provider key: Adyen:ApplePay

Renders: an Apple Pay button via a native ApplePaySession (API-only integration). collana pay uses Adyen's Apple Pay certificate for domain validation — you do not need your own Apple Developer account or Merchant Identity Certificate. See PSP Setup below for domain registration requirements.

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 SSL certificate.

Options — `AdyenApplePayOptions`

Required

Field	Type	Description
`totalAmount`	`number`	Amount in minor units.
`currencyCode`	`string`	ISO 4217 currency code.

Optional

Field	Type	Description
`countryCode`	`string`	ISO 3166-1 alpha-2 country code. Use `'Unknown'` to omit the country code from the provider request. Default: `'DE'`.
`merchantDisplayName`	`string`	Merchant name shown as the payment line item label in the Apple Pay sheet. When set, takes precedence over the `displayName` returned by the Adyen session (which comes from the Adyen ProviderAccount configuration in collana pay). Falls back to the session's `displayName`.
`supportedNetworks`	`string[]`	Accepted card networks. Default: `['amex','discover','masterCard','visa']`.
`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 — `ApplePayStyle`

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 (e.g. `'de-DE'`, `'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:

css

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

html

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

{
  providerProtocolType: 'Adyen',
  paymentMethodType: 'ApplePay',
  container: '#adyen-applepay-container',
  style: { buttonstyle: 'black', type: 'buy' },
  options: {
    totalAmount: 1000,
    currencyCode: 'EUR',
    countryCode: 'DE',
    supportedNetworks: ['masterCard', 'visa'],
  },
}

PSP Setup

Before Apple Pay can render on your shop domain, two things must be in place.

1. Register the domain in the Adyen Customer Area

Register every domain where your shop is served with Adyen. See [Adyen's Apple Pay documentation]https://docs.adyen.com/payment-methods/apple-pay/apple-pay-certificate#set-up-apple-pay-with-adyens-certificate) for instructions.

2. Register the domain in your collana pay provider account

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

Full Example — All Three Adyen Providers

const buttons = CollanaPay.ExpressButtons({
  providers: [
    {
      providerProtocolType: 'Adyen',
      paymentMethodType: 'PayPalExpress',
      container: '#adyen-paypal-container',
      options: {
        clientKey: 'test_YOUR_CLIENT_KEY',
        totalAmount: 2500,
        currencyCode: 'EUR',
        pspAutoCaptureEnabled: true,
      },
    },
    {
      providerProtocolType: 'Adyen',
      paymentMethodType: 'GooglePay',
      container: '#adyen-googlepay-container',
      options: {
        totalAmount: 2500,
        currencyCode: 'EUR',
        countryCode: 'DE',
        gatewayMerchantId: 'YOUR_ADYEN_MERCHANT_ACCOUNT',
      },
    },
    {
      providerProtocolType: 'Adyen',
      paymentMethodType: 'ApplePay',
      container: '#adyen-applepay-container',
      style: { buttonstyle: 'black', type: 'buy' },
      options: {
        totalAmount: 2500,
        currencyCode: 'EUR',
        countryCode: 'DE',
      },
    },
  ],

  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 the checkoutData from your backend (collana pay API response).
    return transaction.checkoutData;
  },

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

  onError: (identity, error) => {
    console.error('Adyen error', error);
  },
});

buttons.render();

Adyen ​

PayPalExpress ​

Options — AdyenPayPalExpressOptions ​

Required ​

Optional ​

Example ​

GooglePay ​

Options — AdyenGooglePayOptions ​

Required ​

Optional ​

Style — GooglePayStyle ​

Example ​

ApplePay ​

Options — AdyenApplePayOptions ​

Required ​

Optional ​

Checkout Flow Flags ​

Style — ApplePayStyle ​

Sizing and layout ​

Example ​

PSP Setup ​

1. Register the domain in the Adyen Customer Area ​

2. Register the domain in your collana pay provider account ​

Full Example — All Three Adyen Providers ​

Adyen

PayPalExpress

Options — `AdyenPayPalExpressOptions`

Required

Optional

Example

GooglePay

Options — `AdyenGooglePayOptions`

Required

Optional

Style — `GooglePayStyle`

Example

ApplePay

Options — `AdyenApplePayOptions`

Required

Optional

Checkout Flow Flags

Style — `ApplePayStyle`

Sizing and layout

Example

PSP Setup

1. Register the domain in the Adyen Customer Area

2. Register the domain in your collana pay provider account

Full Example — All Three Adyen Providers