strapi-plugin-payone-provider 1.4.1 → 1.5.0

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

@@ -0,0 +1,305 @@
+import React from "react";
+import { Box, Flex, Typography, Select, Option, Checkbox, TextInput } from "@strapi/design-system";
+import {
+  APPLE_PAY_SUPPORTED_COUNTRIES,
+  APPLE_PAY_SUPPORTED_CURRENCIES,
+  APPLE_PAY_SUPPORTED_NETWORKS,
+  APPLE_PAY_MERCHANT_CAPABILITIES,
+  getSupportedCurrenciesForCountry,
+  getSupportedNetworksForCountry,
+  APPLE_PAY_BUTTON_STYLES,
+  APPLE_PAY_BUTTON_TYPES,
+  DEFAULT_APPLE_PAY_CONFIG
+} from "../../utils/applePayConstants";
+
+const ApplePayConfig = ({
+  config,
+  onConfigChange,
+  settings
+}) => {
+  const {
+    countryCode = DEFAULT_APPLE_PAY_CONFIG.countryCode,
+    currencyCode = DEFAULT_APPLE_PAY_CONFIG.currencyCode,
+    merchantCapabilities = DEFAULT_APPLE_PAY_CONFIG.merchantCapabilities,
+    supportedNetworks = DEFAULT_APPLE_PAY_CONFIG.supportedNetworks,
+    buttonStyle = DEFAULT_APPLE_PAY_CONFIG.buttonStyle,
+    buttonType = DEFAULT_APPLE_PAY_CONFIG.buttonType,
+    requestPayerName = DEFAULT_APPLE_PAY_CONFIG.requestPayerName,
+    requestBillingAddress = DEFAULT_APPLE_PAY_CONFIG.requestBillingAddress,
+    requestPayerEmail = DEFAULT_APPLE_PAY_CONFIG.requestPayerEmail,
+    requestPayerPhone = DEFAULT_APPLE_PAY_CONFIG.requestPayerPhone,
+    requestShipping = DEFAULT_APPLE_PAY_CONFIG.requestShipping,
+    shippingType = DEFAULT_APPLE_PAY_CONFIG.shippingType
+  } = config || {};
+
+  // Get supported currencies and networks based on selected country
+  const supportedCurrencies = getSupportedCurrenciesForCountry(countryCode);
+  const supportedNetworksForCountry = getSupportedNetworksForCountry(countryCode);
+
+  const handleCountryChange = (value) => {
+    const newConfig = {
+      ...config,
+      countryCode: value
+    };
+    
+    // Auto-update currency if current currency is not supported in new country
+    const newSupportedCurrencies = getSupportedCurrenciesForCountry(value);
+    if (!newSupportedCurrencies.find(c => c.code === currencyCode)) {
+      newConfig.currencyCode = newSupportedCurrencies[0]?.code || "USD";
+    }
+    
+    // Auto-update networks based on country
+    newConfig.supportedNetworks = getSupportedNetworksForCountry(value);
+    
+    onConfigChange(newConfig);
+  };
+
+  const handleCurrencyChange = (value) => {
+    onConfigChange({
+      ...config,
+      currencyCode: value
+    });
+  };
+
+  const handleNetworkToggle = (networkCode) => {
+    const currentNetworks = supportedNetworks || [];
+    const newNetworks = currentNetworks.includes(networkCode)
+      ? currentNetworks.filter(n => n !== networkCode)
+      : [...currentNetworks, networkCode];
+    
+    onConfigChange({
+      ...config,
+      supportedNetworks: newNetworks
+    });
+  };
+
+  const handleCapabilityToggle = (capabilityCode) => {
+    const currentCapabilities = merchantCapabilities || [];
+    const newCapabilities = currentCapabilities.includes(capabilityCode)
+      ? currentCapabilities.filter(c => c !== capabilityCode)
+      : [...currentCapabilities, capabilityCode];
+    
+    onConfigChange({
+      ...config,
+      merchantCapabilities: newCapabilities
+    });
+  };
+
+  return (
+    <Box padding={4}>
+      <Flex direction="column" gap={4}>
+        <Typography variant="omega" fontWeight="semiBold">
+          Apple Pay Configuration
+        </Typography>
+
+        {/* Country Code */}
+        <Box>
+          <Select
+            label="Country Code *"
+            name="countryCode"
+            value={countryCode}
+            onChange={handleCountryChange}
+            hint="Select the country where your business operates"
+            required
+          >
+            {APPLE_PAY_SUPPORTED_COUNTRIES.map(country => (
+              <Option key={country.code} value={country.code}>
+                {country.name} ({country.code})
+              </Option>
+            ))}
+          </Select>
+        </Box>
+
+        {/* Currency Code */}
+        <Box>
+          <Select
+            label="Currency Code *"
+            name="currencyCode"
+            value={currencyCode}
+            onChange={handleCurrencyChange}
+            hint={`Supported currencies for ${countryCode}. Some currencies may be restricted.`}
+            required
+          >
+            {supportedCurrencies.map(currency => (
+              <Option key={currency.code} value={currency.code}>
+                {currency.name} ({currency.code}) {currency.symbol}
+              </Option>
+            ))}
+          </Select>
+          {supportedCurrencies.length === 0 && (
+            <Typography variant="pi" textColor="danger600" style={{ marginTop: "4px" }}>
+              No supported currencies for this country. Please select a different country.
+            </Typography>
+          )}
+        </Box>
+
+        {/* Supported Networks */}
+        <Box>
+          <Typography variant="pi" fontWeight="semiBold" style={{ marginBottom: "8px" }}>
+            Supported Networks *
+          </Typography>
+          <Typography variant="sigma" textColor="neutral600" style={{ marginBottom: "12px" }}>
+            Select payment networks supported in {countryCode}
+          </Typography>
+          <Flex direction="column" gap={2}>
+            {APPLE_PAY_SUPPORTED_NETWORKS.map(network => {
+              const isSupported = supportedNetworksForCountry.includes(network.code);
+              const isSelected = supportedNetworks?.includes(network.code);
+              
+              return (
+                <Checkbox
+                  key={network.code}
+                  name={`network-${network.code}`}
+                  checked={isSelected}
+                  onChange={() => handleNetworkToggle(network.code)}
+                  disabled={!isSupported}
+                  hint={!isSupported ? `Not supported in ${countryCode}` : undefined}
+                >
+                  {network.name} ({network.code})
+                  {!isSupported && (
+                    <Typography variant="sigma" textColor="neutral500" style={{ marginLeft: "8px" }}>
+                      (Not available in {countryCode})
+                    </Typography>
+                  )}
+                </Checkbox>
+              );
+            })}
+          </Flex>
+          {supportedNetworks?.length === 0 && (
+            <Typography variant="pi" textColor="danger600" style={{ marginTop: "8px" }}>
+              At least one network must be selected
+            </Typography>
+          )}
+        </Box>
+
+        {/* Merchant Capabilities */}
+        <Box>
+          <Typography variant="pi" fontWeight="semiBold" style={{ marginBottom: "8px" }}>
+            Merchant Capabilities *
+          </Typography>
+          <Typography variant="sigma" textColor="neutral600" style={{ marginBottom: "12px" }}>
+            Select payment capabilities. "3D Secure" is required for most payment methods.
+          </Typography>
+          <Flex direction="column" gap={2}>
+            {APPLE_PAY_MERCHANT_CAPABILITIES.map(capability => {
+              const isSelected = merchantCapabilities?.includes(capability.code);
+              
+              return (
+                <Checkbox
+                  key={capability.code}
+                  name={`capability-${capability.code}`}
+                  checked={isSelected}
+                  onChange={() => handleCapabilityToggle(capability.code)}
+                >
+                  {capability.name} - {capability.description}
+                </Checkbox>
+              );
+            })}
+          </Flex>
+          {merchantCapabilities?.length === 0 && (
+            <Typography variant="pi" textColor="danger600" style={{ marginTop: "8px" }}>
+              At least one capability must be selected. "supports3DS" is recommended.
+            </Typography>
+          )}
+        </Box>
+
+        {/* Button Style */}
+        <Box>
+          <Select
+            label="Button Style"
+            name="buttonStyle"
+            value={buttonStyle}
+            onChange={(value) => onConfigChange({ ...config, buttonStyle: value })}
+            hint="Visual style of the Apple Pay button"
+          >
+            {APPLE_PAY_BUTTON_STYLES.map(style => (
+              <Option key={style.code} value={style.code}>
+                {style.name}
+              </Option>
+            ))}
+          </Select>
+        </Box>
+
+        {/* Button Type */}
+        <Box>
+          <Select
+            label="Button Type"
+            name="buttonType"
+            value={buttonType}
+            onChange={(value) => onConfigChange({ ...config, buttonType: value })}
+            hint="Type of action the button represents"
+          >
+            {APPLE_PAY_BUTTON_TYPES.map(type => (
+              <Option key={type.code} value={type.code}>
+                {type.name}
+              </Option>
+            ))}
+          </Select>
+        </Box>
+
+        {/* Payment Options */}
+        <Box>
+          <Typography variant="pi" fontWeight="semiBold" style={{ marginBottom: "8px" }}>
+            Payment Options
+          </Typography>
+          <Flex direction="column" gap={2}>
+            <Checkbox
+              name="requestPayerName"
+              checked={requestPayerName}
+              onChange={(checked) => onConfigChange({ ...config, requestPayerName: checked })}
+            >
+              Request Payer Name
+            </Checkbox>
+            <Checkbox
+              name="requestBillingAddress"
+              checked={requestBillingAddress}
+              onChange={(checked) => onConfigChange({ ...config, requestBillingAddress: checked })}
+            >
+              Request Billing Address
+            </Checkbox>
+            <Checkbox
+              name="requestPayerEmail"
+              checked={requestPayerEmail}
+              onChange={(checked) => onConfigChange({ ...config, requestPayerEmail: checked })}
+            >
+              Request Payer Email
+            </Checkbox>
+            <Checkbox
+              name="requestPayerPhone"
+              checked={requestPayerPhone}
+              onChange={(checked) => onConfigChange({ ...config, requestPayerPhone: checked })}
+            >
+              Request Payer Phone
+            </Checkbox>
+            <Checkbox
+              name="requestShipping"
+              checked={requestShipping}
+              onChange={(checked) => onConfigChange({ ...config, requestShipping: checked })}
+            >
+              Request Shipping Address
+            </Checkbox>
+          </Flex>
+        </Box>
+
+        {/* Merchant Identifier Info */}
+        <Box padding={3} background="neutral100" borderRadius="4px">
+          <Typography variant="pi" fontWeight="semiBold" style={{ marginBottom: "4px" }}>
+            Merchant Identifier
+          </Typography>
+          <Typography variant="sigma" textColor="neutral600">
+            {settings?.mid || settings?.portalid 
+              ? `Using: ${settings.mid || settings.portalid}`
+              : "Merchant identifier will be obtained from Payone after domain verification. See documentation for setup instructions."
+            }
+          </Typography>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default ApplePayConfig;
+
+
+
+

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

@@ -36,6 +36,8 @@ const PaymentActionsPanel = ({
   settings,
   googlePayToken,
   setGooglePayToken,
+  applePayToken,
+  setApplePayToken,
   cardtype,
   setCardtype,
   cardpan,
@@ -84,6 +86,8 @@ const PaymentActionsPanel = ({
             settings={settings}
             googlePayToken={googlePayToken}
             setGooglePayToken={setGooglePayToken}
+            applePayToken={applePayToken}
+            setApplePayToken={setApplePayToken}
             cardtype={cardtype}
             setCardtype={setCardtype}
             cardpan={cardpan}
@@ -109,6 +113,8 @@ const PaymentActionsPanel = ({
             settings={settings}
             googlePayToken={googlePayToken}
             setGooglePayToken={setGooglePayToken}
+            applePayToken={applePayToken}
+            setApplePayToken={setApplePayToken}
             cardtype={cardtype}
             setCardtype={setCardtype}
             cardpan={cardpan}

package/admin/src/pages/App/components/icons/BankIcon.js

@@ -1,10 +1,10 @@
-import React from 'react';
-
-const BankIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill={color} />
-    <path d="M12 6l-1.5 3L7 8.5l2.5 2.5L8 14l4-2.5L16 14l-1.5-3L18 8.5l-3.5.5L12 6z" fill={color} />
-  </svg>
-);
-
-export default BankIcon;
+import React from 'react';
+
+const BankIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill={color} />
+    <path d="M12 6l-1.5 3L7 8.5l2.5 2.5L8 14l4-2.5L16 14l-1.5-3L18 8.5l-3.5.5L12 6z" fill={color} />
+  </svg>
+);
+
+export default BankIcon;

package/admin/src/pages/App/components/icons/ChevronDownIcon.js

@@ -1,9 +1,9 @@
-import React from 'react';
-
-const ChevronDownIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill={color} />
-  </svg>
-);
-
-export default ChevronDownIcon;
+import React from 'react';
+
+const ChevronDownIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill={color} />
+  </svg>
+);
+
+export default ChevronDownIcon;

package/admin/src/pages/App/components/icons/ChevronUpIcon.js

@@ -1,9 +1,9 @@
-import React from 'react';
-
-const ChevronUpIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill={color} />
-  </svg>
-);
-
-export default ChevronUpIcon;
+import React from 'react';
+
+const ChevronUpIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill={color} />
+  </svg>
+);
+
+export default ChevronUpIcon;

package/admin/src/pages/App/components/icons/CreditCardIcon.js

@@ -1,9 +1,9 @@
-import React from 'react';
-
-const CreditCardIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" fill={color} />
-  </svg>
-);
-
-export default CreditCardIcon;
+import React from 'react';
+
+const CreditCardIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" fill={color} />
+  </svg>
+);
+
+export default CreditCardIcon;

