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.

Constraint: Adyen:PayPalExpress and any native PayPal provider cannot be used on the same page. See Known Constraints — Adyen + Native PayPal Mutual Exclusion.

Adyen:PayPalExpress

Renders a PayPal Express button managed by the Adyen Drop-in component.

Options — AdyenPayPalExpressOptions

Field	Type	Required	Default	Description
clientKey	string	Yes	—	Adyen client key (e.g. 'test_...' or 'live_...')
totalAmount	number	Yes	—	Amount in minor units (e.g. 2500 = €25.00)
currencyCode	string	Yes	—	ISO 4217 currency code
countryCode	string	No	—	ISO 3166-1 alpha-2 country code
locale	string	No	—	IETF locale tag (e.g. 'en-US')
isExpress	boolean	No	true	Whether this is an express-checkout flow
showPayButton	boolean	No	—	Whether the Adyen component renders its own pay button
userAction	'continue' | 'pay'	No	—	'pay' shows "Pay Now", 'continue' shows "Continue"
intent	'capture' | 'authorize'	No	—	Payment intent
blockPayPalCreditButton	boolean	No	—	Hide the PayPal Credit button variant
blockPayPalPayLaterButton	boolean	No	—	Hide the PayPal Pay Later button variant

Example

<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',
    isExpress: true,
    intent: 'authorize',
    blockPayPalCreditButton: true,
  },
}

---

Adyen:GooglePay

Renders a Google Pay button managed by the Adyen Drop-in component.

Options — AdyenGooglePayOptions

Field	Type	Required	Default	Description
clientKey	string	Yes	—	Adyen client key
totalAmount	number	Yes	—	Amount in minor units
currencyCode	string	Yes	—	ISO 4217 currency code
countryCode	string	No	—	ISO 3166-1 alpha-2 country code
locale	string	No	—	IETF locale tag
isExpress	boolean	No	true	Express-checkout flow
callbackIntents	string[]	No	—	Google Pay callback intents
shippingAddressRequired	boolean	No	—	Request shipping address
shippingOptionRequired	boolean	No	—	Request shipping option
emailRequired	boolean	No	—	Request email address
billingAddressRequired	boolean	No	—	Request billing address
billingAddressParameters	object	No	—	{ format?: 'FULL' | 'MIN' }
gatewayMerchantId	string	No	—	Adyen merchant account ID used as Google Pay gateway merchant ID
merchantName	string	No	—	Merchant name in payment sheet
merchantId	string	No	—	Google Pay merchant ID
transactionInfo	object	No	—	Google Pay TransactionInfo object for line items

Example

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

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

---

Adyen:ApplePay

Renders an Apple Pay button using the Adyen API-only integration with native ApplePaySession.

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

Your onClick callback must return checkoutData containing:

• merchantValidationUrl — your backend endpoint that handles Apple Pay merchant session validation (either via Adyen or your own certificate).
• returnUrl — your backend endpoint that receives the Base64-encoded Apple Pay token and calls Adyen's /payments API.

Options — AdyenApplePayOptions

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

Example

<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'],
  },
}

---

Full Example — All Three Adyen Providers

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

const buttons = ExpressButtons({
  providers: [
    {
      providerProtocolType: 'Adyen',
      paymentMethodType: 'PayPalExpress',
      container: '#adyen-paypal-container',
      options: {
        clientKey: 'test_YOUR_CLIENT_KEY',
        totalAmount: 2500,
        currencyCode: 'EUR',
        isExpress: true,
      },
    },
    {
      providerProtocolType: 'Adyen',
      paymentMethodType: 'GooglePay',
      container: '#adyen-googlepay-container',
      options: {
        clientKey: 'test_YOUR_CLIENT_KEY',
        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, paymentMethodData) => {
    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.checkoutId,
        resultCode: order.resultCode,
        returnUrl: order.returnUrl,
      },
    };
  },

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

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

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

buttons.render();