Apple Pay UI - Seamless Integration

class ApplePayIntegration {
  constructor(config) {
    this.merchantId = config.merchantId;
    this.merchantKey = config.merchantKey;
    this.merchantName = config.merchantName;
    this.version = 14;
  }

  async initialize() {
    // Step 1: Check if SDK is loaded
    if (!window.ApplePaySession) {
      console.log("Apple Pay SDK not available");
      return false;
    }

    // Step 2: Check capabilities
    if (!ApplePaySession.canMakePayments()) {
      console.log("Apple Pay not supported on this device");
      return false;
    }

    try {
      const capabilities = await ApplePaySession.applePayCapabilities(this.merchantId);
      return capabilities.paymentCredentialStatus !== "applePayUnsupported";
    } catch (error) {
      console.error("Failed to check capabilities:", error);
      return false;
    }
  }

  startPayment(amount, txnId, options = {}) {
    // Step 3: Create payment request
    const paymentRequest = {
      countryCode: options.countryCode || "IN",
      currencyCode: options.currencyCode || "INR",
      supportedNetworks: ["visa", "masterCard", "amex"],
      merchantCapabilities: ["supports3DS"],
      total: {
        label: this.merchantName,
        amount: amount.toString(),
      },
    };

    // Step 4: Initialize session
    const session = new ApplePaySession(this.version, paymentRequest);

    // Step 5: Handle merchant validation
    session.onvalidatemerchant = async (event) => {
      try {
        const merchantSession = await this.validateMerchant(
          event.validationURL,
          txnId
        );
        session.completeMerchantValidation(merchantSession);
      } catch (error) {
        console.error("Merchant validation failed:", error);
        session.completePayment(ApplePaySession.STATUS_FAILURE);
        options.onError?.(error);
      }
    };

    // Step 6: Handle payment authorization
    session.onpaymentauthorized = async (event) => {
      try {
        const result = await this.processPayment(event.payment.token, txnId);
        
        if (result.status === "success") {
          session.completePayment(ApplePaySession.STATUS_SUCCESS);
          options.onSuccess?.(result);
        } else {
          session.completePayment(ApplePaySession.STATUS_FAILURE);
          options.onError?.(new Error(result.error_Message));
        }
      } catch (error) {
        session.completePayment(ApplePaySession.STATUS_FAILURE);
        options.onError?.(error);
      }
    };

    // Step 7: Handle cancellation
    session.oncancel = () => {
      console.log("Payment cancelled");
      options.onCancel?.();
    };

    // Start the session
    session.begin();
  }

  async validateMerchant(validationURL, txnId) {
    const response = await fetch("/api/apple-pay/validate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        validationURL,
        merchantKey: this.merchantKey,
        txnId,
      }),
    });

    const data = await response.json();
    if (!data.result) throw new Error("Invalid merchant session");
    return data.result;
  }

  async processPayment(token, txnId) {
    const response = await fetch("/api/apple-pay/process", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        key: this.merchantKey,
        authentication_info: JSON.stringify(token),
        txnid: txnId,
      }),
    });

    return response.json();
  }
}

// Usage
const applePay = new ApplePayIntegration({
  merchantId: "merchant.com.example",
  merchantKey: "your_payu_merchant_key",
  merchantName: "Your Store Name",
});

document.getElementById("apple-pay-button").addEventListener("click", async () => {
  const isAvailable = await applePay.initialize();
  
  if (isAvailable) {
    applePay.startPayment("100.00", "txn_" + Date.now(), {
      onSuccess: (result) => {
        window.location.href = "/order-confirmation?id=" + result.txnid;
      },
      onError: (error) => {
        alert("Payment failed: " + error.message);
      },
      onCancel: () => {
        console.log("User cancelled payment");
      },
    });
  } else {
    alert("Apple Pay is not available on this device");
  }
});