package/admin/src/pages/App/components/icons/ErrorIcon.js

@@ -1,10 +1,10 @@
-import React from 'react';
-
-const ErrorIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill={color} />
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill={color} />
-  </svg>
-);
-
-export default ErrorIcon;
+import React from 'react';
+
+const ErrorIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill={color} />
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill={color} />
+  </svg>
+);
+
+export default ErrorIcon;

package/admin/src/pages/App/components/icons/InfoIcon.js

@@ -1,9 +1,9 @@
-import React from 'react';
-
-const InfoIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill={color} />
-  </svg>
-);
-
-export default InfoIcon;
+import React from 'react';
+
+const InfoIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill={color} />
+  </svg>
+);
+
+export default InfoIcon;

package/admin/src/pages/App/components/icons/PaymentIcon.js

@@ -1,10 +1,10 @@
-import React from 'react';
-
-const PaymentIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M2 8h20v12H2V8zm2 2v8h16V10H4z" fill={color} />
-    <path d="M2 4h20v2H2V4z" fill={color} />
-  </svg>
-);
-
-export default PaymentIcon;
+import React from 'react';
+
+const PaymentIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 8h20v12H2V8zm2 2v8h16V10H4z" fill={color} />
+    <path d="M2 4h20v2H2V4z" fill={color} />
+  </svg>
+);
+
+export default PaymentIcon;

