strapi-plugin-payone-provider 4.6.10 → 4.6.12

package/README.md

@@ -1553,3 +1553,67 @@ 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
+
+> 📖 **Reference**: For more details, see [Payone TransactionStatus Notification Documentation](https://docs.payone.com/integration/response-handling/transactionstatus-notification)

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

@@ -8,7 +8,8 @@ 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 isGooglePayConfigPage =
+    location.pathname.includes("/google-pay-config");
 
   return (
     <HeaderLayout
@@ -41,7 +42,7 @@ const AppHeader = ({ activeTab, isSaving, onSave }) => {
           >
             Back to Main
           </Button>
-        ) : activeTab === 0 ? (
+        ) : activeTab === 1 ? (
           <Button
             loading={isSaving}
             onClick={onSave}

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

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   Tabs,
   Tab,
@@ -7,9 +6,9 @@ import {
   TabPanel,
 } from "@strapi/design-system";
 import pluginId from "../../../pluginId";
-import ConfigurationPanel from "./ConfigurationPanel";
-import HistoryPanel from "./HistoryPanel";
-import PaymentActionsPanel from "./PaymentActionsPanel";
+import ConfigurationPanel from "../components/configuration/ConfigurationPanel";
+import HistoryPanel from "../components/transaction-history/HistoryPanel";
+import PaymentActionsPanel from "./paymentActions/PaymentActionsPanel";
 import DocsPanel from "./DocsPanel";
 
 const AppTabs = ({
@@ -17,30 +16,11 @@ const AppTabs = ({
   setActiveTab,
   // Settings props
   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,
@@ -54,6 +34,7 @@ const AppTabs = ({
       }
     }
   };
+
   return (
     <TabGroup
       label="Payone Provider Tabs"
@@ -61,114 +42,79 @@ const AppTabs = ({
     >
       <Tabs style={{ borderBottom: "2px solid #e8e8ea" }}>
         <Tab
+          id="transaction-history"
           className={`payment-tab ${
             activeTab === 0 ? "payment-tab-active" : ""
           }`}
+          variant="default"
+          index={0}
+          selectedTabIndex={activeTab}
+          onTabClick={(index) => setActiveTab(index)}
         >
-          Configuration
+          Transaction History
         </Tab>
         <Tab
+          variant="default"
+          index={1}
+          selectedTabIndex={activeTab}
+          onTabClick={(index) => setActiveTab(index)}
+          id="configuration"
           className={`payment-tab ${
             activeTab === 1 ? "payment-tab-active" : ""
           }`}
         >
-          Transaction History
+          Configuration
         </Tab>
         <Tab
+          id="payment-actions"
           className={`payment-tab ${
             activeTab === 2 ? "payment-tab-active" : ""
           }`}
+          variant="default"
+          index={2}
+          selectedTabIndex={activeTab}
+          onTabClick={(index) => setActiveTab(index)}
         >
           Payment Actions
         </Tab>
         <Tab
+          id="documentation"
           className={`payment-tab ${
             activeTab === 3 ? "payment-tab-active" : ""
           }`}
+          variant="default"
+          index={3}
+          selectedTabIndex={activeTab}
+          onTabClick={(index) => setActiveTab(index)}
         >
           Documentation
         </Tab>
       </Tabs>
       <TabPanels>
-        <TabPanel>
+        <TabPanel id="transaction-history">
+          <HistoryPanel />
+        </TabPanel>
+
+        <TabPanel id="configuration">
           <ConfigurationPanel
             settings={settings}
-            isSaving={isSaving}
             isTesting={isTesting}
             testResult={testResult}
-            onSave={onSave}
             onTestConnection={onTestConnection}
             onInputChange={onInputChange}
             onPaymentMethodToggle={onPaymentMethodToggle}
           />
         </TabPanel>
 
-        <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>
-
-        <TabPanel>
+        <TabPanel id="payment-actions">
           <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}
+            paymentActions={paymentActions}
           />
         </TabPanel>
 
-        <TabPanel>
+        <TabPanel id="documentation">
           <DocsPanel />
         </TabPanel>
       </TabPanels>