strapi-plugin-payone-provider 1.4.2 → 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/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()}
       >

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

@@ -94,22 +94,24 @@ const CardDetailsInput = ({
   return (
     <Box>
       <Flex direction="column" alignItems="stretch" gap={4}>
-        <Select
-          label="3D Secure Test Cards (Requires Redirect)"
-          name="testCard"
-          value={selectedTestCard}
-          placeholder="Select a 3DS test card to auto-fill"
-          hint="These cards will trigger 3DS authentication redirect. Password: 12345"
-          onChange={handleTestCardSelect}
-          className="payment-input"
-        >
-          <Option value="">-- Select a test card --</Option>
-          {TEST_3DS_CARDS.map((card, index) => (
-            <Option key={index} value={`${card.cardtype}-${card.cardpan}`}>
-              {card.name} - {card.description}
-            </Option>
-          ))}
-        </Select>
+        <Flex direction="row" gap={2} alignItems="flex-start">
+          <Select
+            label="3D Secure Test Cards"
+            name="testCard"
+            value={selectedTestCard}
+            placeholder="Select a 3DS test card to auto-fill"
+            hint="These cards will trigger 3DS authentication redirect. Password: 12345"
+            onChange={handleTestCardSelect}
+            className="payment-input"
+          >
+            <Option value="">-- Select a test card --</Option>
+            {TEST_3DS_CARDS.map((card, index) => (
+              <Option key={index} value={`${card.cardtype}-${card.cardpan}`}>
+                {card.name} - {card.description}
+              </Option>
+            ))}
+          </Select>
+        </Flex>
 
         <Flex gap={4} wrap="wrap" alignItems="flex-start">
           <Select

package/admin/src/pages/App/components/paymentActions/PreauthorizationForm.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 PreauthorizationForm = ({
@@ -15,6 +16,8 @@ const PreauthorizationForm = ({
   settings,
   googlePayToken,
   setGooglePayToken,
+  applePayToken,
+  setApplePayToken,
   cardtype,
   setCardtype,
   cardpan,
@@ -37,6 +40,20 @@ const PreauthorizationForm = ({
       onError(error);
     }
   };
+
+  const handleApplePayToken = (token, paymentData) => {
+    if (!token) {
+      return;
+    }
+    setApplePayToken(token);
+    onPreauthorization(token);
+  };
+
+  const handleApplePayError = (error) => {
+    if (onError) {
+      onError(error);
+    }
+  };
   return (
     <Flex direction="column" alignItems="stretch" gap={4}>
       <Flex direction="row" gap={2}>
@@ -73,8 +90,7 @@ const PreauthorizationForm = ({
         />
       </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 +113,38 @@ const PreauthorizationForm = ({
           onError={handleGooglePayError}
           settings={settings}
         />
+      ) : paymentMethod === "apl" ? (
+        <Box>
+          <ApplePayButton
+            amount={paymentAmount}
+            currency="EUR"
+            onTokenReceived={handleApplePayToken}
+            onError={handleApplePayError}
+            settings={settings}
+          />
+          <Box marginTop={3} style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "8px" }}>
+            <Typography variant="pi" textColor="neutral600" style={{ marginBottom: "8px" }}>
+              Apple Pay is not available on localhost. You can test the payment flow without Apple Pay token:
+            </Typography>
+            <Button
+              variant="secondary"
+              onClick={() => onPreauthorization(null)}
+              loading={isProcessingPayment}
+              startIcon={<Play />}
+              style={{ maxWidth: '200px' }}
+              disabled={!paymentAmount.trim() || !preauthReference.trim()}
+            >
+              Process Preauthorization
+            </Button>
+          </Box>
+        </Box>
       ) : (
         <Button
           variant="default"
           onClick={onPreauthorization}
           loading={isProcessingPayment}
           startIcon={<Play />}
+          style={{ maxWidth: '200px' }}
           className="payment-button payment-button-primary"
           disabled={
             !paymentAmount.trim() ||

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

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

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

@@ -50,6 +50,7 @@ const usePaymentActions = () => {
   const [paymentMethod, setPaymentMethod] = useState("cc");
   const [captureMode, setCaptureMode] = useState("full");
   const [googlePayToken, setGooglePayToken] = useState(null);
+  const [applePayToken, setApplePayToken] = useState(null);
 
   // Card details for 3DS testing
   const [cardtype, setCardtype] = useState("");
@@ -129,10 +130,13 @@ const usePaymentActions = () => {
         baseParams.backurl = `${baseUrl}${basePath}${pluginPath}/back`;
       }
 
-      const tokenToUse = tokenParam || googlePayToken;
+      const tokenToUse = tokenParam || googlePayToken || applePayToken;
       if (paymentMethod === "gpp" && tokenToUse) {
         baseParams.googlePayToken = tokenToUse;
         baseParams.settings = settings;
+      } else if (paymentMethod === "apl" && tokenToUse) {
+        baseParams.applePayToken = tokenToUse;
+        baseParams.settings = settings;
       }
 
       const params = getPreauthorizationParams(paymentMethod, baseParams);
@@ -271,10 +275,13 @@ const usePaymentActions = () => {
         baseParams.backurl = `${baseUrl}${basePath}${pluginPath}/back`;
       }
 
-      const tokenToUse = tokenParam || googlePayToken;
+      const tokenToUse = tokenParam || googlePayToken || applePayToken;
       if (paymentMethod === "gpp" && tokenToUse) {
         baseParams.googlePayToken = tokenToUse;
         baseParams.settings = settings;
+      } else if (paymentMethod === "apl" && tokenToUse) {
+        baseParams.applePayToken = tokenToUse;
+        baseParams.settings = settings;
       }
 
       const params = getAuthorizationParams(paymentMethod, baseParams);
@@ -454,6 +461,10 @@ const usePaymentActions = () => {
     googlePayToken,
     setGooglePayToken,
 
+    // Apple Pay
+    applePayToken,
+    setApplePayToken,
+
     // Card details for 3DS
     cardtype,
     setCardtype,