package/admin/src/pages/App/components/icons/PendingIcon.js

@@ -1,9 +1,9 @@
-import React from 'react';
-
-const PendingIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill={color} />
-  </svg>
-);
-
-export default PendingIcon;
+import React from 'react';
+
+const PendingIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill={color} />
+  </svg>
+);
+
+export default PendingIcon;

package/admin/src/pages/App/components/icons/PersonIcon.js

@@ -1,9 +1,9 @@
-import React from 'react';
-
-const PersonIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill={color} />
-  </svg>
-);
-
-export default PersonIcon;
+import React from 'react';
+
+const PersonIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill={color} />
+  </svg>
+);
+
+export default PersonIcon;

package/admin/src/pages/App/components/icons/SuccessIcon.js

@@ -1,9 +1,9 @@
-import React from 'react';
-
-const SuccessIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill={color} />
-  </svg>
-);
-
-export default SuccessIcon;
+import React from 'react';
+
+const SuccessIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill={color} />
+  </svg>
+);
+
+export default SuccessIcon;

package/admin/src/pages/App/components/icons/WalletIcon.js

@@ -1,9 +1,9 @@
-import React from 'react';
-
-const WalletIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z" fill={color} />
-  </svg>
-);
-
-export default WalletIcon;
+import React from 'react';
+
+const WalletIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z" fill={color} />
+  </svg>
+);
+
+export default WalletIcon;

