Apple Pay

This documentation is intended for merchants integrating ePay Hosted Fields directly. If you are using the ePay Payment Window, no additional setup is required for Apple Pay.

We recommend that all merchants use the Quick Setup guide, as it reduces the maintenance burden on your integration. By using Quick Setup, ePay can automatically apply updates to your integration for any future changes to Apple’s protocols.

Quick Setup

To integrate Apple Pay, make the following changes to your implementation:

// Add Apple JS SDK
<script src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"></script>

// Added ApplePay button
<apple-pay-button
  buttonstyle="black"
  type="buy"
  onclick="epay.createApplePayTransaction()"
></apple-pay-button>

Advanced Setup

If you have any special needs, like tracking, regarding ApplePay transactions and the in-app experience you can modify the payment flow by manually creating the ApplePay payment session.

// Only call this function when the customer clicks on the pay button
function beginApplePayPayment() {
  // Use the standard payment request by ePay that automatically adapts
  // to your payment session data and merchant capabilities.
  let sessionData = epay.createApplePayRequest();

  // Or create the ApplePay data yourself.
  // Ensure amount and currency is the exact same as sent to ePay.
  let sessionData = {
    countryCode: "DK",
    currencyCode: "DKK",
    total: {
      label: "Køb hos XYZ",
      amount: 19900,
    },
    supportedNetworks: ["visa", "masterCard", "maestro"],
    merchantCapabilities: ["supports3DS"],
  };

  const session = new ApplePaySession(14, sessionData);

  // The customer has opened the app and requires merchant validation with Apple
  session.onvalidatemerchant = (event) => {
    epay.validateApplePayMerchant(session, event); // Required step by ePay
  };

  // Customer authorized the payment in-app
  session.onpaymentauthorized = (event) => {
    epay.authorizeApplePayTransaction(session, event); // Required step by ePay
  };

  // Customer dismissed the payment UI
  session.oncancel = (event) => {
    console.log("customer dismissed payment UI in-app");
  };

  session.begin();
}

<apple-pay-button
  buttonstyle="black"
  type="buy"
  onclick="beginApplePayPayment()"
></apple-pay-button>