strapi-plugin-payone-provider 1.5.8 → 1.6.1

package/admin/src/components/Initializer/index.jsx

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+import pluginId from "../../pluginId";
+
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef(setPlugin);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current(pluginId);
+    }
+  }, []);
+
+  return null;
+};
+
+export default Initializer;

package/admin/src/components/PluginIcon/index.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { Puzzle } from "@strapi/icons";
+
+const PluginIcon = () => <Puzzle />;
+
+export default PluginIcon;

package/admin/src/index.js

@@ -1,7 +1,7 @@
 import pluginPkg from "../../package.json";
 import pluginId from "./pluginId";
-import Initializer from "./components/Initializer";
-import PluginIcon from "./components/PluginIcon";
+import Initializer from "./components/Initializer/index.jsx";
+import PluginIcon from "./components/PluginIcon/index.jsx";
 import { injectGooglePayScript } from "./pages/utils/injectGooglePayScript";
 
 const name = pluginPkg.strapi.name;
@@ -16,7 +16,7 @@ export default {
         defaultMessage: "Payone Provider"
       },
       Component: async () => {
-        const component = await import("./pages/App");
+        const component = await import("./pages/App/index.jsx");
         return component;
       },
       permissions: []

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { HeaderLayout, Box, Typography, Button } from "@strapi/design-system";
+import { Check, ArrowLeft } from "@strapi/icons";
+import { useHistory, useLocation } from "react-router-dom";
+import pluginId from "../../../pluginId";
+
+const AppHeader = ({ activeTab, isSaving, onSave }) => {
+  const history = useHistory();
+  const location = useLocation();
+  const isApplePayConfigPage = location.pathname.includes('/apple-pay-config');
+
+  return (
+    <HeaderLayout
+      title={
+        <Box>
+          <Typography variant="alpha" as="h1" fontWeight="bold" className="payment-title">
+            {isApplePayConfigPage ? "Apple Pay Configuration" : "Payone Provider"}
+          </Typography>
+          <Typography variant="pi" marginTop={2} className="payment-subtitle">
+            {isApplePayConfigPage 
+              ? "Configure Apple Pay settings for your payment gateway"
+              : "Configure your Payone integration and manage payment transactions"
+            }
+          </Typography>
+        </Box>
+      }
+      primaryAction={
+        isApplePayConfigPage ? (
+          <Button
+            onClick={() => history.push(`/plugins/${pluginId}`)}
+            startIcon={<ArrowLeft />}
+            size="L"
+            variant="secondary"
+          >
+            Back to Main
+          </Button>
+        ) : activeTab === 0 ? (
+          <Button
+            loading={isSaving}
+            onClick={onSave}
+            startIcon={<Check />}
+            size="L"
+            variant="default"
+            className="payment-button payment-button-success"
+          >
+            Save Configuration
+          </Button>
+        ) : null
+      }
+    />
+  );
+};
+
+export default AppHeader;
+

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

