strapi-plugin-payone-provider 1.5.8-beta.1 → 1.6.0

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

@@ -1,11 +1,19 @@
 import React from "react";
-import { Box, Flex, Select, Option, Typography, Link, Alert } from "@strapi/design-system";
+import {
+  Box,
+  Flex,
+  Select,
+  Option,
+  Typography,
+  Link,
+  Alert,
+} from "@strapi/design-system";
 import pluginId from "../../../../pluginId";
 import {
   getPaymentMethodOptions,
   supportsCaptureMode,
   getCaptureModeOptions,
-  getPaymentMethodDisplayName
+  getPaymentMethodDisplayName,
 } from "../../../utils/paymentUtils";
 
 const PaymentMethodSelector = ({
@@ -13,8 +21,12 @@ const PaymentMethodSelector = ({
   setPaymentMethod,
   captureMode,
   setCaptureMode,
-  onNavigateToConfig
+  onNavigateToConfig,
+  settings,
 }) => {
+  const mode = (settings?.mode || "test").toLowerCase();
+  const isLiveMode = mode === "live";
+
   return (
     <Box>
       <Flex direction="column" alignItems="stretch" gap={4}>
@@ -33,36 +45,76 @@ const PaymentMethodSelector = ({
         </Select>
         {paymentMethod === "apl" && onNavigateToConfig && (
           <>
-            <Alert closeLabel="Close" title="⚠️ Important: Middleware Configuration Required" variant="warning">
+            <Alert
+              closeLabel="Close"
+              title="⚠️ Important: Middleware Configuration Required"
+              variant="warning"
+            >
               <Typography variant="pi" marginTop={2}>
-                <strong>Apple Pay requires middleware configuration</strong> to work properly. You must configure Content Security Policy (CSP) in <code>config/middlewares.js</code> to allow Apple Pay scripts, otherwise Apple Pay will NOT work.
+                <strong>Apple Pay requires middleware configuration</strong> to
+                work properly. You must configure Content Security Policy (CSP)
+                in <code>config/middlewares.js</code> to allow Apple Pay
+                scripts, otherwise Apple Pay will NOT work.
               </Typography>
               <Typography variant="pi" marginTop={2}>
                 Required CSP directives for Apple Pay:
               </Typography>
-              <Box marginTop={2} padding={2} background="neutral100" borderRadius="4px">
-                <Typography variant="pi" style={{ fontFamily: "monospace", fontSize: "12px" }}>
-                  'script-src': ['https://applepay.cdn-apple.com', 'https://www.apple.com']<br/>
-                  'connect-src': ['https://applepay.cdn-apple.com', 'https://www.apple.com']<br/>
+              <Box
+                marginTop={2}
+                padding={2}
+                background="neutral100"
+                borderRadius="4px"
+              >
+                <Typography
+                  variant="pi"
+                  style={{ fontFamily: "monospace", fontSize: "12px" }}
+                >
+                  'script-src': ['https://applepay.cdn-apple.com',
+                  'https://www.apple.com']
+                  <br />
+                  'connect-src': ['https://applepay.cdn-apple.com',
+                  'https://www.apple.com']
+                  <br />
                   'frame-src': ['https://applepay.cdn-apple.com']
                 </Typography>
               </Box>
               <Typography variant="pi" marginTop={2} fontWeight="bold">
-                ⚠️ Without this configuration, Apple Pay will NOT work!
+                Without this configuration, Apple Pay will NOT work!
               </Typography>
             </Alert>
-            <Alert closeLabel="Close" title="📥 Apple Pay Domain Verification File Required" variant="default">
+            <Alert
+              closeLabel="Close"
+              title="📥 Apple Pay Domain Verification File Required"
+              variant="default"
+            >
               <Typography variant="pi" marginTop={2}>
-                <strong>Download the Apple Pay domain verification file</strong> from your Payone merchant portal and place it in:
+                <strong>Download the Apple Pay domain verification file</strong>{" "}
+                from your Payone merchant portal and place it in:
               </Typography>
-              <Box marginTop={2} padding={2} background="neutral100" borderRadius="4px">
-                <Typography variant="pi" style={{ fontFamily: "monospace", fontSize: "12px" }}>
-                  <strong>Strapi:</strong> <code>public/.well-known/apple-developer-merchantid-domain-association</code><br/>
-                  <strong>Frontend:</strong> <code>public/.well-known/apple-developer-merchantid-domain-association</code>
+              <Box
+                marginTop={2}
+                padding={2}
+                background="neutral100"
+                borderRadius="4px"
+              >
+                <Typography
+                  variant="pi"
+                  style={{ fontFamily: "monospace", fontSize: "12px" }}
+                >
+                  <strong>Strapi:</strong>{" "}
+                  <code>
+                    public/.well-known/apple-developer-merchantid-domain-association
+                  </code>
+                  <br />
+                  <strong>Frontend:</strong>{" "}
+                  <code>
+                    public/.well-known/apple-developer-merchantid-domain-association
+                  </code>
                 </Typography>
               </Box>
               <Typography variant="pi" marginTop={2}>
-                <strong>Download URL:</strong> Download the domain verification file from Payone documentation:{" "}
+                <strong>Download URL:</strong> Download the domain verification
+                file from Payone documentation:{" "}
                 <Link
                   href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
                   target="_blank"
@@ -72,11 +124,14 @@ const PaymentMethodSelector = ({
                   https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
                 </Link>
               </Typography>
-              <Typography variant="pi" marginTop={2}>
-                <strong>Alternative:</strong> Log into your Payone Merchant Interface (PMI) → Configuration → Payment Portals → Apple Pay → Download domain verification file
-              </Typography>
-              <Typography variant="pi" marginTop={2} fontWeight="bold" textColor="danger600">
-                ⚠️ Without this file, Apple Pay will NOT work on your domain!
+              <br />
+              <Typography
+                variant="pi"
+                marginTop={2}
+                fontWeight="bold"
+                textColor="danger600"
+              >
+                Without this file, Apple Pay will NOT work on your domain!
               </Typography>
             </Alert>
             <Box padding={3} background="neutral100" borderRadius="4px">
@@ -88,7 +143,11 @@ const PaymentMethodSelector = ({
                     e.preventDefault();
                     onNavigateToConfig("apple-pay");
                   }}
-                  style={{ cursor: "pointer", textDecoration: "underline", color: "#0066ff" }}
+                  style={{
+                    cursor: "pointer",
+                    textDecoration: "underline",
+                    color: "#0066ff",
+                  }}
                 >
                   /plugins/{pluginId}/apple-pay-config
                 </Link>
@@ -98,17 +157,34 @@ const PaymentMethodSelector = ({
         )}
         {paymentMethod === "gpp" && onNavigateToConfig && (
           <>
-            <Alert closeLabel="Close" title="⚠️ Important: Middleware Configuration Required" variant="warning">
+            <Alert
+              closeLabel="Close"
+              title="⚠️ Important: Middleware Configuration Required"
+              variant="warning"
+            >
               <Typography variant="pi" marginTop={2}>
-                <strong>Google Pay requires middleware configuration</strong> to work properly. You must configure Content Security Policy (CSP) in <code>config/middlewares.js</code> to allow Google Pay scripts, otherwise Google Pay will NOT work.
+                <strong>Google Pay requires middleware configuration</strong> to
+                work properly. You must configure Content Security Policy (CSP)
+                in <code>config/middlewares.js</code> to allow Google Pay
+                scripts, otherwise Google Pay will NOT work.
               </Typography>
               <Typography variant="pi" marginTop={2}>
                 Required CSP directives for Google Pay:
               </Typography>
-              <Box marginTop={2} padding={2} background="neutral100" borderRadius="4px">
-                <Typography variant="pi" style={{ fontFamily: "monospace", fontSize: "12px" }}>
-                  'script-src': ['https://pay.google.com']<br/>
-                  'connect-src': ['https://pay.google.com']<br/>
+              <Box
+                marginTop={2}
+                padding={2}
+                background="neutral100"
+                borderRadius="4px"
+              >
+                <Typography
+                  variant="pi"
+                  style={{ fontFamily: "monospace", fontSize: "12px" }}
+                >
+                  'script-src': ['https://pay.google.com']
+                  <br />
+                  'connect-src': ['https://pay.google.com']
+                  <br />
                   'frame-src': ['https://pay.google.com']
                 </Typography>
               </Box>
@@ -125,7 +201,11 @@ const PaymentMethodSelector = ({
                     e.preventDefault();
                     onNavigateToConfig("google-pay");
                   }}
-                  style={{ cursor: "pointer", textDecoration: "underline", color: "#0066ff" }}
+                  style={{
+                    cursor: "pointer",
+                    textDecoration: "underline",
+                    color: "#0066ff",
+                  }}
                 >
                   /plugins/{pluginId}/google-pay-config
                 </Link>
@@ -153,4 +233,4 @@ const PaymentMethodSelector = ({
   );
 };
 
-export default PaymentMethodSelector;
+export default PaymentMethodSelector;

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

@@ -2,7 +2,6 @@ import React from "react";
 import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
 import { Play } from "@strapi/icons";
 import GooglePayButton from "../GooglePaybutton";
-import ApplePayButton from "../ApplePayButton";
 import CardDetailsInput from "./CardDetailsInput";
 
 const PreauthorizationForm = ({
@@ -14,10 +13,7 @@ const PreauthorizationForm = ({
   onPreauthorization,
   paymentMethod,
   settings,
-  googlePayToken,
   setGooglePayToken,
-  applePayToken,
-  setApplePayToken,
   cardtype,
   setCardtype,
   cardpan,
@@ -42,42 +38,8 @@ const PreauthorizationForm = ({
     }
   };
 
-  const handleApplePayToken = async (token, paymentData) => {
-    if (!token) {
-      console.error("[Apple Pay] Token is missing in handleApplePayToken");
-      return Promise.reject(new Error("Token is missing"));
-    }
-
-    console.log("[Apple Pay] handleApplePayToken called with token:", {
-      hasToken: !!token,
-      tokenLength: token?.length,
-      paymentData: !!paymentData
-    });
-
-    // IMPORTANT: Set token in state immediately (synchronously)
-    // This ensures the token is saved before the dialog closes
-    setApplePayToken(token);
-
-    console.log("[Apple Pay] Token saved to state successfully");
-
-    // Don't call onPreauthorization immediately
-    // Let the user manually trigger the payment using the button
-    // This prevents the dialog from closing prematurely if there's an error
-    // The dialog will close with success, and the user will see the "Process Preauthorization" button
 
-    // Return success immediately so the dialog closes properly
-    // The actual payment processing will happen when the user clicks the button
-    return Promise.resolve({
-      success: true,
-      message: "Token received successfully. Please click 'Process Preauthorization' to complete the payment."
-    });
-  };
 
-  const handleApplePayError = (error) => {
-    if (onError) {
-      onError(error);
-    }
-  };
   return (
     <Flex direction="column" alignItems="stretch" gap={4}>
       <Flex direction="row" gap={2}>
@@ -139,38 +101,9 @@ const PreauthorizationForm = ({
         />
       ) : paymentMethod === "apl" ? (
         <Box>
-          <ApplePayButton
-            amount={paymentAmount}
-            currency="EUR"
-            onTokenReceived={handleApplePayToken}
-            onError={handleApplePayError}
-            settings={settings}
-          />
-          {applePayToken && (
-            <Box marginTop={3} style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "8px" }}>
-              <Typography variant="pi" textColor="success600" style={{ marginBottom: "8px", fontWeight: "bold" }}>
-                ✓ Apple Pay token received. You can now process the preauthorization:
-              </Typography>
-              <Button
-                variant="default"
-                onClick={() => onPreauthorization(applePayToken)}
-                loading={isProcessingPayment}
-                startIcon={<Play />}
-                style={{ maxWidth: '200px' }}
-                disabled={!paymentAmount.trim() || !preauthReference.trim() || isLiveMode}
-                className="payment-button payment-button-primary"
-              >
-                Process Preauthorization
-              </Button>
-            </Box>
-          )}
-          {!applePayToken && (
-            <Box marginTop={3} style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "8px" }}>
-              <Typography variant="pi" textColor="neutral600" style={{ marginBottom: "8px" }}>
-                Apple Pay is not available on localhost. You can test the payment flow without Apple Pay token:
-              </Typography>
-            </Box>
-          )}
+          <Typography variant="pi" textColor="neutral600">
+            Apple Pay is only supported for Authorization, not Preauthorization.
+          </Typography>
         </Box>
       ) : (
         <Button

package/admin/src/pages/constants/paymentConstants.js

@@ -22,11 +22,10 @@ export const DEFAULT_PAYMENT_DATA = {
   ip: "127.0.0.1",
   customer_is_present: "yes",
   language: "de"
-  // Note: successurl, errorurl, backurl are added conditionally based on 3DS setting
 };
 
 /**
- * Default currency
+ * Default currency 
  */
 export const DEFAULT_CURRENCY = "EUR";
 

package/admin/src/pages/hooks/usePaymentActions.js

@@ -13,7 +13,6 @@ import { DEFAULT_PAYMENT_DATA } from "../constants/paymentConstants";
 const usePaymentActions = () => {
   const toggleNotification = useNotification();
 
-  // Load settings to get enable3DSecure value
   const [settings, setSettings] = useState({ enable3DSecure: false });
 
   useEffect(() => {
@@ -24,19 +23,14 @@ const usePaymentActions = () => {
           setSettings(response.data);
         }
       } catch (error) {
-        // Silent fail
       }
     };
     loadSettings();
   }, []);
 
-  // Payment form state
   const [paymentAmount, setPaymentAmount] = useState("1000");
 
-  // Generate order reference using generateLagOrderNumber
-  // Sequence number starts from 1000 and increments based on timestamp
   const generateOrderReference = () => {
-    // Use timestamp to generate unique sequence (1000 to 99999 range)
     const sequence = 1000 + Math.floor((Date.now() % 99000));
     return generateLagOrderNumber(sequence);
   };
@@ -52,13 +46,11 @@ const usePaymentActions = () => {
   const [googlePayToken, setGooglePayToken] = useState(null);
   const [applePayToken, setApplePayToken] = useState(null);
 
-  // Card details for 3DS testing
   const [cardtype, setCardtype] = useState("");
   const [cardpan, setCardpan] = useState("");
   const [cardexpiredate, setCardexpiredate] = useState("");
   const [cardcvc2, setCardcvc2] = useState("");
 
-  // Payment processing state
   const [isProcessingPayment, setIsProcessingPayment] = useState(false);
   const [paymentResult, setPaymentResult] = useState(null);
   const [paymentError, setPaymentError] = useState(null);
@@ -88,19 +80,16 @@ const usePaymentActions = () => {
       paymentMethod,
       amount: paymentAmount
     });
-    
+
     setIsProcessingPayment(true);
     setPaymentError(null);
     setPaymentResult(null);
     try {
-      // Auto-generate reference if empty
       const finalPreauthReference = preauthReference.trim() || generateOrderReference();
       if (!preauthReference.trim()) {
         setPreauthReference(finalPreauthReference);
       }
 
-      // Determine currency based on card type
-      // American Express typically requires USD, other cards use EUR
       const currency = (paymentMethod === "cc" && cardtype === "A") ? "USD" : "EUR";
 
       const baseParams = {
@@ -111,7 +100,6 @@ const usePaymentActions = () => {
         ...DEFAULT_PAYMENT_DATA
       };
 
-      // Add card details if credit card payment and 3DS enabled
       if (paymentMethod === "cc" && settings.enable3DSecure !== false) {
         if (cardtype) baseParams.cardtype = cardtype;
         if (cardpan) baseParams.cardpan = cardpan;
@@ -125,7 +113,6 @@ const usePaymentActions = () => {
 
       if (needsRedirectUrls) {
         const baseUrl = window.location.origin;
-        // Detect current context (admin or content-ui) from pathname
         const currentPath = window.location.pathname;
         const isContentUI = currentPath.includes('/content-ui') || currentPath.includes('/content-manager');
         const basePath = isContentUI ? '/content-ui' : '/admin';
@@ -149,30 +136,13 @@ const usePaymentActions = () => {
 
       const result = await payoneRequests.preauthorization(params);
       const responseData = result?.data || result;
-
-      // Log full response
-      console.log("Preauthorization Response:", responseData);
-      console.log("Response Status:", responseData.status || responseData.Status);
-      console.log("Response Error Code:", responseData.errorcode || responseData.errorCode || responseData.ErrorCode);
-      console.log("Response Error Message:", responseData.errormessage || responseData.errorMessage || responseData.ErrorMessage);
-      console.log("All redirect URL fields:", {
-        redirectUrl: responseData.redirectUrl,
-        redirecturl: responseData.redirecturl,
-        RedirectUrl: responseData.RedirectUrl,
-        redirect_url: responseData.redirect_url,
-        url: responseData.url,
-        Url: responseData.Url
-      });
-
       const status = (responseData.status || responseData.Status || "").toUpperCase();
       const errorCode = responseData.errorcode || responseData.errorCode || responseData.ErrorCode;
       const errorMessage = responseData.errormessage || responseData.errorMessage || responseData.ErrorMessage;
 
-      // Check for 3DS required error (4219)
       const requires3DSErrorCodes = ["4219", 4219];
       const is3DSRequiredError = requires3DSErrorCodes.includes(errorCode);
 
-      // Check all possible redirect URL fields
       const redirectUrl =
         responseData.redirectUrl ||
         responseData.redirecturl ||
@@ -182,7 +152,6 @@ const usePaymentActions = () => {
         responseData.Url ||
         null;
 
-      // If 3DS required but no redirect URL, show helpful message
       if (is3DSRequiredError && !redirectUrl) {
         console.warn("3DS authentication required (Error 4219) but no redirect URL found in response");
         console.log("Full response:", JSON.stringify(responseData, null, 2));
@@ -194,7 +163,6 @@ const usePaymentActions = () => {
         return;
       }
 
-      // Check for other errors (but not 3DS required)
       if ((status === "ERROR" || status === "INVALID" || errorCode) && !is3DSRequiredError) {
         setPaymentError(
           errorMessage ||
@@ -217,16 +185,8 @@ const usePaymentActions = () => {
 
       setPaymentResult(responseData);
 
-      console.log("[Payment] Preauthorization result:", {
-        status,
-        hasError: !!errorCode,
-        errorCode,
-        errorMessage
-      });
-
       if (status === "APPROVED") {
         handlePaymentSuccess("Preauthorization completed successfully");
-        // Return success result for Apple Pay callback
         return { success: true, data: responseData };
       } else {
         const errorMsg = errorMessage || `Unexpected status: ${status}`;
@@ -234,13 +194,11 @@ const usePaymentActions = () => {
           { message: errorMsg },
           `Preauthorization completed with status: ${status}`
         );
-        // Return error result for Apple Pay callback
         throw new Error(errorMsg);
       }
     } catch (error) {
       console.error("[Payment] Preauthorization error:", error);
       handlePaymentError(error, "Preauthorization failed");
-      // Re-throw error so Apple Pay callback knows it failed
       throw error;
     } finally {
       setIsProcessingPayment(false);
@@ -253,14 +211,11 @@ const usePaymentActions = () => {
     setPaymentResult(null);
 
     try {
-      // Auto-generate reference if empty
       const finalAuthReference = authReference.trim() || generateOrderReference();
       if (!authReference.trim()) {
         setAuthReference(finalAuthReference);
       }
 
-      // Determine currency based on card type
-      // American Express typically requires USD, other cards use EUR
       const currency = (paymentMethod === "cc" && cardtype === "A") ? "USD" : "EUR";
 
       const baseParams = {
@@ -271,7 +226,6 @@ const usePaymentActions = () => {
         ...DEFAULT_PAYMENT_DATA
       };
 
-      // Add card details if credit card payment and 3DS enabled
       if (paymentMethod === "cc" && settings.enable3DSecure !== false) {
         if (cardtype) baseParams.cardtype = cardtype;
         if (cardpan) baseParams.cardpan = cardpan;
@@ -285,7 +239,6 @@ const usePaymentActions = () => {
 
       if (needsRedirectUrls) {
         const baseUrl = window.location.origin;
-        // Detect current context (admin or content-ui) from pathname
         const currentPath = window.location.pathname;
         const isContentUI = currentPath.includes('/content-ui') || currentPath.includes('/content-manager');
         const basePath = isContentUI ? '/content-ui' : '/admin';
@@ -309,30 +262,13 @@ const usePaymentActions = () => {
 
       const result = await payoneRequests.authorization(params);
       const responseData = result?.data || result;
-
-      // Log full response
-      console.log("Authorization Response:", responseData);
-      console.log("Response Status:", responseData.status || responseData.Status);
-      console.log("Response Error Code:", responseData.errorcode || responseData.errorCode || responseData.ErrorCode);
-      console.log("Response Error Message:", responseData.errormessage || responseData.errorMessage || responseData.ErrorMessage);
-      console.log("All redirect URL fields:", {
-        redirectUrl: responseData.redirectUrl,
-        redirecturl: responseData.redirecturl,
-        RedirectUrl: responseData.RedirectUrl,
-        redirect_url: responseData.redirect_url,
-        url: responseData.url,
-        Url: responseData.Url
-      });
-
       const status = (responseData.status || responseData.Status || "").toUpperCase();
       const errorCode = responseData.errorcode || responseData.errorCode || responseData.ErrorCode;
       const errorMessage = responseData.errormessage || responseData.errorMessage || responseData.ErrorMessage;
 
-      // Check for 3DS required error (4219)
       const requires3DSErrorCodes = ["4219", 4219];
       const is3DSRequiredError = requires3DSErrorCodes.includes(errorCode);
 
-      // Check all possible redirect URL fields
       const redirectUrl =
         responseData.redirectUrl ||
         responseData.redirecturl ||
@@ -342,7 +278,6 @@ const usePaymentActions = () => {
         responseData.Url ||
         null;
 
-      // If 3DS required but no redirect URL, show helpful message
       if (is3DSRequiredError && !redirectUrl) {
         console.warn("3DS authentication required (Error 4219) but no redirect URL found in response");
         console.log("Full response:", JSON.stringify(responseData, null, 2));
@@ -354,7 +289,6 @@ const usePaymentActions = () => {
         return;
       }
 
-      // Check for other errors (but not 3DS required)
       if ((status === "ERROR" || status === "INVALID" || errorCode) && !is3DSRequiredError) {
         setPaymentError(
           errorMessage ||
@@ -377,13 +311,6 @@ const usePaymentActions = () => {
 
       setPaymentResult(responseData);
 
-      console.log("[Payment] Authorization result:", {
-        status,
-        hasError: !!errorCode,
-        errorCode,
-        errorMessage
-      });
-
       if (status === "APPROVED") {
         handlePaymentSuccess("Authorization completed successfully");
         // Return success result for Apple Pay callback
@@ -394,13 +321,11 @@ const usePaymentActions = () => {
           { message: errorMsg },
           `Authorization completed with status: ${status}`
         );
-        // Return error result for Apple Pay callback
         throw new Error(errorMsg);
       }
     } catch (error) {
       console.error("[Payment] Authorization error:", error);
       handlePaymentError(error, "Authorization failed");
-      // Re-throw error so Apple Pay callback knows it failed
       throw error;
     } finally {
       setIsProcessingPayment(false);