strapi-plugin-payone-provider 1.6.3 → 1.6.5

package/admin/src/pages/App/components/ApplePayConfigPanel.jsx

@@ -5,18 +5,15 @@ import {
   CardBody,
   Flex,
   Typography,
-  Button
+  Button,
 } from "@strapi/design-system";
 import { Check } from "@strapi/icons";
 import ApplePayConfig from "./ApplePayConfig";
 
-const ApplePayConfigPanel = ({
-  settings,
-  onInputChange,
-  isSaving,
-  onSave
-}) => {
-  const [applePayConfig, setApplePayConfig] = useState(settings?.applePayConfig || {});
+const ApplePayConfigPanel = ({ settings, onInputChange, isSaving, onSave }) => {
+  const [applePayConfig, setApplePayConfig] = useState(
+    settings?.applePayConfig || {}
+  );
 
   useEffect(() => {
     setApplePayConfig(settings?.applePayConfig || {});
@@ -31,15 +28,6 @@ const ApplePayConfigPanel = ({
       paddingRight={8}
     >
       <Flex direction="column" alignItems="stretch" gap={8}>
-        <Box>
-          <Typography variant="beta" as="h2" fontWeight="bold" className="payment-title" style={{ fontSize: '20px', marginBottom: '4px' }}>
-            Apple Pay Configuration
-          </Typography>
-          <Typography variant="pi" textColor="neutral600" marginTop={2} className="payment-subtitle" style={{ fontSize: '14px' }}>
-            Configure Apple Pay settings for your payment gateway
-          </Typography>
-        </Box>
-
         <Box>
           <Card className="payment-card">
             <CardBody padding={6}>
@@ -68,7 +56,9 @@ const ApplePayConfigPanel = ({
               Save Apple Pay Configuration
             </Button>
             <Typography variant="sigma" textColor="neutral600">
-              Note: Apple Pay configuration is used for Apple Pay payment requests. Make sure to configure the correct merchant identifier, supported networks, and capabilities for your region.
+              Note: Apple Pay configuration is used for Apple Pay payment
+              requests. Make sure to configure the correct merchant identifier,
+              supported networks, and capabilities for your region.
             </Typography>
           </Flex>
         </Box>
@@ -78,4 +68,3 @@ const ApplePayConfigPanel = ({
 };
 
 export default ApplePayConfigPanel;
-

package/admin/src/pages/App/components/ConfigurationPanel.jsx

@@ -10,9 +10,11 @@ import {
   TextInput,
   Select,
   Option,
-  Alert
+  Alert,
 } from "@strapi/design-system";
-import { Play } from "@strapi/icons";
+import { Play, Cog } from "@strapi/icons";
+import { useHistory } from "react-router-dom";
+import pluginId from "../../../pluginId";
 
 const ConfigurationPanel = ({
   settings,
@@ -21,17 +23,22 @@ const ConfigurationPanel = ({
   testResult,
   onSave,
   onTestConnection,
-  onInputChange
+  onInputChange,
 }) => {
+  const history = useHistory();
   const mode = (settings?.mode || "test").toLowerCase();
 
   useEffect(() => {
-    if (settings?.mode) {
-      const currentMode = (settings.mode || "test").toLowerCase();
-      console.log("[ConfigurationPanel] Mode updated:", currentMode);
-    }
+    // Mode updated
   }, [settings?.mode]);
 
+  const handleNavigateToApplePayConfig = () => {
+    history.push(`/plugins/${pluginId}/apple-pay-config`);
+  };
+
+  const handleNavigateToGooglePayConfig = () => {
+    history.push(`/plugins/${pluginId}/google-pay-config`);
+  };
 
   return (
     <Box
@@ -43,10 +50,22 @@ const ConfigurationPanel = ({
     >
       <Flex direction="column" alignItems="stretch" gap={8}>
         <Box>
-          <Typography variant="beta" as="h2" fontWeight="bold" className="payment-title" style={{ fontSize: '20px', marginBottom: '4px' }}>
+          <Typography
+            variant="beta"
+            as="h2"
+            fontWeight="bold"
+            className="payment-title"
+            style={{ fontSize: "20px", marginBottom: "4px" }}
+          >
             Payone API Configuration
           </Typography>
-          <Typography variant="pi" textColor="neutral600" marginTop={2} className="payment-subtitle" style={{ fontSize: '14px' }}>
+          <Typography
+            variant="pi"
+            textColor="neutral600"
+            marginTop={2}
+            className="payment-subtitle"
+            style={{ fontSize: "14px" }}
+          >
             Configure your Payone payment gateway settings
           </Typography>
         </Box>
@@ -131,7 +150,12 @@ const ConfigurationPanel = ({
                   />
                 </Flex>
 
-                <Flex direction="column" wrap="wrap" gap={1} alignItems="flex-start">
+                <Flex
+                  direction="column"
+                  wrap="wrap"
+                  gap={1}
+                  alignItems="flex-start"
+                >
                   <Select
                     label="Enable 3D Secure"
                     name="enable3DSecure"
@@ -146,9 +170,35 @@ const ConfigurationPanel = ({
                     <Option value="no">Disabled</Option>
                   </Select>
                   <Typography variant="pi" textColor="neutral600" marginTop={1}>
-                    When enabled, credit card payments will require 3D Secure authentication (SCA compliance)
+                    When enabled, credit card payments will require 3D Secure
+                    authentication (SCA compliance)
                   </Typography>
                 </Flex>
+
+                <Flex
+                  direction="row"
+                  gap={2}
+                  wrap="wrap"
+                  alignItems="flex-start"
+                  marginTop={2}
+                >
+                  <Button
+                    variant="secondary"
+                    startIcon={<Cog />}
+                    onClick={handleNavigateToApplePayConfig}
+                    className="payment-button"
+                  >
+                    Apple Pay Config
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    startIcon={<Cog />}
+                    onClick={handleNavigateToGooglePayConfig}
+                    className="payment-button"
+                  >
+                    Google Pay Config
+                  </Button>
+                </Flex>
               </Stack>
             </CardBody>
           </Card>
@@ -179,13 +229,18 @@ const ConfigurationPanel = ({
                   loading={isTesting}
                   startIcon={<Play />}
                   className="payment-button payment-button-success"
-                  disabled={mode === 'live'}
+                  disabled={mode === "live"}
                 >
                   {isTesting ? "Testing Connection..." : "Test Connection"}
                 </Button>
-                {mode === 'live' && (
-                  <Typography variant="pi" textColor="neutral600" style={{ marginTop: "8px" }}>
-                    Test Connection is disabled in live mode for security reasons.
+                {mode === "live" && (
+                  <Typography
+                    variant="pi"
+                    textColor="neutral600"
+                    style={{ marginTop: "8px" }}
+                  >
+                    Test Connection is disabled in live mode for security
+                    reasons.
                   </Typography>
                 )}
 
@@ -222,7 +277,10 @@ const ConfigurationPanel = ({
                             </CardBody>
                           </Card>
                         ) : (
-                          <Card className="payment-card" style={{ background: "#fff5f5" }}>
+                          <Card
+                            className="payment-card"
+                            style={{ background: "#fff5f5" }}
+                          >
                             <CardBody padding={4}>
                               <Stack spacing={2}>
                                 {testResult.errorcode && (

package/admin/src/pages/App/components/DocsPanel.jsx

@@ -425,7 +425,6 @@ function PaymentForm() {
     });
     
     const result = await response.json();
-    console.log('Payment result:', result);
   };
 
   return (

package/admin/src/pages/App/components/GooglePayConfig.jsx

@@ -1,76 +1,71 @@
 import React from "react";
-import { Box, Flex, Typography, Select, Option, Checkbox, Stack } from "@strapi/design-system";
+import {
+  Box,
+  Flex,
+  Typography,
+  Select,
+  Option,
+  Checkbox,
+  Stack,
+} from "@strapi/design-system";
 import {
   GOOGLE_PAY_SUPPORTED_COUNTRIES,
   GOOGLE_PAY_SUPPORTED_CURRENCIES,
   GOOGLE_PAY_SUPPORTED_NETWORKS,
   GOOGLE_PAY_AUTH_METHODS,
-  DEFAULT_GOOGLE_PAY_CONFIG
+  DEFAULT_GOOGLE_PAY_CONFIG,
 } from "../../utils/googlePayConstants";
 
-const GooglePayConfig = ({
-  config,
-  onConfigChange,
-  settings
-}) => {
+const GooglePayConfig = ({ config, onConfigChange, settings }) => {
   const {
     countryCode = DEFAULT_GOOGLE_PAY_CONFIG.countryCode,
     currencyCode = DEFAULT_GOOGLE_PAY_CONFIG.currencyCode,
     allowedCardNetworks = DEFAULT_GOOGLE_PAY_CONFIG.allowedCardNetworks,
     allowedAuthMethods = DEFAULT_GOOGLE_PAY_CONFIG.allowedAuthMethods,
-    merchantName = DEFAULT_GOOGLE_PAY_CONFIG.merchantName
+    merchantName = DEFAULT_GOOGLE_PAY_CONFIG.merchantName,
   } = config || {};
 
   const handleCountryChange = (value) => {
     onConfigChange({
       ...config,
-      countryCode: value
+      countryCode: value,
     });
   };
 
   const handleCurrencyChange = (value) => {
     onConfigChange({
       ...config,
-      currencyCode: value
+      currencyCode: value,
     });
   };
 
   const handleNetworkToggle = (networkCode) => {
     const currentNetworks = allowedCardNetworks || [];
     const newNetworks = currentNetworks.includes(networkCode)
-      ? currentNetworks.filter(n => n !== networkCode)
+      ? currentNetworks.filter((n) => n !== networkCode)
       : [...currentNetworks, networkCode];
 
     onConfigChange({
       ...config,
-      allowedCardNetworks: newNetworks
+      allowedCardNetworks: newNetworks,
     });
   };
 
   const handleAuthMethodToggle = (authMethodCode) => {
     const currentMethods = allowedAuthMethods || [];
     const newMethods = currentMethods.includes(authMethodCode)
-      ? currentMethods.filter(m => m !== authMethodCode)
+      ? currentMethods.filter((m) => m !== authMethodCode)
       : [...currentMethods, authMethodCode];
 
     onConfigChange({
       ...config,
-      allowedAuthMethods: newMethods
+      allowedAuthMethods: newMethods,
     });
   };
 
   return (
     <Box>
       <Stack spacing={6}>
-        <Box>
-          <Typography variant="delta" as="h3" fontWeight="bold" style={{ marginBottom: "6px" }}>
-            Google Pay Configuration
-          </Typography>
-          <Typography variant="pi" textColor="neutral600">
-            Configure Google Pay settings for your payment gateway
-          </Typography>
-        </Box>
-
         {/* Country and Currency */}
         <Flex gap={4} wrap="wrap">
           <Box style={{ flex: 1, minWidth: "300px" }}>
@@ -82,7 +77,7 @@ const GooglePayConfig = ({
               hint="Select the country where your business operates"
               required
             >
-              {GOOGLE_PAY_SUPPORTED_COUNTRIES.map(country => (
+              {GOOGLE_PAY_SUPPORTED_COUNTRIES.map((country) => (
                 <Option key={country.code} value={country.code}>
                   {country.name} ({country.code})
                 </Option>
@@ -99,7 +94,7 @@ const GooglePayConfig = ({
               hint="Select the currency for transactions"
               required
             >
-              {GOOGLE_PAY_SUPPORTED_CURRENCIES.map(currency => (
+              {GOOGLE_PAY_SUPPORTED_CURRENCIES.map((currency) => (
                 <Option key={currency.code} value={currency.code}>
                   {currency.name} ({currency.code}) {currency.symbol}
                 </Option>
@@ -110,23 +105,33 @@ const GooglePayConfig = ({
 
         {/* Merchant Name */}
         <Box>
-          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
+          <Typography
+            variant="pi"
+            fontWeight="semiBold"
+            style={{ marginLeft: "2px" }}
+          >
             Merchant Name
           </Typography>
-          <Typography variant="pi" textColor="neutral600" style={{ marginLeft: "2px" }}>
+          <Typography
+            variant="pi"
+            textColor="neutral600"
+            style={{ marginLeft: "2px" }}
+          >
             The name of your business as it will appear in Google Pay
           </Typography>
           <input
             type="text"
             value={merchantName}
-            onChange={(e) => onConfigChange({ ...config, merchantName: e.target.value })}
+            onChange={(e) =>
+              onConfigChange({ ...config, merchantName: e.target.value })
+            }
             style={{
               width: "100%",
               padding: "8px 12px",
               marginTop: "8px",
               border: "1px solid #dcdce4",
               borderRadius: "4px",
-              fontSize: "14px"
+              fontSize: "14px",
             }}
             placeholder="Your Store Name"
           />
@@ -134,18 +139,29 @@ const GooglePayConfig = ({
 
         {/* Allowed Card Networks */}
         <Box>
-          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
+          <Typography
+            variant="pi"
+            fontWeight="semiBold"
+            style={{ marginLeft: "2px" }}
+          >
             Allowed Card Networks
           </Typography>
-          <Typography variant="pi" textColor="neutral600" style={{ marginLeft: "2px" }}>
+          <Typography
+            variant="pi"
+            textColor="neutral600"
+            style={{ marginLeft: "2px" }}
+          >
             Select payment card networks to accept
           </Typography>
           <Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
-            {GOOGLE_PAY_SUPPORTED_NETWORKS.map(network => {
+            {GOOGLE_PAY_SUPPORTED_NETWORKS.map((network) => {
               const isSelected = allowedCardNetworks?.includes(network.code);
 
               return (
-                <Box key={network.code} style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}>
+                <Box
+                  key={network.code}
+                  style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}
+                >
                   <Checkbox
                     name={`network-${network.code}`}
                     checked={isSelected}
@@ -158,7 +174,11 @@ const GooglePayConfig = ({
             })}
           </Flex>
           {allowedCardNetworks?.length === 0 && (
-            <Typography variant="pi" textColor="danger600" style={{ marginTop: "8px" }}>
+            <Typography
+              variant="pi"
+              textColor="danger600"
+              style={{ marginTop: "8px" }}
+            >
               At least one card network must be selected
             </Typography>
           )}
@@ -166,18 +186,29 @@ const GooglePayConfig = ({
 
         {/* Allowed Authentication Methods */}
         <Box>
-          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
+          <Typography
+            variant="pi"
+            fontWeight="semiBold"
+            style={{ marginLeft: "2px" }}
+          >
             Allowed Authentication Methods
           </Typography>
-          <Typography variant="pi" textColor="neutral600" style={{ marginLeft: "2px" }}>
+          <Typography
+            variant="pi"
+            textColor="neutral600"
+            style={{ marginLeft: "2px" }}
+          >
             Select authentication methods for card payments
           </Typography>
           <Flex wrap="wrap" gap={4} style={{ marginTop: "12px" }}>
-            {GOOGLE_PAY_AUTH_METHODS.map(method => {
+            {GOOGLE_PAY_AUTH_METHODS.map((method) => {
               const isSelected = allowedAuthMethods?.includes(method.code);
 
               return (
-                <Box key={method.code} style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}>
+                <Box
+                  key={method.code}
+                  style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}
+                >
                   <Checkbox
                     name={`auth-method-${method.code}`}
                     checked={isSelected}
@@ -190,7 +221,11 @@ const GooglePayConfig = ({
             })}
           </Flex>
           {allowedAuthMethods?.length === 0 && (
-            <Typography variant="pi" textColor="danger600" style={{ marginTop: "8px" }}>
+            <Typography
+              variant="pi"
+              textColor="danger600"
+              style={{ marginTop: "8px" }}
+            >
               At least one authentication method must be selected
             </Typography>
           )}
@@ -198,14 +233,17 @@ const GooglePayConfig = ({
 
         {/* Gateway Merchant ID Info */}
         <Box>
-          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
+          <Typography
+            variant="pi"
+            fontWeight="semiBold"
+            style={{ marginLeft: "2px" }}
+          >
             Gateway Merchant ID
           </Typography>
           <Typography variant="pi" textColor="neutral600">
             {settings?.mid || settings?.portalid
               ? `Using: ${settings.mid || settings.portalid}`
-              : "Gateway merchant ID will be obtained from your Payone Merchant ID (MID) or Portal ID. Make sure these are configured in the main Configuration tab."
-            }
+              : "Gateway merchant ID will be obtained from your Payone Merchant ID (MID) or Portal ID. Make sure these are configured in the main Configuration tab."}
           </Typography>
         </Box>
       </Stack>
@@ -214,4 +252,3 @@ const GooglePayConfig = ({
 };
 
 export default GooglePayConfig;
-

package/admin/src/pages/App/components/PaymentActionsPanel.jsx

@@ -6,6 +6,7 @@ import AuthorizationForm from "./paymentActions/AuthorizationForm";
 import CaptureForm from "./paymentActions/CaptureForm";
 import RefundForm from "./paymentActions/RefundForm";
 import PaymentResult from "./paymentActions/PaymentResult";
+import ApplePayPanel from "./paymentActions/ApplePayPanel";
 
 const PaymentActionsPanel = ({
   paymentAmount,
@@ -57,66 +58,52 @@ const PaymentActionsPanel = ({
         style={{
           display: "flex",
           flexDirection: "column",
-          alignItems: "flex-start",
-          gap: "16px",
-          marginTop: "24px",
-          width: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "8px",
+          marginTop: "44px",
         }}
       >
-        <Typography
-          variant="pi"
-          textColor="danger600"
-          style={{
-            fontSize: "14px",
-            marginTop: "12px",
-            marginBottom: "12px",
-            fontWeight: "bold",
-          }}
-        >
-          ⚠️ Payment Actions are disabled in live mode for security reasons. but
-          you can test apple pay in live mode. For testing other payment
-          methods, please use test mode.
+        <Typography variant="pi" textColor="neutral600">
+          Test Payments are only works in test mode.
+        </Typography>
+        <Typography variant="pi" textColor="neutral600">
+          Please switch to test mode in plugin settings to use test payments.
         </Typography>
-
-        <PaymentMethodSelector
-          paymentMethod={paymentMethod}
-          setPaymentMethod={setPaymentMethod}
-          captureMode={captureMode}
-          setCaptureMode={setCaptureMode}
-          onNavigateToConfig={onNavigateToConfig}
-          settings={settings}
-          isLiveMode={isLiveMode}
-        />
-
-        <hr className="payment-divider" />
-        <Box className="payment-form-section">
-          <AuthorizationForm
-            paymentAmount={paymentAmount}
-            setPaymentAmount={setPaymentAmount}
-            authReference={authReference}
-            setAuthReference={setAuthReference}
-            isProcessingPayment={isProcessingPayment}
-            onAuthorization={onAuthorization}
-            paymentMethod={paymentMethod}
-            settings={settings}
-            googlePayToken={googlePayToken}
-            setGooglePayToken={setGooglePayToken}
-            applePayToken={applePayToken}
-            setApplePayToken={setApplePayToken}
-            cardtype={cardtype}
-            setCardtype={setCardtype}
-            cardpan={cardpan}
-            setCardpan={setCardpan}
-            cardexpiredate={cardexpiredate}
-            setCardexpiredate={setCardexpiredate}
-            cardcvc2={cardcvc2}
-            setCardcvc2={setCardcvc2}
-          />
-        </Box>
       </Box>
     );
   }
 
+  if (paymentMethod === "apl") {
+    return (
+      <ApplePayPanel
+        paymentAmount={paymentAmount}
+        setPaymentAmount={setPaymentAmount}
+        authReference={authReference}
+        setAuthReference={setAuthReference}
+        isProcessingPayment={isProcessingPayment}
+        onAuthorization={onAuthorization}
+        paymentMethod={paymentMethod}
+        setPaymentMethod={setPaymentMethod}
+        captureMode={captureMode}
+        setCaptureMode={setCaptureMode}
+        settings={settings}
+        setGooglePayToken={setGooglePayToken}
+        applePayToken={applePayToken}
+        setApplePayToken={setApplePayToken}
+        cardtype={cardtype}
+        setCardtype={setCardtype}
+        cardpan={cardpan}
+        setCardpan={setCardpan}
+        cardexpiredate={cardexpiredate}
+        setCardexpiredate={setCardexpiredate}
+        cardcvc2={cardcvc2}
+        setCardcvc2={setCardcvc2}
+        onNavigateToConfig={onNavigateToConfig}
+      />
+    );
+  }
+
   return (
     <Box
       className="payment-container"
@@ -181,7 +168,6 @@ const PaymentActionsPanel = ({
             onPreauthorization={onPreauthorization}
             paymentMethod={paymentMethod}
             settings={settings}
-            googlePayToken={googlePayToken}
             setGooglePayToken={setGooglePayToken}
             applePayToken={applePayToken}
             setApplePayToken={setApplePayToken}
@@ -209,7 +195,6 @@ const PaymentActionsPanel = ({
             onAuthorization={onAuthorization}
             paymentMethod={paymentMethod}
             settings={settings}
-            googlePayToken={googlePayToken}
             setGooglePayToken={setGooglePayToken}
             applePayToken={applePayToken}
             setApplePayToken={setApplePayToken}

package/admin/src/pages/App/components/paymentActions/ApplePayPanel.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Box, Typography } from "@strapi/design-system";
+import PaymentMethodSelector from "./PaymentMethodSelector";
+import AuthorizationForm from "./AuthorizationForm";
+
+const ApplePayOnlyPanel = ({
+  paymentMethod,
+  setPaymentMethod,
+  captureMode,
+  setCaptureMode,
+  onNavigateToConfig,
+}) => {
+  return (
+    <Box
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: "16px",
+        marginTop: "24px",
+        width: "100%",
+      }}
+    >
+      <Typography
+        variant="pi"
+        textColor="warning600"
+        style={{
+          fontSize: "14px",
+          marginTop: "12px",
+          marginBottom: "12px",
+          fontWeight: "bold",
+        }}
+      >
+        ⚠️ Apple Pay can only be tested on a production domain with HTTPS and
+        Live mode. Testing in Strapi admin panel is not supported. Please test
+        Apple Pay on your production website.
+      </Typography>
+
+      <PaymentMethodSelector
+        paymentMethod={paymentMethod}
+        setPaymentMethod={setPaymentMethod}
+        captureMode={captureMode}
+        setCaptureMode={setCaptureMode}
+        onNavigateToConfig={onNavigateToConfig}
+        isLiveMode={false}
+      />
+    </Box>
+  );
+};
+
+export default ApplePayOnlyPanel;