@@ -0,0 +1,158 @@
+import React from "react";
+import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from "@strapi/design-system";
+import pluginId from "../../../pluginId";
+import ConfigurationPanel from "./ConfigurationPanel";
+import HistoryPanel from "./HistoryPanel";
+import PaymentActionsPanel from "./PaymentActionsPanel";
+import DocsPanel from "./DocsPanel";
+
+const AppTabs = ({
+  activeTab,
+  setActiveTab,
+  // Settings props
+  settings,
+  isSaving,
+  isTesting,
+  testResult,
+  onSave,
+  onTestConnection,
+  onInputChange,
+  // Transaction history props
+  filters,
+  onFilterChange,
+  onFilterApply,
+  isLoadingHistory,
+  transactionHistory,
+  paginatedTransactions,
+  currentPage,
+  totalPages,
+  pageSize,
+  onRefresh,
+  onPageChange,
+  selectedTransaction,
+  onTransactionSelect,
+  // Payment actions props
+  paymentActions,
+  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`);
+          }
+        }
+      };
+  return (
+    <TabGroup
+      label="Payone Provider Tabs"
+      onTabChange={(index) => setActiveTab(index)}
+    >
+      <Tabs style={{ borderBottom: "2px solid #e8e8ea" }}>
+        <Tab
+          className={`payment-tab ${activeTab === 0 ? 'payment-tab-active' : ''}`}
+        >
+          Configuration
+        </Tab>
+        <Tab
+          className={`payment-tab ${activeTab === 1 ? 'payment-tab-active' : ''}`}
+        >
+          Transaction History
+        </Tab>
+        <Tab
+          className={`payment-tab ${activeTab === 2 ? 'payment-tab-active' : ''}`}
+        >
+          Payment Actions
+        </Tab>
+        <Tab
+          className={`payment-tab ${activeTab === 3 ? 'payment-tab-active' : ''}`}
+        >
+          Documentation
+        </Tab>
+      </Tabs>
+      <TabPanels>
+        <TabPanel>
+          <ConfigurationPanel
+            settings={settings}
+            isSaving={isSaving}
+            isTesting={isTesting}
+            testResult={testResult}
+            onSave={onSave}
+            onTestConnection={onTestConnection}
+            onInputChange={onInputChange}
+          />
+        </TabPanel>
+
+        <TabPanel>
+          <HistoryPanel
+            filters={filters}
+            onFilterChange={onFilterChange}
+            onFilterApply={onFilterApply}
+            isLoadingHistory={isLoadingHistory}
+            transactionHistory={transactionHistory}
+            paginatedTransactions={paginatedTransactions}
+            currentPage={currentPage}
+            totalPages={totalPages}
+            pageSize={pageSize}
+            onRefresh={onRefresh}
+            onPageChange={onPageChange}
+            selectedTransaction={selectedTransaction}
+            onTransactionSelect={onTransactionSelect}
+          />
+        </TabPanel>
+
+        <TabPanel>
+          <PaymentActionsPanel
+            paymentAmount={paymentActions.paymentAmount}
+            setPaymentAmount={paymentActions.setPaymentAmount}
+            preauthReference={paymentActions.preauthReference}
+            setPreauthReference={paymentActions.setPreauthReference}
+            authReference={paymentActions.authReference}
+            setAuthReference={paymentActions.setAuthReference}
+            captureTxid={paymentActions.captureTxid}
+            setCaptureTxid={paymentActions.setCaptureTxid}
+            refundTxid={paymentActions.refundTxid}
+            setRefundTxid={paymentActions.setRefundTxid}
+            refundSequenceNumber={paymentActions.refundSequenceNumber}
+            setRefundSequenceNumber={paymentActions.setRefundSequenceNumber}
+            refundReference={paymentActions.refundReference}
+            setRefundReference={paymentActions.setRefundReference}
+            paymentMethod={paymentActions.paymentMethod}
+            setPaymentMethod={paymentActions.setPaymentMethod}
+            captureMode={paymentActions.captureMode}
+            setCaptureMode={paymentActions.setCaptureMode}
+            isProcessingPayment={paymentActions.isProcessingPayment}
+            paymentError={paymentActions.paymentError}
+            paymentResult={paymentActions.paymentResult}
+            onPreauthorization={paymentActions.handlePreauthorization}
+            onAuthorization={paymentActions.handleAuthorization}
+            onCapture={paymentActions.handleCapture}
+            onRefund={paymentActions.handleRefund}
+            settings={settings}
+            googlePayToken={paymentActions.googlePayToken}
+            setGooglePayToken={paymentActions.setGooglePayToken}
+            applePayToken={paymentActions.applePayToken}
+            setApplePayToken={paymentActions.setApplePayToken}
+            cardtype={paymentActions.cardtype}
+            setCardtype={paymentActions.setCardtype}
+            cardpan={paymentActions.cardpan}
+            setCardpan={paymentActions.setCardpan}
+            cardexpiredate={paymentActions.cardexpiredate}
+            setCardexpiredate={paymentActions.setCardexpiredate}
+            cardcvc2={paymentActions.cardcvc2}
+            setCardcvc2={paymentActions.setCardcvc2}
+            onNavigateToConfig={handleNavigateToConfig}
+          />
+        </TabPanel>
+
+        <TabPanel>
+          <DocsPanel />
+        </TabPanel>
+      </TabPanels>
+    </TabGroup>
+  );
+};
+
+export default AppTabs;
+

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

@@ -0,0 +1,304 @@
+import React from "react";
+import ApplePayButton from "apple-pay-button";
+import { Box, Typography, Alert } from "@strapi/design-system";
+import { request } from "@strapi/helper-plugin";
+import pluginId from "../../../pluginId";
+
+const ApplePayBtn = ({
+  amount,
+  onTokenReceived,
+  onError,
+  settings,
+  buttonStyle = "black",
+  type = "pay",
+}) => {
+  const handleEventsForApplePay = (session, amountValue, currencyCode) => {
+    session.onvalidatemerchant = async (event) => {
+      try {
+        const merchantSession = await request(
+          `/${pluginId}/validate-apple-pay-merchant`,
+          {
+            method: "POST",
+            body: {
+              domain: window.location.hostname,
+              displayName: settings?.merchantName || "Store",
+              currency: currencyCode,
+            },
+          }
+        );
+
+        if (merchantSession.error) {
+          throw new Error(
+            merchantSession.error.message || "Merchant validation failed"
+          );
+        }
+
+        const sessionData = merchantSession.data || merchantSession;
+
+        if (!sessionData || !sessionData.merchantIdentifier) {
+          console.error(
+            "[Apple Pay Button] Invalid merchant session: missing merchantIdentifier"
+          );
+          throw new Error(
+            "Invalid merchant session: missing merchantIdentifier"
+          );
+        }
+
+        session.completeMerchantValidation(sessionData);
+        console.log(
+          "[Apple Pay Button] Merchant validation completed successfully"
+        );
+      } catch (error) {
+        console.error("[Apple Pay Button] Merchant validation error:", error);
+        if (onError) {
+          onError(error);
+        }
+        session.completeMerchantValidation({});
+      }
+    };
+
+    session.onpaymentmethodselected = (event) => {
+      const update = {
+        newTotal: {
+          label: settings?.merchantName || "Total",
+          type: "final",
+          amount: amountValue,
+        },
+      };
+      session.completePaymentMethodSelection(update);
+    };
+
+    session.onshippingmethodselected = (event) => {
+      const update = {
+        newTotal: {
+          label: settings?.merchantName || "Total",
+          type: "final",
+          amount: amountValue,
+        },
+      };
+      session.completeShippingMethodSelection(update);
+    };
+
+    session.onshippingcontactselected = (event) => {
+      const update = {
+        newTotal: {
+          label: settings?.merchantName || "Total",
+          type: "final",
+          amount: amountValue,
+        },
+      };
+      session.completeShippingContactSelection(update);
+    };
+
+    session.onpaymentauthorized = async (event) => {
+      try {
+        const paymentData = event.payment;
+
+        if (!paymentData || !paymentData.token) {
+          const result = {
+            status: window.ApplePaySession.STATUS_FAILURE,
+          };
+          session.completePayment(result);
+          if (onError) {
+            onError(new Error("Payment token is missing"));
+          }
+          return;
+        }
+
+        const tokenObject = paymentData.token;
+
+        if (!tokenObject.paymentData) {
+          console.error(
+            "[Apple Pay] Invalid token structure: missing paymentData"
+          );
+          const result = {
+            status: window.ApplePaySession.STATUS_FAILURE,
+          };
+          session.completePayment(result);
+          if (onError) {
+            onError(new Error("Invalid Apple Pay token structure"));
+          }
+          return;
+        }
+
+        // Encode token as Base64 for transmission
+        let tokenString;
+        try {
+          tokenString = btoa(
+            unescape(encodeURIComponent(JSON.stringify(tokenObject)))
+          );
+        } catch (e) {
+          console.error("[Apple Pay] Token encoding error:", e);
+          tokenString = btoa(
+            unescape(encodeURIComponent(JSON.stringify(tokenObject)))
+          );
+        }
+
+        if (onTokenReceived) {
+          const result = await onTokenReceived(tokenString, {
+            paymentToken: tokenObject,
+            billingContact: paymentData.billingContact,
+            shippingContact: paymentData.shippingContact,
+            amount: amountValue, //
+            currency: currencyCode,
+          });
+
+          if (result && typeof result.then === "function") {
+            await result;
+          }
+
+          const paymentResult = {
+            status: window.ApplePaySession.STATUS_SUCCESS,
+          };
+          session.completePayment(paymentResult);
+        } else {
+          const paymentResult = {
+            status: window.ApplePaySession.STATUS_SUCCESS,
+          };
+          session.completePayment(paymentResult);
+        }
+      } catch (error) {
+        console.error("[Apple Pay] Payment authorization error:", error);
+        const result = {
+          status: window.ApplePaySession.STATUS_FAILURE,
+        };
+        session.completePayment(result);
+        if (onError) {
+          onError(error);
+        }
+      }
+    };
+
+    session.oncancel = (event) => {
+      console.log("[Apple Pay Button] Session cancelled by user");
+    };
+  };
+
+  const handleApplePayClick = () => {
+    if (!settings?.mid) {
+      const error = new Error(
+        "Merchant ID is not configured. Please set Merchant ID in plugin settings."
+      );
+      if (onError) {
+        onError(error);
+      }
+      return;
+    }
+
+    if (typeof window === "undefined" || !window.ApplePaySession) {
+      if (onError) {
+        onError(new Error("Apple Pay is not supported in this environment."));
+      }
+      return;
+    }
+
+    const amountValue = amount ? (parseFloat(amount) / 100).toFixed(2) : "0.00";
+    const applePayConfig = settings?.applePayConfig || {};
+    const supportedNetworks = applePayConfig.supportedNetworks || [
+      "visa",
+      "masterCard",
+      "amex",
+    ];
+    const merchantCapabilities = applePayConfig.merchantCapabilities || [
+      "supports3DS",
+    ];
+    const currencyCode = applePayConfig.currencyCode || "EUR";
+    const countryCode = applePayConfig.countryCode || "DE";
+
+    const applePayRequest = {
+      countryCode: countryCode,
+      currencyCode: currencyCode,
+      merchantCapabilities: merchantCapabilities,
+      supportedNetworks: supportedNetworks,
+      total: {
+        label: settings?.merchantName || "Total",
+        type: "final",
+        amount: amountValue,
+      },
+    };
+
+    const session = new window.ApplePaySession(3, applePayRequest);
+
+    handleEventsForApplePay(session, amountValue, currencyCode);
+
+    session.begin();
+  };
+
+  const mode = (settings?.mode || 'test').toLowerCase();
+  const isLiveMode = mode === 'live';
+
+  if (!settings?.mid) {
+    return (
+      <Box>
+        <Alert closeLabel="Close" title="Merchant ID Missing" variant="warning">
+          <Typography variant="pi" marginTop={2}>
+            Merchant ID is not configured. Please set Merchant ID in plugin
+            settings. You can find your merchantIdentifier in PMI at:
+            CONFIGURATION → PAYMENT PORTALS → [Your Portal] → Payment type
+            configuration tab.
+          </Typography>
+        </Alert>
+      </Box>
+    );
+  }
+
+  if (!isLiveMode) {
+    return (
+      <Box>
+        <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.
+          </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>
+        </Alert>
+      </Box>
+    );
+  }
+
+  const buttonStyleMap = {
+    black: "black",
+    white: "white",
+    "white-outline": "white-outline",
+  };
+
+  const buttonTypeMap = {
+    pay: "plain",
+    buy: "buy",
+    donate: "donate",
+    "check-out": "check-out",
+    book: "book",
+    subscribe: "subscribe",
+  };
+
+  const nativeButtonStyle = buttonStyleMap[buttonStyle] || "black";
+  const nativeButtonType = buttonTypeMap[type] || "plain";
+
+  return (
+    <Box style={{ minHeight: "40px", width: "100%" }}>
+      <ApplePayButton
+        onClick={handleApplePayClick}
+        buttonStyle={nativeButtonStyle}
+        type={nativeButtonType}
+        style={{
+          width: "100%",
+          borderRadius: "8px",
+        }}
+      />
+      <Typography
+        variant="pi"
+        textColor="neutral600"
+        style={{ fontSize: "12px", marginTop: "8px", marginRight: "6px" }}
+      >
+        Apple Pay does NOT work on localhost. Use a production domain with
+        HTTPS.
+      </Typography>
+    </Box>
+  );
+};
+
+export default ApplePayBtn;