Apply Pay Payment


<button id="apple-pay-btn" style="display:none;">
  <svg width="40" height="16" viewBox="0 0 40 16" style="vertical-align:middle;margin-right:8px;">
    <path d="M9.5 4.2c-1.1 0-2 .9-2.2 2.1-2 0-3.6 1.6-3.6 3.5 0 2.4 2 3.8 3.9 3.8.1 0 .2 0 .3-.1v-2.4c0-.1-.1-.1-.2-.1h-.1c-1 0-1.7-.6-1.7-1.5 0-1.2.8-1.9 1.9-1.9h.2V7.2h.1c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7h-.8c-1.1 0-2 .9-2 2v1.2c0 .4.3.7.7.7h.2v2.4c0 .5.4.9.9.9h2.2c.5 0 .9-.4.9-.9V8.1h-.1c-.4 0-.7-.3-.7-.7v-1c0-.4.3-.7.7-.7h.1V4.8c0-.3-.3-.6-.6-.6z" fill="#000"/>
    <path d="M15.5 4.2c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.1-2.5-2.5-2.5zm0 3.9c-.8 0-1.4-.6-1.4-1.4s.6-1.4 1.4-1.4 1.4.6 1.4 1.4-.6 1.4-1.4 1.4z" fill="#000"/>
    <path d="M23.3 4.2c-1.1 0-2 .9-2.2 2.1-2 0-3.6 1.6-3.6 3.5 0 2.4 2 3.8 3.9 3.8.1 0 .2 0 .3-.1v-2.4c0-.1-.1-.1-.2-.1h-.1c-1 0-1.7-.6-1.7-1.5 0-1.2.8-1.9 1.9-1.9h.2V7.2h.1c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7h-.8c-1.1 0-2 .9-2 2v1.2c0 .4.3.7.7.7h.2v2.4c0 .5.4.9.9.9h2.2c.5 0 .9-.4.9-.9V8.1h-.1c-.4 0-.7-.3-.7-.7v-1c0-.4.3-.7.7-.7h.1V4.8c0-.3-.3-.6-.6-.6z" fill="#000"/>
    <path d="M32.8 6.5c.4 0 .7-.3.7-.7s-.3-.7-.7-.7h-1.8c-.4 0-.7.3-.7.7v6.3c0 .4.3.7.7.7h1.8c.4 0 .7-.3.7-.7s-.3-.7-.7-.7h-1.1V9.3h1.1c.4 0 .7-.3.7-.7s-.3-.7-.7-.7h-1.1V7.2h1.1z" fill="#000"/>
  </svg>
  <span>Pay</span>
</button>

<style>
#apple-pay-btn {
  display: none;
  width: 200px;
  height: 44px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  padding: 0 16px;
  box-sizing: border-box;
  transition: opacity 0.2s;
}

#apple-pay-btn:hover:not(:disabled) {
  opacity: 0.9;
}

#apple-pay-btn:active:not(:disabled) {
  opacity: 0.8;
}

#apple-pay-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#apple-pay-btn svg path {
  fill: #fff;
}
</style>

<script>
(function() {
  'use strict';

  const applePayBtn = document.getElementById('apple-pay-btn');

  if (!window.ApplePaySession || !ApplePaySession.canMakePayments()) {
    applePayBtn.style.display = 'none';
    return;
  }

  if (ApplePaySession.supportsVersion(3)) {
    applePayBtn.style.display = 'inline-flex';
    applePayBtn.style.alignItems = 'center';
    applePayBtn.style.justifyContent = 'center';
  } else {
    applePayBtn.style.display = 'none';
    return;
  }

  applePayBtn.onclick = function () {
    if (applePayBtn.disabled) {
      return;
    }

    applePayBtn.disabled = true;

    const paymentRequest = {
      countryCode: 'AE',
      currencyCode: 'AED',
      total: {
        label: 'BMAV Shop',
        amount: '98.00'
      },
      supportedNetworks: ['visa', 'masterCard', 'amex'],
      merchantCapabilities: ['supports3DS']
    };

    let session = null;

    try {
      session = new ApplePaySession(3, paymentRequest);
    } catch (e) {
      applePayBtn.disabled = false;
      alert('Apple Pay session failed to initialize');
      return;
    }

    session.onvalidatemerchant = function (event) {
      if (!event || !event.validationURL) {
        applePayBtn.disabled = false;
        session.abort();
        alert('Invalid validation request');
        return;
      }

      fetch('/applepay-validate.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ validationURL: event.validationURL })
      })
      .then(res => {
        if (!res.ok) {
          throw new Error('Validation request failed');
        }
        return res.json();
      })
      .then(data => {
        if (!data) {
          throw new Error('Invalid validation response');
        }
        session.completeMerchantValidation(data);
      })
      .catch(error => {
        applePayBtn.disabled = false;
        session.abort();
        alert('Merchant validation failed. Please try again.');
        console.error('Validation error:', error);
      });
    };

    session.onpaymentauthorized = function (event) {
      if (!event || !event.payment || !event.payment.token) {
        applePayBtn.disabled = false;
        session.completePayment(ApplePaySession.STATUS_FAILURE);
        alert('Invalid payment data');
        return;
      }

      fetch('/applepay-pay.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          apple_pay_token: event.payment.token
        })
      })
      .then(res => {
        if (!res.ok) {
          throw new Error('Payment request failed');
        }
        return res.json();
      })
      .then(result => {
        console.log(result);
        if (result && result.success) {
          session.completePayment(ApplePaySession.STATUS_SUCCESS);
          setTimeout(function() {
            window.location.href = "/thank-you.html";
          }, 500);
        } else {
          applePayBtn.disabled = false;
          session.completePayment(ApplePaySession.STATUS_FAILURE);
          alert(result && result.error ? result.error : 'Payment failed');
        }
      })
      .catch(error => {
        applePayBtn.disabled = false;
        session.completePayment(ApplePaySession.STATUS_FAILURE);
        alert('Payment processing error. Please try again.');
        console.error('Payment error:', error);
      });
    };

    session.oncancel = function() {
      applePayBtn.disabled = false;
    };

    session.onerror = function(event) {
      applePayBtn.disabled = false;
      alert('Apple Pay error occurred');
      console.error('Session error:', event);
    };

    try {
      session.begin();
    } catch (e) {
      applePayBtn.disabled = false;
      alert('Failed to start Apple Pay session');
      console.error('Begin error:', e);
    }
  };
})();
</script>