if (window.ApplePaySession) {
  // Safe to initialise the Comcarde Apple Pay module
}

<script src="https://sandbox-assets.comcarde.com/web/v2/js/apple-pay.min.js"></script>

<script src="https://assets.comcarde.com/web/v2/js/apple-pay.min.js"></script>

<div id="apple-pay-button" onclick="processApplePayPayment()" hidden></div>

comcarde.client.create(
  {
    authorization: clientApiKey, // Your client API key
  },
  function (clientErr, clientInstance) {

    if (clientErr) {
      console.error('Comcarde client error:', clientErr);
      return;
    }

    // Guard: only proceed in browsers that support Apple Pay
    if (!window.ApplePaySession) {
      return;
    }

    comcarde.applePay
      .create({
        client: clientInstance,
        sdkVersion: 14, // The Apple SDK version to use for the payment session
        button: {
          container: 'apple-pay-button', // Must match the id of your placeholder element
          style: 'black',
          type: 'buy',
        },
      })
      .then(function (applePayClientModule) {

        // This function is called when the customer taps the Apple Pay button.
        // It must be assigned here so the onclick handler on the placeholder can reach it.
        window.processApplePayPayment = function () {

          applePayClientModule
            .startSession(
              {
                label: 'Example Industries Ltd',  // Your merchant or trading name
                type: 'final',                    // Always "final"
                amount: '10.00',                  // Total charge as a decimal string
                currencyCode: 'GBP',              // ISO 4217 code — defaults to retail channel config if omitted
              },
              function (comcardeSingleUseToken, applePaySession) {
                // ─── onpaymentauthorized ─────────────────────────────────────
                // The customer has authenticated with Face ID / Touch ID.
                // You now have a single-use token to authorise the payment server-side.
                //
                // IMPORTANT: You must call applePaySession.completePayment() within
                // 30 seconds or Apple will dismiss the sheet with a failure message.
                // See "Completing the payment" below for full guidance.

                sendTokenToServer(comcardeSingleUseToken)
                  .then(function (serverSuccess) {
                    applePaySession.completePayment(
                      serverSuccess
                        ? ApplePaySession.STATUS_SUCCESS
                        : ApplePaySession.STATUS_FAILURE
                    );
                  })
                  .catch(function () {
                    // Always call completePayment — even on error — to close the sheet
                    applePaySession.completePayment(ApplePaySession.STATUS_FAILURE);
                  });
              }
            )
            .then(function (applePayPaymentRequest) {
              applePayClientModule
                .session(applePayPaymentRequest)
                .then(function (applePaySession) {

                  applePaySession.onerror = function (error) {
                    // Called when the Apple Pay session encounters an unrecoverable error.
                    // Log the error and surface a fallback payment option to the customer.
                    console.error('Apple Pay session error:', error);
                  };

                  applePaySession.oncancel = function (event) {
                    // Called when the customer dismisses the Apple Pay sheet without paying.
                    // No completePayment() call is needed — the session is already closed.
                    // Use this to reset your UI or log the abandonment.
                    console.warn('Apple Pay session cancelled:', event);
                  };

                })
                .catch(function (sessionError) {
                  console.error('Failed to create Apple Pay session:', sessionError);
                });
            })
            .catch(function (startSessionError) {
              console.error('startSession error:', startSessionError);
            });
        };

        document.getElementById('apple-pay-button').removeAttribute('hidden');

      })
      .catch(function (createError) {
        console.error('applePay.create error:', createError);
      });
  }
);

// On success
applePaySession.completePayment(ApplePaySession.STATUS_SUCCESS);

// On failure or error
applePaySession.completePayment(ApplePaySession.STATUS_FAILURE);

function sendTokenToServer(token) {
  // Race the server call against a 25-second client-side timeout.
  // The 5-second buffer gives you headroom before Apple's 30-second hard cutoff.
  var timeoutPromise = new Promise(function (_, reject) {
    setTimeout(function () {
      reject(new Error('Payment authorisation timed out'));
    }, 25000);
  });
  
	//Send the token to your own server
  var serverCall = fetch('/token/send', { 
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token: token }),
  }).then(function (response) {
    return response.ok;
  });

  return Promise.race([serverCall, timeoutPromise]);
}

function (comcardeSingleUseToken, applePaySession) {
  sendTokenToServer(comcardeSingleUseToken)
    .then(function (serverSuccess) {
      applePaySession.completePayment(
        serverSuccess
          ? ApplePaySession.STATUS_SUCCESS
          : ApplePaySession.STATUS_FAILURE
      );
    })
    .catch(function (err) {
      // Timeout or network failure — always close the sheet with a failure status.
      // You may still want to verify the payment outcome server-side after this point.
      console.error('Payment authorisation error:', err);
      applePaySession.completePayment(applePaySession.STATUS_FAILURE);
    });
}

applePaySession.onerror = function (error) {
  console.error('Apple Pay session error:', error);
  // Show a fallback payment option
};

applePaySession.oncancel = function (event) {
  console.warn('Apple Pay cancelled by customer:', event);
  // Reset UI, re-enable the checkout button, etc.
};

comcarde.applePay.create({
  client: clientInstance,
  sdkVersion: 14,
  button: {
    container: 'apple-pay-button',
    style: 'black',
    type: 'buy',
  },
});

applePayClientModule.startSession(
  {
    label: 'Example Industries Ltd',
    type: 'final',
    amount: '10.00',
    currencyCode: 'GBP',
  },
  function (comcardeSingleUseToken, applePaySession) {
    // Handle the authorised payment
  }
);