strapi-plugin-payone-provider 4.6.9 → 5.6.10

package/README.md

@@ -35,7 +35,9 @@ A comprehensive Strapi plugin that integrates the Payone payment gateway into yo
 
 Before installing this plugin, ensure you have:
 
-- **Strapi**: Version 4.6.0 or higher
+- **Strapi**:
+  - Version 5.x.x for plugin version 5.x.x
+  - Version 4.6.0 or higher for plugin version 4.x.x
 - **Node.js**: Version 18.0.0 to 20.x.x
 - **npm**: Version 6.0.0 or higher
 - **Payone Account**: Active Payone merchant account with API credentials
@@ -55,17 +57,29 @@ You will need the following credentials from your Payone account:
 
 ### Install from npm
 
-```bash
-# Using npm
-npm install strapi-plugin-payone-provider
+**Important**: Choose the correct version based on your Strapi version:
 
-# Using yarn
-yarn add strapi-plugin-payone-provider
+- **For Strapi 5.x.x**: Use plugin version `^5.x.x`
+- **For Strapi 4.x.x**: Use plugin version `^4.x.x`
 
-# Using pnpm
-pnpm add strapi-plugin-payone-provider
+```bash
+# For Strapi 5.x.x
+npm install strapi-plugin-payone-provider@^5
+# or
+yarn add strapi-plugin-payone-provider@^5
+# or
+pnpm add strapi-plugin-payone-provider@^5
+
+# For Strapi 4.x.x
+npm install strapi-plugin-payone-provider@^4
+# or
+yarn add strapi-plugin-payone-provider@^4
+# or
+pnpm add strapi-plugin-payone-provider@^4
 ```
 
+> ⚠️ **Version Compatibility**: Make sure to install the correct plugin version that matches your Strapi version. Using an incompatible version may cause errors or unexpected behavior.
+
 ## ⚙️ Configuration
 
 After installation, you need to configure your Payone credentials:
@@ -799,9 +813,8 @@ paymentDataRequest.merchantInfo = {
 const button = paymentsClient.createButton({
   onClick: async () => {
     try {
-      const paymentData = await paymentsClient.loadPaymentData(
-        paymentDataRequest
-      );
+      const paymentData =
+        await paymentsClient.loadPaymentData(paymentDataRequest);
       const token = paymentData.paymentMethodData.tokenizationData.token;
 
       // Token is a JSON string, encode it to Base64 for Payone
@@ -1553,3 +1566,135 @@ For wallet payments (PayPal, Google Pay, Apple Pay), you can specify:
 
 - `capturemode: "full"`: Capture the entire preauthorized amount
 - `capturemode: "partial"`: Capture less than the preauthorized amount
+
+---
+
+## 📢 TransactionStatus Notifications
+
+The Payone platform provides an asynchronous way of notifying your system of changes to a transaction. These notifications are called "TransactionStatus" and are automatically handled by this plugin.
+
+### What are TransactionStatus Notifications?
+
+TransactionStatus notifications are POST requests sent from Payone's servers to your endpoint when transaction status changes occur. This is especially important for:
+
+- **Redirect Payment Methods**: Verifying that payments were actually completed (prevents fraud)
+- **Chargeback Processes**: Being notified when customers initiate chargebacks
+- **Real-time Tracking**: Keeping your system updated with the latest transaction status
+
+### How It Works
+
+1. **Payone sends notification** → Your Strapi endpoint receives POST request
+2. **Plugin verifies request** → Checks IP address, User-Agent, and hash signature
+3. **Plugin processes notification** → Updates transaction history automatically
+4. **Plugin responds** → Returns `TSOK` to confirm receipt
+
+### Endpoint Configuration
+
+The plugin automatically provides the TransactionStatus endpoint at:
+
+**URL**: `POST /api/strapi-plugin-payone-provider/transaction-status`
+
+**No authentication required** - The endpoint is secured by:
+
+- IP address verification (only Payone IPs allowed)
+- User-Agent verification (must be "PAYONE FinanceGate")
+- Hash signature verification (MD5 hash of transaction data)
+
+### PMI Configuration
+
+You need to configure this endpoint in your Payone Merchant Interface (PMI):
+
+1. Log into your Payone Merchant Interface (PMI)
+2. Navigate to **Configuration** → **Payment Portals** → **[Your Portal]**
+3. Find the **TransactionStatus Endpoint** setting
+4. Enter your endpoint URL: `https://yourdomain.com/api/strapi-plugin-payone-provider/transaction-status`
+5. Save the configuration
+
+> ⚠️ **Important**: The endpoint must be accessible via HTTPS. Payone will not send notifications to HTTP endpoints.
+
+### Security Features
+
+The plugin automatically verifies:
+
+1. **IP Address**: Only accepts requests from Payone's IP ranges:
+
+   - `185.60.20.0/24`
+   - `54.246.203.105`
+
+2. **User-Agent**: Must be exactly `"PAYONE FinanceGate"`
+
+3. **Hash Signature**: Verifies MD5 hash using your Portal Key:
+
+   ```
+   MD5(portalid + aid + txid + sequencenumber + price + currency + mode + key)
+   ```
+
+4. **Credentials**: Verifies that `portalid` and `aid` match your configured settings
+
+### Notification Parameters
+
+Payone sends the following parameters (among others):
+
+- `txaction`: Transaction action (appointed, paid, cancelation, etc.)
+- `txid`: Transaction ID
+- `reference`: Your reference number
+- `sequencenumber`: Sequence number for this transaction
+- `transaction_status`: Current transaction status
+- `price`: Transaction amount
+- `balance`: Current balance
+- `receivable`: Receivable amount
+- `currency`: Currency code
+- `key`: MD5 hash for verification
+
+### Response Requirements
+
+The endpoint **must** respond with exactly `TSOK` (4 characters, no HTML):
+
+- Response time: Must be within 10 seconds
+- Response format: Plain text `TSOK`
+- No other characters allowed
+
+> ℹ️ **Note**: Even if processing fails, the endpoint must return `TSOK` to prevent Payone from retrying. The plugin handles this automatically.
+
+### Retry Mechanism
+
+If Payone doesn't receive `TSOK` within 10 seconds:
+
+- Payone will retry up to **12 times**
+- Retries occur over **48 hours**
+- First retry after ~1 hour
+- Retry intervals increase over time
+
+### Transaction Updates
+
+When a TransactionStatus notification is received:
+
+1. The plugin finds the transaction in history by `txid`
+2. Updates the transaction with new status information
+3. Stores the full notification data for reference
+4. Updates `balance`, `receivable`, and `sequencenumber` fields
+
+If the transaction is not found in history, a new entry is created.
+
+### Example Notification Flow
+
+**Scenario**: Customer completes PayPal payment
+
+1. Customer redirected to PayPal → Completes payment
+2. Payone sends TransactionStatus: `txaction=appointed`, `transaction_status=completed`
+3. Plugin receives notification → Verifies and updates transaction
+4. Plugin responds: `TSOK`
+5. Customer redirected back to your `successurl`
+6. Later, Payone sends: `txaction=paid` (payment confirmed)
+7. Plugin updates transaction status to "paid"
+
+### Testing
+
+To test TransactionStatus notifications:
+
+1. Configure the endpoint in PMI
+2. Make a test payment
+3. Check your Strapi logs for notification processing
+4. Verify transaction history is updated correctly
+
+> 📖 **Reference**: For more details, see [Payone TransactionStatus Notification Documentation](https://docs.payone.com/integration/response-handling/transactionstatus-notification)

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

@@ -1,10 +1,10 @@
-import { useEffect, useRef } from "react";
+import * as React from "react";
 import pluginId from "../../pluginId";
 
 const Initializer = ({ setPlugin }) => {
-  const ref = useRef(setPlugin);
+  const ref = React.useRef(setPlugin);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (ref.current) {
       ref.current(pluginId);
     }

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

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

package/admin/src/index.js

@@ -1,10 +1,12 @@
-import pluginPkg from "../../package.json";
-import pluginId from "./pluginId";
+
+import pluginPkg from '../../package.json';
+import pluginId from './pluginId';
 import Initializer from "./components/Initializer/index.jsx";
 import PluginIcon from "./components/PluginIcon/index.jsx";
 import { injectGooglePayScript } from "./pages/utils/injectGooglePayScript";
 import { injectApplePayScript } from "./pages/utils/injectApplePayScript";
 
+
 const name = pluginPkg.strapi.name;
 
 export default {
@@ -14,20 +16,20 @@ export default {
       icon: PluginIcon,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
-        defaultMessage: "Payone Provider"
+        defaultMessage: 'Payone Provider',
       },
       Component: async () => {
-        const component = await import("./pages/App/index.jsx");
-        return component;
+        const App = await import('./pages/App');
+        return App;
       },
-      permissions: []
+      permissions: [],
     });
 
     app.registerPlugin({
       id: pluginId,
       initializer: Initializer,
       isReady: false,
-      name
+      name,
     });
   },
 
