strapi-plugin-payone-provider 1.5.4 → 1.5.6

package/admin/src/pages/App/components/ApplePayButton.js

@@ -42,7 +42,7 @@ const ApplePayButton = ({
   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;
@@ -57,7 +57,7 @@ const ApplePayButton = ({
       // - 127.0.0.1 (even on HTTP)
       // - file:// URLs
       const isSecure = isSecureContext || isLocalhost;
-
+      
       console.log("[Apple Pay] Secure context check:", {
         isSecureContext: isSecureContext,
         protocol: protocol,
@@ -78,12 +78,12 @@ 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 {
@@ -95,11 +95,11 @@ 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 };
       }
@@ -152,11 +152,11 @@ const ApplePayButton = ({
         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 {
@@ -172,17 +172,17 @@ const ApplePayButton = ({
               }
             }
           }
-
+          
           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,7 +193,7 @@ const ApplePayButton = ({
               return { available: false, method: null };
             }
           }
-
+          
           return { available: false, method: null };
         }
       }
@@ -204,7 +204,7 @@ const ApplePayButton = ({
       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 +219,20 @@ 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 +244,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 +270,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 +306,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 +331,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 +340,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 +366,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 +380,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 +406,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);
@@ -498,27 +498,46 @@ const ApplePayButton = ({
           merchantSessionPromise.then(session => {
             console.log("[Apple Pay] Merchant session received:", {
               hasMerchantIdentifier: !!session.merchantIdentifier,
+              merchantIdentifier: session.merchantIdentifier,
               domainName: session.domainName,
-              displayName: session.displayName
+              displayName: session.displayName,
+              epochTimestamp: session.epochTimestamp,
+              expiresAt: session.expiresAt,
+              fullSession: session
             });
+            
+            // Validate merchant session
+            if (!session || (!session.merchantIdentifier && !session.merchantSessionIdentifier)) {
+              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");
+            }
           }).catch(err => {
             console.error("[Apple Pay] Merchant session error:", err);
-            // Don't call onError here - let the dialog handle it
+            // Re-throw so Payment Request API knows validation failed
+            throw err;
           });
 
           // Complete with the merchant session promise
-          // If it fails, Apple Pay will handle it gracefully
+          // If the promise rejects, Payment Request API will close the dialog
+          // This is expected behavior - we cannot proceed without a valid merchant session
           event.complete(merchantSessionPromise);
         } catch (error) {
-          console.error("[Apple Pay] Merchant validation error:", error);
-          // Only call onError if it's defined
+          console.error("[Apple Pay] Merchant validation error:", {
+            message: error.message,
+            stack: error.stack,
+            response: error.response
+          });
+          
+          // Call onError to notify the user
           if (typeof onError === 'function') {
-            onError(error);
+            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 promise that resolves to empty object
-          // This allows the dialog to continue even if validation fails
-          // Apple Pay will show an error but won't close immediately
-          event.complete(Promise.resolve({}));
+          
+          // 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
+          event.complete(Promise.reject(error));
         }
       };
 
@@ -550,17 +569,42 @@ const ApplePayButton = ({
       let response;
       try {
         response = await request.show();
+        console.log("[Apple Pay] Payment sheet shown successfully");
       } catch (error) {
-        console.error("[Apple Pay] Error showing payment sheet:", error);
+        console.error("[Apple Pay] Error showing payment sheet:", {
+          name: error.name,
+          message: error.message,
+          stack: error.stack
+        });
+        
         // Check if error is due to cancellation (user cancelled)
-        if (error.message && error.message.includes('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')
+            ))) {
           console.log("[Apple Pay] User cancelled the payment");
           // Don't call onError for user cancellation
           return;
         }
-        // Only call onError if it's defined and it's not a cancellation
-        if (typeof onError === 'function') {
-          onError(error);
+        
+        // If it's a merchant validation error, log it specifically
+        if (error.message && (
+          error.message.includes('merchant') ||
+          error.message.includes('validation') ||
+          error.message.includes('identifier')
+        )) {
+          console.error("[Apple Pay] Merchant validation failed - this may cause the dialog to close");
+          if (typeof onError === 'function') {
+            onError(new Error("Merchant validation failed. Please check your Apple Pay configuration and merchant identifier in Payone settings."));
+          }
+        } else {
+          // For other errors, call onError
+          if (typeof onError === 'function') {
+            onError(error);
+          }
         }
         return;
       }
@@ -573,11 +617,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);
         }
@@ -619,11 +663,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') {
@@ -735,12 +779,12 @@ const ApplePayButton = ({
         }
       });
 
-      console.log("[Apple Pay] Merchant session received from backend:", {
-        hasData: !!merchantSession.data,
-        merchantIdentifier: merchantSession.data?.merchantIdentifier
-      });
+        console.log("[Apple Pay] Merchant session received from backend:", {
+          hasData: !!merchantSession.data,
+          merchantIdentifier: merchantSession.data?.merchantIdentifier
+        });
 
-      return merchantSession.data || merchantSession;
+        return merchantSession.data || merchantSession;
     } catch (error) {
       console.error("[Apple Pay] Merchant validation error:", {
         message: error.message,
@@ -759,10 +803,10 @@ const ApplePayButton = ({
         console.error("[Apple Pay] Server error - Check server logs for details.");
       }
 
-      // If validation fails, return empty object
-      // This allows the dialog to continue, though Apple Pay may show an error
-      // The user can still proceed with payment if they want
-      return {};
+      // If validation fails, we cannot proceed
+      // Apple Pay requires a valid merchant session from Payone
+      console.error("[Apple Pay] Merchant validation failed - cannot proceed without valid session");
+      throw error;
     }
   };
 

package/admin/src/pages/App/components/ApplePayConfig.js

@@ -41,16 +41,16 @@ const ApplePayConfig = ({
       ...config,
       countryCode: value
     };
-
+    
     // Auto-update currency if current currency is not supported in new country
     const newSupportedCurrencies = getSupportedCurrenciesForCountry(value);
     if (!newSupportedCurrencies.find(c => c.code === currencyCode)) {
       newConfig.currencyCode = newSupportedCurrencies[0]?.code || "USD";
     }
-
+    
     // Auto-update networks based on country
     newConfig.supportedNetworks = getSupportedNetworksForCountry(value);
-
+    
     onConfigChange(newConfig);
   };
 
@@ -66,7 +66,7 @@ const ApplePayConfig = ({
     const newNetworks = currentNetworks.includes(networkCode)
       ? currentNetworks.filter(n => n !== networkCode)
       : [...currentNetworks, networkCode];
-
+    
     onConfigChange({
       ...config,
       supportedNetworks: newNetworks
@@ -78,7 +78,7 @@ const ApplePayConfig = ({
     const newCapabilities = currentCapabilities.includes(capabilityCode)
       ? currentCapabilities.filter(c => c !== capabilityCode)
       : [...currentCapabilities, capabilityCode];
-
+    
     onConfigChange({
       ...config,
       merchantCapabilities: newCapabilities
@@ -100,43 +100,43 @@ const ApplePayConfig = ({
         {/* Country and Currency */}
         <Flex gap={4} wrap="wrap">
           <Box style={{ flex: 1, minWidth: "300px" }}>
-            <Select
+          <Select
               label="Country Code"
-              name="countryCode"
-              value={countryCode}
-              onChange={handleCountryChange}
-              hint="Select the country where your business operates"
-              required
-            >
-              {APPLE_PAY_SUPPORTED_COUNTRIES.map(country => (
-                <Option key={country.code} value={country.code}>
-                  {country.name} ({country.code})
-                </Option>
-              ))}
-            </Select>
-          </Box>
+            name="countryCode"
+            value={countryCode}
+            onChange={handleCountryChange}
+            hint="Select the country where your business operates"
+            required
+          >
+            {APPLE_PAY_SUPPORTED_COUNTRIES.map(country => (
+              <Option key={country.code} value={country.code}>
+                {country.name} ({country.code})
+              </Option>
+            ))}
+          </Select>
+        </Box>
 
           <Box style={{ flex: 1, minWidth: "300px" }}>
-            <Select
+          <Select
               label="Currency Code"
-              name="currencyCode"
-              value={currencyCode}
-              onChange={handleCurrencyChange}
+            name="currencyCode"
+            value={currencyCode}
+            onChange={handleCurrencyChange}
               hint={`Supported currencies for ${countryCode}`}
-              required
-            >
-              {supportedCurrencies.map(currency => (
-                <Option key={currency.code} value={currency.code}>
-                  {currency.name} ({currency.code}) {currency.symbol}
-                </Option>
-              ))}
-            </Select>
-            {supportedCurrencies.length === 0 && (
-              <Typography variant="pi" textColor="danger600" style={{ marginTop: "4px" }}>
-                No supported currencies for this country. Please select a different country.
-              </Typography>
-            )}
-          </Box>
+            required
+          >
+            {supportedCurrencies.map(currency => (
+              <Option key={currency.code} value={currency.code}>
+                {currency.name} ({currency.code}) {currency.symbol}
+              </Option>
+            ))}
+          </Select>
+          {supportedCurrencies.length === 0 && (
+            <Typography variant="pi" textColor="danger600" style={{ marginTop: "4px" }}>
+              No supported currencies for this country. Please select a different country.
+            </Typography>
+          )}
+        </Box>
         </Flex>
 
         {/* Button Style and Type */}
@@ -186,23 +186,23 @@ const ApplePayConfig = ({
             {APPLE_PAY_SUPPORTED_NETWORKS.map(network => {
               const isSupported = supportedNetworksForCountry.includes(network.code);
               const isSelected = supportedNetworks?.includes(network.code);
-
+              
               return (
                 <Box key={network.code} style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}>
-                  <Checkbox
-                    name={`network-${network.code}`}
-                    checked={isSelected}
-                    onChange={() => handleNetworkToggle(network.code)}
-                    disabled={!isSupported}
-                    hint={!isSupported ? `Not supported in ${countryCode}` : undefined}
-                  >
-                    {network.name} ({network.code})
-                    {!isSupported && (
-                      <Typography variant="sigma" textColor="neutral500" style={{ marginLeft: "8px" }}>
+                <Checkbox
+                  name={`network-${network.code}`}
+                  checked={isSelected}
+                  onChange={() => handleNetworkToggle(network.code)}
+                  disabled={!isSupported}
+                  hint={!isSupported ? `Not supported in ${countryCode}` : undefined}
+                >
+                  {network.name} ({network.code})
+                  {!isSupported && (
+                    <Typography variant="sigma" textColor="neutral500" style={{ marginLeft: "8px" }}>
                         (Not available)
-                      </Typography>
-                    )}
-                  </Checkbox>
+                    </Typography>
+                  )}
+                </Checkbox>
                 </Box>
               );
             })}
@@ -225,16 +225,16 @@ const ApplePayConfig = ({
           <Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
             {APPLE_PAY_MERCHANT_CAPABILITIES.map(capability => {
               const isSelected = merchantCapabilities?.includes(capability.code);
-
+              
               return (
                 <Box key={capability.code} style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}>
-                  <Checkbox
-                    name={`capability-${capability.code}`}
-                    checked={isSelected}
-                    onChange={() => handleCapabilityToggle(capability.code)}
-                  >
-                    {capability.name} - {capability.description}
-                  </Checkbox>
+                <Checkbox
+                  name={`capability-${capability.code}`}
+                  checked={isSelected}
+                  onChange={() => handleCapabilityToggle(capability.code)}
+                >
+                  {capability.name} - {capability.description}
+                </Checkbox>
                 </Box>
               );
             })}
@@ -256,49 +256,49 @@ const ApplePayConfig = ({
           </Typography>
           <Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
             <Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
-              <Checkbox
-                name="requestPayerName"
-                checked={requestPayerName}
-                onChange={(checked) => onConfigChange({ ...config, requestPayerName: checked })}
-              >
-                Request Payer Name
-              </Checkbox>
+            <Checkbox
+              name="requestPayerName"
+              checked={requestPayerName}
+              onChange={(checked) => onConfigChange({ ...config, requestPayerName: checked })}
+            >
+              Request Payer Name
+            </Checkbox>
             </Box>
             <Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
-              <Checkbox
-                name="requestBillingAddress"
-                checked={requestBillingAddress}
-                onChange={(checked) => onConfigChange({ ...config, requestBillingAddress: checked })}
-              >
-                Request Billing Address
-              </Checkbox>
+            <Checkbox
+              name="requestBillingAddress"
+              checked={requestBillingAddress}
+              onChange={(checked) => onConfigChange({ ...config, requestBillingAddress: checked })}
+            >
+              Request Billing Address
+            </Checkbox>
             </Box>
             <Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
-              <Checkbox
-                name="requestPayerEmail"
-                checked={requestPayerEmail}
-                onChange={(checked) => onConfigChange({ ...config, requestPayerEmail: checked })}
-              >
-                Request Payer Email
-              </Checkbox>
+            <Checkbox
+              name="requestPayerEmail"
+              checked={requestPayerEmail}
+              onChange={(checked) => onConfigChange({ ...config, requestPayerEmail: checked })}
+            >
+              Request Payer Email
+            </Checkbox>
             </Box>
             <Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
-              <Checkbox
-                name="requestPayerPhone"
-                checked={requestPayerPhone}
-                onChange={(checked) => onConfigChange({ ...config, requestPayerPhone: checked })}
-              >
-                Request Payer Phone
-              </Checkbox>
+            <Checkbox
+              name="requestPayerPhone"
+              checked={requestPayerPhone}
+              onChange={(checked) => onConfigChange({ ...config, requestPayerPhone: checked })}
+            >
+              Request Payer Phone
+            </Checkbox>
             </Box>
             <Box style={{ flex: "0 0 calc(33.333% - 11px)", minWidth: "200px" }}>
-              <Checkbox
-                name="requestShipping"
-                checked={requestShipping}
-                onChange={(checked) => onConfigChange({ ...config, requestShipping: checked })}
-              >
-                Request Shipping Address
-              </Checkbox>
+            <Checkbox
+              name="requestShipping"
+              checked={requestShipping}
+              onChange={(checked) => onConfigChange({ ...config, requestShipping: checked })}
+            >
+              Request Shipping Address
+            </Checkbox>
             </Box>
           </Flex>
         </Box> */}
@@ -309,7 +309,7 @@ const ApplePayConfig = ({
             Merchant Identifier
           </Typography>
           <Typography variant="pi" textColor="neutral600">
-            {settings?.mid || settings?.portalid
+            {settings?.mid || settings?.portalid 
               ? `Using: ${settings.mid || settings.portalid}`
               : "Merchant identifier will be obtained from Payone after domain verification. See documentation for setup instructions."
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-payone-provider",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "description": "Strapi plugin for Payone payment gateway integration",
   "license": "MIT",
   "maintainers": [

package/server/services/applePayService.js

@@ -214,57 +214,202 @@ const validateApplePayMerchant = async (strapi, params) => {
     strapi.log.info("[Apple Pay] Session initialization result:", {
       status: sessionResponse.status || sessionResponse.Status,
       hasMerchantIdentifier: !!(sessionResponse.merchantIdentifier || sessionResponse.merchantSessionIdentifier),
+      hasApplePaySession: !!(sessionResponse["add_paydata[applepay_payment_session]"] ||
+        sessionResponse["add_paydata[applepay_payment_session]"] ||
+        sessionResponse.add_paydata?.applepay_payment_session),
       fullResponse: JSON.stringify(sessionResponse, null, 2)
     });
 
-    // If session initialization is successful, return merchant session
-    // Payone will provide the merchant identifier and validation data
+    // If session initialization is successful, extract merchant session from Payone response
+    // Payone returns: add_paydata[applepay_payment_session] = BASE64 encoded merchant session
     // Check for both uppercase and lowercase status
     const responseStatus = sessionResponse.status || sessionResponse.Status;
-    if (responseStatus === "APPROVED" || responseStatus === "REDIRECT" ||
-      responseStatus === "approved" || responseStatus === "redirect") {
-      strapi.log.info("[Apple Pay] Session approved, creating merchant session object");
-      // Get merchant identifier from Payone response or settings
-      const merchantIdentifier = sessionResponse.merchantIdentifier ||
-        sessionResponse.merchantSessionIdentifier ||
-        settings.merchantIdentifier ||
-        settings.mid ||
-        settings.portalid ||
-        `merchant.${domainName}`;
-
-      // Return merchant session object
-      // In a real implementation, you would get this from Payone's response
-      const merchantSession = {
-        epochTimestamp: Date.now(),
-        expiresAt: Date.now() + (5 * 60 * 1000), // 5 minutes
-        merchantSessionIdentifier: sessionResponse.merchantSessionIdentifier || `merchant.${domainName}`,
-        nonce: sessionResponse.nonce || generateNonce(),
-        merchantIdentifier: merchantIdentifier,
-        domainName: domainName,
-        displayName: merchantName
-      };
-
-      strapi.log.info("[Apple Pay] Merchant session created:", {
-        merchantIdentifier: merchantSession.merchantIdentifier,
-        domainName: merchantSession.domainName,
-        expiresAt: new Date(merchantSession.expiresAt).toISOString()
+    if (responseStatus === "APPROVED" || responseStatus === "OK" ||
+      responseStatus === "approved" || responseStatus === "ok") {
+
+      // Extract BASE64 encoded merchant session from Payone response
+      // Payone returns it in: add_paydata[applepay_payment_session]
+      // Try all possible variations of the field name
+      const applePaySessionBase64 =
+        sessionResponse["add_paydata[applepay_payment_session]"] ||
+        sessionResponse["add_paydata[applepay_payment_session]"] ||
+        sessionResponse["add_paydata_applepay_payment_session"] ||
+        sessionResponse.add_paydata?.applepay_payment_session ||
+        sessionResponse.add_paydata?.["applepay_payment_session"] ||
+        sessionResponse["addPaydata[applepay_payment_session]"] ||
+        sessionResponse["addPaydata_applepay_payment_session"] ||
+        null;
+
+      strapi.log.info("[Apple Pay] Checking for merchant session in response:", {
+        hasWorkorderid: !!sessionResponse.workorderid,
+        workorderid: sessionResponse.workorderid,
+        allKeys: Object.keys(sessionResponse).filter(k => k.includes('applepay') || k.includes('session') || k.includes('paydata')),
+        responseKeys: Object.keys(sessionResponse)
       });
 
-      return merchantSession;
+      strapi.log.info("[Apple Pay] Extracted Apple Pay session data:", {
+        hasBase64Session: !!applePaySessionBase64,
+        sessionLength: applePaySessionBase64?.length,
+        workorderid: sessionResponse.workorderid,
+        allResponseKeys: Object.keys(sessionResponse),
+        responseSample: JSON.stringify(sessionResponse).substring(0, 500)
+      });
+
+      if (applePaySessionBase64 && applePaySessionBase64.length > 0) {
+        try {
+          // Decode BASE64 merchant session
+          const merchantSessionJson = Buffer.from(applePaySessionBase64, 'base64').toString('utf-8');
+          const merchantSession = JSON.parse(merchantSessionJson);
+
+          strapi.log.info("[Apple Pay] Decoded merchant session:", {
+            merchantIdentifier: merchantSession.merchantIdentifier,
+            domainName: merchantSession.domainName,
+            displayName: merchantSession.displayName,
+            hasEpochTimestamp: !!merchantSession.epochTimestamp,
+            hasExpiresAt: !!merchantSession.expiresAt,
+            fullSession: merchantSession
+          });
+
+          // Validate decoded merchant session
+          if (!merchantSession.merchantIdentifier) {
+            strapi.log.warn("[Apple Pay] Decoded merchant session missing merchantIdentifier, using fallback");
+            // Use fallback merchant identifier
+            merchantSession.merchantIdentifier = settings.merchantIdentifier ||
+              settings.mid ||
+              settings.portalid ||
+              `merchant.${domainName}`;
+          }
+
+          // Ensure epochTimestamp and expiresAt are in seconds (not milliseconds)
+          if (merchantSession.epochTimestamp && merchantSession.epochTimestamp > 1000000000000) {
+            // If timestamp is in milliseconds, convert to seconds
+            merchantSession.epochTimestamp = Math.floor(merchantSession.epochTimestamp / 1000);
+          }
+          if (merchantSession.expiresAt && merchantSession.expiresAt > 1000000000000) {
+            // If timestamp is in milliseconds, convert to seconds
+            merchantSession.expiresAt = Math.floor(merchantSession.expiresAt / 1000);
+          }
+
+          // Validate final merchant session
+          if (!merchantSession.merchantIdentifier || merchantSession.merchantIdentifier === 'undefined' || merchantSession.merchantIdentifier === 'null') {
+            throw new Error("Decoded merchant session has invalid merchantIdentifier");
+          }
+
+          strapi.log.info("[Apple Pay] Validated merchant session:", {
+            merchantIdentifier: merchantSession.merchantIdentifier,
+            domainName: merchantSession.domainName,
+            epochTimestamp: merchantSession.epochTimestamp,
+            expiresAt: merchantSession.expiresAt
+          });
+
+          return merchantSession;
+        } catch (decodeError) {
+          strapi.log.error("[Apple Pay] Failed to decode merchant session:", {
+            error: decodeError.message,
+            base64Length: applePaySessionBase64?.length,
+            base64Preview: applePaySessionBase64?.substring(0, 100)
+          });
+
+          // If decoding fails, we cannot proceed - merchant session is invalid
+          throw new Error(`Failed to decode Apple Pay merchant session: ${decodeError.message}`);
+        }
+      } else {
+        // CRITICAL: If Payone doesn't return merchant session, we cannot proceed
+        // Apple Pay requires the merchant session to be validated by Apple's servers
+        // Payone should return add_paydata[applepay_payment_session] after successful initialization
+        strapi.log.error("[Apple Pay] CRITICAL: No Apple Pay session data in Payone response!");
+        strapi.log.error("[Apple Pay] This means merchant validation will fail. Possible causes:");
+        strapi.log.error("[Apple Pay] 1. Apple Pay not properly configured in Payone PMI");
+        strapi.log.error("[Apple Pay] 2. Domain not verified in Payone PMI");
+        strapi.log.error("[Apple Pay] 3. Merchant identifier not configured in Payone PMI");
+        strapi.log.error("[Apple Pay] 4. Apple Pay onboarding not completed in Payone PMI");
+        strapi.log.error("[Apple Pay] Response status:", responseStatus);
+        strapi.log.error("[Apple Pay] Full response keys:", Object.keys(sessionResponse));
+        strapi.log.error("[Apple Pay] Response sample:", JSON.stringify(sessionResponse).substring(0, 1000));
+
+        // DO NOT create a fallback session - it will fail validation
+        // Instead, throw an error so the frontend knows validation failed
+        throw new Error("Payone did not return Apple Pay merchant session. Please ensure Apple Pay is properly configured in Payone Merchant Interface (PMI): CONFIGURATION → PAYMENT PORTALS → [Your Portal] → Apple Pay configuration. The merchant session must come from Payone after successful Apple Pay onboarding.");
+
+        // Get merchant identifier from settings
+        // According to Payone docs, merchant identifier should be visible in PMI after onboarding
+        // Path: CONFIGURATION/PAYMENT PORTALS - choose an onboarded Portal - Payment type configuration tab
+        let merchantIdentifier = settings.merchantIdentifier ||
+          settings.mid ||
+          settings.portalid;
+
+        // If still no merchant identifier, try to construct one from domain
+        // But this is not ideal - merchant identifier should come from Payone PMI
+        if (!merchantIdentifier) {
+          strapi.log.warn("[Apple Pay] No merchant identifier found in settings, using domain-based fallback");
+          merchantIdentifier = `merchant.${domainName}`;
+        }
+
+        // Ensure merchant identifier is a string and not empty
+        merchantIdentifier = merchantIdentifier.toString().trim();
+        if (!merchantIdentifier || merchantIdentifier === 'undefined' || merchantIdentifier === 'null') {
+          strapi.log.error("[Apple Pay] Invalid merchant identifier:", merchantIdentifier);
+          throw new Error("Merchant identifier is invalid. Please configure a valid merchant identifier in Payone Merchant Interface (PMI) after Apple Pay onboarding. Path: CONFIGURATION → PAYMENT PORTALS → [Your Portal] → Payment type configuration tab");
+        }
+
+        // Create a valid merchant session object
+        // This format is required by Apple Pay Payment Request API
+        // IMPORTANT: epochTimestamp and expiresAt must be in seconds (Unix timestamp), not milliseconds
+        const merchantSession = {
+          epochTimestamp: Math.floor(Date.now() / 1000), // Unix timestamp in seconds
+          expiresAt: Math.floor((Date.now() + (5 * 60 * 1000)) / 1000), // 5 minutes from now, in seconds
+          merchantSessionIdentifier: `merchant.${domainName}`,
+          nonce: generateNonce(),
+          merchantIdentifier: merchantIdentifier, // Already validated and converted to string
+          domainName: domainName,
+          displayName: merchantName
+        };
+
+        // Validate merchant session before returning
+        if (!merchantSession.merchantIdentifier || merchantSession.merchantIdentifier === 'undefined' || merchantSession.merchantIdentifier === 'null') {
+          strapi.log.error("[Apple Pay] Created merchant session is missing or invalid merchantIdentifier!", {
+            merchantIdentifier: merchantSession.merchantIdentifier,
+            settings: {
+              hasMerchantIdentifier: !!settings.merchantIdentifier,
+              hasMid: !!settings.mid,
+              hasPortalid: !!settings.portalid,
+              mid: settings.mid,
+              portalid: settings.portalid
+            }
+          });
+          throw new Error("Merchant identifier is required but not found in settings. Please configure merchant identifier in Payone Merchant Interface (PMI) after Apple Pay onboarding.");
+        }
+
+        strapi.log.info("[Apple Pay] Created merchant session from settings:", {
+          merchantIdentifier: merchantSession.merchantIdentifier,
+          domainName: merchantSession.domainName,
+          displayName: merchantSession.displayName,
+          epochTimestamp: merchantSession.epochTimestamp,
+          expiresAt: merchantSession.expiresAt
+        });
+
+        return merchantSession;
+      }
     }
 
-    // If initialization failed, return empty object
-    // Payment Request API will handle it
-    strapi.log.warn("[Apple Pay] Session initialization failed, returning empty object");
-    return {};
+    // If initialization failed, we cannot proceed
+    // Payment Request API requires a valid merchant session
+    strapi.log.error("[Apple Pay] Session initialization failed - status:", responseStatus);
+    strapi.log.error("[Apple Pay] This means merchant validation will fail.");
+    strapi.log.error("[Apple Pay] Please check Payone PMI configuration and ensure Apple Pay is properly set up.");
+    throw new Error(`Apple Pay session initialization failed with status: ${responseStatus}. Please check your Payone Apple Pay configuration in PMI.`);
   } catch (error) {
     strapi.log.error("[Apple Pay] Merchant validation error:", {
       message: error.message,
       stack: error.stack,
-      response: error.response?.data
+      response: error.response?.data,
+      status: error.response?.status
     });
-    // Return empty object on error - Payone will handle validation
-    return {};
+
+    // DO NOT return empty object - this causes Apple Pay to close the dialog
+    // Instead, re-throw the error so the frontend can handle it properly
+    // The error message will help the user understand what went wrong
+    throw error;
   }
 };
 

package/server/utils/responseParser.js

@@ -24,8 +24,20 @@ const parseResponse = (responseText, logger) => {
   const params = new URLSearchParams(responseText);
   const response = {};
   for (const [key, value] of params) {
+    // Store both lowercase and original case
     response[key.toLowerCase()] = value;
     response[key] = value;
+    
+    // Also handle add_paydata fields with brackets
+    // Payone returns: add_paydata[applepay_payment_session]=BASE64_STRING
+    // URLSearchParams handles brackets, but we need to ensure we can access it
+    if (key.includes('add_paydata') || key.includes('addPaydata')) {
+      // Store with original key format
+      response[key] = value;
+      // Also try normalized versions
+      const normalizedKey = key.replace(/\[/g, '_').replace(/\]/g, '');
+      response[normalizedKey] = value;
+    }
   }
   return response;
 };