package/admin/src/pages/App/components/icons/index.js

@@ -1,11 +1,11 @@
-export { default as PaymentIcon } from './PaymentIcon';
-export { default as PersonIcon } from './PersonIcon';
-export { default as CreditCardIcon } from './CreditCardIcon';
-export { default as BankIcon } from './BankIcon';
-export { default as WalletIcon } from './WalletIcon';
-export { default as ErrorIcon } from './ErrorIcon';
-export { default as SuccessIcon } from './SuccessIcon';
-export { default as PendingIcon } from './PendingIcon';
-export { default as InfoIcon } from './InfoIcon';
-export { default as ChevronDownIcon } from './ChevronDownIcon';
-export { default as ChevronUpIcon } from './ChevronUpIcon';
+export { default as PaymentIcon } from './PaymentIcon';
+export { default as PersonIcon } from './PersonIcon';
+export { default as CreditCardIcon } from './CreditCardIcon';
+export { default as BankIcon } from './BankIcon';
+export { default as WalletIcon } from './WalletIcon';
+export { default as ErrorIcon } from './ErrorIcon';
+export { default as SuccessIcon } from './SuccessIcon';
+export { default as PendingIcon } from './PendingIcon';
+export { default as InfoIcon } from './InfoIcon';
+export { default as ChevronDownIcon } from './ChevronDownIcon';
+export { default as ChevronUpIcon } from './ChevronUpIcon';

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

