strapi-plugin-payone-provider 1.5.8 → 1.6.0

package/admin/src/pages/App/components/{ApplePayButton.js → ApplePayButton.jsx}

@@ -2,17 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { Box, Flex, Typography } from "@strapi/design-system";
 import { request } from "@strapi/helper-plugin";
 import pluginId from "../../../pluginId";
-import { DEFAULT_APPLE_PAY_CONFIG } from "../../utils/applePayConstants";
-
-/**
- * Apple Pay Button Component using Payment Request API
- * Based on Apple Pay documentation:
- * https://developer.apple.com/documentation/applepayontheweb/creating-an-apple-pay-session
- * https://developer.apple.com/documentation/applepayontheweb/displaying-apple-pay-buttons-using-css
- * 
- * Supports Payment Request API (works in Chrome, Edge, Safari, etc.)
- * and falls back to Apple Pay JS API if needed
- */
+
 const ApplePayButton = ({
   amount,
   currency = "EUR",
@@ -37,27 +27,15 @@ const ApplePayButton = ({
   const [isAvailable, setIsAvailable] = useState(false);
   const [errorMessage, setErrorMessage] = useState(null);
   const buttonContainerRef = useRef(null);
-  const paymentRequestRef = useRef(null);
 
   const checkApplePayAvailability = async () => {
     try {
-      console.log("[Apple Pay] Checking availability...");
-      
-      // Check secure context using browser's native property
-      // This is the most reliable way to check if we're in a secure context
       const isSecureContext = typeof window !== 'undefined' && window.isSecureContext;
       const protocol = typeof window !== 'undefined' ? window.location.protocol : '';
       const hostname = typeof window !== 'undefined' ? window.location.hostname : '';
       const isLocalhost = hostname === 'localhost' || hostname === '127.0.0.1';
-
-      // For Apple Pay, we need a secure context (HTTPS or localhost)
-      // window.isSecureContext is true for:
-      // - HTTPS pages
-      // - localhost (even on HTTP)
-      // - 127.0.0.1 (even on HTTP)
-      // - file:// URLs
       const isSecure = isSecureContext || isLocalhost;
-      
+
       console.log("[Apple Pay] Secure context check:", {
         isSecureContext: isSecureContext,
         protocol: protocol,
@@ -67,7 +45,6 @@ const ApplePayButton = ({
         fullUrl: typeof window !== 'undefined' ? window.location.href : ''
       });
 
-      // If not secure, log detailed information
       if (!isSecure) {
         console.error("[Apple Pay] NOT in secure context!", {
           isSecureContext: isSecureContext,
@@ -78,13 +55,9 @@ const ApplePayButton = ({
           reason: !isSecureContext ? "window.isSecureContext is false" : "Unknown"
         });
       }
-      
-      // First, check if Payment Request API is available
-      // Payment Request API works on HTTP too, but Apple Pay JS API requires HTTPS
+
       if (typeof window === 'undefined' || !window.PaymentRequest) {
         console.log("[Apple Pay] Payment Request API not available");
-        
-        // Fallback: Check Apple Pay JS API (for Safari, requires HTTPS)
         if (typeof window !== 'undefined' && window.ApplePaySession && isSecure) {
           try {
             const canMakePayments = ApplePaySession.canMakePayments();
@@ -95,31 +68,28 @@ const ApplePayButton = ({
             return { available: false, method: null, error: 'insecure_context' };
           }
         }
-        
+
         if (!isSecure && typeof window !== 'undefined' && window.ApplePaySession) {
           console.warn("[Apple Pay] Apple Pay JS API requires HTTPS. Using Payment Request API fallback.");
         }
-        
+
         console.log("[Apple Pay] No Apple Pay support found");
         return { available: false, method: null };
       }
 
       console.log("[Apple Pay] Payment Request API available, checking Apple Pay support...");
 
-      // Check if Apple Pay payment method is supported
       const applePayMethod = {
         supportedMethods: "https://apple.com/apple-pay",
         data: {
           version: 3,
-          merchantIdentifier: merchantIdentifier || settings?.merchantIdentifier || settings?.mid || "merchant.com.payone.test",
+          merchantIdentifier: settings?.mid,
           merchantCapabilities: merchantCapabilities,
           supportedNetworks: supportedNetworks,
           countryCode: countryCode
         }
       };
 
-      // Create a test payment request
-      // Payment Request API works on HTTP too, but Apple Pay may require HTTPS
       let testRequest;
       try {
         testRequest = new PaymentRequest(
@@ -147,17 +117,15 @@ const ApplePayButton = ({
         return { available: false, method: null };
       }
 
-      // Check if can make payment
       if (testRequest.canMakePayment) {
         try {
           const canPay = await testRequest.canMakePayment();
           console.log("[Apple Pay] canMakePayment result:", canPay);
-          
+
           if (canPay) {
             return { available: true, method: 'paymentRequest' };
           }
-          
-          // If PaymentRequest says no, try Apple Pay JS API as fallback (only on HTTPS)
+
           if (typeof window !== 'undefined' && window.ApplePaySession && isSecure) {
             try {
               const canMakePaymentsJS = ApplePaySession.canMakePayments();
@@ -165,24 +133,21 @@ const ApplePayButton = ({
               return { available: canMakePaymentsJS, method: 'applePayJS' };
             } catch (e) {
               console.error("[Apple Pay] Apple Pay JS API error:", e.message);
-              // If it's insecure context error, Payment Request API might still work
               if (e.message && e.message.includes('insecure')) {
-                // Payment Request API might work even on HTTP
                 return { available: false, method: null, error: 'insecure_context' };
               }
             }
           }
-          
+
           return { available: false, method: null };
         } catch (e) {
           console.error("[Apple Pay] Error checking canMakePayment:", e);
-          
-          // If it's insecure context error, we can't use Apple Pay JS API
+
           if (e.message && e.message.includes('insecure')) {
             console.warn("[Apple Pay] Insecure context detected. Apple Pay requires HTTPS.");
             return { available: false, method: null, error: 'insecure_context' };
           }
-          
+
           // For other errors, try Apple Pay JS API as fallback (only on HTTPS)
           if (typeof window !== 'undefined' && window.ApplePaySession && isSecure) {
             try {
@@ -193,18 +158,16 @@ const ApplePayButton = ({
               return { available: false, method: null };
             }
           }
-          
+
           return { available: false, method: null };
         }
       }
 
-      // If canMakePayment is not available, check secure context again
-      // Re-check secure context to ensure we have the latest state
       const isSecureContextFinal = typeof window !== 'undefined' && window.isSecureContext;
       const hostnameFinal = typeof window !== 'undefined' ? window.location.hostname : '';
       const isLocalhostFinal = hostnameFinal === 'localhost' || hostnameFinal === '127.0.0.1';
       const isSecureFinal = isSecureContextFinal || isLocalhostFinal;
-      
+
       if (isSecureFinal) {
         console.log("[Apple Pay] canMakePayment not available, assuming support (secure context)");
         return { available: true, method: 'paymentRequest' };
@@ -219,20 +182,17 @@ const ApplePayButton = ({
       }
     } catch (error) {
       console.error("[Apple Pay] Error checking availability:", error);
-      
-      // Check if it's insecure context error
+
       if (error.message && error.message.includes('insecure')) {
         console.warn("[Apple Pay] Insecure context - Apple Pay requires HTTPS");
         return { available: false, method: null, error: 'insecure_context' };
       }
-      
-      // Fallback: Try Apple Pay JS API (only on HTTPS)
-      // Re-check secure context
+
       const isSecureContextFallback = typeof window !== 'undefined' && window.isSecureContext;
       const hostnameFallback = typeof window !== 'undefined' ? window.location.hostname : '';
       const isLocalhostFallback = hostnameFallback === 'localhost' || hostnameFallback === '127.0.0.1';
       const isSecureFallback = isSecureContextFallback || isLocalhostFallback;
-      
+
       if (typeof window !== 'undefined' && window.ApplePaySession && isSecureFallback) {
         try {
           const canMakePayments = ApplePaySession.canMakePayments();
@@ -244,16 +204,16 @@ const ApplePayButton = ({
           }
         }
       }
-      
+
       return { available: false, method: null };
     }
   };
 
   useEffect(() => {
     const scriptUrl = "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js";
-    
+
     console.log("[Apple Pay] Loading Apple Pay SDK script...");
-    
+
     if (document.querySelector(`script[src="${scriptUrl}"]`)) {
       console.log("[Apple Pay] Script already loaded");
       // Script already loaded, check if it's ready
@@ -270,20 +230,20 @@ const ApplePayButton = ({
     script.src = scriptUrl;
     script.crossOrigin = "anonymous";
     script.async = true;
-    
+
     script.onload = () => {
       console.log("[Apple Pay] SDK script loaded successfully");
       setTimeout(() => {
         initializeButton();
       }, 500);
     };
-    
+
     script.onerror = (error) => {
       console.error("[Apple Pay] Failed to load SDK script:", error);
       setIsLoading(false);
       setIsAvailable(false);
       setErrorMessage("Failed to load Apple Pay SDK. Please check Content Security Policy settings.");
-      
+
       // Even if script fails, try to use Payment Request API
       console.log("[Apple Pay] Trying Payment Request API as fallback...");
       setTimeout(() => {
@@ -306,22 +266,22 @@ const ApplePayButton = ({
   const initializeButton = async () => {
     try {
       console.log("[Apple Pay] Initializing button...");
-      
-      const isSecure = typeof window !== 'undefined' && 
-                      (window.location.protocol === 'https:' || 
-                       window.location.hostname === 'localhost' || 
-                       window.location.hostname === '127.0.0.1');
-      
+
+      const isSecure = typeof window !== 'undefined' &&
+        (window.location.protocol === 'https:' ||
+          window.location.hostname === 'localhost' ||
+          window.location.hostname === '127.0.0.1');
+
       console.log("[Apple Pay] Secure context check:", {
         protocol: window.location?.protocol,
         hostname: window.location?.hostname,
         isSecure: isSecure
       });
-      
-      const isLocalhost = typeof window !== 'undefined' && 
-                         (window.location.hostname === 'localhost' || 
-                          window.location.hostname === '127.0.0.1');
-      
+
+      const isLocalhost = typeof window !== 'undefined' &&
+        (window.location.hostname === 'localhost' ||
+          window.location.hostname === '127.0.0.1');
+
       if (!isSecure && !isLocalhost && window.location?.protocol === 'http:') {
         const errorMsg = "Apple Pay requires HTTPS. Please access this page via HTTPS (https://yourdomain.com) instead of HTTP. Localhost (http://localhost) is allowed for development.";
         setErrorMessage(errorMsg);
@@ -331,7 +291,7 @@ const ApplePayButton = ({
         console.warn("[Apple Pay] Current URL:", window.location.href);
         return;
       }
-      
+
       // Log context information
       console.log("[Apple Pay] Context info:", {
         protocol: window.location?.protocol,
@@ -340,16 +300,16 @@ const ApplePayButton = ({
         isLocalhost: isLocalhost,
         fullUrl: window.location?.href
       });
-      
+
       // Check availability
       const availability = await checkApplePayAvailability();
       console.log("[Apple Pay] Availability check result:", availability);
-      
+
       setIsAvailable(availability.available);
-      
+
       if (!availability.available) {
         let errorMsg = "Apple Pay is not available on this device or browser.";
-        
+
         if (isLocalhost) {
           errorMsg = "Apple Pay is not available on localhost. Apple Pay requires a registered domain with HTTPS. " +
             "For testing, please use a production domain with HTTPS or test on a device with Safari (iOS/macOS). " +
@@ -366,7 +326,7 @@ const ApplePayButton = ({
         } else {
           errorMsg += " Please use Safari on iOS, macOS, or iPadOS, or a browser that supports Payment Request API (Chrome, Edge, Safari).";
         }
-        
+
         setErrorMessage(errorMsg);
         setIsLoading(false);
         console.warn("[Apple Pay] Not available:", errorMsg);
@@ -380,14 +340,14 @@ const ApplePayButton = ({
       console.error("[Apple Pay] Initialization error:", error);
       setIsLoading(false);
       setIsAvailable(false);
-      
+
       // Check for insecure context error
       if (error.message && error.message.includes('insecure')) {
         setErrorMessage("Apple Pay requires HTTPS. Please access this page via HTTPS (https://yourdomain.com) instead of HTTP. Localhost is allowed for development.");
       } else {
         setErrorMessage(error.message || "Failed to initialize Apple Pay");
       }
-      
+
       if (onError) {
         onError(error);
       }
@@ -406,11 +366,11 @@ const ApplePayButton = ({
     });
 
     // Check HTTPS requirement
-    const isSecure = typeof window !== 'undefined' && 
-                    (window.location.protocol === 'https:' || 
-                     window.location.hostname === 'localhost' || 
-                     window.location.hostname === '127.0.0.1');
-    
+    const isSecure = typeof window !== 'undefined' &&
+      (window.location.protocol === 'https:' ||
+        window.location.hostname === 'localhost' ||
+        window.location.hostname === '127.0.0.1');
+
     if (!isSecure && window.location?.protocol === 'http:') {
       const errorMsg = "Apple Pay requires HTTPS. Please access this page via HTTPS.";
       console.error("[Apple Pay]", errorMsg);
@@ -430,8 +390,8 @@ const ApplePayButton = ({
 
     try {
       const amountValue = (parseFloat(amount) / 100).toFixed(2);
-      const gatewayMerchantId = settings?.mid || settings?.portalid || '';
-      const merchantId = merchantIdentifier || gatewayMerchantId || "merchant.com.payone.test";
+      const gatewayMerchantId = settings?.mid;
+      const merchantId = gatewayMerchantId
 
       console.log("[Apple Pay] Starting payment request:", {
         amount: amountValue,
@@ -442,7 +402,6 @@ const ApplePayButton = ({
         merchantCapabilities
       });
 
-      // Define PaymentMethodData for Apple Pay
       const paymentMethodData = [{
         supportedMethods: "https://apple.com/apple-pay",
         data: {
@@ -496,16 +455,35 @@ const ApplePayButton = ({
           });
 
           merchantSessionPromise.then(session => {
-            console.log("[Apple Pay] Merchant session received:", {
-              hasMerchantIdentifier: !!session.merchantIdentifier,
-              merchantIdentifier: session.merchantIdentifier,
-              domainName: session.domainName,
-              displayName: session.displayName,
-              epochTimestamp: session.epochTimestamp,
-              expiresAt: session.expiresAt,
-              fullSession: session
-            });
-            
+            console.log("[Apple Pay] ========== MERCHANT SESSION RECEIVED ==========");
+            console.log("[Apple Pay] Full Merchant Session (JSON):", JSON.stringify(session, null, 2));
+            console.log("[Apple Pay] Session Type:", typeof session);
+            console.log("[Apple Pay] Is Object:", session instanceof Object);
+            console.log("[Apple Pay] Session Keys:", Object.keys(session || {}));
+            console.log("[Apple Pay] Session Keys Count:", Object.keys(session || {}).length);
+            console.log("[Apple Pay] Has Merchant Identifier:", !!session?.merchantIdentifier);
+            console.log("[Apple Pay] Merchant Identifier:", session?.merchantIdentifier);
+            console.log("[Apple Pay] Has Merchant Session Identifier:", !!session?.merchantSessionIdentifier);
+            console.log("[Apple Pay] Merchant Session Identifier:", session?.merchantSessionIdentifier);
+            console.log("[Apple Pay] Domain Name:", session?.domainName);
+            console.log("[Apple Pay] Display Name:", session?.displayName);
+            console.log("[Apple Pay] Epoch Timestamp:", session?.epochTimestamp);
+            console.log("[Apple Pay] Expires At:", session?.expiresAt);
+            console.log("[Apple Pay] Nonce:", session?.nonce);
+
+            // Log all properties
+            console.log("[Apple Pay] All Session Properties:");
+            if (session && typeof session === 'object') {
+              for (const [key, value] of Object.entries(session)) {
+                if (typeof value === 'string' && value.length > 200) {
+                  console.log(`[Apple Pay]   ${key}:`, value.substring(0, 200) + "... (truncated, length: " + value.length + ")");
+                } else {
+                  console.log(`[Apple Pay]   ${key}:`, value);
+                }
+              }
+            }
+            console.log("[Apple Pay] ==========================================");
+
             // Validate merchant session
             if (!session || (!session.merchantIdentifier && !session.merchantSessionIdentifier)) {
               console.error("[Apple Pay] Invalid merchant session - missing merchantIdentifier");
@@ -528,12 +506,12 @@ const ApplePayButton = ({
             stack: error.stack,
             response: error.response
           });
-          
+
           // Call onError to notify the user
           if (typeof onError === 'function') {
             onError(new Error(`Apple Pay merchant validation failed: ${error.message}. Please check your Payone Apple Pay configuration in PMI (CONFIGURATION → PAYMENT PORTALS → [Your Portal] → Apple Pay).`));
           }
-          
+
           // Complete with a rejected promise
           // This will cause Apple Pay to close the dialog, which is expected behavior
           // We cannot proceed without a valid merchant session from Payone
@@ -576,20 +554,20 @@ const ApplePayButton = ({
           message: error.message,
           stack: error.stack
         });
-        
+
         // Check if error is due to cancellation (user cancelled)
         // Payment Request API throws "AbortError" when user cancels
-        if (error.name === 'AbortError' || 
-            (error.message && (
-              error.message.includes('Cancelled') || 
-              error.message.includes('cancel') ||
-              error.message.includes('abort')
-            ))) {
+        if (error.name === 'AbortError' ||
+          (error.message && (
+            error.message.includes('Cancelled') ||
+            error.message.includes('cancel') ||
+            error.message.includes('abort')
+          ))) {
           console.log("[Apple Pay] User cancelled the payment");
           // Don't call onError for user cancellation
           return;
         }
-        
+
         // If it's a merchant validation error, log it specifically
         if (error.message && (
           error.message.includes('merchant') ||
@@ -617,11 +595,11 @@ const ApplePayButton = ({
 
       // Extract payment token
       const paymentToken = response.details?.paymentToken || response.details?.token;
-      
+
       if (!paymentToken) {
         console.error("[Apple Pay] Payment token is missing from response");
         try {
-        await response.complete("fail");
+          await response.complete("fail");
         } catch (completeError) {
           console.error("[Apple Pay] Error completing payment with fail:", completeError);
         }
@@ -663,11 +641,11 @@ const ApplePayButton = ({
           // The callback should set the token in state and return success immediately
           // It should NOT process the payment yet - that will happen when user clicks the button
           const callbackResult = onTokenReceived(tokenString, {
-          paymentToken: paymentToken,
-          billingContact: response.payerName || response.details?.billingContact,
-          shippingContact: response.shippingAddress || response.details?.shippingAddress,
-          shippingOption: response.shippingOption || response.details?.shippingOption
-        });
+            paymentToken: paymentToken,
+            billingContact: response.payerName || response.details?.billingContact,
+            shippingContact: response.shippingAddress || response.details?.shippingAddress,
+            shippingOption: response.shippingOption || response.details?.shippingOption
+          });
 
           // If callback returns a promise, wait for it to resolve or reject
           if (callbackResult && typeof callbackResult.then === 'function') {
@@ -754,7 +732,6 @@ const ApplePayButton = ({
     }
   };
 
-  // Validate merchant with Payone
   const validateMerchantWithPayone = async (validationURL, config) => {
     console.log("[Apple Pay] Validating merchant with Payone:", {
       validationURL,
@@ -779,29 +756,56 @@ const ApplePayButton = ({
         }
       });
 
-        console.log("[Apple Pay] Merchant session received from backend:", {
-          hasData: !!merchantSession.data,
-          merchantIdentifier: merchantSession.data?.merchantIdentifier,
-          hasError: !!merchantSession.error,
-          errorMessage: merchantSession.error?.message,
-          fullResponse: merchantSession
-        });
+      console.log("[Apple Pay] ========== BACKEND RESPONSE START ==========");
+      console.log("[Apple Pay] Full Backend Response:", JSON.stringify(merchantSession, null, 2));
+      console.log("[Apple Pay] Response Type:", typeof merchantSession);
+      console.log("[Apple Pay] Has Data:", !!merchantSession.data);
+      console.log("[Apple Pay] Has Error:", !!merchantSession.error);
+
+      if (merchantSession.data) {
+        console.log("[Apple Pay] Data Object:", merchantSession.data);
+        console.log("[Apple Pay] Data Type:", typeof merchantSession.data);
+        console.log("[Apple Pay] Data Keys:", Object.keys(merchantSession.data));
+        console.log("[Apple Pay] Data Keys Count:", Object.keys(merchantSession.data).length);
+        console.log("[Apple Pay] Merchant Identifier:", merchantSession.data.merchantIdentifier);
+        console.log("[Apple Pay] Domain Name:", merchantSession.data.domainName);
+        console.log("[Apple Pay] Display Name:", merchantSession.data.displayName);
+        console.log("[Apple Pay] Epoch Timestamp:", merchantSession.data.epochTimestamp);
+        console.log("[Apple Pay] Expires At:", merchantSession.data.expiresAt);
+      }
 
-        // Check if there's an error in the response
-        if (merchantSession.error) {
-          console.error("[Apple Pay] Backend returned error:", merchantSession.error);
-          throw new Error(merchantSession.error.message || "Apple Pay merchant validation failed");
-        }
+      if (merchantSession.error) {
+        console.log("[Apple Pay] Error Object:", merchantSession.error);
+        console.log("[Apple Pay] Error Message:", merchantSession.error.message);
+        console.log("[Apple Pay] Error Details:", merchantSession.error.details);
+      }
 
-        // Validate merchant session
-        const session = merchantSession.data || merchantSession;
-        if (!session || !session.merchantIdentifier) {
-          console.error("[Apple Pay] Invalid merchant session - missing merchantIdentifier");
-          console.error("[Apple Pay] Session object:", JSON.stringify(session, null, 2));
-          throw new Error("Invalid merchant session: missing merchantIdentifier. Please check your Payone Apple Pay configuration in PMI.");
-        }
+      console.log("[Apple Pay] ========== BACKEND RESPONSE END ==========");
+
+      // Check if there's an error in the response
+      if (merchantSession.error) {
+        console.error("[Apple Pay] Backend returned error:", merchantSession.error);
+        throw new Error(merchantSession.error.message || "Apple Pay merchant validation failed");
+      }
+
+      // Validate merchant session
+      const session = merchantSession.data || merchantSession;
+
+      // Check if session is empty object
+      if (!session || Object.keys(session).length === 0) {
+        console.error("[Apple Pay] Empty merchant session received from backend");
+        console.error("[Apple Pay] Full response:", JSON.stringify(merchantSession, null, 2));
+        throw new Error("Empty merchant session received. This usually means Payone did not return a valid merchant session. Please check your Payone Apple Pay configuration in PMI (CONFIGURATION → PAYMENT PORTALS → [Your Portal] → Apple Pay).");
+      }
+
+      if (!session.merchantIdentifier && !session.merchantSessionIdentifier) {
+        console.error("[Apple Pay] Invalid merchant session - missing merchantIdentifier");
+        console.error("[Apple Pay] Session object:", JSON.stringify(session, null, 2));
+        console.error("[Apple Pay] Full response:", JSON.stringify(merchantSession, null, 2));
+        throw new Error("Invalid merchant session: missing merchantIdentifier. Please check your Payone Apple Pay configuration in PMI (CONFIGURATION → PAYMENT PORTALS → [Your Portal] → Apple Pay). The merchant session must come from Payone after successful Apple Pay onboarding.");
+      }
 
-        return session;
+      return session;
     } catch (error) {
       console.error("[Apple Pay] Merchant validation error:", {
         message: error.message,