strapi-plugin-payone-provider 1.5.0 → 1.5.3

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

@@ -0,0 +1,217 @@
+import React from "react";
+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
+} from "../../utils/googlePayConstants";
+
+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
+  } = config || {};
+
+  const handleCountryChange = (value) => {
+    onConfigChange({
+      ...config,
+      countryCode: value
+    });
+  };
+
+  const handleCurrencyChange = (value) => {
+    onConfigChange({
+      ...config,
+      currencyCode: value
+    });
+  };
+
+  const handleNetworkToggle = (networkCode) => {
+    const currentNetworks = allowedCardNetworks || [];
+    const newNetworks = currentNetworks.includes(networkCode)
+      ? currentNetworks.filter(n => n !== networkCode)
+      : [...currentNetworks, networkCode];
+
+    onConfigChange({
+      ...config,
+      allowedCardNetworks: newNetworks
+    });
+  };
+
+  const handleAuthMethodToggle = (authMethodCode) => {
+    const currentMethods = allowedAuthMethods || [];
+    const newMethods = currentMethods.includes(authMethodCode)
+      ? currentMethods.filter(m => m !== authMethodCode)
+      : [...currentMethods, authMethodCode];
+
+    onConfigChange({
+      ...config,
+      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" }}>
+            <Select
+              label="Country Code"
+              name="countryCode"
+              value={countryCode}
+              onChange={handleCountryChange}
+              hint="Select the country where your business operates"
+              required
+            >
+              {GOOGLE_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
+              label="Currency Code"
+              name="currencyCode"
+              value={currencyCode}
+              onChange={handleCurrencyChange}
+              hint="Select the currency for transactions"
+              required
+            >
+              {GOOGLE_PAY_SUPPORTED_CURRENCIES.map(currency => (
+                <Option key={currency.code} value={currency.code}>
+                  {currency.name} ({currency.code}) {currency.symbol}
+                </Option>
+              ))}
+            </Select>
+          </Box>
+        </Flex>
+
+        {/* Merchant Name */}
+        <Box>
+          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
+            Merchant Name
+          </Typography>
+          <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 })}
+            style={{
+              width: "100%",
+              padding: "8px 12px",
+              marginTop: "8px",
+              border: "1px solid #dcdce4",
+              borderRadius: "4px",
+              fontSize: "14px"
+            }}
+            placeholder="Your Store Name"
+          />
+        </Box>
+
+        {/* Allowed Card Networks */}
+        <Box>
+          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
+            Allowed Card Networks
+          </Typography>
+          <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 => {
+              const isSelected = allowedCardNetworks?.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)}
+                  >
+                    {network.name} ({network.code})
+                  </Checkbox>
+                </Box>
+              );
+            })}
+          </Flex>
+          {allowedCardNetworks?.length === 0 && (
+            <Typography variant="pi" textColor="danger600" style={{ marginTop: "8px" }}>
+              At least one card network must be selected
+            </Typography>
+          )}
+        </Box>
+
+        {/* Allowed Authentication Methods */}
+        <Box>
+          <Typography variant="pi" fontWeight="semiBold" style={{ marginLeft: "2px" }}>
+            Allowed Authentication Methods
+          </Typography>
+          <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 => {
+              const isSelected = allowedAuthMethods?.includes(method.code);
+
+              return (
+                <Box key={method.code} style={{ flex: "0 0 calc(50% - 8px)", minWidth: "250px" }}>
+                  <Checkbox
+                    name={`auth-method-${method.code}`}
+                    checked={isSelected}
+                    onChange={() => handleAuthMethodToggle(method.code)}
+                  >
+                    {method.name} - {method.description}
+                  </Checkbox>
+                </Box>
+              );
+            })}
+          </Flex>
+          {allowedAuthMethods?.length === 0 && (
+            <Typography variant="pi" textColor="danger600" style={{ marginTop: "8px" }}>
+              At least one authentication method must be selected
+            </Typography>
+          )}
+        </Box>
+
+        {/* Gateway Merchant ID Info */}
+        <Box>
+          <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."
+            }
+          </Typography>
+        </Box>
+      </Stack>
+    </Box>
+  );
+};
+
+export default GooglePayConfig;
+

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

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from "react";
+import {
+  Box,
+  Card,
+  CardBody,
+  Flex,
+  Typography,
+  Button
+} from "@strapi/design-system";
+import { Check } from "@strapi/icons";
+import GooglePayConfig from "./GooglePayConfig";
+
+const GooglePayConfigPanel = ({
+  settings,
+  onInputChange,
+  isSaving,
+  onSave,
+  onBack
+}) => {
+  const [googlePayConfig, setGooglePayConfig] = useState(settings?.googlePayConfig || {});
+
+  useEffect(() => {
+    setGooglePayConfig(settings?.googlePayConfig || {});
+  }, [settings?.googlePayConfig]);
+
+  return (
+    <Box
+      className="payment-container"
+      paddingTop={8}
+      paddingBottom={8}
+      paddingLeft={8}
+      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' }}>
+            Google Pay Configuration
+          </Typography>
+          <Typography variant="pi" textColor="neutral600" marginTop={2} className="payment-subtitle" style={{ fontSize: '14px' }}>
+            Configure Google Pay settings for your payment gateway
+          </Typography>
+        </Box>
+
+        <Box>
+          <Card className="payment-card">
+            <CardBody padding={6}>
+              <GooglePayConfig
+                config={googlePayConfig}
+                onConfigChange={(newConfig) => {
+                  setGooglePayConfig(newConfig);
+                  onInputChange("googlePayConfig", newConfig);
+                }}
+                settings={settings}
+              />
+            </CardBody>
+          </Card>
+        </Box>
+
+        <Box paddingTop={4}>
+          <Flex direction="row" gap={4} alignItems="center">
+            <Button
+              loading={isSaving}
+              onClick={onSave}
+              startIcon={<Check />}
+              size="L"
+              variant="default"
+              className="payment-button payment-button-success"
+            >
+              Save Google Pay Configuration
+            </Button>
+            <Typography variant="sigma" textColor="neutral600">
+              Note: Google Pay configuration is used for Google Pay payment requests. Make sure to configure the correct card networks, authentication methods, and merchant information for your region.
+            </Typography>
+          </Flex>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default GooglePayConfigPanel;
+

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

@@ -291,7 +291,7 @@ const GooglePayButton = ({
             </Typography>
           </>
         )}
-        <Box ref={buttonContainerRef} style={{ minHeight: "40px", width: "100%", display: "flex", justifyContent: "flex-start" }} />
+        <Box ref={buttonContainerRef} style={{ minHeight: "40px", width: "100%", maxWidth: "200px", display: "flex", justifyContent: "flex-start", }} />
       </Flex>
     </Box>
   );

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

@@ -45,8 +45,12 @@ const PaymentActionsPanel = ({
   cardexpiredate,
   setCardexpiredate,
   cardcvc2,
-  setCardcvc2
+  setCardcvc2,
+  onNavigateToConfig
 }) => {
+  const mode = (settings?.mode || 'test').toLowerCase();
+  const isLiveMode = mode === 'live';
+
   return (
     <Box
       className="payment-container"
@@ -56,13 +60,18 @@ const PaymentActionsPanel = ({
       paddingRight={8}
     >
       <Flex direction="column" alignItems="stretch" gap={6}>
-        <Box>
+        <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '8px' }}>
           <Typography variant="beta" as="h2" className="payment-title" style={{ fontSize: '20px', marginBottom: '4px' }}>
             Payment Actions
           </Typography>
           <Typography variant="pi" textColor="neutral600" className="payment-subtitle" style={{ fontSize: '14px' }}>
             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
@@ -70,11 +79,12 @@ const PaymentActionsPanel = ({
           setPaymentMethod={setPaymentMethod}
           captureMode={captureMode}
           setCaptureMode={setCaptureMode}
+          onNavigateToConfig={onNavigateToConfig}
         />
 
         <hr className="payment-divider" />
 
-        <Box className="payment-form-section">
+        <Box className="payment-form-section" style={{ opacity: isLiveMode ? 0.5 : 1, pointerEvents: isLiveMode ? 'none' : 'auto' }}>
           <PreauthorizationForm
             paymentAmount={paymentAmount}
             setPaymentAmount={setPaymentAmount}
@@ -96,12 +106,13 @@ const PaymentActionsPanel = ({
             setCardexpiredate={setCardexpiredate}
             cardcvc2={cardcvc2}
             setCardcvc2={setCardcvc2}
+            isLiveMode={isLiveMode}
           />
         </Box>
 
         <hr className="payment-divider" />
 
-        <Box className="payment-form-section">
+        <Box className="payment-form-section" style={{ opacity: isLiveMode ? 0.5 : 1, pointerEvents: isLiveMode ? 'none' : 'auto' }}>
           <AuthorizationForm
             paymentAmount={paymentAmount}
             setPaymentAmount={setPaymentAmount}
@@ -123,12 +134,13 @@ const PaymentActionsPanel = ({
             setCardexpiredate={setCardexpiredate}
             cardcvc2={cardcvc2}
             setCardcvc2={setCardcvc2}
+            isLiveMode={isLiveMode}
           />
         </Box>
 
         <hr className="payment-divider" />
 
-        <Box className="payment-form-section">
+        <Box className="payment-form-section" style={{ opacity: isLiveMode ? 0.5 : 1, pointerEvents: isLiveMode ? 'none' : 'auto' }}>
           <CaptureForm
             paymentAmount={paymentAmount}
             setPaymentAmount={setPaymentAmount}
@@ -141,7 +153,7 @@ const PaymentActionsPanel = ({
 
         <hr className="payment-divider" />
 
-        <Box className="payment-form-section">
+        <Box className="payment-form-section" style={{ opacity: isLiveMode ? 0.5 : 1, pointerEvents: isLiveMode ? 'none' : 'auto' }}>
           <RefundForm
             paymentAmount={paymentAmount}
             setPaymentAmount={setPaymentAmount}

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

@@ -25,7 +25,8 @@ const AuthorizationForm = ({
   cardexpiredate,
   setCardexpiredate,
   cardcvc2,
-  setCardcvc2
+  setCardcvc2,
+  isLiveMode = false
 }) => {
   const handleGooglePayToken = (token, paymentData) => {
     if (!token) {
@@ -41,12 +42,35 @@ const AuthorizationForm = ({
     }
   };
 
-  const handleApplePayToken = (token, paymentData) => {
+  const handleApplePayToken = async (token, paymentData) => {
     if (!token) {
-      return;
+      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);
-    onAuthorization(token);
+
+    console.log("[Apple Pay] Token saved to state successfully");
+
+    // Don't call onAuthorization 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 Authorization" 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 Authorization' to complete the payment."
+    });
   };
 
   const handleApplePayError = (error) => {
@@ -116,13 +140,33 @@ const AuthorizationForm = ({
           settings={settings}
         />
       ) : paymentMethod === "apl" ? (
-        <ApplePayButton
-          amount={paymentAmount}
-          currency="EUR"
-          onTokenReceived={handleApplePayToken}
-          onError={handleApplePayError}
-          settings={settings}
-        />
+        <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 authorization:
+              </Typography>
+              <Button
+                variant="default"
+                onClick={() => onAuthorization(applePayToken)}
+                loading={isProcessingPayment}
+                startIcon={<Play />}
+                style={{ maxWidth: '200px' }}
+                disabled={!paymentAmount.trim() || !authReference.trim() || isLiveMode}
+                className="payment-button payment-button-primary"
+              >
+                Process Authorization
+              </Button>
+            </Box>
+          )}
+        </Box>
       ) : (
         <Button
           variant="default"
@@ -135,7 +179,9 @@ const AuthorizationForm = ({
             !paymentAmount.trim() ||
             (paymentMethod === "cc" &&
               settings?.enable3DSecure !== false &&
-              (!cardtype || !cardpan || !cardexpiredate || !cardcvc2))
+              (!cardtype || !cardpan || !cardexpiredate || !cardcvc2)) ||
+            (paymentMethod === "apl" && !applePayToken) ||
+            isLiveMode
           }
         >
           Process Authorization

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { Box, Flex, Select, Option } from "@strapi/design-system";
+import { Box, Flex, Select, Option, Typography, Link, Alert } from "@strapi/design-system";
+import pluginId from "../../../../pluginId";
 import {
   getPaymentMethodOptions,
   supportsCaptureMode,
@@ -11,7 +12,8 @@ const PaymentMethodSelector = ({
   paymentMethod,
   setPaymentMethod,
   captureMode,
-  setCaptureMode
+  setCaptureMode,
+  onNavigateToConfig
 }) => {
   return (
     <Box>
@@ -29,6 +31,108 @@ const PaymentMethodSelector = ({
             </Option>
           ))}
         </Select>
+        {paymentMethod === "apl" && onNavigateToConfig && (
+          <>
+            <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.
+              </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/>
+                  'frame-src': ['https://applepay.cdn-apple.com']
+                </Typography>
+              </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">
+                <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:{" "}
+                <Link
+                  href="https://docs.payone.com/payment-methods/apple-pay/apple-pay-without-dev"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ color: "#0066ff", textDecoration: "underline" }}
+                >
+                  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!
+              </Typography>
+            </Alert>
+            <Box padding={3} background="neutral100" borderRadius="4px">
+              <Typography variant="pi" textColor="neutral600">
+                Configure Apple Pay settings:{" "}
+                <Link
+                  href={`/plugins/${pluginId}/apple-pay-config`}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onNavigateToConfig("apple-pay");
+                  }}
+                  style={{ cursor: "pointer", textDecoration: "underline", color: "#0066ff" }}
+                >
+                  /plugins/{pluginId}/apple-pay-config
+                </Link>
+              </Typography>
+            </Box>
+          </>
+        )}
+        {paymentMethod === "gpp" && onNavigateToConfig && (
+          <>
+            <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.
+              </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/>
+                  'frame-src': ['https://pay.google.com']
+                </Typography>
+              </Box>
+              <Typography variant="pi" marginTop={2} fontWeight="bold">
+                ⚠️ Without this configuration, Google Pay will NOT work!
+              </Typography>
+            </Alert>
+            <Box padding={3} background="neutral100" borderRadius="4px">
+              <Typography variant="pi" textColor="neutral600">
+                Configure Google Pay settings:{" "}
+                <Link
+                  href={`/plugins/${pluginId}/google-pay-config`}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onNavigateToConfig("google-pay");
+                  }}
+                  style={{ cursor: "pointer", textDecoration: "underline", color: "#0066ff" }}
+                >
+                  /plugins/{pluginId}/google-pay-config
+                </Link>
+              </Typography>
+            </Box>
+          </>
+        )}
         {supportsCaptureMode(paymentMethod) && (
           <Select
             label="Capture Mode"