@@ -2,6 +2,7 @@ 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 AuthorizationForm = ({
@@ -15,6 +16,8 @@ const AuthorizationForm = ({
   settings,
   googlePayToken,
   setGooglePayToken,
+  applePayToken,
+  setApplePayToken,
   cardtype,
   setCardtype,
   cardpan,
@@ -37,6 +40,22 @@ const AuthorizationForm = ({
       onError(error);
     }
   };
+
+  const handleApplePayToken = (token, paymentData) => {
+    if (!token) {
+      return;
+    }
+    setApplePayToken(token);
+    onAuthorization(token);
+  };
+
+  const handleApplePayError = (error) => {
+    if (onError) {
+      onError(error);
+    }
+  };
+
+
   return (
     <Flex direction="column" alignItems="stretch" gap={4}>
       <Flex direction="row" gap={2}>
@@ -73,8 +92,7 @@ const AuthorizationForm = ({
         />
       </Flex>
 
-      {/* Show card details input if 3DS is enabled and payment method is credit card */}
-      {paymentMethod === "cc" && settings?.enable3DSecure !== false && (
+      {paymentMethod === "cc" && settings?.enable3DSecure && (
         <Box marginTop={4}>
           <CardDetailsInput
             cardtype={cardtype}
@@ -97,12 +115,21 @@ const AuthorizationForm = ({
           onError={handleGooglePayError}
           settings={settings}
         />
+      ) : paymentMethod === "apl" ? (
+        <ApplePayButton
+          amount={paymentAmount}
+          currency="EUR"
+          onTokenReceived={handleApplePayToken}
+          onError={handleApplePayError}
+          settings={settings}
+        />
       ) : (
         <Button
           variant="default"
           onClick={onAuthorization}
           loading={isProcessingPayment}
           startIcon={<Play />}
+          style={{ maxWidth: '200px' }}
           className="payment-button payment-button-primary"
           disabled={
             !paymentAmount.trim() ||

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

@@ -51,6 +51,7 @@ const CaptureForm = ({
         onClick={onCapture}
         loading={isProcessingPayment}
         startIcon={<Play />}
+        style={{ maxWidth: '200px' }}
         className="payment-button payment-button-primary"
         disabled={!captureTxid.trim() || !paymentAmount.trim()}
       >