@@ -36,7 +38,27 @@ export default {
     injectApplePayScript();
   },
 
-  async registerTrads() {
-    return Promise.resolve([]);
-  }
-};
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(async (locale) => {
+        try {
+          const { default: data } = await import(
+            /* webpackChunkName: "[pluginId]-[request]" */ `./translations/${locale}.json`
+          );
+
+          return {
+            data,
+            locale,
+          };
+        } catch (error) {
+          return {
+            data: {},
+            locale,
+          };
+        }
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
+};

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

@@ -1,52 +1,37 @@
-import React from "react";
-import { HeaderLayout, Box, Typography, Button } from "@strapi/design-system";
+import * as React from '@strapi/strapi/admin';
+import { Button } from "@strapi/design-system";
+import { Layouts } from "@strapi/strapi/admin";
 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");
-  const isGooglePayConfigPage = location.pathname.includes("/google-pay-config");
+const AppHeader = ({ activeTab, isSaving, onSave, title, onBack }) => {
+  const isConfigPage = title && title !== "Payone Provider";
 
   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>
+    <Layouts.Header
+      title={title || "Payone Provider"}
+      subtitle={
+        title === "Apple Pay Configuration"
+          ? "Configure Apple Pay settings for your payment gateway"
+          : title === "Google Pay Configuration"
+            ? "Configure Google Pay settings for your payment gateway"
+            : "Configure your Payone integration and manage payment transactions"
       }
       primaryAction={
-        isApplePayConfigPage || isGooglePayConfigPage ? (
+        isConfigPage ? (
           <Button
-            onClick={() => history.push(`/plugins/${pluginId}`)}
+            onClick={onBack}
             startIcon={<ArrowLeft />}
             size="L"
             variant="secondary"
           >
             Back to Main
           </Button>
-        ) : activeTab === 0 ? (
+        ) : activeTab === 1 ? (
           <Button
             loading={isSaving}
             onClick={onSave}
             startIcon={<Check />}
-            size="L"
+            size="M"
             variant="default"
             className="payment-button payment-button-success"
           >

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

@@ -1,178 +1,52 @@
-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 * as React from "react";
+import { Tabs } from "@strapi/design-system";
+import ConfigurationPanel from "./configuration/ConfigurationPanel";
+import HistoryPanel from "./transaction-history/HistoryPanel";
+import PaymentActionsPanel from "./payment-actions/PaymentActionsPanel";
 import DocsPanel from "./DocsPanel";
 
 const AppTabs = ({
   activeTab,
   setActiveTab,
-  // Settings props
+  onNavigateToConfig,
   settings,
-  isSaving,
-  isTesting,
-  testResult,
-  onSave,
-  onTestConnection,
-  onInputChange,
-  onPaymentMethodToggle,
-  // Transaction history props
-  filters,
-  onFilterChange,
-  onFilterApply,
-  sorting,
-  onSort,
-  isLoadingHistory,
-  transactionHistory,
-  paginatedTransactions,
-  currentPage,
-  totalPages,
-  pageSize,
-  onRefresh,
-  onPageChange,
-  onPageSizeChange,
-  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.Root
+      defaultValue={`tab-${activeTab}`}
+      value={`tab-${activeTab}`}
+      variant="regular"
+      onValueChange={(value) =>
+        setActiveTab(parseInt(value.replace("tab-", "")))
+      }
     >
-      <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}
-            onPaymentMethodToggle={onPaymentMethodToggle}
-          />
-        </TabPanel>
+      <Tabs.List style={{ width: "100%" }}>
+        <Tabs.Trigger value="tab-1">Configuration</Tabs.Trigger>
+        <Tabs.Trigger value="tab-2">Transaction History</Tabs.Trigger>
+        <Tabs.Trigger value="tab-3">Payment Actions</Tabs.Trigger>
+        <Tabs.Trigger value="tab-4">Documentation</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="tab-1">
+        <ConfigurationPanel settings={settings} />
+      </Tabs.Content>
 
-        <TabPanel>
-          <HistoryPanel
-            filters={filters}
-            onFilterChange={onFilterChange}
-            onFilterApply={onFilterApply}
-            sorting={sorting}
-            onSort={onSort}
-            isLoadingHistory={isLoadingHistory}
-            transactionHistory={transactionHistory}
-            paginatedTransactions={paginatedTransactions}
-            currentPage={currentPage}
-            totalPages={totalPages}
-            pageSize={pageSize}
-            onRefresh={onRefresh}
-            onPageChange={onPageChange}
-            onPageSizeChange={onPageSizeChange}
-            selectedTransaction={selectedTransaction}
-            onTransactionSelect={onTransactionSelect}
-          />
-        </TabPanel>
+      <Tabs.Content value="tab-2">
+        <HistoryPanel />
+      </Tabs.Content>
 
-        <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>
+      <Tabs.Content value="tab-3">
+        <PaymentActionsPanel
+          onNavigateToConfig={onNavigateToConfig}
+          settings={settings}
+          paymentActions={paymentActions}
+        />
+      </Tabs.Content>
 
-        <TabPanel>
-          <DocsPanel />
-        </TabPanel>
-      </TabPanels>
-    </TabGroup>
+      <Tabs.Content value="tab-4">
+        <DocsPanel settings={settings} paymentActions={paymentActions} />
+      </Tabs.Content>
+    </Tabs.Root>
   );
 };
 

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

@@ -1,7 +1,7 @@
-import React from "react";
+import * as React from '@strapi/strapi/admin';
 import ApplePayButton from "apple-pay-button";
 import { Box, Typography, Alert } from "@strapi/design-system";
-import { request } from "@strapi/helper-plugin";
+import { getFetchClient } from "@strapi/strapi/admin";
 import pluginId from "../../../pluginId";
 
 const ApplePayBtn = ({
@@ -20,17 +20,15 @@ const ApplePayBtn = ({
           currencyCode || applePayConfig.currencyCode || "EUR";
         const requestCountryCode = applePayConfig.countryCode || "DE";
 
-        const merchantSession = await request(
+        const { post } = getFetchClient();
+        const merchantSession = await post(
           `/${pluginId}/validate-apple-pay-merchant`,
           {
-            method: "POST",
-            body: {
-              domainName: settings?.domainName || window.location.hostname,
-              displayName: settings?.displayName || "Store",
-              currency: requestCurrency,
-              countryCode: requestCountryCode,
-              mode: (settings?.mode || "test").toLowerCase() || "test",
-            },
+            domainName: settings?.domainName || window.location.hostname,
+            displayName: settings?.displayName || "Store",
+            currency: requestCurrency,
+            countryCode: requestCountryCode,
+            mode: (settings?.mode || "test").toLowerCase() || "test",
           }
         );
         if (merchantSession.error) {