تكامل Apple Pay للويب: دليل التنفيذ الكامل بـ JavaScript و Node.js

جدول المحتويات

1. نظرة عامة على Apple Pay على الويب
2. المتطلبات الأساسية والإعداد
3. تدفق التحقق من التاجر
4. تنفيذ JavaScript
5. المعالجة من جانب الخادم
6. إدارة الشهادات

نظرة عامة على Apple Pay على الويب

يسمح Apple Pay على الويب للعملاء بالدفع باستخدام Apple Pay مباشرة في متصفحهم. يعمل على:

• Safari على macOS و iOS و iPadOS
• Chrome/Edge/Firefox على iOS 16+ (عبر Apple Pay JS API)

الفوائد الرئيسية:

• دفع بدون احتكاك - مصادقة Face ID/Touch ID
• بدون إدخال بطاقة - معلومات الدفع من Apple Wallet
• الترميز - رموز آمنة للاستخدام الواحد
• الثقة - سمعة Apple الأمنية

المتطلبات الأساسية والإعداد

المتطلبات

1. حساب Apple Developer (99$/سنة)
2. معرف التاجر - مسجل لدى Apple
3. شهادة معالجة الدفع - لفك تشفير رموز الدفع
4. شهادة هوية التاجر - للتحقق من التاجر
5. التحقق من النطاق - نطاقك موثق لدى Apple

تنفيذ JavaScript

export function ApplePayButton({ amount, currency, orderId, onSuccess, onError }) {
  const [isAvailable, setIsAvailable] = useState(false);

  useEffect(() => {
    if (window.ApplePaySession && ApplePaySession.canMakePayments()) {
      setIsAvailable(true);
    }
  }, []);

  const handleApplePay = async () => {
    const paymentRequest = {
      countryCode: 'US',
      currencyCode: currency,
      supportedNetworks: ['visa', 'masterCard', 'amex'],
      merchantCapabilities: ['supports3DS'],
      total: { label: 'شركتك', amount: amount.toFixed(2) },
    };

    const session = new ApplePaySession(3, paymentRequest);

    session.onvalidatemerchant = async (event) => {
      const response = await fetch('/api/apple-pay/validate-merchant', {
        method: 'POST',
        body: JSON.stringify({ validationURL: event.validationURL }),
      });
      const merchantSession = await response.json();
      session.completeMerchantValidation(merchantSession);
    };

    session.onpaymentauthorized = async (event) => {
      const response = await fetch('/api/apple-pay/process-payment', {
        method: 'POST',
        body: JSON.stringify({ token: event.payment.token, orderId }),
      });
      const result = await response.json();
      
      if (result.success) {
        session.completePayment(ApplePaySession.STATUS_SUCCESS);
        onSuccess(result);
      } else {
        session.completePayment(ApplePaySession.STATUS_FAILURE);
        onError(new Error(result.message));
      }
    };

    session.begin();
  };

  if (!isAvailable) return null;

  return <button onClick={handleApplePay} className="apple-pay-button" />;
}

المعالجة من جانب الخادم

التحقق من التاجر

export async function validateMerchant(validationURL: string) {
  const postData = JSON.stringify({
    merchantIdentifier: MERCHANT_IDENTIFIER,
    domainName: MERCHANT_DOMAIN,
    displayName: 'شركتك',
  });

  // إرسال الطلب لـ Apple مع شهادة التاجر
  const merchantSession = await sendToApple(validationURL, postData, {
    cert: merchantIdentityCert,
    key: merchantIdentityKey,
  });

  return merchantSession;
}

إدارة الشهادات

class CertificateManager {
  loadCertificate(name: string) {
    const cert = fs.readFileSync(`./certs/${name}.pem`);
    const key = fs.readFileSync(`./certs/${name}.key`);
    
    // تحقق من انتهاء الصلاحية
    const expiresAt = this.parseExpiration(cert);
    const daysUntilExpiry = (expiresAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24);
    
    if (daysUntilExpiry < 30) {
      console.warn(`الشهادة ${name} تنتهي خلال ${daysUntilExpiry.toFixed(0)} يوم`);
    }

    return { cert, key, expiresAt };
  }
}

الخلاصة

تكامل Apple Pay على الويب يتطلب:

1. إدارة الشهادات - إعداد PKI والتدوير
2. التحقق من التاجر - اتصال خادم إلى Apple
3. معالجة الرمز - إرسال لمعالج الدفع
4. توافق المتصفح - التعامل مع فحوصات التوفر

Apple Pay يحسن بشكل كبير تحويل الدفع على أجهزة Apple. الإعداد معقد، لكن تحسين تجربة المستخدم يستحق ذلك.