Computop

Computop provides two payment button providers that route through the Computop payment gateway.

GooglePay

Provider key: Computop:GooglePay

Renders: a Google Pay button routed through the Computop payment gateway (gateway is fixed to 'computop' internally).

Options — ComputopGooglePayOptions

Based on GooglePayOptions with gateway removed ('computop' is always used internally).

Required

Field	Type	Description
totalAmount	number	Amount in minor units.
currencyCode	string	ISO 4217 uppercase currency code.
gatewayMerchantId	string	Merchant ID at Computop.
countryCode	string	ISO 3166-1 alpha-2 merchant 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.

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'.

Locale: Computop Google Pay auto-detects the locale from the browser — no locale parameter is needed.

Example

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

const buttons = CollanaPay.ExpressButtons({
  providers: [
    {
      providerProtocolType: 'Computop',
      paymentMethodType: 'GooglePay',
      container: '#computop-googlepay-container',
      style: {
        buttonColor: 'black',
        buttonType: 'buy',
        buttonSizeMode: 'fill',
      },
      options: {
        totalAmount: 19300,       // €193.00
        currencyCode: 'EUR',
        countryCode: 'DE',
        gatewayMerchantId: 'mac_test',
        merchantName: 'My Shop',
      },
    },
  ],

  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('Computop Google Pay cancelled', identity);
  },

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

buttons.render();

---

ApplePay

Provider key: Computop:ApplePay

Renders: an Apple Pay button via the Computop gateway using the W3C Payment Request API.

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. See PSP Setup below for domain registration requirements.

Options — ComputopApplePayOptions

Identical to ApplePayOptions. All fields are fully configurable.

Required

Field	Type	Description
totalAmount	number	Amount in minor units.
currencyCode	string	ISO 4217 currency code.
countryCode	string	ISO 3166-1 alpha-2 merchant country code. Use 'Unknown' to omit the country code from the provider request.
merchantIdentifier	string	Apple Pay merchant identifier.
merchantDisplayName	string	Displayed in the Apple Pay sheet.

Optional

Field	Type	Description
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 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:

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="computop-applepay-container"></div>

{
  providerProtocolType: 'Computop',
  paymentMethodType: 'ApplePay',
  container: '#computop-applepay-container',
  style: { buttonstyle: 'black', type: 'buy' },
  options: {
    totalAmount: 19300,
    currencyCode: 'EUR',
    countryCode: 'DE',
    merchantIdentifier: 'merchant.com.myshop',
    merchantDisplayName: 'My Shop',
    supportedShippingCountries: ['DE', 'AT', 'CH'],   // restrict to DACH; omit for all countries
  },
}

PSP Setup

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

1. Register and validate the domain with Computop

Register and validate your shop domain through Computop. See Computop's Apple Pay documentation for instructions.

2. Register the domain in your collana pay provider account

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