strapi-plugin-payone-provider 1.6.1 → 1.6.3

package/admin/src/index.js

@@ -3,6 +3,7 @@ import pluginId from "./pluginId";
 import Initializer from "./components/Initializer/index.jsx";
 import PluginIcon from "./components/PluginIcon/index.jsx";
 import { injectGooglePayScript } from "./pages/utils/injectGooglePayScript";
+import { injectApplePayScript } from "./pages/utils/injectApplePayScript";
 
 const name = pluginPkg.strapi.name;
 
@@ -32,6 +33,7 @@ export default {
 
   bootstrap(app) {
     injectGooglePayScript();
+    injectApplePayScript();
   },
 
   async registerTrads() {

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

@@ -224,8 +224,8 @@ const ApplePayBtn = ({
     session.begin();
   };
 
-  const mode = (settings?.mode || 'test').toLowerCase();
-  const isLiveMode = mode === 'live';
+  const mode = (settings?.mode || "test").toLowerCase();
+  const isLiveMode = mode === "live";
 
   if (!settings?.mid) {
     return (
@@ -245,15 +245,19 @@ const ApplePayBtn = ({
   if (!isLiveMode) {
     return (
       <Box>
-        <Alert closeLabel="Close" title="⚠️ Apple Pay Only Works in Live Mode" variant="danger">
+        <Alert
+          closeLabel="Close"
+          title=" Apple Pay Only Works in Live Mode"
+          variant="danger"
+        >
           <Typography variant="pi" marginTop={2}>
-            <strong>Apple Pay is only supported in live mode.</strong> According to Payone documentation, test mode support will be available at a later time.
+            <strong>Apple Pay is only supported in live mode.</strong> According
+            to Payone documentation, test mode support will be available at a
+            later time.
           </Typography>
-          <Typography variant="pi" marginTop={2}>
-            Please switch to <strong>live mode</strong> in plugin settings to use Apple Pay.
-          </Typography>
-          <Typography variant="pi" marginTop={2} fontWeight="bold" textColor="danger600">
-            ⚠️ Apple Pay will NOT work in test mode!
+          <Typography variant="pi" style={{ marginLeft: "8px" }}>
+            Please switch to <strong>live mode</strong> in plugin settings to
+            use Apple Pay.
           </Typography>
         </Alert>
       </Box>
@@ -284,11 +288,9 @@ const ApplePayBtn = ({
         onClick={handleApplePayClick}
         buttonStyle={nativeButtonStyle}
         type={nativeButtonType}
-        style={{
-          width: "100%",
-          borderRadius: "8px",
-        }}
+        style={{ width: "220px", height: "40px" }}
       />
+      <br /> <br />
       <Typography
         variant="pi"
         textColor="neutral600"

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

@@ -51,6 +51,72 @@ const PaymentActionsPanel = ({
   const mode = (settings?.mode || "test").toLowerCase();
   const isLiveMode = mode === "live";
 
+  if (isLiveMode) {
+    return (
+      <Box
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          gap: "16px",
+          marginTop: "24px",
+          width: "100%",
+        }}
+      >
+        <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>
+
+        <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>
+    );
+  }
+
   return (
     <Box
       className="payment-container"
@@ -85,16 +151,6 @@ const PaymentActionsPanel = ({
             Process payments, captures, and refunds with multiple payment
             methods
           </Typography>
-          {isLiveMode && (
-            <Typography
-              variant="pi"
-              textColor="danger600"
-              style={{ fontSize: "14px", marginTop: "8px", fontWeight: "bold" }}
-            >
-              ⚠️ Payment Actions are disabled in live mode for security reasons.
-              Please use test mode for testing.
-            </Typography>
-          )}
         </Box>
 
         <PaymentMethodSelector
@@ -104,6 +160,7 @@ const PaymentActionsPanel = ({
           setCaptureMode={setCaptureMode}
           onNavigateToConfig={onNavigateToConfig}
           settings={settings}
+          isLiveMode={isLiveMode}
         />
 
         <hr className="payment-divider" />
@@ -142,13 +199,7 @@ const PaymentActionsPanel = ({
 
         <hr className="payment-divider" />
 
-        <Box
-          className="payment-form-section"
-          style={{
-            opacity: isLiveMode ? 0.5 : 1,
-            pointerEvents: isLiveMode ? "none" : "auto",
-          }}
-        >
+        <Box className="payment-form-section">
           <AuthorizationForm
             paymentAmount={paymentAmount}
             setPaymentAmount={setPaymentAmount}

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

@@ -31,7 +31,6 @@ const AuthorizationForm = ({
   setCardexpiredate,
   cardcvc2,
   setCardcvc2,
-  isLiveMode = false,
 }) => {
   const handleGooglePayToken = (token, paymentData) => {
     if (!token) {
@@ -42,9 +41,7 @@ const AuthorizationForm = ({
   };
 
   const handleGooglePayError = (error) => {
-    if (onError) {
-      onError(error);
-    }
+    console.error("[AuthorizationForm] Google Pay error:", error);
   };
 
   const handleApplePayToken = async (token, paymentData) => {
@@ -62,9 +59,7 @@ const AuthorizationForm = ({
   };
 
   const handleApplePayError = (error) => {
-    if (onError) {
-      onError(error);
-    }
+    console.error("[AuthorizationForm] Apple Pay error:", error);
   };
 
   return (
@@ -168,9 +163,7 @@ const AuthorizationForm = ({
                 loading={isProcessingPayment}
                 startIcon={<Play />}
                 style={{ maxWidth: "200px" }}
-                disabled={
-                  !paymentAmount.trim() || !authReference.trim() || isLiveMode
-                }
+                disabled={!paymentAmount.trim() || !authReference.trim()}
                 className="payment-button payment-button-primary"
               >
                 Process Authorization
@@ -191,8 +184,7 @@ const AuthorizationForm = ({
             (paymentMethod === "cc" &&
               settings?.enable3DSecure !== false &&
               (!cardtype || !cardpan || !cardexpiredate || !cardcvc2)) ||
-            (paymentMethod === "apl" && !applePayToken) ||
-            isLiveMode
+            (paymentMethod === "apl" && !applePayToken)
           }
         >
           Process Authorization

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   Box,
   Flex,
@@ -22,10 +22,14 @@ const PaymentMethodSelector = ({
   captureMode,
   setCaptureMode,
   onNavigateToConfig,
-  settings,
+  isLiveMode,
 }) => {
-  const mode = (settings?.mode || "test").toLowerCase();
-  const isLiveMode = mode === "live";
+  useEffect(() => {
+    if (isLiveMode && paymentMethod !== "apl") {
+      setPaymentMethod("apl");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLiveMode]);
 
   return (
     <Box>
@@ -37,7 +41,7 @@ const PaymentMethodSelector = ({
           onChange={(value) => setPaymentMethod(value)}
           hint={`Current: ${getPaymentMethodDisplayName(paymentMethod)}`}
         >
-          {getPaymentMethodOptions().map((option) => (
+          {getPaymentMethodOptions(isLiveMode).map((option) => (
             <Option key={option.value} value={option.value}>
               {option.label}
             </Option>
@@ -45,96 +49,169 @@ const PaymentMethodSelector = ({
         </Select>
         {paymentMethod === "apl" && onNavigateToConfig && (
           <>
-            <Alert
-              closeLabel="Close"
-              title="⚠️ Important: Middleware Configuration Required"
-              variant="warning"
+            <Box
+              style={{ display: "flex", flexDirection: "column", gap: "16px" }}
             >
-              <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.
-              </Typography>
-              <Typography variant="pi" marginTop={2}>
-                Required CSP directives for Apple Pay:
-              </Typography>
               <Box
-                marginTop={2}
-                padding={2}
-                background="neutral100"
-                borderRadius="4px"
+                style={{
+                  background: "transparent",
+                  padding: "16px",
+                  borderRadius: "4px",
+                  border: "1px solid #eaeaea",
+                }}
               >
-                <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 variant="pi" style={{ lineHeight: "1.6" }}>
+                  <strong>Apple Pay requires middleware configuration</strong>{" "}
+                  to work properly. You must configure Content Security Policy
+                  (CSP) in{" "}
+                  <code
+                    style={{
+                      padding: "2px 6px",
+                      borderRadius: "3px",
+                      fontSize: "13px",
+                    }}
+                  >
+                    config/middlewares.js
+                  </code>{" "}
+                  to allow Apple Pay scripts.
                 </Typography>
+
+                <Box style={{ marginTop: "16px" }}>
+                  <Typography
+                    variant="pi"
+                    style={{
+                      fontWeight: "600",
+                      marginBottom: "8px",
+                      display: "block",
+                    }}
+                  >
+                    Required CSP directives:
+                  </Typography>
+
+                  <Box>
+                    <Typography
+                      variant="pi"
+                      style={{
+                        fontFamily: "monospace",
+                        fontSize: "12px",
+                        lineHeight: "1.8",
+                      }}
+                    >
+                      <div>
+                        'script-src': ['https://applepay.cdn-apple.com',
+                        'https://www.apple.com']
+                      </div>
+                      <div>
+                        'connect-src': ['https://applepay.cdn-apple.com',
+                        'https://www.apple.com']
+                      </div>
+                      <div>'frame-src': ['https://applepay.cdn-apple.com']</div>
+                    </Typography>
+                  </Box>
+                </Box>
+
+                <Box
+                  padding={2}
+                  background="warning100"
+                  style={{
+                    marginTop: "16px",
+                    borderRadius: "4px",
+                    borderLeft: "3px solid #f29d41",
+                  }}
+                >
+                  <Typography variant="pi" style={{ fontWeight: "600" }}>
+                    ⚠️ Without this configuration, Apple Pay will NOT work!
+                  </Typography>
+                </Box>
               </Box>
-              <Typography variant="pi" marginTop={2} fontWeight="bold">
-                Without this configuration, Apple Pay will NOT work!
-              </Typography>
-            </Alert>
-            <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:
-              </Typography>
+
               <Box
-                marginTop={2}
-                padding={2}
-                background="neutral100"
-                borderRadius="4px"
+                style={{
+                  background: "transparent",
+                  padding: "16px",
+                  borderRadius: "4px",
+                  border: "1px solid #eaeaea",
+                }}
               >
-                <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 variant="pi" style={{ lineHeight: "1.6" }}>
+                  <strong>Download the domain verification file</strong> from
+                  your Payone merchant portal and place it in the following
+                  locations:
                 </Typography>
-              </Box>
-              <Typography variant="pi" marginTop={2}>
-                <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"
-                  rel="noopener noreferrer"
-                  style={{ color: "#0066ff", textDecoration: "underline" }}
+
+                <Box>
+                  <Typography
+                    variant="pi"
+                    style={{
+                      fontFamily: "monospace",
+                      fontSize: "12px",
+                      lineHeight: "1.8",
+                    }}
+                  >
+                    <div style={{ marginBottom: "8px" }}>
+                      <strong>Strapi:</strong>{" "}
+                      <code>
+                        public/.well-known/apple-developer-merchantid-domain-association
+                      </code>
+                    </div>
+                    <div>
+                      <strong>Frontend:</strong>{" "}
+                      <code>
+                        public/.well-known/apple-developer-merchantid-domain-association
+                      </code>
+                    </div>
+                  </Typography>
+                </Box>
+
+                <Box style={{ marginTop: "16px" }}>
+                  <Typography variant="pi" style={{ lineHeight: "1.6" }}>
+                    <strong>Download URL:</strong> Get the domain verification
+                    file from Payone documentation:
+                  </Typography>
+                  <Box
+                    padding={2}
+                    background="primary100"
+                    style={{ marginTop: "8px", borderRadius: "4px" }}
+                  >
+                    <Link
+                      href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      style={{
+                        color: "#4945ff",
+                        textDecoration: "none",
+                        fontWeight: "500",
+                        fontSize: "14px",
+                      }}
+                    >
+                      →
+                      https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
+                    </Link>
+                  </Box>
+                </Box>
+
+                <Box
+                  padding={2}
+                  background="danger100"
+                  style={{
+                    marginTop: "16px",
+                    borderRadius: "4px",
+                    borderLeft: "3px solid #d02b20",
+                  }}
                 >
-                  https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev
-                </Link>
-              </Typography>
-              <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">
+                  <Typography
+                    variant="pi"
+                    textColor="danger600"
+                    style={{ fontWeight: "600" }}
+                  >
+                    ⚠️ Without this file, Apple Pay will NOT work on your
+                    domain!
+                  </Typography>
+                </Box>
+              </Box>
+            </Box>
+
+            <Box padding={3} borderRadius="4px">
               <Typography variant="pi" textColor="neutral600">
                 Configure Apple Pay settings:{" "}
                 <Link

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

@@ -1,5 +1,11 @@
 import React from "react";
-import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
+import {
+  Box,
+  Flex,
+  Typography,
+  TextInput,
+  Button,
+} from "@strapi/design-system";
 import { Play } from "@strapi/icons";
 import GooglePayButton from "../GooglePaybutton";
 import CardDetailsInput from "./CardDetailsInput";
@@ -22,7 +28,7 @@ const PreauthorizationForm = ({
   setCardexpiredate,
   cardcvc2,
   setCardcvc2,
-  isLiveMode = false
+  isLiveMode = false,
 }) => {
   const handleGooglePayToken = (token, paymentData) => {
     if (!token) {
@@ -33,20 +39,25 @@ const PreauthorizationForm = ({
   };
 
   const handleGooglePayError = (error) => {
-    if (onError) {
-      onError(error);
-    }
+    console.error("[PreauthorizationForm] Google Pay error:", error);
   };
 
-
-
   return (
     <Flex direction="column" alignItems="stretch" gap={4}>
       <Flex direction="row" gap={2}>
-        <Typography variant="omega" fontWeight="semiBold" textColor="neutral800" className="payment-form-title">
+        <Typography
+          variant="omega"
+          fontWeight="semiBold"
+          textColor="neutral800"
+          className="payment-form-title"
+        >
           Preauthorization
         </Typography>
-        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+        <Typography
+          variant="pi"
+          textColor="neutral600"
+          className="payment-form-description"
+        >
           Reserve an amount on a credit card without capturing it immediately.
         </Typography>
       </Flex>
@@ -111,7 +122,7 @@ const PreauthorizationForm = ({
           onClick={onPreauthorization}
           loading={isProcessingPayment}
           startIcon={<Play />}
-          style={{ maxWidth: '200px' }}
+          style={{ maxWidth: "200px" }}
           className="payment-button payment-button-primary"
           disabled={
             !paymentAmount.trim() ||
@@ -129,4 +140,3 @@ const PreauthorizationForm = ({
 };
 
 export default PreauthorizationForm;
-

package/admin/src/pages/App/index.jsx

@@ -22,17 +22,25 @@ const App = () => {
   const paymentActions = usePaymentActions();
 
   useEffect(() => {
-    if (location.pathname.includes('/apple-pay-config') || location.pathname.includes('/google-pay-config')) {
+    if (
+      location.pathname.includes("/apple-pay-config") ||
+      location.pathname.includes("/google-pay-config")
+    ) {
     } else {
-      const tabFromPath = location.pathname.includes('/history') ? 1 :
-        location.pathname.includes('/payment-actions') ? 2 :
-          location.pathname.includes('/documentation') ? 3 : 0;
+      const tabFromPath = location.pathname.includes("/history")
+        ? 1
+        : location.pathname.includes("/payment-actions")
+        ? 2
+        : location.pathname.includes("/documentation")
+        ? 3
+        : 0;
       setActiveTab(tabFromPath);
     }
   }, [location.pathname]);
 
-  const isApplePayConfigPage = location.pathname.includes('/apple-pay-config');
-  const isGooglePayConfigPage = location.pathname.includes('/google-pay-config');
+  const isApplePayConfigPage = location.pathname.includes("/apple-pay-config");
+  const isGooglePayConfigPage =
+    location.pathname.includes("/google-pay-config");
 
   if (isApplePayConfigPage) {
     return (
@@ -124,4 +132,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;