Apple Pay

The Apple:ApplePay provider renders an Apple Pay button using the W3C Payment Request API with an Apple Pay payment method.

Requirement: Apple Pay only works on pages served over HTTPS with a validated Apple Pay merchant domain. See Known Constraints — Apple Pay Requires HTTPS.

Options — ApplePayOptions

Field	Type	Required	Default	Description
totalAmount	number	Yes	—	Amount in minor units (e.g. 19300 = €193.00)
currencyCode	string	Yes	—	ISO 4217 currency code
countryCode	string	Yes	—	ISO 3166-1 alpha-2 merchant country code
merchantIdentifier	string	Yes	—	Apple Pay merchant identifier from Apple Developer account
merchantDisplayName	string	Yes	—	Displayed as the payment line item label in the sheet
validateMerchantUrl	string	Yes	—	Your backend URL for Apple Pay merchant session validation
supportedNetworks	string[]	No	['amex','discover','masterCard','visa']	Accepted card networks
billingAddressRequired	boolean	No	false	Request billing address
shippingAddressRequired	boolean	No	false	Request shipping address
requestPayerName	boolean	No	true	Request payer's name
requestPayerEmail	boolean	No	true	Request payer's email
requestPayerPhone	boolean	No	true	Request payer's phone number

Merchant Validation

Your validateMerchantUrl endpoint receives a POST with { validationUrl: string } and must respond with an Apple Pay merchant session object. The SDK passes this to event.complete() on the Payment Request.

Style — ApplePayStyle

Field	Type	Description
buttonstyle	'black' | 'white' | 'white-outline'	Button color theme
type	'buy' | 'plain' | 'checkout'	Label variant
locale	string	BCP 47 locale tag for button text (e.g. 'en-US', 'de-DE')

Example

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

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

const buttons = ExpressButtons({
  providers: [
    {
      providerProtocolType: 'Apple',
      paymentMethodType: 'ApplePay',
      container: '#applepay-container',
      style: {
        buttonstyle: 'black',
        type: 'buy',
        locale: 'en-US',
      },
      options: {
        totalAmount: 19300,       // €193.00
        currencyCode: 'EUR',
        countryCode: 'DE',
        merchantIdentifier: 'merchant.com.myshop',
        merchantDisplayName: 'My Shop',
        validateMerchantUrl: 'https://api.myshop.com/applepay/validate-merchant',
        supportedNetworks: ['masterCard', 'visa'],
        billingAddressRequired: true,
        requestPayerEmail: true,
      },
    },
  ],

  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 };
  },

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

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

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

buttons.render();