strapi-plugin-payone-provider 1.6.5 → 1.6.7

package/.well-known/.gitkeep

@@ -0,0 +1,3 @@
+# This file ensures the .well-known directory is tracked by git
+# Place your apple-developer-merchantid-domain-association file here
+

package/.well-known/apple-developer-merchant-id-domain-association.txt

@@ -0,0 +1 @@
+7b2276657273696f6e223a312c227073704964223a2235393638344337413333424534333631304339333343413031384639393231333841394642453136413636363835333532463437413441414646363734333038222c22637265617465644f6e223a313735363238323636363439317d

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

@@ -1,5 +1,11 @@
 import React from "react";
-import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from "@strapi/design-system";
+import {
+  Tabs,
+  Tab,
+  TabGroup,
+  TabPanels,
+  TabPanel,
+} from "@strapi/design-system";
 import pluginId from "../../../pluginId";
 import ConfigurationPanel from "./ConfigurationPanel";
 import HistoryPanel from "./HistoryPanel";
@@ -17,6 +23,7 @@ const AppTabs = ({
   onSave,
   onTestConnection,
   onInputChange,
+  onPaymentMethodToggle,
   // Transaction history props
   filters,
   onFilterChange,
@@ -33,17 +40,17 @@ const AppTabs = ({
   onTransactionSelect,
   // Payment actions props
   paymentActions,
-  history
+  history,
 }) => {
-      const handleNavigateToConfig = (configType = "apple-pay") => {
-        if (history) {
-          if (configType === "google-pay") {
-            history.push(`/plugins/${pluginId}/google-pay-config`);
-          } else {
-            history.push(`/plugins/${pluginId}/apple-pay-config`);
-          }
-        }
-      };
+  const handleNavigateToConfig = (configType = "apple-pay") => {
+    if (history) {
+      if (configType === "google-pay") {
+        history.push(`/plugins/${pluginId}/google-pay-config`);
+      } else {
+        history.push(`/plugins/${pluginId}/apple-pay-config`);
+      }
+    }
+  };
   return (
     <TabGroup
       label="Payone Provider Tabs"
@@ -51,22 +58,30 @@ const AppTabs = ({
     >
       <Tabs style={{ borderBottom: "2px solid #e8e8ea" }}>
         <Tab
-          className={`payment-tab ${activeTab === 0 ? 'payment-tab-active' : ''}`}
+          className={`payment-tab ${
+            activeTab === 0 ? "payment-tab-active" : ""
+          }`}
         >
           Configuration
         </Tab>
         <Tab
-          className={`payment-tab ${activeTab === 1 ? 'payment-tab-active' : ''}`}
+          className={`payment-tab ${
+            activeTab === 1 ? "payment-tab-active" : ""
+          }`}
         >
           Transaction History
         </Tab>
         <Tab
-          className={`payment-tab ${activeTab === 2 ? 'payment-tab-active' : ''}`}
+          className={`payment-tab ${
+            activeTab === 2 ? "payment-tab-active" : ""
+          }`}
         >
           Payment Actions
         </Tab>
         <Tab
-          className={`payment-tab ${activeTab === 3 ? 'payment-tab-active' : ''}`}
+          className={`payment-tab ${
+            activeTab === 3 ? "payment-tab-active" : ""
+          }`}
         >
           Documentation
         </Tab>
@@ -81,6 +96,7 @@ const AppTabs = ({
             onSave={onSave}
             onTestConnection={onTestConnection}
             onInputChange={onInputChange}
+            onPaymentMethodToggle={onPaymentMethodToggle}
           />
         </TabPanel>
 
@@ -155,4 +171,3 @@ const AppTabs = ({
 };
 
 export default AppTabs;
-

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

@@ -25,31 +25,22 @@ const ApplePayBtn = ({
           {
             method: "POST",
             body: {
-              domain: window.location.hostname,
-              domainName: window.location.hostname,
-              displayName: settings?.merchantName || "Store",
+              domainName: settings?.domainName || window.location.hostname,
+              displayName: settings?.displayName || "Store",
               currency: requestCurrency,
               countryCode: requestCountryCode,
+              mode: (settings?.mode || "test").toLowerCase() || "test",
             },
           }
         );
-
         if (merchantSession.error) {
           const errorMessage =
             merchantSession.error.message || "Merchant validation failed";
           const errorDetails = merchantSession.error.details || "";
 
-          // If it's a 403 error, provide more specific guidance
-          if (merchantSession.error.status === 403) {
-            throw new Error(
-              `403 Forbidden: Authentication failed with Payone. ` +
-                `Please check your Payone credentials (aid, portalid, mid, key) in plugin settings. ` +
-                `Also ensure that: 1) Mode is set to "live" (Apple Pay only works in live mode), ` +
-                `2) Your domain is registered with Payone Merchant Services, ` +
-                `3) Merchant ID (mid) matches your merchantIdentifier in PMI. ` +
-                `Details: ${errorDetails || errorMessage}`
-            );
-          }
+          console.log(
+            `[Apple Pay] Merchant validation failed: ${errorMessage} ${errorDetails}`
+          );
 
           throw new Error(
             errorMessage + (errorDetails ? ` - ${errorDetails}` : "")
@@ -67,18 +58,14 @@ const ApplePayBtn = ({
 
         session.completeMerchantValidation(sessionData);
       } catch (error) {
-
-        // Don't call completeMerchantValidation with empty object - this causes user cancellation
-        // Instead, let the error propagate so user can see what went wrong
         if (onError) {
           onError(error);
         }
 
-        // Complete with failure status to show error to user
         try {
           session.completeMerchantValidation({});
         } catch (completeError) {
-          // Silent fail
+          console.error(completeError);
         }
       }
     };
@@ -133,27 +120,75 @@ const ApplePayBtn = ({
 
         const tokenObject = paymentData.token;
 
+        if (!tokenObject) {
+          const result = {
+            status: window.ApplePaySession.STATUS_FAILURE,
+          };
+          session.completePayment(result);
+          if (onError) {
+            onError(new Error("Payment token is missing"));
+          }
+          return;
+        }
+
         if (!tokenObject.paymentData) {
+          console.error(
+            "[Apple Pay] Invalid token structure: missing paymentData",
+            {
+              tokenKeys: Object.keys(tokenObject),
+              tokenStructure: JSON.stringify(tokenObject).substring(0, 500),
+            }
+          );
           const result = {
             status: window.ApplePaySession.STATUS_FAILURE,
           };
           session.completePayment(result);
           if (onError) {
-            onError(new Error("Invalid Apple Pay token structure"));
+            onError(
+              new Error(
+                "Invalid Apple Pay token structure: missing paymentData field"
+              )
+            );
           }
           return;
         }
 
-        // Encode token as Base64 for transmission
+        const paymentDataObj = tokenObject.paymentData;
+        const header = paymentDataObj.header || {};
+
+        console.log("[Apple Pay] Token structure validation:", {
+          hasVersion: !!paymentDataObj.version,
+          hasData: !!paymentDataObj.data,
+          hasSignature: !!paymentDataObj.signature,
+          hasHeader: !!paymentDataObj.header,
+          hasEphemeralPublicKey: !!header.ephemeralPublicKey,
+          hasPublicKeyHash: !!header.publicKeyHash,
+          hasTransactionId:
+            !!paymentDataObj.transactionId || !!header.transactionId,
+          dataLength: paymentDataObj.data ? paymentDataObj.data.length : 0,
+          signatureLength: paymentDataObj.signature
+            ? paymentDataObj.signature.length
+            : 0,
+        });
+
         let tokenString;
         try {
-          tokenString = btoa(
-            unescape(encodeURIComponent(JSON.stringify(tokenObject)))
-          );
+          const tokenJson = JSON.stringify(tokenObject);
+          tokenString = btoa(unescape(encodeURIComponent(tokenJson)));
+          console.log("[Apple Pay] Token encoded successfully:", {
+            tokenLength: tokenJson.length,
+            encodedLength: tokenString.length,
+          });
         } catch (e) {
-          tokenString = btoa(
-            unescape(encodeURIComponent(JSON.stringify(tokenObject)))
-          );
+          console.error("[Apple Pay] Error encoding token:", e);
+          const result = {
+            status: window.ApplePaySession.STATUS_FAILURE,
+          };
+          session.completePayment(result);
+          if (onError) {
+            onError(new Error(`Failed to encode token: ${e.message}`));
+          }
+          return;
         }
 
         if (onTokenReceived) {

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

@@ -11,6 +11,7 @@ import {
   Select,
   Option,
   Alert,
+  Switch,
 } from "@strapi/design-system";
 import { Play, Cog } from "@strapi/icons";
 import { useHistory } from "react-router-dom";
@@ -18,20 +19,15 @@ import pluginId from "../../../pluginId";
 
 const ConfigurationPanel = ({
   settings,
-  isSaving,
   isTesting,
   testResult,
-  onSave,
   onTestConnection,
   onInputChange,
+  onPaymentMethodToggle,
 }) => {
   const history = useHistory();
   const mode = (settings?.mode || "test").toLowerCase();
 
-  useEffect(() => {
-    // Mode updated
-  }, [settings?.mode]);
-
   const handleNavigateToApplePayConfig = () => {
     history.push(`/plugins/${pluginId}/apple-pay-config`);
   };
@@ -69,8 +65,14 @@ const ConfigurationPanel = ({
             Configure your Payone payment gateway settings
           </Typography>
         </Box>
-
-        <Box>
+        <Box
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            gap: "16px",
+            flexWrap: "wrap",
+          }}
+        >
           <Card className="payment-card">
             <CardBody padding={6}>
               <Stack spacing={6}>
@@ -123,6 +125,32 @@ const ConfigurationPanel = ({
                   />
                 </Flex>
 
+                <Flex gap={4} wrap="wrap">
+                  <TextInput
+                    label="Domain Name"
+                    name="domainName"
+                    value={settings.domainName || ""}
+                    onChange={(e) =>
+                      onInputChange("domainName", e.target.value)
+                    }
+                    hint="Your domain name (optional)"
+                    className="payment-input"
+                    style={{ flex: 1, minWidth: "300px" }}
+                  />
+
+                  <TextInput
+                    label="Display Name"
+                    name="displayName"
+                    value={settings.displayName || ""}
+                    onChange={(e) =>
+                      onInputChange("displayName", e.target.value)
+                    }
+                    hint="Display name for payment methods (optional)"
+                    className="payment-input"
+                    style={{ flex: 1, minWidth: "300px" }}
+                  />
+                </Flex>
+
                 <Flex gap={4} wrap="wrap">
                   <Select
                     label="Mode"
@@ -202,8 +230,160 @@ const ConfigurationPanel = ({
               </Stack>
             </CardBody>
           </Card>
-        </Box>
 
+          <Card className="payment-card">
+            <CardBody padding={6}>
+              <Stack spacing={6}>
+                <Box>
+                  <Typography
+                    variant="delta"
+                    as="h3"
+                    fontWeight="bold"
+                    marginBottom={4}
+                  >
+                    Payment Methods
+                  </Typography>
+                  <Typography
+                    variant="pi"
+                    textColor="neutral600"
+                    marginBottom={4}
+                  >
+                    Enable or disable payment methods for your Payone
+                    integration
+                  </Typography>
+                </Box>
+
+                <Stack spacing={4}>
+                  <Flex
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap={4}
+                  >
+                    <Typography variant="omega" fontWeight="semiBold">
+                      Credit Card (Visa, Mastercard)
+                    </Typography>
+                    <Switch
+                      label="Credit Card"
+                      selected={settings.enableCreditCard !== false}
+                      onChange={() =>
+                        onPaymentMethodToggle(
+                          "enableCreditCard",
+                          !settings.enableCreditCard
+                        )
+                      }
+                    />
+                  </Flex>
+
+                  <Flex
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap={4}
+                  >
+                    <Typography variant="omega" fontWeight="semiBold">
+                      PayPal
+                    </Typography>
+                    <Switch
+                      label="PayPal"
+                      selected={settings.enablePayPal !== false}
+                      onChange={() =>
+                        onPaymentMethodToggle(
+                          "enablePayPal",
+                          !settings.enablePayPal
+                        )
+                      }
+                    />
+                  </Flex>
+
+                  <Flex
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap={4}
+                  >
+                    <Typography variant="omega" fontWeight="semiBold">
+                      Google Pay
+                    </Typography>
+                    <Switch
+                      label="Google Pay"
+                      selected={settings.enableGooglePay !== false}
+                      onChange={() =>
+                        onPaymentMethodToggle(
+                          "enableGooglePay",
+                          !settings.enableGooglePay
+                        )
+                      }
+                    />
+                  </Flex>
+
+                  <Flex
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap={4}
+                  >
+                    <Typography variant="omega" fontWeight="semiBold">
+                      Apple Pay
+                    </Typography>
+                    <Switch
+                      label="Apple Pay"
+                      selected={settings.enableApplePay !== false}
+                      onChange={() =>
+                        onPaymentMethodToggle(
+                          "enableApplePay",
+                          !settings.enableApplePay
+                        )
+                      }
+                    />
+                  </Flex>
+
+                  <Flex
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap={4}
+                  >
+                    <Typography variant="omega" fontWeight="semiBold">
+                      Sofort Banking
+                    </Typography>
+                    <Switch
+                      label="Sofort Banking"
+                      selected={settings.enableSofort !== false}
+                      onChange={() =>
+                        onPaymentMethodToggle(
+                          "enableSofort",
+                          !settings.enableSofort
+                        )
+                      }
+                    />
+                  </Flex>
+
+                  <Flex
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    gap={4}
+                  >
+                    <Typography variant="omega" fontWeight="semiBold">
+                      SEPA Direct Debit
+                    </Typography>
+                    <Switch
+                      label="SEPA Direct Debit"
+                      selected={settings.enableSepaDirectDebit !== false}
+                      onChange={() =>
+                        onPaymentMethodToggle(
+                          "enableSepaDirectDebit",
+                          !settings.enableSepaDirectDebit
+                        )
+                      }
+                    />
+                  </Flex>
+                </Stack>
+              </Stack>
+            </CardBody>
+          </Card>
+        </Box>
         <Box paddingTop={6}>
           <Card className="payment-card">
             <CardBody padding={6}>
@@ -323,7 +503,6 @@ const ConfigurationPanel = ({
             </CardBody>
           </Card>
         </Box>
-
         <Box paddingTop={4}>
           <Typography variant="sigma" textColor="neutral600">
             Note: These settings are used for all Payone API requests. Make sure